diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..3b52e6ee1
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,22 @@
+# Copyright 2026 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
diff --git a/.gemini/GEMINI.md b/.gemini/GEMINI.md
index c168bb3ff..9aa3ab703 100644
--- a/.gemini/GEMINI.md
+++ b/.gemini/GEMINI.md
@@ -6,40 +6,40 @@ This document serves as a guide for using the Gemini agent within the A2UI repos
 
 The A2UI repository is organized into several key directories:
 
--   `specification/`: Contains the A2UI protocol specifications.
-    -   `v0_8/`: The stable protocol version.
-        -   `docs/`: Human-readable documentation.
-        -   `json/`: JSON schema definitions.
-        -   `eval/`: Genkit-based evaluation framework.
-    -   `v0_9/`: The draft protocol version (in development).
-        -   `docs/`: Human-readable documentation.
-        -   `json/`: JSON schema definitions.
-        -   `eval/`: Genkit-based evaluation framework.
-    -   `v0_10/`: The proposed protocol version (next version).
-        -   `docs/`: Human-readable documentation.
-        -   `json/`: JSON schema definitions.
-        -   `eval/`: Genkit-based evaluation framework.
--   `samples/`: Contains sample implementations.
-    -   `agent/`:
-        -   `adk/`: Python-based ADK agent samples (e.g., `contact_lookup`, `restaurant_finder`, `rizzcharts`, `orchestrator`).
-        -   `mcp/`: MCP server sample (A2UI over MCP).
-    -   `client/`: Web client implementations.
-        -   `lit/`: Clients using Lit and Vite (e.g., `contact`, `shell`).
-        -   `angular/`: Clients using Angular (e.g., `contact`, `orchestrator`).
-    -   `personalized_learning/`: Personalized learning sample implementation.
--   `agent_sdks/`: Contains source code for Agent integrations.
-    -   `python/`: Python implementation of the A2UI agent library.
-    -   `kotlin/`: Kotlin implementation of the A2UI agent library.
--   `renderers/`: Contains renderer libraries.
-    -   `lit/`: The shared Lit renderer library used by the Lit clients.
-    -   `angular/`: The shared Angular renderer library used by the Angular clients.
-    -   `web_core/`: The shared core library used by web renderers.
-    -   `markdown/`: Markdown rendering utilities.
--   `tools/`: Helper tools for development.
-    -   `editor/`: A web-based editor for generating and visualizing A2UI.
-    -   `inspector/`: A web-based inspector for A2UI responses.
-    -   `composer/`: Visual composer tool.
-    -   `build_catalog/`: Catalog building utility.
+- `specification/`: Contains the A2UI protocol specifications.
+  - `v0_8/`: The stable protocol version.
+    - `docs/`: Human-readable documentation.
+    - `json/`: JSON schema definitions.
+    - `eval/`: Genkit-based evaluation framework.
+  - `v0_9/`: The draft protocol version (in development).
+    - `docs/`: Human-readable documentation.
+    - `json/`: JSON schema definitions.
+    - `eval/`: Genkit-based evaluation framework.
+  - `v0_10/`: The proposed protocol version (next version).
+    - `docs/`: Human-readable documentation.
+    - `json/`: JSON schema definitions.
+    - `eval/`: Genkit-based evaluation framework.
+- `samples/`: Contains sample implementations.
+  - `agent/`:
+    - `adk/`: Python-based ADK agent samples (e.g., `contact_lookup`, `restaurant_finder`, `rizzcharts`, `orchestrator`).
+    - `mcp/`: MCP server sample (A2UI over MCP).
+  - `client/`: Web client implementations.
+    - `lit/`: Clients using Lit and Vite (e.g., `contact`, `shell`).
+    - `angular/`: Clients using Angular (e.g., `contact`, `orchestrator`).
+  - `personalized_learning/`: Personalized learning sample implementation.
+- `agent_sdks/`: Contains source code for Agent integrations.
+  - `python/`: Python implementation of the A2UI agent library.
+  - `kotlin/`: Kotlin implementation of the A2UI agent library.
+- `renderers/`: Contains renderer libraries.
+  - `lit/`: The shared Lit renderer library used by the Lit clients.
+  - `angular/`: The shared Angular renderer library used by the Angular clients.
+  - `web_core/`: The shared core library used by web renderers.
+  - `markdown/`: Markdown rendering utilities.
+- `tools/`: Helper tools for development.
+  - `editor/`: A web-based editor for generating and visualizing A2UI.
+  - `inspector/`: A web-based inspector for A2UI responses.
+  - `composer/`: Visual composer tool.
+  - `build_catalog/`: Catalog building utility.
 
 ## A2UI Specification Overview
 
@@ -49,7 +49,7 @@ The A2UI protocol is a JSONL-based, streaming UI protocol designed to be easily
 
 The core concepts of the A2UI protocol are detailed in the main specification document. Refer to the authoritative source for the current version (0.9):
 
--   **A2UI Protocol Specification**: `@specification/v0_9/docs/a2ui_protocol.md`
+- **A2UI Protocol Specification**: `@specification/v0_9/docs/a2ui_protocol.md`
 
 This document covers the design philosophy, architecture, data flow, and core concepts of the protocol.
 
@@ -57,9 +57,9 @@ This document covers the design philosophy, architecture, data flow, and core co
 
 The formal, machine-readable definitions of the protocol are maintained as JSON schemas. For version 0.9:
 
--   **Server-to-Client Schema**: `@specification/v0_9/json/server_to_client.json`
--   **Client-to-Server Schema**: `@specification/v0_9/json/client_to_server.json`
--   **Basic Catalog**: `@specification/v0_9/json/basic_catalog.json`
+- **Server-to-Client Schema**: `@specification/v0_9/json/server_to_client.json`
+- **Client-to-Server Schema**: `@specification/v0_9/json/client_to_server.json`
+- **Basic Catalog**: `@specification/v0_9/json/basic_catalog.json`
 
 ## Running the Demos
 
@@ -82,6 +82,7 @@ The Lit clients are located in `samples/client/lit/`.
 
 1.  **Build the Renderer**:
     First, ensure the shared renderers are built:
+
     ```bash
     cd renderers/markdown/markdown-it
     npm install
@@ -109,6 +110,7 @@ The Lit clients are located in `samples/client/lit/`.
 The Angular clients are located in `samples/client/angular/`.
 
 First, ensure the shared renderers are built (if not already done):
+
 ```bash
 cd renderers/markdown/markdown-it
 npm install
@@ -124,6 +126,7 @@ npm run build
 ```
 
 Then run the Angular client:
+
 ```bash
 cd samples/client/angular
 npm install
@@ -132,25 +135,25 @@ npm start -- contact  # Replace 'contact' with the desired project name (e.g., r
 
 ### Running Tools
 
--   **Editor**: Located in `tools/editor`. Run with `npm install && npm run dev`.
-    -   Requires a Gemini API key in `.env` (`GEMINI_API_KEY=<key>`).
--   **Inspector**: Located in `tools/inspector`. Run with `npm install && npm run dev`.
+- **Editor**: Located in `tools/editor`. Run with `npm install && npm run dev`.
+  - Requires a Gemini API key in `.env` (`GEMINI_API_KEY=<key>`).
+- **Inspector**: Located in `tools/inspector`. Run with `npm install && npm run dev`.
 
 ## Renderers
 
 There are three renderers available for A2UI:
 
--   **Web (Lit)**: Located in `renderers/lit`, this is the primary web renderer used by the demos in `web/`.
--   **Angular**: Located in `renderers/angular`, this is an alternative web renderer for Angular applications.
--   **Flutter**: The Flutter renderer is in a separate repository: [https://github.com/flutter/genui](https://github.com/flutter/genui). There is a placeholder renderer folder with a README.md file at `renderers/flutter`.
+- **Web (Lit)**: Located in `renderers/lit`, this is the primary web renderer used by the demos in `web/`.
+- **Angular**: Located in `renderers/angular`, this is an alternative web renderer for Angular applications.
+- **Flutter**: The Flutter renderer is in a separate repository: [https://github.com/flutter/genui](https://github.com/flutter/genui). There is a placeholder renderer folder with a README.md file at `renderers/flutter`.
 
 ## Keeping This Guide Updated
 
 This document is intended to be a living guide for the repository. As the repository evolves, it's important to keep this file up-to-date. When making changes to the repository, please consider the following:
 
--   **New Demos or Clients**: If you add a new demo or client in `samples/`, add it to the "Running the Demos" section.
--   **Specification Changes**: If you make significant changes to the A2UI protocol, ensure that the "A2UI Specification Overview" section is updated.
--   **Repository Structure Changes**: If you change the directory structure of the repository, update the "Repository Structure" section.
+- **New Demos or Clients**: If you add a new demo or client in `samples/`, add it to the "Running the Demos" section.
+- **Specification Changes**: If you make significant changes to the A2UI protocol, ensure that the "A2UI Specification Overview" section is updated.
+- **Repository Structure Changes**: If you change the directory structure of the repository, update the "Repository Structure" section.
 
 To get this file back in sync, you can run the following commands:
 
@@ -160,4 +163,4 @@ To get this file back in sync, you can run the following commands:
 
 ## Change descriptions
 
-If you (the agent) are generating a pull request summary, pull request description, or change description, avoid flowery or hyperbolic terms (e.g. "significantly improves", "greatly enhances", "is an incredible improvement").  Be factual and avoid marketing language: you're not selling the PR, you're describing it.
\ No newline at end of file
+If you (the agent) are generating a pull request summary, pull request description, or change description, avoid flowery or hyperbolic terms (e.g. "significantly improves", "greatly enhances", "is an incredible improvement"). Be factual and avoid marketing language: you're not selling the PR, you're describing it.
diff --git a/.github/ISSUE_TEMPLATE/sprint-task.md b/.github/ISSUE_TEMPLATE/sprint-task.md
index b677629a1..b1dc256a9 100644
--- a/.github/ISSUE_TEMPLATE/sprint-task.md
+++ b/.github/ISSUE_TEMPLATE/sprint-task.md
@@ -4,7 +4,4 @@ about: An issue to track a task used in a sprint
 title: ''
 labels: P2, sprint ready
 assignees: ''
-
 ---
-
-
diff --git a/.github/workflows/auto-assignment.yml b/.github/workflows/auto-assignment.yml
index aed5122ec..2e81aaf92 100644
--- a/.github/workflows/auto-assignment.yml
+++ b/.github/workflows/auto-assignment.yml
@@ -41,4 +41,4 @@ jobs:
             const fileUrl = pathToFileURL(filePath).href;
 
             const importedModule = await import(fileUrl);
-            await importedModule.default({ github, context });
\ No newline at end of file
+            await importedModule.default({ github, context });
diff --git a/.github/workflows/check_license.yml b/.github/workflows/check_license.yml
index bf41c23d8..5a2b577a8 100644
--- a/.github/workflows/check_license.yml
+++ b/.github/workflows/check_license.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Set up Go
         uses: actions/setup-go@v6
         with:
-          go-version: '1.21'
+          go-version: "1.21"
 
       - name: Install addlicense
         run: go install github.com/google/addlicense@latest
diff --git a/.github/workflows/composer_build_and_test.yml b/.github/workflows/composer_build_and_test.yml
index 491cccd5b..02f335ed0 100644
--- a/.github/workflows/composer_build_and_test.yml
+++ b/.github/workflows/composer_build_and_test.yml
@@ -17,16 +17,16 @@ name: Composer
 on:
   push:
     paths:
-      - 'tools/composer/**'
-      - 'renderers/react/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/composer_build_and_test.yml'
+      - "tools/composer/**"
+      - "renderers/react/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/composer_build_and_test.yml"
   pull_request:
     paths:
-      - 'tools/composer/**'
-      - 'renderers/react/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/composer_build_and_test.yml'
+      - "tools/composer/**"
+      - "renderers/react/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/composer_build_and_test.yml"
 
 jobs:
   build-and-test:
@@ -43,9 +43,9 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
-          cache: 'pnpm'
-          cache-dependency-path: 'tools/composer/pnpm-lock.yaml'
+          node-version: "22"
+          cache: "pnpm"
+          cache-dependency-path: "tools/composer/pnpm-lock.yaml"
 
       - name: Build web_core (dependency of @a2ui/react)
         working-directory: ./renderers/web_core
diff --git a/.github/workflows/cpp_agent_sdk_build_and_test.yml b/.github/workflows/cpp_agent_sdk_build_and_test.yml
index bcf4e91a2..3ea1dc534 100644
--- a/.github/workflows/cpp_agent_sdk_build_and_test.yml
+++ b/.github/workflows/cpp_agent_sdk_build_and_test.yml
@@ -17,16 +17,16 @@ name: A2UI-agent C++ SDK
 on:
   push:
     branches:
-      - '*'
+      - "*"
     paths:
-      - 'agent_sdks/cpp/**'
-      - 'specification/**/json/**'
-      - 'agent_sdks/conformance/**'
+      - "agent_sdks/cpp/**"
+      - "specification/**/json/**"
+      - "agent_sdks/conformance/**"
   pull_request:
     paths:
-      - 'agent_sdks/cpp/**'
-      - 'specification/**/json/**'
-      - 'agent_sdks/conformance/**'
+      - "agent_sdks/cpp/**"
+      - "specification/**/json/**"
+      - "agent_sdks/conformance/**"
 
 jobs:
   build-and-test:
diff --git a/.github/workflows/e2e_test.yaml b/.github/workflows/e2e_test.yaml
index 2e820bb57..b33895614 100644
--- a/.github/workflows/e2e_test.yaml
+++ b/.github/workflows/e2e_test.yaml
@@ -5,7 +5,7 @@
 name: E2E Tests
 
 on:
-  push: 
+  push:
     # Workflow runs on push to any branch in the repo (not forks).
   schedule:
     - cron: "0 * * * *" # hourly
diff --git a/.github/workflows/editor_build.yml b/.github/workflows/editor_build.yml
index 93df54197..2d8ee283d 100644
--- a/.github/workflows/editor_build.yml
+++ b/.github/workflows/editor_build.yml
@@ -17,16 +17,16 @@ name: Editor
 on:
   push:
     paths:
-      - 'tools/editor/**'
-      - 'renderers/lit/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/editor_build.yml'
+      - "tools/editor/**"
+      - "renderers/lit/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/editor_build.yml"
   pull_request:
     paths:
-      - 'tools/editor/**'
-      - 'renderers/lit/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/editor_build.yml'
+      - "tools/editor/**"
+      - "renderers/lit/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/editor_build.yml"
 
 jobs:
   build:
@@ -38,7 +38,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Install web_core deps
         working-directory: ./renderers/web_core
diff --git a/.github/workflows/enforce-formatting.yml b/.github/workflows/enforce-formatting.yml
new file mode 100644
index 000000000..f3e3d4968
--- /dev/null
+++ b/.github/workflows/enforce-formatting.yml
@@ -0,0 +1,45 @@
+# Copyright 2026 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+name: Enforce Formatting
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  enforce-formatting:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22"
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.x"
+
+      - name: Install `uv` globally
+        run: |
+          python -m pip install --upgrade pip
+          pip install uv
+
+      - name: Run enforce-formatting script
+        run: ./scripts/fix_format.sh --check
diff --git a/.github/workflows/flutter_packages_test.yaml b/.github/workflows/flutter_packages_test.yaml
index 7d41eca50..be80973c6 100644
--- a/.github/workflows/flutter_packages_test.yaml
+++ b/.github/workflows/flutter_packages_test.yaml
@@ -18,14 +18,14 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - main    
+      - main
   pull_request:
     branches:
       - main
   schedule:
     # Tests may fail due to new dependency releases.
     # Regular execution provides early detection of such regressions.
-    - cron: '0 * * * *' # hourly
+    - cron: "0 * * * *" # hourly
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
diff --git a/.github/workflows/inspector_build.yml b/.github/workflows/inspector_build.yml
index 311202be4..52c23b06e 100644
--- a/.github/workflows/inspector_build.yml
+++ b/.github/workflows/inspector_build.yml
@@ -16,18 +16,18 @@ name: Inspector
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     paths:
-      - 'tools/inspector/**'
-      - 'renderers/lit/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/inspector_build.yml'
+      - "tools/inspector/**"
+      - "renderers/lit/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/inspector_build.yml"
   pull_request:
     paths:
-      - 'tools/inspector/**'
-      - 'renderers/lit/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/inspector_build.yml'
+      - "tools/inspector/**"
+      - "renderers/lit/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/inspector_build.yml"
 
 jobs:
   build:
@@ -39,7 +39,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Install web_core deps
         working-directory: ./renderers/web_core
diff --git a/.github/workflows/kotlin_agent_sdk_build_and_test.yml b/.github/workflows/kotlin_agent_sdk_build_and_test.yml
index b3c5197c4..dcb6749fd 100644
--- a/.github/workflows/kotlin_agent_sdk_build_and_test.yml
+++ b/.github/workflows/kotlin_agent_sdk_build_and_test.yml
@@ -17,16 +17,16 @@ name: A2UI-agent Kotlin SDK
 on:
   push:
     branches:
-      - '*'
+      - "*"
     paths:
-      - 'agent_sdks/kotlin/**'
-      - 'specification/**/json/**'
-      - 'agent_sdks/conformance/**'
+      - "agent_sdks/kotlin/**"
+      - "specification/**/json/**"
+      - "agent_sdks/conformance/**"
   pull_request:
     paths:
-      - 'agent_sdks/kotlin/**'
-      - 'specification/**/json/**'
-      - 'agent_sdks/conformance/**'
+      - "agent_sdks/kotlin/**"
+      - "specification/**/json/**"
+      - "agent_sdks/conformance/**"
 
 jobs:
   build-and-test:
@@ -39,9 +39,9 @@ jobs:
       - name: Set up JDK 21
         uses: actions/setup-java@v5
         with:
-          java-version: '21'
-          distribution: 'temurin'
-          cache: 'gradle'
+          java-version: "21"
+          distribution: "temurin"
+          cache: "gradle"
 
       - name: Make gradlew executable
         working-directory: agent_sdks/kotlin
diff --git a/.github/workflows/lit_build_and_test.yml b/.github/workflows/lit_build_and_test.yml
index ec14ff993..f9edb0979 100644
--- a/.github/workflows/lit_build_and_test.yml
+++ b/.github/workflows/lit_build_and_test.yml
@@ -16,16 +16,16 @@ name: Lit renderer
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     paths:
-      - 'renderers/lit/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/lit_build_and_test.yml'
+      - "renderers/lit/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/lit_build_and_test.yml"
   pull_request:
     paths:
-      - 'renderers/lit/**'
-      - 'renderers/web_core/**'
-      - '.github/workflows/lit_build_and_test.yml'
+      - "renderers/lit/**"
+      - "renderers/web_core/**"
+      - ".github/workflows/lit_build_and_test.yml"
 
 jobs:
   build-and-test:
@@ -37,7 +37,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Install web_core dependencies
         working-directory: ./renderers/web_core
diff --git a/.github/workflows/lit_samples_build.yml b/.github/workflows/lit_samples_build.yml
index 85222b599..8734614c2 100644
--- a/.github/workflows/lit_samples_build.yml
+++ b/.github/workflows/lit_samples_build.yml
@@ -16,12 +16,12 @@ name: Lit samples
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     paths-ignore:
-      - 'samples/agent/adk/**'
+      - "samples/agent/adk/**"
   pull_request:
     paths-ignore:
-      - 'samples/agent/adk/**'
+      - "samples/agent/adk/**"
 
 jobs:
   build:
@@ -33,7 +33,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Build lit renderer and its dependencies
         working-directory: ./samples/client/lit
@@ -46,5 +46,3 @@ jobs:
       - name: Build all lit samples workspaces
         working-directory: ./samples/client/lit
         run: npm run build --workspaces
-
-
diff --git a/.github/workflows/ng_build_and_test.yml b/.github/workflows/ng_build_and_test.yml
index 457838a77..6b05d4853 100644
--- a/.github/workflows/ng_build_and_test.yml
+++ b/.github/workflows/ng_build_and_test.yml
@@ -16,12 +16,12 @@ name: Angular
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     paths-ignore:
-      - 'samples/agent/adk/**'
+      - "samples/agent/adk/**"
   pull_request:
     paths-ignore:
-      - 'samples/agent/adk/**'
+      - "samples/agent/adk/**"
 
 jobs:
   build-and-test:
@@ -33,7 +33,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Install top-level deps
         working-directory: ./samples/client/angular
diff --git a/.github/workflows/python_agent_sdk_build_and_test.yml b/.github/workflows/python_agent_sdk_build_and_test.yml
index a5db2e8c5..859f08dbe 100644
--- a/.github/workflows/python_agent_sdk_build_and_test.yml
+++ b/.github/workflows/python_agent_sdk_build_and_test.yml
@@ -17,16 +17,16 @@ name: A2UI-agent Python SDK
 on:
   push:
     branches:
-      - '*'
+      - "*"
     paths:
-      - 'agent_sdks/python/**'
-      - 'specification/**/json/**'
-      - 'agent_sdks/conformance/**'
+      - "agent_sdks/python/**"
+      - "specification/**/json/**"
+      - "agent_sdks/conformance/**"
   pull_request:
     paths:
-      - 'agent_sdks/python/**'
-      - 'specification/**/json/**'
-      - 'agent_sdks/conformance/**'
+      - "agent_sdks/python/**"
+      - "specification/**/json/**"
+      - "agent_sdks/conformance/**"
 
 jobs:
   build-and-test:
@@ -39,7 +39,7 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@v6
         with:
-          python-version: '3.x'
+          python-version: "3.x"
 
       - name: Install `uv` globally
         run: |
diff --git a/.github/workflows/python_samples_build.yml b/.github/workflows/python_samples_build.yml
index 7f0c504f2..c98e1ce83 100644
--- a/.github/workflows/python_samples_build.yml
+++ b/.github/workflows/python_samples_build.yml
@@ -19,14 +19,14 @@ on:
     branches:
       - main
     paths:
-      - 'samples/agent/adk/**'
-      - 'agent_sdks/python/**'
-      - 'specification/**/json/**'
+      - "samples/agent/adk/**"
+      - "agent_sdks/python/**"
+      - "specification/**/json/**"
   pull_request:
     paths:
-      - 'samples/agent/adk/**'
-      - 'agent_sdks/python/**'
-      - 'specification/**/json/**'
+      - "samples/agent/adk/**"
+      - "agent_sdks/python/**"
+      - "specification/**/json/**"
 
 jobs:
   build:
@@ -40,7 +40,7 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@v6
         with:
-          python-version: '3.x'
+          python-version: "3.x"
 
       - name: Install `uv` globally
         run: |
diff --git a/.github/workflows/react_renderer.yml b/.github/workflows/react_renderer.yml
index 92e91b997..44f46821a 100644
--- a/.github/workflows/react_renderer.yml
+++ b/.github/workflows/react_renderer.yml
@@ -16,18 +16,18 @@ name: React renderer
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     paths-ignore:
-      - 'renderers/angular/**'
-      - 'renderers/flutter/**'
-      - 'renderers/lit/**'
-      - 'samples/agent/adk/**'
+      - "renderers/angular/**"
+      - "renderers/flutter/**"
+      - "renderers/lit/**"
+      - "samples/agent/adk/**"
   pull_request:
     paths-ignore:
-      - 'renderers/angular/**'
-      - 'renderers/flutter/**'
-      - 'renderers/lit/**'
-      - 'samples/agent/adk/**'
+      - "renderers/angular/**"
+      - "renderers/flutter/**"
+      - "renderers/lit/**"
+      - "samples/agent/adk/**"
 
 jobs:
   build-and-test:
@@ -39,7 +39,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Build web_core dependency
         working-directory: ./renderers/web_core
@@ -74,7 +74,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Build web_core dependency
         working-directory: ./renderers/web_core
@@ -109,7 +109,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Build web_core dependency
         working-directory: ./renderers/web_core
@@ -130,4 +130,3 @@ jobs:
       - name: Build React renderer and its dependencies
         working-directory: ./renderers/react
         run: npm run lint
-
diff --git a/.github/workflows/validate_specifications.yml b/.github/workflows/validate_specifications.yml
index d142603d9..5a0fcdd6c 100644
--- a/.github/workflows/validate_specifications.yml
+++ b/.github/workflows/validate_specifications.yml
@@ -16,16 +16,16 @@ name: Validate A2UI specification examples
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     paths:
-      - 'specification/**/json/**'
-      - '.github/workflows/validate_specifications.yml'
-      - 'specification/scripts/validate.py'
+      - "specification/**/json/**"
+      - ".github/workflows/validate_specifications.yml"
+      - "specification/scripts/validate.py"
   pull_request:
     paths:
-      - 'specification/**/json/**'
-      - '.github/workflows/validate_specifications.yml'
-      - 'specification/scripts/validate.py'
+      - "specification/**/json/**"
+      - ".github/workflows/validate_specifications.yml"
+      - "specification/scripts/validate.py"
 
 jobs:
   validate:
@@ -42,12 +42,12 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Set up Python
         uses: actions/setup-python@v6
         with:
-          python-version: '3.12'
+          python-version: "3.12"
 
       - name: Install dependencies
         working-directory: ./specification/v0_9/test
diff --git a/.github/workflows/web_build_and_test.yml b/.github/workflows/web_build_and_test.yml
index 2c86d09e3..1c0ea4357 100644
--- a/.github/workflows/web_build_and_test.yml
+++ b/.github/workflows/web_build_and_test.yml
@@ -16,14 +16,14 @@ name: Web core
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
     paths:
-      - 'renderers/web_core/**/*'
-      - '.github/workflows/web_build_and_test.yml'
+      - "renderers/web_core/**/*"
+      - ".github/workflows/web_build_and_test.yml"
   pull_request:
     paths:
-      - 'renderers/web_core/**/*'
-      - '.github/workflows/web_build_and_test.yml'
+      - "renderers/web_core/**/*"
+      - ".github/workflows/web_build_and_test.yml"
 
 jobs:
   build-and-test:
@@ -35,7 +35,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Install web_core dependencies
         working-directory: ./renderers/web_core
@@ -60,7 +60,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: "22"
 
       - name: Run publish script integration test
         run: node --test renderers/scripts/publish_npm.test.mjs
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..59f4ffca9
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,23 @@
+# Copyright 2026 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+node_modules
+dist
+build
+.git
+.dart_tool
+.venv
+*.min.js
+agent_sdks/conformance/test_data/**
+**/pnpm-lock.yaml
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..5d5516ef2
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,24 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "bracketSpacing": false,
+  "jsxSingleQuote": false,
+  "arrowParens": "avoid",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    },
+    {
+      "files": ["*.yaml", "*.yml"],
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
index bccc61931..a9a992384 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -35,6 +35,6 @@
       "request": "launch",
       "command": "./scripts/fix_licenses.sh",
       "cwd": "${workspaceFolder}"
-    },
+    }
   ]
-}
\ No newline at end of file
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index a13f66c74..d67a4f0b2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,12 @@
 {
-  "dart.projectSearchDepth": 10
+  "dart.projectSearchDepth": 10,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[python]": {
+    "editor.defaultFormatter": "ms-python.black-formatter"
+  },
+  "black-formatter.path": ["pyink"],
+  "[dart]": {
+    "editor.defaultFormatter": "Dart-Code.dart-code"
+  }
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index aa77a9423..5b1ad1bd0 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -1,19 +1,19 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            // To run a shell script, open it and press ⇧⌘B.
-            // See https://code.visualstudio.com/docs/debugtest/tasks
-            "label": "currently opened shell script",
-            "type": "shell",
-            "command": "/bin/bash ${file}",
-            "problemMatcher": [],
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            }
-        }
-    ]
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      // To run a shell script, open it and press ⇧⌘B.
+      // See https://code.visualstudio.com/docs/debugtest/tasks
+      "label": "currently opened shell script",
+      "type": "shell",
+      "command": "/bin/bash ${file}",
+      "problemMatcher": [],
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0543648ea..1f7d40724 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -41,7 +41,7 @@ You may follow these steps to contribute:
 3. **Work on your forked repository's feature branch.** This is where you will make your changes to the code.
 4. **Commit your updates on your forked repository's feature branch.** This will save your changes to your copy of the repository.
 5. **Submit a pull request to the official repository's main branch.** This will request that your changes be merged into the official repository.
-6. **Resolve any linting errors.** This will ensure that your changes are formatted correctly.
+6. **Resolve any linting and formatting errors.** Run `./scripts/fix_format.sh` to fix formatting issues.
 
 Here are some additional things to keep in mind during the process:
 
@@ -50,12 +50,36 @@ Here are some additional things to keep in mind during the process:
 
 ## Coding Style
 
-To keep our codebase consistent and maintainable, we follow specific coding standards for Python and TypeScript.
+To keep our codebase consistent and maintainable, we follow specific coding standards and use automated formatters.
 
-Please refer to the following guidelines for detailed information on:
-*   **Python**: [Google Python Style Guide](https://google.github.io/styleguide/pyguide.html).
-*   **TypeScript**: usage of [`gts`](https://github.com/google/gts) and [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html).
-*   **License Headers**: required copyright notices.
+### Formatters
+
+- **JavaScript / TypeScript / JSON / Markdown / CSS**: [Prettier](https://prettier.io/)
+- **Python**: [Pyink](https://github.com/google/pyink) (Google style Black)
+- **Dart**: `dart format`
+
+You can use the provided script to format the entire repo or check formatting:
+
+```bash
+./scripts/fix_format.sh
+./scripts/fix_format.sh --check
+```
+
+### IDE Recommendations (VS Code)
+
+We recommend using [VS Code](https://code.visualstudio.com/) for development. To help enforce formatting, please install the following extensions:
+
+- **Prettier - Code formatter** (`esbenp.prettier-vscode`)
+- **Black Formatter** (`ms-python.black-formatter`) - configured to use `pyink` in workspace settings.
+- **Dart** (`Dart-Code.dart-code`)
+
+Workspace settings are provided in `.vscode/settings.json` to use these formatters by default on save.
+
+Please refer to the following guidelines for detailed information on styles:
+
+- **Python**: [Google Python Style Guide](https://google.github.io/styleguide/pyguide.html).
+- **TypeScript**: [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html).
+- **License Headers**: required copyright notices.
 
 We expect all contributors to adhere to these styles.
 
diff --git a/README.md b/README.md
index 013fd0897..cc6b87980 100644
--- a/README.md
+++ b/README.md
@@ -7,14 +7,14 @@ to generate or populate rich user interfaces.
 
 <img src="docs/assets/a2ui_gallery_examples.png" alt="Gallery of A2UI components" height="400">
 
-*A gallery of A2UI rendered cards, showing a variety of UI compositions that A2UI can achieve.*
+_A gallery of A2UI rendered cards, showing a variety of UI compositions that A2UI can achieve._
 
 ## ⚠️ Status: Early stage public preview
 
 > **Note:** A2UI is currently in **v0.8 (Public Preview)**. The specification and
-implementations are functional but are still evolving. We are opening the project to
-foster collaboration, gather feedback, and solicit contributions (e.g., on client renderers).
-Expect changes.
+> implementations are functional but are still evolving. We are opening the project to
+> foster collaboration, gather feedback, and solicit contributions (e.g., on client renderers).
+> Expect changes.
 
 ## Summary
 
@@ -23,7 +23,7 @@ present rich, interactive interfaces to users, especially when those agents
 are remote or running across trust boundaries.
 
 **A2UI** is an open standard and set of libraries that allows agents to
-"speak UI." Agents send a declarative JSON format describing the *intent* of
+"speak UI." Agents send a declarative JSON format describing the _intent_ of
 the UI. The client application then renders this using its own native
 component library (Flutter, Angular, Lit, etc.).
 
@@ -37,77 +37,77 @@ cross-platform, generative or template-based UI responses from agents.
 
 The project's core philosophies:
 
-* **Security first**: Running arbitrary code generated by an LLM may present a
-security risk. A2UI is a declarative data format, not executable
-code. Your client application maintains a "catalog" of trusted, pre-approved
-UI components (e.g., Card, Button, TextField), and the agent can only request
-to render components from that catalog.
-* **LLM-friendly and incrementally updatable**: The UI is represented as a flat
-list of components with ID references which is easy for LLMs to generate
-incrementally, allowing for progressive rendering and a responsive user
-experience. An agent can efficiently make incremental changes to the UI based
-on new user requests as the conversation progresses.
-* **Framework-agnostic and portable**: A2UI separates the UI structure from
-the UI implementation. The agent sends a description of the component tree
-and its associated data model. Your client application is responsible for
-mapping these abstract descriptions to its native widgets—be it web components,
-Flutter widgets, React components, SwiftUI views or something else entirely.
-The same A2UI JSON payload from an agent can be rendered on multiple different
-clients built on top of different frameworks.
-* **Flexibility**: A2UI also features an open registry pattern that allows
-developers to map server-side types to custom client implementations, from
-native mobile widgets to React components. By registering a "Smart Wrapper,"
-you can connect any existing UI component—including secure iframe containers
-for legacy content—to A2UI's data binding and event system.  Crucially, this
-places security firmly in the developer's hands, enabling them to enforce
-strict sandboxing policies and "trust ladders" directly within their custom
-component logic rather than relying solely on the core system.
+- **Security first**: Running arbitrary code generated by an LLM may present a
+  security risk. A2UI is a declarative data format, not executable
+  code. Your client application maintains a "catalog" of trusted, pre-approved
+  UI components (e.g., Card, Button, TextField), and the agent can only request
+  to render components from that catalog.
+- **LLM-friendly and incrementally updatable**: The UI is represented as a flat
+  list of components with ID references which is easy for LLMs to generate
+  incrementally, allowing for progressive rendering and a responsive user
+  experience. An agent can efficiently make incremental changes to the UI based
+  on new user requests as the conversation progresses.
+- **Framework-agnostic and portable**: A2UI separates the UI structure from
+  the UI implementation. The agent sends a description of the component tree
+  and its associated data model. Your client application is responsible for
+  mapping these abstract descriptions to its native widgets—be it web components,
+  Flutter widgets, React components, SwiftUI views or something else entirely.
+  The same A2UI JSON payload from an agent can be rendered on multiple different
+  clients built on top of different frameworks.
+- **Flexibility**: A2UI also features an open registry pattern that allows
+  developers to map server-side types to custom client implementations, from
+  native mobile widgets to React components. By registering a "Smart Wrapper,"
+  you can connect any existing UI component—including secure iframe containers
+  for legacy content—to A2UI's data binding and event system. Crucially, this
+  places security firmly in the developer's hands, enabling them to enforce
+  strict sandboxing policies and "trust ladders" directly within their custom
+  component logic rather than relying solely on the core system.
 
 ## Use cases
 
 Some of the use cases include:
 
-* **Dynamic Data Collection:** An agent generates a bespoke form (date pickers,
-sliders, inputs) based on the specific context of a conversation (e.g.,
-booking a specialized reservation).
-* **Remote Sub-Agents:** An orchestrator agent delegates a task to a
-remote specialized agent (e.g., a travel booking agent) which returns a
-UI payload to be rendered inside the main chat window.
-* **Adaptive Workflows:** Enterprise agents that generate approval
-dashboards or data visualizations on the fly based on the user's query.
+- **Dynamic Data Collection:** An agent generates a bespoke form (date pickers,
+  sliders, inputs) based on the specific context of a conversation (e.g.,
+  booking a specialized reservation).
+- **Remote Sub-Agents:** An orchestrator agent delegates a task to a
+  remote specialized agent (e.g., a travel booking agent) which returns a
+  UI payload to be rendered inside the main chat window.
+- **Adaptive Workflows:** Enterprise agents that generate approval
+  dashboards or data visualizations on the fly based on the user's query.
 
 ## Architecture
 
 The A2UI flow disconnects the generation of UI from the execution of UI:
 
 1. **Generation:** An Agent (using Gemini or another LLM) generates or uses
-a pre-generated `A2UI Response`, a JSON payload describing the composition
-of UI components and their properties.
+   a pre-generated `A2UI Response`, a JSON payload describing the composition
+   of UI components and their properties.
 2. **Transport:** This message is sent to the client application
-(via A2A, AG UI, etc.).
+   (via A2A, AG UI, etc.).
 3. **Resolution:** The Client's **A2UI Renderer** parses the JSON.
 4. **Rendering:** The Renderer maps the abstract components
-(e.g., `type: 'text-field'`) to the concrete implementation in the client's codebase.
+   (e.g., `type: 'text-field'`) to the concrete implementation in the client's codebase.
 
 ## Dependencies
 
 A2UI is designed to be a lightweight format, but it fits into a larger ecosystem:
 
-* **Transports:** Compatible with **A2A Protocol** and **AG UI**.
-* **LLMs:** Can be generated by any model capable of generating JSON output.
-* **Host Frameworks:** Requires a host application built in a supported framework
-(currently: Web or Flutter).
+- **Transports:** Compatible with **A2A Protocol** and **AG UI**.
+- **LLMs:** Can be generated by any model capable of generating JSON output.
+- **Host Frameworks:** Requires a host application built in a supported framework
+  (currently: Web or Flutter).
 
 ## Getting started
 
 Pick the path that matches where you want to start:
 
-| Path | What you get | Time |
-|------|--------------|------|
-| 🍜 **[Quickstart Restaurant Finder Demo](https://a2ui.org/quickstart/)** | Full-stack A2UI running locally with a Gemini powered ADK agent and Lit renderer. Learn A2UI end-to-end and customize to your use case. | ~5 min |
-| ⚛️ **[A2UI + AG-UI (CopilotKit)](docs/guides/a2ui-with-any-agent-framework.md)** | Set up CopilotKit with your agent framework of choice, then enable A2UI rendering. Ready to ship A2UI in a React app. | ~5 min |
-| 🎨 **[A2UI Composer](https://a2ui-composer.ag-ui.com/)** · **[Widget Builder](https://go.copilotkit.ai/A2UI-widget-builder)** | Generate A2UI JSON from a visual editor and paste it into any agent prompt — no install required. | ~1 min |
-| 🎬 **[A2UI Theater](https://a2ui-composer.ag-ui.com/theater)** | Step through pre-built A2UI streaming scenarios across Lit, React, and Angular renderers — no install required. | ~1 min |
+| Path                                                                                                                          | What you get                                                                                                                            | Time   |
+| ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| 🍜 **[Quickstart Restaurant Finder Demo](https://a2ui.org/quickstart/)**                                                      | Full-stack A2UI running locally with a Gemini powered ADK agent and Lit renderer. Learn A2UI end-to-end and customize to your use case. | ~5 min |
+| ⚛️ **[A2UI + AG-UI (CopilotKit)](docs/guides/a2ui-with-any-agent-framework.md)**                                              | Set up CopilotKit with your agent framework of choice, then enable A2UI rendering. Ready to ship A2UI in a React app.                   | ~5 min |
+| 🎨 **[A2UI Composer](https://a2ui-composer.ag-ui.com/)** · **[Widget Builder](https://go.copilotkit.ai/A2UI-widget-builder)** | Generate A2UI JSON from a visual editor and paste it into any agent prompt — no install required.                                       | ~1 min |
+| 🎬 **[A2UI Theater](https://a2ui-composer.ag-ui.com/theater)**                                                                | Step through pre-built A2UI streaming scenarios across Lit, React, and Angular renderers — no install required.                         | ~1 min |
 
 ### Restaurant Finder demo — TL;DR
 
@@ -139,10 +139,10 @@ For Flutter, check out the [GenUI SDK](https://github.com/flutter/genui), which
 
 We hope to work with the community on the following:
 
-* **Spec stabilization:** Moving towards a v1.0 specification.
-* **More renderers:** Adding official support for React, Jetpack Compose, iOS (SwiftUI), and more.
-* **Additional transports:** Support for REST and more.
-* **Additional Agent frameworks:** Genkit, LangGraph, and more.
+- **Spec stabilization:** Moving towards a v1.0 specification.
+- **More renderers:** Adding official support for React, Jetpack Compose, iOS (SwiftUI), and more.
+- **Additional transports:** Support for REST and more.
+- **Additional Agent frameworks:** Genkit, LangGraph, and more.
 
 ## Contribute
 
diff --git a/agent_sdks/agent_sdk_guide.md b/agent_sdks/agent_sdk_guide.md
index f6ed8b33a..82fc1ed1c 100644
--- a/agent_sdks/agent_sdk_guide.md
+++ b/agent_sdks/agent_sdk_guide.md
@@ -10,7 +10,7 @@ The A2UI Agent SDK architecture has a well-defined data flow that bridges langua
 
 1.  **Define Capabilities**: The SDK loads component schemas (usually from bundled package resources) and organizes them into **Catalogs**.
 2.  **Generate Prompts**: The SDK uses these catalogs to generate system instructions, automatically injecting the relevant JSON Schema and few-shot examples into the LLM's prompt.
-3.  **Streaming Parsing**: Support parsing the LLM's output *as it streams*, yielding partial or complete UI messages progressively.
+3.  **Streaming Parsing**: Support parsing the LLM's output _as it streams_, yielding partial or complete UI messages progressively.
 4.  **Validate Output**: When the LLM generates a response, the SDK parses it, extracts the A2UI JSON, and validates it against the schema.
 5.  **Serialize & Send**: The validated JSON is wrapped in a standard transport envelope (e.g., Agent-to-Agent/A2A DataPart) and streamed to the client.
 
@@ -39,10 +39,10 @@ Represents a processed catalog. It provides methods for validation and LLM instr
 class A2uiCatalog:
     name: str
     validator: A2uiValidator
-    
+
     def render_as_llm_instructions(self, options: InstructionOptions) -> str:
         """
-        Generates a string representation of the catalog (schemas and examples) 
+        Generates a string representation of the catalog (schemas and examples)
         suitable for inclusion in an LLM system prompt.
         """
         ...
@@ -75,15 +75,15 @@ class InferenceStrategy(ABC):
 
 #### Standard Implementations
 
-*   **`A2uiSchemaManager`**: Generates prompts by dynamically loading and organizing Component Schemas and examples from catalogs.
-*   **`A2uiTemplateManager`**: Generates prompts using predefined UI templates or static structures.
+- **`A2uiSchemaManager`**: Generates prompts by dynamically loading and organizing Component Schemas and examples from catalogs.
+- **`A2uiTemplateManager`**: Generates prompts using predefined UI templates or static structures.
 
 ### `A2uiValidator` & `PayloadFixer`
 
 The safety net of the SDK.
 
-*   **`PayloadFixer`**: Attempts to fix common LLM formatting errors (like trailing commas, missing quotes, or unterminated brackets) before structural parsing.
-*   **`A2uiValidator`**: Performs deep semantic and integrity validation beyond standard JSON Schema checks.
+- **`PayloadFixer`**: Attempts to fix common LLM formatting errors (like trailing commas, missing quotes, or unterminated brackets) before structural parsing.
+- **`A2uiValidator`**: Performs deep semantic and integrity validation beyond standard JSON Schema checks.
 
 #### Standard Validator Checks:
 
@@ -97,7 +97,7 @@ The safety net of the SDK.
 
 ## 3. Schema Management & Loading
 
-The SDK does not define component schemas programmatically in code. Instead, it **loads basic catalog JSON Schema definitions packed into the SDK resources** at runtime. Porting the SDK to a new language requires implementing a resource loader and a schema parser for that language's ecosystem (e.g., using `Pydantic` in Python or `kotlinx.serialization` in Kotlin). 
+The SDK does not define component schemas programmatically in code. Instead, it **loads basic catalog JSON Schema definitions packed into the SDK resources** at runtime. Porting the SDK to a new language requires implementing a resource loader and a schema parser for that language's ecosystem (e.g., using `Pydantic` in Python or `kotlinx.serialization` in Kotlin).
 
 Loading from the workspace's `specification/` directory is supported but should be treated as a **fallback for local development**.
 
@@ -105,7 +105,7 @@ Loading from the workspace's `specification/` directory is supported but should
 
 1.  **Freestanding Catalogs**: Catalogs should be freestanding. They should define their own types or reference relative paths within the same directory tree.
 2.  **Version Awareness**: The schema manager must respect the A2UI protocol version (e.g., `v0.9`). If an agent requests `v0.8` schema, it should serve the `v0.8` definitions.
-3.  **Resource Bundling**: Standard schemas should be bundled with the SDK artifact. Use language-standard utilities to read from package resources (e.g., Python's `importlib.resources`). Fall back to scanning the local `/specification` filesystem path *only* if resource loading fails or if explicitly configured for development.
+3.  **Resource Bundling**: Standard schemas should be bundled with the SDK artifact. Use language-standard utilities to read from package resources (e.g., Python's `importlib.resources`). Fall back to scanning the local `/specification` filesystem path _only_ if resource loading fails or if explicitly configured for development.
 
 ---
 
@@ -122,6 +122,7 @@ When generating prompts, the SDK should allow developers to:
 3.  **Standard Envelopes**: The prompt must instruct the LLM to wrap its A2UI output in standard tags to enable deterministic parsing.
 
 **Standard Prompt Tags:**
+
 ```
 CONVERSATIONAL TEXT RESPONSE
 <a2ui-json>
@@ -160,17 +161,22 @@ for chunk in llm_stream:
 The parser buffers text and uses regex to extract content between tags.
 
 #### Chunk Buffering
+
 Incoming text chunks are appended to an internal buffer. The parser passes through conversational text until it detects the `<a2ui-json>` opening tag.
 
 #### Regex Block Extraction
+
 Once both the opening and closing tags are found in the buffer, the parser uses a regex pattern (e.g., `<a2ui-json>(.*?)</a2ui-json>` with `re.DOTALL`) to extract the raw JSON string.
-*   It yields any text preceding the tag as standard conversational text.
-*   It yields the JSON content as an A2UI JSON part.
+
+- It yields any text preceding the tag as standard conversational text.
+- It yields the JSON content as an A2UI JSON part.
 
 #### Sanitization & Cleanup
+
 Before parsing the JSON, it sanitizes the string to remove any unexpected markdown code block delimiters (e.g., ` ```json `) that the LLM might have inadvertently wrapped around the JSON inside the A2UI tags.
 
 #### Multi-Block Support
+
 The parser searches for all occurrences of the tags in the buffer and splits the content into alternating text parts and A2UI JSON parts, clearing processed blocks from the buffer.
 
 ---
@@ -205,8 +211,8 @@ Once validated, the A2UI payload must be transmitted over the network. In typica
 
 The SDK should provide an out-of-the-box configuration for the **A2UI Basic Catalog** (Button, Text, Row, Column, etc.). This ensures that "Hello, World" agents can be built without defining custom schemas.
 
-*   In Python, this is provided by `BasicCatalog.get_config()`.
-*   Your language SDK should provide a similar singleton or preset that points to the standard basic catalog files in the `specification` folder.
+- In Python, this is provided by `BasicCatalog.get_config()`.
+- Your language SDK should provide a similar singleton or preset that points to the standard basic catalog files in the `specification` folder.
 
 ---
 
@@ -218,15 +224,15 @@ While an SDK can be standalone, it is most useful when it integrates with popula
 
 Provide a standard toolset (often called `SendA2uiToClientToolset`) that exposes tools to the LLM for sending rich UI.
 
-*   **Dynamic Providers**: The toolset should accept providers (callables or futures) to let the tool determine at runtime if A2UI is enabled, and which catalog/examples to use for the current session.
-*   **The UI Tool**: The actual tool exposed to the LLM (e.g., `send_a2ui_json_to_client`). It should validate the LLM's JSON arguments against the schema *before* returning success to the framework.
+- **Dynamic Providers**: The toolset should accept providers (callables or futures) to let the tool determine at runtime if A2UI is enabled, and which catalog/examples to use for the current session.
+- **The UI Tool**: The actual tool exposed to the LLM (e.g., `send_a2ui_json_to_client`). It should validate the LLM's JSON arguments against the schema _before_ returning success to the framework.
 
 ### 2. Part Converters
 
 A Part Converter translates the LLM's output (either tool calls or text tags) into standard transport Parts (like A2A DataParts).
 
-*   **Tool-to-Part**: When the LLM calls the UI tool, the converter intercepts the success response (which contains the validated JSON) and wraps it into an A2UI Part.
-*   **Text-to-Part**: When the LLM outputs text with standard delimiters (e.g., `<a2ui-json>`), the converter runs the text through the parser and emits A2UI Parts.
+- **Tool-to-Part**: When the LLM calls the UI tool, the converter intercepts the success response (which contains the validated JSON) and wraps it into an A2UI Part.
+- **Text-to-Part**: When the LLM outputs text with standard delimiters (e.g., `<a2ui-json>`), the converter runs the text through the parser and emits A2UI Parts.
 
 ### 3. Event Converters
 
@@ -239,18 +245,23 @@ An Event Converter intercepts the agent framework's event stream and applies the
 If you are tasked with porting the `agent_sdk` to a new language (e.g., C++ or Kotlin), follow this strict, phased sequence:
 
 ### Step 1: Core Foundation (Non-UI)
+
 Implement `CatalogConfig` (and its `Provider`), `A2uiCatalog`, and an `InferenceStrategy` (like `A2uiSchemaManager`). Ensure you can load a JSON file via a provider and print its schema.
 
 ### Step 2: Prompt Generation
+
 Implement `generateSystemPrompt`. Verify that it outputs valid Markdown with embedded JSON schemas and examples.
 
 ### Step 3: Parsing & Validation
+
 Implement `parseResponse` and validation. Hook up a standard JSON Schema validator for your language. Use the centralized YAML conformance suite in `agent_sdks/conformance/` to verify that your implementation handles streaming and validation edge cases identically to the reference implementation.
 
 ### Step 4: Transport (A2A)
+
 Create the helper utilities to wrap JSON in transport Parts (if needed for your ecosystem).
 
 ### Step 5: Sample Applications
+
 Create a simple sample (like a command-line agent or local server) to verify that the SDK works end-to-end. Refer to the reference Python samples (e.g., `samples/agent/adk/contact_lookup`) for inspiration.
 
 > [!IMPORTANT]
diff --git a/agent_sdks/conformance/README.md b/agent_sdks/conformance/README.md
index a74cbd65e..8e79f0dbc 100644
--- a/agent_sdks/conformance/README.md
+++ b/agent_sdks/conformance/README.md
@@ -3,23 +3,23 @@
 To ensure behavioral parity across all SDK implementations (Python, Kotlin, etc.), the project maintains a language-agnostic conformance suite in this directory.
 
 ## Suite Structure
+
 All test suites are located in the `suites/` directory:
-*   `suites/streaming_parser.yaml`: Contains test cases for the `A2uiStreamParser` (streaming), verifying chunk buffering, incremental yielding, and edge cases like cut tokens.
-*   `suites/parser.yaml`: Contains test cases for non-streaming parsing and payload fixing.
-*   `suites/validator.yaml`: Contains test cases for the `A2uiValidator`, verifying structural integrity, cycle detection, and reachability.
-*   `suites/catalog.yaml`: Contains test cases for `A2uiCatalog` (prune, render, load).
-*   `suites/schema_manager.yaml`: Contains test cases for `A2uiSchemaManager` (select_catalog, load_catalog, generate_prompt).
+
+- `suites/streaming_parser.yaml`: Contains test cases for the `A2uiStreamParser` (streaming), verifying chunk buffering, incremental yielding, and edge cases like cut tokens.
+- `suites/parser.yaml`: Contains test cases for non-streaming parsing and payload fixing.
+- `suites/validator.yaml`: Contains test cases for the `A2uiValidator`, verifying structural integrity, cycle detection, and reachability.
+- `suites/catalog.yaml`: Contains test cases for `A2uiCatalog` (prune, render, load).
+- `suites/schema_manager.yaml`: Contains test cases for `A2uiSchemaManager` (select_catalog, load_catalog, generate_prompt).
 
 All static test data and simplified schemas are located in the `test_data/` directory.
 
 `conformance_schema.json` at the root is the JSON schema that validates the structure of the YAML test files themselves.
 
-
-
-
-
 ## Usage in SDKs
+
 Each language SDK must implement a test harness that:
+
 1.  Reads the YAML files.
 2.  Feeds the inputs to the language's specific implementation of the parser/validator.
 3.  Asserts that the output matches the expected results defined in the YAML.
diff --git a/agent_sdks/conformance/conformance_schema.json b/agent_sdks/conformance/conformance_schema.json
index b3b356665..4aec78994 100644
--- a/agent_sdks/conformance/conformance_schema.json
+++ b/agent_sdks/conformance/conformance_schema.json
@@ -20,10 +20,7 @@
         "properties": {
           "version": {
             "type": "string",
-            "enum": [
-              "0.8",
-              "0.9"
-            ],
+            "enum": ["0.8", "0.9"],
             "description": "Protocol version."
           },
           "s2c_schema": {
@@ -66,7 +63,7 @@
             ]
           }
         },
-        "required": [ "version" ]
+        "required": ["version"]
       },
       "action": {
         "type": "string",
@@ -96,31 +93,31 @@
         ]
       }
     },
-    "required": [ "name", "action" ],
+    "required": ["name", "action"],
     "allOf": [
       {
         "oneOf": [
-          { "$ref": "#/$defs/ProcessChunkTest" },
-          { "$ref": "#/$defs/ValidateTest" },
-          { "$ref": "#/$defs/PruneTest" },
-          { "$ref": "#/$defs/RenderTest" },
-          { "$ref": "#/$defs/LoadTest" },
-          { "$ref": "#/$defs/RemoveStrictValidationTest" },
-          { "$ref": "#/$defs/ParseFullTest" },
-          { "$ref": "#/$defs/FixPayloadTest" },
-          { "$ref": "#/$defs/HasPartsTest" },
-          { "$ref": "#/$defs/SelectCatalogTest" },
-          { "$ref": "#/$defs/GeneratePromptTest" },
-          { "$ref": "#/$defs/LoadCatalogTest" },
-          { "$ref": "#/$defs/ConvertEventTest" },
-          { "$ref": "#/$defs/CreateA2uiPartTest" },
-          { "$ref": "#/$defs/IsA2uiPartTest" },
-          { "$ref": "#/$defs/TryActivateExtensionTest" },
-          { "$ref": "#/$defs/HandleRpcTest" },
-          { "$ref": "#/$defs/ExecuteToolTest" },
-          { "$ref": "#/$defs/GetExtensionTest" },
-          { "$ref": "#/$defs/TryActivateTest" },
-          { "$ref": "#/$defs/SelectNewestTest" }
+          {"$ref": "#/$defs/ProcessChunkTest"},
+          {"$ref": "#/$defs/ValidateTest"},
+          {"$ref": "#/$defs/PruneTest"},
+          {"$ref": "#/$defs/RenderTest"},
+          {"$ref": "#/$defs/LoadTest"},
+          {"$ref": "#/$defs/RemoveStrictValidationTest"},
+          {"$ref": "#/$defs/ParseFullTest"},
+          {"$ref": "#/$defs/FixPayloadTest"},
+          {"$ref": "#/$defs/HasPartsTest"},
+          {"$ref": "#/$defs/SelectCatalogTest"},
+          {"$ref": "#/$defs/GeneratePromptTest"},
+          {"$ref": "#/$defs/LoadCatalogTest"},
+          {"$ref": "#/$defs/ConvertEventTest"},
+          {"$ref": "#/$defs/CreateA2uiPartTest"},
+          {"$ref": "#/$defs/IsA2uiPartTest"},
+          {"$ref": "#/$defs/TryActivateExtensionTest"},
+          {"$ref": "#/$defs/HandleRpcTest"},
+          {"$ref": "#/$defs/ExecuteToolTest"},
+          {"$ref": "#/$defs/GetExtensionTest"},
+          {"$ref": "#/$defs/TryActivateTest"},
+          {"$ref": "#/$defs/SelectNewestTest"}
         ]
       }
     ]
@@ -129,7 +126,7 @@
     "ProcessChunkTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "process_chunk" },
+        "action": {"const": "process_chunk"},
         "steps": {
           "type": "array",
           "description": "Steps for parser tests.",
@@ -163,32 +160,26 @@
                 "description": "Expected error message (regex) if this step should fail."
               }
             },
-            "required": [
-              "input"
-            ],
+            "required": ["input"],
             "oneOf": [
               {
-                "required": [
-                  "expect"
-                ]
+                "required": ["expect"]
               },
               {
-                "required": [
-                  "expect_error"
-                ]
+                "required": ["expect_error"]
               }
             ]
           }
         }
       },
-      "required": [ "steps" ]
+      "required": ["steps"]
     },
     "ValidateTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "validate" }
+        "action": {"const": "validate"}
       },
-      "required": [ "action" ],
+      "required": ["action"],
       "oneOf": [
         {
           "properties": {
@@ -199,10 +190,7 @@
                 "type": "object",
                 "properties": {
                   "payload": {
-                    "oneOf": [
-                      { "type": "object" },
-                      { "type": "array", "items": { "type": "object" } }
-                    ],
+                    "oneOf": [{"type": "object"}, {"type": "array", "items": {"type": "object"}}],
                     "description": "Payload to validate (single message or list of messages)."
                   },
                   "expect_error": {
@@ -210,19 +198,16 @@
                     "description": "Expected error message (regex) if validation should fail."
                   }
                 },
-                "required": [ "payload" ]
+                "required": ["payload"]
               }
             }
           },
-          "required": [ "steps" ]
+          "required": ["steps"]
         },
         {
           "properties": {
             "payload": {
-              "oneOf": [
-                { "type": "object" },
-                { "type": "array", "items": { "type": "object" } }
-              ],
+              "oneOf": [{"type": "object"}, {"type": "array", "items": {"type": "object"}}],
               "description": "Payload to validate (single message or list of messages)."
             },
             "expect_error": {
@@ -230,235 +215,235 @@
               "description": "Expected error message (regex) if validation should fail."
             }
           },
-          "required": [ "payload" ]
+          "required": ["payload"]
         }
       ]
     },
     "PruneTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "prune" },
+        "action": {"const": "prune"},
         "args": {
           "type": "object",
           "properties": {
-            "allowed_components": { "type": "array", "items": { "type": "string" } },
-            "allowed_messages": { "type": "array", "items": { "type": "string" } }
+            "allowed_components": {"type": "array", "items": {"type": "string"}},
+            "allowed_messages": {"type": "array", "items": {"type": "string"}}
           }
         },
-        "expect": { "type": "object" }
+        "expect": {"type": "object"}
       },
-      "required": [ "args", "expect" ]
+      "required": ["args", "expect"]
     },
     "RenderTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "render" },
-        "expect_output": { "type": "string" }
+        "action": {"const": "render"},
+        "expect_output": {"type": "string"}
       },
-      "required": [ "expect_output" ]
+      "required": ["expect_output"]
     },
     "LoadTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "load" },
+        "action": {"const": "load"},
         "args": {
           "type": "object",
           "properties": {
-            "path": { "type": ["string", "null"] },
-            "validate": { "type": "boolean" }
+            "path": {"type": ["string", "null"]},
+            "validate": {"type": "boolean"}
           },
-          "required": [ "path" ]
+          "required": ["path"]
         },
-        "expect_output": { "type": "string" },
-        "expect_error": { "type": "string" }
+        "expect_output": {"type": "string"},
+        "expect_error": {"type": "string"}
       },
-      "required": [ "args" ]
+      "required": ["args"]
     },
     "RemoveStrictValidationTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "remove_strict_validation" },
+        "action": {"const": "remove_strict_validation"},
         "args": {
           "type": "object",
           "properties": {
-            "schema": { "type": "object" }
+            "schema": {"type": "object"}
           },
-          "required": [ "schema" ]
+          "required": ["schema"]
         },
         "expect": {
           "type": "object",
           "properties": {
-            "schema": { "type": "object" }
+            "schema": {"type": "object"}
           },
-          "required": [ "schema" ]
+          "required": ["schema"]
         }
       },
-      "required": [ "args", "expect" ]
+      "required": ["args", "expect"]
     },
     "ParseFullTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "parse_full" },
-        "input": { "type": "string" },
-        "expect": { "type": "array" },
-        "expect_error": { "type": "string" }
+        "action": {"const": "parse_full"},
+        "input": {"type": "string"},
+        "expect": {"type": "array"},
+        "expect_error": {"type": "string"}
       },
-      "required": [ "input" ]
+      "required": ["input"]
     },
     "FixPayloadTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "fix_payload" },
-        "input": { "type": "string" },
+        "action": {"const": "fix_payload"},
+        "input": {"type": "string"},
         "expect": {}
       },
-      "required": [ "input", "expect" ]
+      "required": ["input", "expect"]
     },
     "HasPartsTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "has_parts" },
-        "input": { "type": "string" },
-        "expect": { "type": "boolean" }
+        "action": {"const": "has_parts"},
+        "input": {"type": "string"},
+        "expect": {"type": "boolean"}
       },
-      "required": [ "input", "expect" ]
+      "required": ["input", "expect"]
     },
     "SelectCatalogTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "select_catalog" },
-        "args": { "type": "object" },
-        "expect_selected": { "type": "string" },
-        "expect_catalog_schema": { "type": "object" },
-        "expect_error": { "type": "string" }
+        "action": {"const": "select_catalog"},
+        "args": {"type": "object"},
+        "expect_selected": {"type": "string"},
+        "expect_catalog_schema": {"type": "object"},
+        "expect_error": {"type": "string"}
       },
-      "required": [ "args" ]
+      "required": ["args"]
     },
     "GeneratePromptTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "generate_prompt" },
-        "args": { "type": "object" },
+        "action": {"const": "generate_prompt"},
+        "args": {"type": "object"},
         "expect_contains": {
           "type": "array",
-          "items": { "type": "string" }
+          "items": {"type": "string"}
         }
       },
-      "required": [ "args", "expect_contains" ]
+      "required": ["args", "expect_contains"]
     },
     "LoadCatalogTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "load_catalog" },
+        "action": {"const": "load_catalog"},
         "catalog_configs": {
           "type": "array",
           "items": {
             "type": "object",
             "properties": {
-              "name": { "type": "string" },
-              "path": { "type": "string" }
+              "name": {"type": "string"},
+              "path": {"type": "string"}
             },
-            "required": [ "name", "path" ]
+            "required": ["name", "path"]
           }
         },
         "modifiers": {
           "type": "array",
-          "items": { "type": "string" }
+          "items": {"type": "string"}
         },
         "expect": {
           "type": "object",
           "properties": {
-            "catalog_schema": { "type": "object" },
+            "catalog_schema": {"type": "object"},
             "supported_catalog_ids": {
               "type": "array",
-              "items": { "type": "string" }
+              "items": {"type": "string"}
             }
           }
         }
       },
-      "required": [ "action", "catalog_configs" ]
+      "required": ["action", "catalog_configs"]
     },
     "ConvertEventTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "convert_event" },
-        "args": { "type": "object" },
-        "expect": { "type": "object" },
-        "expect_empty": { "type": "boolean" }
+        "action": {"const": "convert_event"},
+        "args": {"type": "object"},
+        "expect": {"type": "object"},
+        "expect_empty": {"type": "boolean"}
       },
-      "required": [ "action", "args" ]
+      "required": ["action", "args"]
     },
     "CreateA2uiPartTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "create_a2ui_part" },
-        "args": { "type": "object" },
-        "expect": { "type": "object" }
+        "action": {"const": "create_a2ui_part"},
+        "args": {"type": "object"},
+        "expect": {"type": "object"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     },
     "IsA2uiPartTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "is_a2ui_part" },
-        "args": { "type": "object" },
-        "expect": { "type": "boolean" }
+        "action": {"const": "is_a2ui_part"},
+        "args": {"type": "object"},
+        "expect": {"type": "boolean"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     },
     "TryActivateExtensionTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "try_activate_extension" },
-        "args": { "type": "object" },
-        "expect": { "type": "boolean" }
+        "action": {"const": "try_activate_extension"},
+        "args": {"type": "object"},
+        "expect": {"type": "boolean"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     },
     "HandleRpcTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "handle_rpc" },
-        "args": { "type": "object" },
-        "expect": { "type": "object" }
+        "action": {"const": "handle_rpc"},
+        "args": {"type": "object"},
+        "expect": {"type": "object"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     },
     "ExecuteToolTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "execute_tool" },
-        "args": { "type": "object" },
-        "expect": { "type": "object" }
+        "action": {"const": "execute_tool"},
+        "args": {"type": "object"},
+        "expect": {"type": "object"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     },
     "GetExtensionTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "get_extension" },
-        "args": { "type": "object" },
-        "expect": { "type": "object" }
+        "action": {"const": "get_extension"},
+        "args": {"type": "object"},
+        "expect": {"type": "object"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     },
     "TryActivateTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "try_activate" },
-        "args": { "type": "object" },
-        "expect": { "type": "object" }
+        "action": {"const": "try_activate"},
+        "args": {"type": "object"},
+        "expect": {"type": "object"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     },
     "SelectNewestTest": {
       "type": "object",
       "properties": {
-        "action": { "const": "select_newest" },
-        "args": { "type": "object" },
-        "expect": { "type": "object" }
+        "action": {"const": "select_newest"},
+        "args": {"type": "object"},
+        "expect": {"type": "object"}
       },
-      "required": [ "action", "args", "expect" ]
+      "required": ["action", "args", "expect"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/agent_sdks/conformance/suites/a2a_integration.yaml b/agent_sdks/conformance/suites/a2a_integration.yaml
index 6015242d5..77fe9f31b 100644
--- a/agent_sdks/conformance/suites/a2a_integration.yaml
+++ b/agent_sdks/conformance/suites/a2a_integration.yaml
@@ -50,7 +50,8 @@
           parts: []
           metadata:
             a2uiClientCapabilities:
-              supportedCatalogIds: ["https://a2ui.org/specification/v0_8/standard_catalog_definition.json"]
+              supportedCatalogIds:
+                ["https://a2ui.org/specification/v0_8/standard_catalog_definition.json"]
     runner_output: "Here is your chart:\n<a2ui-json>\n[\n  {\n    “beginRendering”: {\n      “surfaceId”: “sales-dashboard”\n    }\n  }\n]\n</a2ui-json>\nEnjoy!"
   expect:
     parts:
diff --git a/agent_sdks/conformance/suites/catalog.yaml b/agent_sdks/conformance/suites/catalog.yaml
index 1f7953bf9..f57dad4db 100644
--- a/agent_sdks/conformance/suites/catalog.yaml
+++ b/agent_sdks/conformance/suites/catalog.yaml
@@ -41,9 +41,9 @@
       $defs:
         anyComponent:
           oneOf:
-          - $ref: "#/components/Text"
-          - $ref: "#/components/Button"
-          - $ref: "#/components/Image"
+            - $ref: "#/components/Text"
+            - $ref: "#/components/Button"
+            - $ref: "#/components/Image"
       components:
         Text: {}
         Button: {}
@@ -57,7 +57,7 @@
       $defs:
         anyComponent:
           oneOf:
-          - $ref: "#/components/Text"
+            - $ref: "#/components/Text"
       components:
         Text: {}
 
@@ -67,9 +67,9 @@
     version: "0.9"
     s2c_schema:
       oneOf:
-      - $ref: "#/$defs/MessageA"
-      - $ref: "#/$defs/MessageB"
-      - $ref: "#/$defs/MessageC"
+        - $ref: "#/$defs/MessageA"
+        - $ref: "#/$defs/MessageB"
+        - $ref: "#/$defs/MessageC"
       $defs:
         MessageA: {type: object, properties: {a: {type: string}}}
         MessageB: {type: object, properties: {b: {type: string}}}
@@ -81,8 +81,8 @@
   expect:
     s2c_schema:
       oneOf:
-      - $ref: "#/$defs/MessageA"
-      - $ref: "#/$defs/MessageC"
+        - $ref: "#/$defs/MessageA"
+        - $ref: "#/$defs/MessageC"
       $defs:
         MessageA: {type: object, properties: {a: {type: string}}}
         MessageC: {type: object, properties: {c: {type: string}}}
@@ -93,7 +93,7 @@
     version: "0.9"
     s2c_schema:
       oneOf:
-      - $ref: "#/$defs/MessageA"
+        - $ref: "#/$defs/MessageA"
       $defs:
         MessageA:
           type: object
@@ -108,7 +108,7 @@
   expect:
     s2c_schema:
       oneOf:
-      - $ref: "#/$defs/MessageA"
+        - $ref: "#/$defs/MessageA"
       $defs:
         MessageA:
           type: object
@@ -147,8 +147,8 @@
         TypeForB: {type: number}
     s2c_schema:
       oneOf:
-      - $ref: "#/$defs/MessageA"
-      - $ref: "#/$defs/MessageB"
+        - $ref: "#/$defs/MessageA"
+        - $ref: "#/$defs/MessageB"
       $defs:
         MessageA: {$ref: "common_types.json#/$defs/TypeForA"}
         MessageB: {$ref: "common_types.json#/$defs/TypeForB"}
@@ -390,4 +390,3 @@
     schema: {type: object, additionalProperties: true}
   expect:
     schema: {type: object, additionalProperties: true}
-
diff --git a/agent_sdks/conformance/suites/parser.yaml b/agent_sdks/conformance/suites/parser.yaml
index 4ede7f34e..2a199f17d 100644
--- a/agent_sdks/conformance/suites/parser.yaml
+++ b/agent_sdks/conformance/suites/parser.yaml
@@ -33,7 +33,7 @@
 - name: test_parse_response_only_json_with_tags
   description: Tests parsing only JSON with tags.
   action: parse_full
-  input: "<a2ui-json>[{\"id\": \"test\"}]</a2ui-json>"
+  input: '<a2ui-json>[{"id": "test"}]</a2ui-json>'
   expect:
     - text: ""
       a2ui: [{"id": "test"}]
diff --git a/agent_sdks/conformance/suites/schema_manager.yaml b/agent_sdks/conformance/suites/schema_manager.yaml
index 79a1e81b5..70454f2c8 100644
--- a/agent_sdks/conformance/suites/schema_manager.yaml
+++ b/agent_sdks/conformance/suites/schema_manager.yaml
@@ -71,7 +71,6 @@
       supportedCatalogIds: ["id_not_exists"]
   expect_error: "No client-supported catalog found"
 
-
 - name: test_select_catalog_inline
   description: Inline catalog loading (merges onto base).
   action: select_catalog
@@ -151,7 +150,6 @@
       Text: {}
       Button: {}
 
-
 # --- Manager Modifier Tests ---
 
 - name: test_manager_with_modifiers
@@ -275,7 +273,7 @@
     - "---BEGIN A2UI JSON SCHEMA---"
     - "### Server To Client Schema:"
     - "### Catalog Schema:"
-    - "\"Button\": {}"
+    - '"Button": {}'
     - "---END A2UI JSON SCHEMA---"
 
 # --- New Tests requested by User ---
@@ -322,5 +320,5 @@
     - "---BEGIN A2UI JSON SCHEMA---"
     - "### Server To Client Schema:"
     - "### Catalog Schema:"
-    - "\"Text\": {"
+    - '"Text": {'
     - "---END A2UI JSON SCHEMA---"
diff --git a/agent_sdks/conformance/suites/streaming_parser.yaml b/agent_sdks/conformance/suites/streaming_parser.yaml
index 8fdc87180..c8bf6375d 100644
--- a/agent_sdks/conformance/suites/streaming_parser.yaml
+++ b/agent_sdks/conformance/suites/streaming_parser.yaml
@@ -193,7 +193,22 @@
     - input: "}"
       expect: []
     - input: "}"
-      expect: [{a2ui: [{beginRendering: {root: "root", surfaceId: "s1", styles: {primaryColor: "#FF0000", font: "Roboto"}}}]}]
+      expect:
+        [
+          {
+            a2ui:
+              [
+                {
+                  beginRendering:
+                    {
+                      root: "root",
+                      surfaceId: "s1",
+                      styles: {primaryColor: "#FF0000", font: "Roboto"},
+                    },
+                },
+              ],
+          },
+        ]
 
 - name: test_multiple_a2ui_blocks
   description: Tests that multiple A2UI blocks are handled correctly with interleaved text.
@@ -956,7 +971,17 @@
         - a2ui:
             - dataModelUpdate:
                 surfaceId: "default"
-                contents: [{key: "items", valueMap: [{key: "name", valueString: "Item 1"}, {key: "name", valueString: "Item 2"}]}]
+                contents:
+                  [
+                    {
+                      key: "items",
+                      valueMap:
+                        [
+                          {key: "name", valueString: "Item 1"},
+                          {key: "name", valueString: "Item 2"},
+                        ],
+                    },
+                  ]
     - input: "]}}}]"
       expect: []
 
@@ -978,7 +1003,7 @@
       expect: []
 
 - name: test_sniff_partial_datamodel_with_cut_key
-  description: "Verifies that an unclosed string like {\"key or {\"key\": \"val still yields previous valid entries."
+  description: 'Verifies that an unclosed string like {"key or {"key": "val still yields previous valid entries.'
   catalog:
     version: "0.8"
     s2c_schema: "test_data/simplified_s2c_v08.json"
@@ -1325,7 +1350,8 @@
     - input: '"'
       expect: []
     - input: "}},"
-      expect: [{a2ui: [{version: "v0.9", createSurface: {surfaceId: "s1", catalogId: "test_catalog"}}]}]
+      expect:
+        [{a2ui: [{version: "v0.9", createSurface: {surfaceId: "s1", catalogId: "test_catalog"}}]}]
     - input: '{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": ['
       expect: []
     - input: '{"id": "root", "component": "Column", "children": ['
@@ -1433,7 +1459,8 @@
   action: process_chunk
   steps:
     - input: '<a2ui-json>[{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}},'
-      expect: [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
+      expect:
+        [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
     - input: '{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "c1", "component": "Text", "text": "hello"}'
       expect: []
     - input: ', {"id": "root", "component": "Card", "child": "c1"}}]}}</a2ui-json>'
@@ -1471,7 +1498,8 @@
   action: process_chunk
   steps:
     - input: '<a2ui-json>[{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
-      expect: [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
+      expect:
+        [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
     - input: '{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "root", "component": "Text", "text": "root"}, {"id": "orphan", "component": "Text", "text": "orphan"}]}}]</a2ui-json>'
       expect:
         - a2ui:
@@ -1504,7 +1532,8 @@
   action: process_chunk
   steps:
     - input: '<a2ui-json>[{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}},'
-      expect: [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
+      expect:
+        [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
     - input: '{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "root", "component": "Card", "child": "child"}]}},{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "child", "component": "Card", "child": "root"}]}}'
       expect_error: "Circular reference detected"
 
@@ -1529,7 +1558,8 @@
   action: process_chunk
   steps:
     - input: '<a2ui-json>[{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}},'
-      expect: [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
+      expect:
+        [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
     - input: '{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "root", "component": "Card", "child": "root"}]}}'
       expect_error: "Self-reference detected"
 
@@ -1555,7 +1585,8 @@
     - input: "Here is your UI: <a2ui-json>"
       expect: [{text: "Here is your UI: "}]
     - input: '[{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}]'
-      expect: [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
+      expect:
+        [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1"}}]}]
     - input: "</a2ui-json> That's all!"
       expect: [{text: " That's all!"}]
 
@@ -1623,7 +1654,23 @@
     - input: "}"
       expect: []
     - input: "}"
-      expect: [{a2ui: [{version: "v0.9", createSurface: {catalogId: "test_catalog", surfaceId: "s1", theme: {primaryColor: "#FF0000", font: "Roboto"}}}]}]
+      expect:
+        [
+          {
+            a2ui:
+              [
+                {
+                  version: "v0.9",
+                  createSurface:
+                    {
+                      catalogId: "test_catalog",
+                      surfaceId: "s1",
+                      theme: {primaryColor: "#FF0000", font: "Roboto"},
+                    },
+                },
+              ],
+          },
+        ]
 
 - name: test_multiple_a2ui_blocks_v09
   description: Tests that multiple A2UI blocks are handled correctly with interleaved text for v0.9.
@@ -1883,7 +1930,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "updateDataModel": {"surfaceId": "s1", "value": {"name": "Alice"}}}, '
       expect:
@@ -1938,7 +1985,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -1991,7 +2038,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2042,7 +2089,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "contact'
       expect: []
@@ -2091,7 +2138,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2143,7 +2190,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "root", "component": "Text", "text": "hi"}]}}, '
       expect: []
@@ -2162,7 +2209,6 @@
                     component: "Text"
                     text: "hi"
 
-
 - name: test_data_model_after_components_v09
   description: Tests that data model after components works.
   catalog:
@@ -2190,7 +2236,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2244,7 +2290,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2295,7 +2341,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "contact'
       expect: []
@@ -2344,7 +2390,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2396,7 +2442,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "root", "component": "Text", "text": "hi"}]}}, '
       expect: []
@@ -2426,7 +2472,7 @@
       components: {}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "deleteSurface": {"surfaceId": "s1"}}, '
       expect: []
@@ -2465,7 +2511,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2498,7 +2544,7 @@
       components: {}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"unknownMessage": "invalid"}]'
       expect_error: "Validation failed"
@@ -2525,7 +2571,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2559,9 +2605,9 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>'
+    - input: "<a2ui-json>"
       expect: []
-    - input: '['
+    - input: "["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}'
       expect:
@@ -2584,7 +2630,7 @@
                   - id: "root"
                     component: "Text"
                     text: "hello"
-    - input: ' world'
+    - input: " world"
       expect:
         - a2ui:
             - version: "v0.9"
@@ -2629,7 +2675,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "s1"}}, '
       expect:
@@ -2707,7 +2753,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"catalogId": "test_catalog", "surfaceId": "default"}}, '
       expect:
@@ -2823,7 +2869,7 @@
       components: {}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "updateDataModel": {"surfaceId": "default", "value": {"title": "Top Restaurants", "items": {'
       expect:
@@ -3086,7 +3132,7 @@
           discriminator: {propertyName: "component"}
   action: process_chunk
   steps:
-    - input: '<a2ui-json>['
+    - input: "<a2ui-json>["
       expect: []
     - input: '{"version": "v0.9", "createSurface": {"surfaceId": "surface1", "catalogId": "test_catalog"}},'
       expect:
@@ -3201,7 +3247,8 @@
   action: process_chunk
   steps:
     - input: '<a2ui-json>[{"version": "v0.9", "createSurface": {"surfaceId": "s1", "catalogId": "test_catalog"}}]</a2ui-json>'
-      expect: [{a2ui: [{version: "v0.9", createSurface: {surfaceId: "s1", catalogId: "test_catalog"}}]}]
+      expect:
+        [{a2ui: [{version: "v0.9", createSurface: {surfaceId: "s1", catalogId: "test_catalog"}}]}]
     - input: '<a2ui-json>[{"version": "v0.9", "updateComponents": {"surfaceId": "s1", "components": [{"id": "root", "component": "Text", "text": {"path": "some/relative/path"}}]}}]</a2ui-json>'
       expect:
         - a2ui:
@@ -3212,5 +3259,3 @@
                   - id: "root"
                     component: "Text"
                     text: {path: "some/relative/path"}
-
-
diff --git a/agent_sdks/conformance/suites/validator.yaml b/agent_sdks/conformance/suites/validator.yaml
index fc0cf4ad0..6ebae0bef 100644
--- a/agent_sdks/conformance/suites/validator.yaml
+++ b/agent_sdks/conformance/suites/validator.yaml
@@ -27,20 +27,20 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      root: c1
-      surfaceId: s1
-  - surfaceUpdate:
-      surfaceId: s1
-      components:
-      - id: c1
-        component:
-          Card:
-            child: c2
-      - id: c2
-        component:
-          Card:
-            child: c1
+    - beginRendering:
+        root: c1
+        surfaceId: s1
+    - surfaceUpdate:
+        surfaceId: s1
+        components:
+          - id: c1
+            component:
+              Card:
+                child: c2
+          - id: c2
+            component:
+              Card:
+                child: c1
   expect_error: Circular reference detected
 
 - name: test_validator_0_9
@@ -52,36 +52,36 @@
     catalog_schema: "test_data/simplified_catalog_v09.json"
   action: validate
   steps:
-  - payload:
-    - version: v0.9
-      createSurface:
-        surfaceId: test-id
-        catalogId: standard
-        theme:
-          primaryColor: blue
-          iconUrl: http://img
-  - payload:
-    - createSurface:
-        surfaceId: '123'
-        catalogId: standard
-    expect_error: '''version'' is a required property'
-  - payload:
-    - version: v0.8
-      createSurface:
-        surfaceId: '123'
-        catalogId: standard
-    expect_error: '''v0.9'' was expected'
-  - payload:
-    - version: v0.9
-      createSurface:
-        surfaceId: 123
-        catalogId: standard
-    expect_error: 123 is not of type 'string'
-  - payload:
-    - version: v0.9
-      createSurface:
-        surfaceId: '123'
-    expect_error: '''catalogId'' is a required property'
+    - payload:
+        - version: v0.9
+          createSurface:
+            surfaceId: test-id
+            catalogId: standard
+            theme:
+              primaryColor: blue
+              iconUrl: http://img
+    - payload:
+        - createSurface:
+            surfaceId: "123"
+            catalogId: standard
+      expect_error: "'version' is a required property"
+    - payload:
+        - version: v0.8
+          createSurface:
+            surfaceId: "123"
+            catalogId: standard
+      expect_error: "'v0.9' was expected"
+    - payload:
+        - version: v0.9
+          createSurface:
+            surfaceId: 123
+            catalogId: standard
+      expect_error: 123 is not of type 'string'
+    - payload:
+        - version: v0.9
+          createSurface:
+            surfaceId: "123"
+      expect_error: "'catalogId' is a required property"
 
 - name: test_validator_0_8
   description: Tests validation of v0.8 messages.
@@ -93,23 +93,23 @@
       components: {}
   action: validate
   steps:
-  - payload:
-    - beginRendering:
-        surfaceId: test-id
-        root: root
-        styles:
-          primaryColor: '#ff0000'
-  - payload:
-    - beginRendering:
-        surfaceId: 123
-        root: root
-    expect_error: 123 is not of type 'string'
-  - payload:
-    - beginRendering:
-        surfaceId: id
-        root: root
-        styles: not-an-object
-    expect_error: '''not-an-object'' is not of type ''object'''
+    - payload:
+        - beginRendering:
+            surfaceId: test-id
+            root: root
+            styles:
+              primaryColor: "#ff0000"
+    - payload:
+        - beginRendering:
+            surfaceId: 123
+            root: root
+      expect_error: 123 is not of type 'string'
+    - payload:
+        - beginRendering:
+            surfaceId: id
+            root: root
+            styles: not-an-object
+      expect_error: "'not-an-object' is not of type 'object'"
 
 - name: test_custom_catalog_0_8
   description: Tests validation with a custom catalog in v0.8.
@@ -130,17 +130,17 @@
                   items:
                     type: string
               required:
-              - explicitList
+                - explicitList
           required:
-          - children
+            - children
         Chart:
           type: object
           properties:
             type:
               type: string
               enum:
-              - doughnut
-              - pie
+                - doughnut
+                - pie
             title:
               type: object
               properties:
@@ -156,8 +156,8 @@
                 path:
                   type: string
           required:
-          - type
-          - chartData
+            - type
+            - chartData
         GoogleMap:
           type: object
           properties:
@@ -176,31 +176,31 @@
                 path:
                   type: string
           required:
-          - center
-          - zoom
+            - center
+            - zoom
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: id1
-      components:
-      - id: root
-        component:
-          Canvas:
-            children:
-              explicitList:
-              - c1
-              - c2
-      - id: c1
-        component:
-          Canvas:
-            children:
-              explicitList: []
-      - id: c2
-        component:
-          Chart:
-            type: pie
-            chartData:
-              path: /data
+    - surfaceUpdate:
+        surfaceId: id1
+        components:
+          - id: root
+            component:
+              Canvas:
+                children:
+                  explicitList:
+                    - c1
+                    - c2
+          - id: c1
+            component:
+              Canvas:
+                children:
+                  explicitList: []
+          - id: c2
+            component:
+              Chart:
+                type: pie
+                chartData:
+                  path: /data
 
 - name: test_custom_catalog_0_9
   description: Tests validation with a custom catalog in v0.9.
@@ -214,57 +214,57 @@
         Canvas:
           type: object
           allOf:
-          - $ref: '#/$defs/ComponentCommon'
-          - $ref: '#/$defs/CatalogComponentCommon'
-          - type: object
-            properties:
-              component:
-                const: Canvas
-              children:
-                $ref: '#/$defs/ChildList'
-            required:
-            - component
-            - children
+            - $ref: "#/$defs/ComponentCommon"
+            - $ref: "#/$defs/CatalogComponentCommon"
+            - type: object
+              properties:
+                component:
+                  const: Canvas
+                children:
+                  $ref: "#/$defs/ChildList"
+              required:
+                - component
+                - children
         Chart:
           type: object
           allOf:
-          - $ref: '#/$defs/ComponentCommon'
-          - $ref: '#/$defs/CatalogComponentCommon'
-          - type: object
-            properties:
-              component:
-                const: Chart
-              chartType:
-                enum:
-                - doughnut
-                - pie
-              title:
-                $ref: '#/$defs/DynamicString'
-              chartData:
-                $ref: '#/$defs/DynamicValue'
-            required:
-            - component
-            - chartType
-            - chartData
+            - $ref: "#/$defs/ComponentCommon"
+            - $ref: "#/$defs/CatalogComponentCommon"
+            - type: object
+              properties:
+                component:
+                  const: Chart
+                chartType:
+                  enum:
+                    - doughnut
+                    - pie
+                title:
+                  $ref: "#/$defs/DynamicString"
+                chartData:
+                  $ref: "#/$defs/DynamicValue"
+              required:
+                - component
+                - chartType
+                - chartData
         GoogleMap:
           type: object
           allOf:
-          - $ref: '#/$defs/ComponentCommon'
-          - $ref: '#/$defs/CatalogComponentCommon'
-          - type: object
-            properties:
-              component:
-                const: GoogleMap
-              center:
-                $ref: '#/$defs/DynamicValue'
-              zoom:
-                $ref: '#/$defs/DynamicNumber'
-              pins:
-                $ref: '#/$defs/DynamicValue'
-            required:
-            - component
-            - center
-            - zoom
+            - $ref: "#/$defs/ComponentCommon"
+            - $ref: "#/$defs/CatalogComponentCommon"
+            - type: object
+              properties:
+                component:
+                  const: GoogleMap
+                center:
+                  $ref: "#/$defs/DynamicValue"
+                zoom:
+                  $ref: "#/$defs/DynamicNumber"
+                pins:
+                  $ref: "#/$defs/DynamicValue"
+              required:
+                - component
+                - center
+                - zoom
       $defs:
         ComponentId:
           type: string
@@ -272,36 +272,36 @@
           type: object
           properties:
             id:
-              $ref: '#/$defs/ComponentId'
+              $ref: "#/$defs/ComponentId"
           required:
-          - id
+            - id
         ChildList:
           oneOf:
-          - type: array
-            items:
-              $ref: '#/$defs/ComponentId'
-          - type: object
-            properties:
-              componentId:
-                $ref: '#/$defs/ComponentId'
-              path:
-                type: string
-            required:
-            - componentId
-            - path
-            additionalProperties: false
+            - type: array
+              items:
+                $ref: "#/$defs/ComponentId"
+            - type: object
+              properties:
+                componentId:
+                  $ref: "#/$defs/ComponentId"
+                path:
+                  type: string
+              required:
+                - componentId
+                - path
+              additionalProperties: false
         DynamicString:
           anyOf:
-          - type: string
-          - type: object
+            - type: string
+            - type: object
         DynamicValue:
           anyOf:
-          - type: object
-          - type: array
+            - type: object
+            - type: array
         DynamicNumber:
           anyOf:
-          - type: number
-          - type: object
+            - type: number
+            - type: object
         CatalogComponentCommon:
           type: object
           properties:
@@ -309,30 +309,30 @@
               type: number
         anyComponent:
           oneOf:
-          - $ref: '#/components/Canvas'
-          - $ref: '#/components/Chart'
-          - $ref: '#/components/GoogleMap'
+            - $ref: "#/components/Canvas"
+            - $ref: "#/components/Chart"
+            - $ref: "#/components/GoogleMap"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    updateComponents:
-      surfaceId: s1
-      components:
-      - id: root
-        component: Canvas
-        children:
-        - c1
-        - c2
-      - id: c1
-        component: Canvas
-        children: []
-      - id: c2
-        component: Chart
-        chartType: doughnut
-        chartData:
-          path: /data
+    - version: v0.9
+      updateComponents:
+        surfaceId: s1
+        components:
+          - id: root
+            component: Canvas
+            children:
+              - c1
+              - c2
+          - id: c1
+            component: Canvas
+            children: []
+          - id: c2
+            component: Chart
+            chartType: doughnut
+            chartData:
+              path: /data
 
 - name: test_validate_duplicate_ids_v08
   description: Tests that duplicate IDs are detected in v0.8.
@@ -349,25 +349,25 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      root: root
-      surfaceId: test-surface
-  - surfaceUpdate:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component:
-          Text:
-            text: Root
-      - id: c1
-        component:
-          Text:
-            text: Hello
-      - id: c1
-        component:
-          Text:
-            text: World
-  expect_error: 'Duplicate component ID: c1'
+    - beginRendering:
+        root: root
+        surfaceId: test-surface
+    - surfaceUpdate:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component:
+              Text:
+                text: Root
+          - id: c1
+            component:
+              Text:
+                text: Hello
+          - id: c1
+            component:
+              Text:
+                text: World
+  expect_error: "Duplicate component ID: c1"
 
 - name: test_validate_duplicate_ids_v09
   description: Tests that duplicate IDs are detected in v0.9.
@@ -386,34 +386,34 @@
             text:
               type: string
           required:
-          - component
-          - text
+            - component
+            - text
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Text'
+            - $ref: "#/components/Text"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    createSurface:
-      surfaceId: test-surface
-      catalogId: std
-  - version: v0.9
-    updateComponents:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component: Text
-        text: Root
-      - id: c1
-        component: Text
-        text: Hello
-      - id: c1
-        component: Text
-        text: World
-  expect_error: 'Duplicate component ID: c1'
+    - version: v0.9
+      createSurface:
+        surfaceId: test-surface
+        catalogId: std
+    - version: v0.9
+      updateComponents:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component: Text
+            text: Root
+          - id: c1
+            component: Text
+            text: Hello
+          - id: c1
+            component: Text
+            text: World
+  expect_error: "Duplicate component ID: c1"
 
 - name: test_validate_missing_root_v08
   description: Tests that missing root component is detected in v0.8.
@@ -430,16 +430,16 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      root: root
-      surfaceId: test
-  - surfaceUpdate:
-      surfaceId: test
-      components:
-      - id: c1
-        component:
-          Text:
-            text: hi
+    - beginRendering:
+        root: root
+        surfaceId: test
+    - surfaceUpdate:
+        surfaceId: test
+        components:
+          - id: c1
+            component:
+              Text:
+                text: hi
   expect_error: Missing root component
 
 - name: test_validate_missing_root_v09
@@ -459,27 +459,27 @@
             text:
               type: string
           required:
-          - component
-          - text
+            - component
+            - text
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Text'
+            - $ref: "#/components/Text"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    createSurface:
-      surfaceId: test
-      catalogId: std
-  - version: v0.9
-    updateComponents:
-      surfaceId: test
-      components:
-      - id: c1
-        component: Text
-        text: hi
+    - version: v0.9
+      createSurface:
+        surfaceId: test
+        catalogId: std
+    - version: v0.9
+      updateComponents:
+        surfaceId: test
+        components:
+          - id: c1
+            component: Text
+            text: hi
   expect_error: Missing root component
 
 - name: test_validate_dangling_references_v08
@@ -504,31 +504,31 @@
               type: string
   action: validate
   steps:
-  - payload:
-    - beginRendering:
-        root: root
-        surfaceId: test-surface
-    - surfaceUpdate:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component:
-            Column:
-              children:
-              - missing
-    expect_error: references non-existent component
-  - payload:
-    - beginRendering:
-        root: root
-        surfaceId: test-surface
-    - surfaceUpdate:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component:
-            Card:
-              child: missing
-    expect_error: references non-existent component
+    - payload:
+        - beginRendering:
+            root: root
+            surfaceId: test-surface
+        - surfaceUpdate:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component:
+                  Column:
+                    children:
+                      - missing
+      expect_error: references non-existent component
+    - payload:
+        - beginRendering:
+            root: root
+            surfaceId: test-surface
+        - surfaceUpdate:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component:
+                  Card:
+                    child: missing
+      expect_error: references non-existent component
 
 - name: test_validate_dangling_references_v09
   description: Tests that dangling references are detected in v0.9.
@@ -549,8 +549,8 @@
               items:
                 type: string
           required:
-          - component
-          - children
+            - component
+            - children
         Card:
           type: object
           properties:
@@ -559,44 +559,44 @@
             child:
               type: string
           required:
-          - component
-          - child
+            - component
+            - child
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Column'
-          - $ref: '#/components/Card'
+            - $ref: "#/components/Column"
+            - $ref: "#/components/Card"
           discriminator:
             propertyName: component
   action: validate
   steps:
-  - payload:
-    - version: v0.9
-      createSurface:
-        surfaceId: test-surface
-        catalogId: std
-    - version: v0.9
-      updateComponents:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component: Column
-          children:
-          - missing
-    expect_error: references non-existent component
-  - payload:
-    - version: v0.9
-      createSurface:
-        surfaceId: test-surface
-        catalogId: std
-    - version: v0.9
-      updateComponents:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component: Card
-          child: missing
-    expect_error: references non-existent component
+    - payload:
+        - version: v0.9
+          createSurface:
+            surfaceId: test-surface
+            catalogId: std
+        - version: v0.9
+          updateComponents:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component: Column
+                children:
+                  - missing
+      expect_error: references non-existent component
+    - payload:
+        - version: v0.9
+          createSurface:
+            surfaceId: test-surface
+            catalogId: std
+        - version: v0.9
+          updateComponents:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component: Card
+                child: missing
+      expect_error: references non-existent component
 
 - name: test_validate_self_reference_v08
   description: Tests that self-references are detected in v0.8.
@@ -613,16 +613,16 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      root: root
-      surfaceId: test-surface
-  - surfaceUpdate:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component:
-          Card:
-            child: root
+    - beginRendering:
+        root: root
+        surfaceId: test-surface
+    - surfaceUpdate:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component:
+              Card:
+                child: root
   expect_error: Self-reference detected
 
 - name: test_validate_self_reference_v09
@@ -642,27 +642,27 @@
             child:
               type: string
           required:
-          - component
-          - child
+            - component
+            - child
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Card'
+            - $ref: "#/components/Card"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    createSurface:
-      surfaceId: test-surface
-      catalogId: std
-  - version: v0.9
-    updateComponents:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component: Card
-        child: root
+    - version: v0.9
+      createSurface:
+        surfaceId: test-surface
+        catalogId: std
+    - version: v0.9
+      updateComponents:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component: Card
+            child: root
   expect_error: Self-reference detected
 
 - name: test_validate_function_call_recursion_v08
@@ -682,36 +682,36 @@
               type: object
   action: validate
   payload:
-  - beginRendering:
-      root: root
-      surfaceId: test-surface
-  - surfaceUpdate:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component:
-          Button:
-            label: btn
-            action:
-              functionCall:
-                call: f0
-                args:
+    - beginRendering:
+        root: root
+        surfaceId: test-surface
+    - surfaceUpdate:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component:
+              Button:
+                label: btn
+                action:
                   functionCall:
-                    call: f1
+                    call: f0
                     args:
                       functionCall:
-                        call: f2
+                        call: f1
                         args:
                           functionCall:
-                            call: f3
+                            call: f2
                             args:
                               functionCall:
-                                call: f4
+                                call: f3
                                 args:
                                   functionCall:
-                                    call: f5
-                                    args: {}
-  expect_error: 'Recursion limit exceeded: functionCall depth > 5'
+                                    call: f4
+                                    args:
+                                      functionCall:
+                                        call: f5
+                                        args: {}
+  expect_error: "Recursion limit exceeded: functionCall depth > 5"
 
 - name: test_validate_function_call_recursion_v09
   description: Tests that function call recursion limit is exceeded in v0.9.
@@ -732,48 +732,48 @@
             action:
               type: object
           required:
-          - component
-          - text
-          - action
+            - component
+            - text
+            - action
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Button'
+            - $ref: "#/components/Button"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    createSurface:
-      surfaceId: test-surface
-      catalogId: std
-  - version: v0.9
-    updateComponents:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component: Button
-        text: btn
-        action:
-          functionCall:
-            call: f0
-            args:
+    - version: v0.9
+      createSurface:
+        surfaceId: test-surface
+        catalogId: std
+    - version: v0.9
+      updateComponents:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component: Button
+            text: btn
+            action:
               functionCall:
-                call: f1
+                call: f0
                 args:
                   functionCall:
-                    call: f2
+                    call: f1
                     args:
                       functionCall:
-                        call: f3
+                        call: f2
                         args:
                           functionCall:
-                            call: f4
+                            call: f3
                             args:
                               functionCall:
-                                call: f5
-                                args: {}
-  expect_error: 'Recursion limit exceeded: functionCall depth > 5'
+                                call: f4
+                                args:
+                                  functionCall:
+                                    call: f5
+                                    args: {}
+  expect_error: "Recursion limit exceeded: functionCall depth > 5"
 
 - name: test_validate_orphaned_component_v08
   description: Tests that orphaned components are detected in v0.8.
@@ -790,20 +790,20 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      root: root
-      surfaceId: test-surface
-  - surfaceUpdate:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component:
-          Text:
-            text: Root
-      - id: orphan
-        component:
-          Text:
-            text: Orphan
+    - beginRendering:
+        root: root
+        surfaceId: test-surface
+    - surfaceUpdate:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component:
+              Text:
+                text: Root
+          - id: orphan
+            component:
+              Text:
+                text: Orphan
   expect_error: Component 'orphan' is not reachable from 'root'
 
 - name: test_validate_orphaned_component_v09
@@ -823,30 +823,30 @@
             text:
               type: string
           required:
-          - component
-          - text
+            - component
+            - text
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Text'
+            - $ref: "#/components/Text"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    createSurface:
-      surfaceId: test-surface
-      catalogId: std
-  - version: v0.9
-    updateComponents:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component: Text
-        text: Root
-      - id: orphan
-        component: Text
-        text: Orphan
+    - version: v0.9
+      createSurface:
+        surfaceId: test-surface
+        catalogId: std
+    - version: v0.9
+      updateComponents:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component: Text
+            text: Root
+          - id: orphan
+            component: Text
+            text: Orphan
   expect_error: Component 'orphan' is not reachable from 'root'
 
 - name: test_validate_template_reachability_v08
@@ -871,39 +871,39 @@
               type: string
   action: validate
   steps:
-  - payload:
-    - beginRendering:
-        root: root
-        surfaceId: test-surface
-    - surfaceUpdate:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component:
-            Column:
-              children:
-              - template-id
-        - id: template-id
-          component:
-            Text:
-              text: Reachable
-  - payload:
-    - beginRendering:
-        root: root
-        surfaceId: test-surface
-    - surfaceUpdate:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component:
-            Column:
-              children:
-              - missing-id
-        - id: template-id
-          component:
-            Text:
-              text: Reachable
-    expect_error: references non-existent component 'missing-id'
+    - payload:
+        - beginRendering:
+            root: root
+            surfaceId: test-surface
+        - surfaceUpdate:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component:
+                  Column:
+                    children:
+                      - template-id
+              - id: template-id
+                component:
+                  Text:
+                    text: Reachable
+    - payload:
+        - beginRendering:
+            root: root
+            surfaceId: test-surface
+        - surfaceUpdate:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component:
+                  Column:
+                    children:
+                      - missing-id
+              - id: template-id
+                component:
+                  Text:
+                    text: Reachable
+      expect_error: references non-existent component 'missing-id'
 
 - name: test_validate_template_reachability_v09
   description: Tests template reachability in v0.9.
@@ -927,11 +927,11 @@
                 path:
                   type: string
               required:
-              - componentId
-              - path
+                - componentId
+                - path
           required:
-          - component
-          - children
+            - component
+            - children
         Text:
           type: object
           properties:
@@ -940,52 +940,52 @@
             text:
               type: string
           required:
-          - component
-          - text
+            - component
+            - text
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/List'
-          - $ref: '#/components/Text'
+            - $ref: "#/components/List"
+            - $ref: "#/components/Text"
           discriminator:
             propertyName: component
   action: validate
   steps:
-  - payload:
-    - version: v0.9
-      createSurface:
-        surfaceId: test-surface
-        catalogId: std
-    - version: v0.9
-      updateComponents:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component: List
-          children:
-            componentId: template-id
-            path: /items
-        - id: template-id
-          component: Text
-          text: Reachable
-  - payload:
-    - version: v0.9
-      createSurface:
-        surfaceId: test-surface
-        catalogId: std
-    - version: v0.9
-      updateComponents:
-        surfaceId: test-surface
-        components:
-        - id: root
-          component: List
-          children:
-            componentId: missing-id
-            path: /items
-        - id: template-id
-          component: Text
-          text: Reachable
-    expect_error: references non-existent component 'missing-id'
+    - payload:
+        - version: v0.9
+          createSurface:
+            surfaceId: test-surface
+            catalogId: std
+        - version: v0.9
+          updateComponents:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component: List
+                children:
+                  componentId: template-id
+                  path: /items
+              - id: template-id
+                component: Text
+                text: Reachable
+    - payload:
+        - version: v0.9
+          createSurface:
+            surfaceId: test-surface
+            catalogId: std
+        - version: v0.9
+          updateComponents:
+            surfaceId: test-surface
+            components:
+              - id: root
+                component: List
+                children:
+                  componentId: missing-id
+                  path: /items
+              - id: template-id
+                component: Text
+                text: Reachable
+      expect_error: references non-existent component 'missing-id'
 
 - name: test_validate_v08_custom_root_reachability
   description: Tests custom root reachability in v0.8.
@@ -1007,37 +1007,37 @@
               type: string
   action: validate
   steps:
-  - payload:
-    - beginRendering:
-        root: custom-root
-        surfaceId: test-surface
-    - surfaceUpdate:
-        surfaceId: test-surface
-        components:
-        - id: custom-root
-          component:
-            Text:
-              text: I am the root
-        - id: orphan
-          component:
-            Text:
-              text: I am an orphan
-    expect_error: Component 'orphan' is not reachable from 'custom-root'
-  - payload:
-    - beginRendering:
-        root: custom-root
-        surfaceId: test-surface
-    - surfaceUpdate:
-        surfaceId: test-surface
-        components:
-        - id: custom-root
-          component:
-            Card:
-              child: orphan
-        - id: orphan
-          component:
-            Text:
-              text: I am no longer an orphan
+    - payload:
+        - beginRendering:
+            root: custom-root
+            surfaceId: test-surface
+        - surfaceUpdate:
+            surfaceId: test-surface
+            components:
+              - id: custom-root
+                component:
+                  Text:
+                    text: I am the root
+              - id: orphan
+                component:
+                  Text:
+                    text: I am an orphan
+      expect_error: Component 'orphan' is not reachable from 'custom-root'
+    - payload:
+        - beginRendering:
+            root: custom-root
+            surfaceId: test-surface
+        - surfaceUpdate:
+            surfaceId: test-surface
+            components:
+              - id: custom-root
+                component:
+                  Card:
+                    child: orphan
+              - id: orphan
+                component:
+                  Text:
+                    text: I am no longer an orphan
 
 - name: test_validate_invalid_paths_v08
   description: Tests invalid paths in v0.8.
@@ -1054,12 +1054,12 @@
               type: object
   action: validate
   payload:
-  - dataModelUpdate:
-      surfaceId: surface1
-      path: /invalid/escape/~2
-      contents:
-      - key: dummy
-        valueString: data
+    - dataModelUpdate:
+        surfaceId: surface1
+        path: /invalid/escape/~2
+        contents:
+          - key: dummy
+            valueString: data
   expect_error: (Invalid path syntax|is not valid under any of the given schemas)
 
 - name: test_validate_invalid_paths_v09
@@ -1079,24 +1079,24 @@
             text:
               type: object
           required:
-          - component
-          - text
+            - component
+            - text
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Text'
+            - $ref: "#/components/Text"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    updateComponents:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component: Text
-        text:
-          path: /invalid/escape/~2
+    - version: v0.9
+      updateComponents:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component: Text
+            text:
+              path: /invalid/escape/~2
   expect_error: (Invalid path syntax|is not valid under any of the given schemas)
 
 - name: test_validate_component_nesting_depth_limit_exceeded_v08
@@ -1119,829 +1119,829 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      surfaceId: test-surface
-      root: root
-  - surfaceUpdate:
-      surfaceId: test-surface
+    - beginRendering:
+        surfaceId: test-surface
+        root: root
+    - surfaceUpdate:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component:
+              Card:
+                child: c0
+          - id: c0
+            component:
+              Card:
+                child: c1
+          - id: c1
+            component:
+              Card:
+                child: c2
+          - id: c2
+            component:
+              Card:
+                child: c3
+          - id: c3
+            component:
+              Card:
+                child: c4
+          - id: c4
+            component:
+              Card:
+                child: c5
+          - id: c5
+            component:
+              Card:
+                child: c6
+          - id: c6
+            component:
+              Card:
+                child: c7
+          - id: c7
+            component:
+              Card:
+                child: c8
+          - id: c8
+            component:
+              Card:
+                child: c9
+          - id: c9
+            component:
+              Card:
+                child: c10
+          - id: c10
+            component:
+              Card:
+                child: c11
+          - id: c11
+            component:
+              Card:
+                child: c12
+          - id: c12
+            component:
+              Card:
+                child: c13
+          - id: c13
+            component:
+              Card:
+                child: c14
+          - id: c14
+            component:
+              Card:
+                child: c15
+          - id: c15
+            component:
+              Card:
+                child: c16
+          - id: c16
+            component:
+              Card:
+                child: c17
+          - id: c17
+            component:
+              Card:
+                child: c18
+          - id: c18
+            component:
+              Card:
+                child: c19
+          - id: c19
+            component:
+              Card:
+                child: c20
+          - id: c20
+            component:
+              Card:
+                child: c21
+          - id: c21
+            component:
+              Card:
+                child: c22
+          - id: c22
+            component:
+              Card:
+                child: c23
+          - id: c23
+            component:
+              Card:
+                child: c24
+          - id: c24
+            component:
+              Card:
+                child: c25
+          - id: c25
+            component:
+              Card:
+                child: c26
+          - id: c26
+            component:
+              Card:
+                child: c27
+          - id: c27
+            component:
+              Card:
+                child: c28
+          - id: c28
+            component:
+              Card:
+                child: c29
+          - id: c29
+            component:
+              Card:
+                child: c30
+          - id: c30
+            component:
+              Card:
+                child: c31
+          - id: c31
+            component:
+              Card:
+                child: c32
+          - id: c32
+            component:
+              Card:
+                child: c33
+          - id: c33
+            component:
+              Card:
+                child: c34
+          - id: c34
+            component:
+              Card:
+                child: c35
+          - id: c35
+            component:
+              Card:
+                child: c36
+          - id: c36
+            component:
+              Card:
+                child: c37
+          - id: c37
+            component:
+              Card:
+                child: c38
+          - id: c38
+            component:
+              Card:
+                child: c39
+          - id: c39
+            component:
+              Card:
+                child: c40
+          - id: c40
+            component:
+              Card:
+                child: c41
+          - id: c41
+            component:
+              Card:
+                child: c42
+          - id: c42
+            component:
+              Card:
+                child: c43
+          - id: c43
+            component:
+              Card:
+                child: c44
+          - id: c44
+            component:
+              Card:
+                child: c45
+          - id: c45
+            component:
+              Card:
+                child: c46
+          - id: c46
+            component:
+              Card:
+                child: c47
+          - id: c47
+            component:
+              Card:
+                child: c48
+          - id: c48
+            component:
+              Card:
+                child: c49
+          - id: c49
+            component:
+              Card:
+                child: c50
+          - id: c50
+            component:
+              Card:
+                child: c51
+          - id: c51
+            component:
+              Card:
+                child: c52
+          - id: c52
+            component:
+              Card:
+                child: c53
+          - id: c53
+            component:
+              Card:
+                child: c54
+          - id: c54
+            component:
+              Card:
+                child: c55
+          - id: c55
+            component:
+              Text:
+                text: End
+  expect_error: "Global recursion limit exceeded: logical depth"
+
+- name: test_validate_recursion_limit_exceeded_v09
+  description: Tests that global recursion limit is exceeded in v0.9.
+  catalog:
+    version: "0.9"
+    common_types_schema: "test_data/simplified_common_types_v09.json"
+    s2c_schema: "test_data/simplified_s2c_v09.json"
+    catalog_schema:
+      catalogId: standard
       components:
-      - id: root
-        component:
-          Card:
+        Card:
+          type: object
+          properties:
+            component:
+              const: Card
+            child:
+              type: string
+          required:
+            - component
+            - child
+        Text:
+          type: object
+          properties:
+            component:
+              const: Text
+            text:
+              type: string
+          required:
+            - component
+            - text
+      $defs:
+        anyComponent:
+          oneOf:
+            - $ref: "#/components/Card"
+            - $ref: "#/components/Text"
+          discriminator:
+            propertyName: component
+  action: validate
+  payload:
+    - version: v0.9
+      createSurface:
+        surfaceId: test-surface
+        catalogId: std
+    - version: v0.9
+      updateComponents:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component: Card
             child: c0
-      - id: c0
-        component:
-          Card:
+          - id: c0
+            component: Card
             child: c1
-      - id: c1
-        component:
-          Card:
+          - id: c1
+            component: Card
             child: c2
-      - id: c2
-        component:
-          Card:
+          - id: c2
+            component: Card
             child: c3
-      - id: c3
-        component:
-          Card:
+          - id: c3
+            component: Card
             child: c4
-      - id: c4
-        component:
-          Card:
+          - id: c4
+            component: Card
             child: c5
-      - id: c5
-        component:
-          Card:
+          - id: c5
+            component: Card
             child: c6
-      - id: c6
-        component:
-          Card:
+          - id: c6
+            component: Card
             child: c7
-      - id: c7
-        component:
-          Card:
+          - id: c7
+            component: Card
             child: c8
-      - id: c8
-        component:
-          Card:
+          - id: c8
+            component: Card
             child: c9
-      - id: c9
-        component:
-          Card:
+          - id: c9
+            component: Card
             child: c10
-      - id: c10
-        component:
-          Card:
+          - id: c10
+            component: Card
             child: c11
-      - id: c11
-        component:
-          Card:
+          - id: c11
+            component: Card
             child: c12
-      - id: c12
-        component:
-          Card:
+          - id: c12
+            component: Card
             child: c13
-      - id: c13
-        component:
-          Card:
+          - id: c13
+            component: Card
             child: c14
-      - id: c14
-        component:
-          Card:
+          - id: c14
+            component: Card
             child: c15
-      - id: c15
-        component:
-          Card:
+          - id: c15
+            component: Card
             child: c16
-      - id: c16
-        component:
-          Card:
+          - id: c16
+            component: Card
             child: c17
-      - id: c17
-        component:
-          Card:
+          - id: c17
+            component: Card
             child: c18
-      - id: c18
-        component:
-          Card:
+          - id: c18
+            component: Card
             child: c19
-      - id: c19
-        component:
-          Card:
+          - id: c19
+            component: Card
             child: c20
-      - id: c20
-        component:
-          Card:
+          - id: c20
+            component: Card
             child: c21
-      - id: c21
-        component:
-          Card:
+          - id: c21
+            component: Card
             child: c22
-      - id: c22
-        component:
-          Card:
+          - id: c22
+            component: Card
             child: c23
-      - id: c23
-        component:
-          Card:
+          - id: c23
+            component: Card
             child: c24
-      - id: c24
-        component:
-          Card:
+          - id: c24
+            component: Card
             child: c25
-      - id: c25
-        component:
-          Card:
+          - id: c25
+            component: Card
             child: c26
-      - id: c26
-        component:
-          Card:
+          - id: c26
+            component: Card
             child: c27
-      - id: c27
-        component:
-          Card:
+          - id: c27
+            component: Card
             child: c28
-      - id: c28
-        component:
-          Card:
+          - id: c28
+            component: Card
             child: c29
-      - id: c29
-        component:
-          Card:
+          - id: c29
+            component: Card
             child: c30
-      - id: c30
-        component:
-          Card:
+          - id: c30
+            component: Card
             child: c31
-      - id: c31
-        component:
-          Card:
+          - id: c31
+            component: Card
             child: c32
-      - id: c32
-        component:
-          Card:
+          - id: c32
+            component: Card
             child: c33
-      - id: c33
-        component:
-          Card:
+          - id: c33
+            component: Card
             child: c34
-      - id: c34
-        component:
-          Card:
+          - id: c34
+            component: Card
             child: c35
-      - id: c35
-        component:
-          Card:
+          - id: c35
+            component: Card
             child: c36
-      - id: c36
-        component:
-          Card:
+          - id: c36
+            component: Card
             child: c37
-      - id: c37
-        component:
-          Card:
+          - id: c37
+            component: Card
             child: c38
-      - id: c38
-        component:
-          Card:
+          - id: c38
+            component: Card
             child: c39
-      - id: c39
-        component:
-          Card:
+          - id: c39
+            component: Card
             child: c40
-      - id: c40
-        component:
-          Card:
+          - id: c40
+            component: Card
             child: c41
-      - id: c41
-        component:
-          Card:
+          - id: c41
+            component: Card
             child: c42
-      - id: c42
-        component:
-          Card:
+          - id: c42
+            component: Card
             child: c43
-      - id: c43
-        component:
-          Card:
+          - id: c43
+            component: Card
             child: c44
-      - id: c44
-        component:
-          Card:
+          - id: c44
+            component: Card
             child: c45
-      - id: c45
-        component:
-          Card:
+          - id: c45
+            component: Card
             child: c46
-      - id: c46
-        component:
-          Card:
+          - id: c46
+            component: Card
             child: c47
-      - id: c47
-        component:
-          Card:
+          - id: c47
+            component: Card
             child: c48
-      - id: c48
-        component:
-          Card:
+          - id: c48
+            component: Card
             child: c49
-      - id: c49
-        component:
-          Card:
+          - id: c49
+            component: Card
             child: c50
-      - id: c50
-        component:
-          Card:
+          - id: c50
+            component: Card
             child: c51
-      - id: c51
-        component:
-          Card:
+          - id: c51
+            component: Card
             child: c52
-      - id: c52
-        component:
-          Card:
+          - id: c52
+            component: Card
             child: c53
-      - id: c53
-        component:
-          Card:
+          - id: c53
+            component: Card
             child: c54
-      - id: c54
-        component:
-          Card:
+          - id: c54
+            component: Card
             child: c55
-      - id: c55
-        component:
-          Text:
+          - id: c55
+            component: Text
             text: End
-  expect_error: 'Global recursion limit exceeded: logical depth'
+  expect_error: "Global recursion limit exceeded: logical depth"
 
-- name: test_validate_recursion_limit_exceeded_v09
-  description: Tests that global recursion limit is exceeded in v0.9.
+- name: test_validate_recursion_limit_valid_v08
+  description: Tests that global recursion limit is valid in v0.8.
   catalog:
-    version: "0.9"
-    common_types_schema: "test_data/simplified_common_types_v09.json"
-    s2c_schema: "test_data/simplified_s2c_v09.json"
+    version: "0.8"
+    s2c_schema: "test_data/simplified_s2c_v08.json"
     catalog_schema:
       catalogId: standard
       components:
         Card:
           type: object
           properties:
-            component:
-              const: Card
             child:
               type: string
-          required:
-          - component
-          - child
         Text:
           type: object
           properties:
-            component:
-              const: Text
             text:
               type: string
-          required:
-          - component
-          - text
-      $defs:
-        anyComponent:
-          oneOf:
-          - $ref: '#/components/Card'
-          - $ref: '#/components/Text'
-          discriminator:
-            propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    createSurface:
-      surfaceId: test-surface
-      catalogId: std
-  - version: v0.9
-    updateComponents:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component: Card
-        child: c0
-      - id: c0
-        component: Card
-        child: c1
-      - id: c1
-        component: Card
-        child: c2
-      - id: c2
-        component: Card
-        child: c3
-      - id: c3
-        component: Card
-        child: c4
-      - id: c4
-        component: Card
-        child: c5
-      - id: c5
-        component: Card
-        child: c6
-      - id: c6
-        component: Card
-        child: c7
-      - id: c7
-        component: Card
-        child: c8
-      - id: c8
-        component: Card
-        child: c9
-      - id: c9
-        component: Card
-        child: c10
-      - id: c10
-        component: Card
-        child: c11
-      - id: c11
-        component: Card
-        child: c12
-      - id: c12
-        component: Card
-        child: c13
-      - id: c13
-        component: Card
-        child: c14
-      - id: c14
-        component: Card
-        child: c15
-      - id: c15
-        component: Card
-        child: c16
-      - id: c16
-        component: Card
-        child: c17
-      - id: c17
-        component: Card
-        child: c18
-      - id: c18
-        component: Card
-        child: c19
-      - id: c19
-        component: Card
-        child: c20
-      - id: c20
-        component: Card
-        child: c21
-      - id: c21
-        component: Card
-        child: c22
-      - id: c22
-        component: Card
-        child: c23
-      - id: c23
-        component: Card
-        child: c24
-      - id: c24
-        component: Card
-        child: c25
-      - id: c25
-        component: Card
-        child: c26
-      - id: c26
-        component: Card
-        child: c27
-      - id: c27
-        component: Card
-        child: c28
-      - id: c28
-        component: Card
-        child: c29
-      - id: c29
-        component: Card
-        child: c30
-      - id: c30
-        component: Card
-        child: c31
-      - id: c31
-        component: Card
-        child: c32
-      - id: c32
-        component: Card
-        child: c33
-      - id: c33
-        component: Card
-        child: c34
-      - id: c34
-        component: Card
-        child: c35
-      - id: c35
-        component: Card
-        child: c36
-      - id: c36
-        component: Card
-        child: c37
-      - id: c37
-        component: Card
-        child: c38
-      - id: c38
-        component: Card
-        child: c39
-      - id: c39
-        component: Card
-        child: c40
-      - id: c40
-        component: Card
-        child: c41
-      - id: c41
-        component: Card
-        child: c42
-      - id: c42
-        component: Card
-        child: c43
-      - id: c43
-        component: Card
-        child: c44
-      - id: c44
-        component: Card
-        child: c45
-      - id: c45
-        component: Card
-        child: c46
-      - id: c46
-        component: Card
-        child: c47
-      - id: c47
-        component: Card
-        child: c48
-      - id: c48
-        component: Card
-        child: c49
-      - id: c49
-        component: Card
-        child: c50
-      - id: c50
-        component: Card
-        child: c51
-      - id: c51
-        component: Card
-        child: c52
-      - id: c52
-        component: Card
-        child: c53
-      - id: c53
-        component: Card
-        child: c54
-      - id: c54
-        component: Card
-        child: c55
-      - id: c55
-        component: Text
-        text: End
-  expect_error: 'Global recursion limit exceeded: logical depth'
+    - beginRendering:
+        surfaceId: test-surface
+        root: root
+    - surfaceUpdate:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component:
+              Card:
+                child: c0
+          - id: c0
+            component:
+              Card:
+                child: c1
+          - id: c1
+            component:
+              Card:
+                child: c2
+          - id: c2
+            component:
+              Card:
+                child: c3
+          - id: c3
+            component:
+              Card:
+                child: c4
+          - id: c4
+            component:
+              Card:
+                child: c5
+          - id: c5
+            component:
+              Card:
+                child: c6
+          - id: c6
+            component:
+              Card:
+                child: c7
+          - id: c7
+            component:
+              Card:
+                child: c8
+          - id: c8
+            component:
+              Card:
+                child: c9
+          - id: c9
+            component:
+              Card:
+                child: c10
+          - id: c10
+            component:
+              Card:
+                child: c11
+          - id: c11
+            component:
+              Card:
+                child: c12
+          - id: c12
+            component:
+              Card:
+                child: c13
+          - id: c13
+            component:
+              Card:
+                child: c14
+          - id: c14
+            component:
+              Card:
+                child: c15
+          - id: c15
+            component:
+              Card:
+                child: c16
+          - id: c16
+            component:
+              Card:
+                child: c17
+          - id: c17
+            component:
+              Card:
+                child: c18
+          - id: c18
+            component:
+              Card:
+                child: c19
+          - id: c19
+            component:
+              Card:
+                child: c20
+          - id: c20
+            component:
+              Card:
+                child: c21
+          - id: c21
+            component:
+              Card:
+                child: c22
+          - id: c22
+            component:
+              Card:
+                child: c23
+          - id: c23
+            component:
+              Card:
+                child: c24
+          - id: c24
+            component:
+              Card:
+                child: c25
+          - id: c25
+            component:
+              Card:
+                child: c26
+          - id: c26
+            component:
+              Card:
+                child: c27
+          - id: c27
+            component:
+              Card:
+                child: c28
+          - id: c28
+            component:
+              Card:
+                child: c29
+          - id: c29
+            component:
+              Card:
+                child: c30
+          - id: c30
+            component:
+              Card:
+                child: c31
+          - id: c31
+            component:
+              Card:
+                child: c32
+          - id: c32
+            component:
+              Card:
+                child: c33
+          - id: c33
+            component:
+              Card:
+                child: c34
+          - id: c34
+            component:
+              Card:
+                child: c35
+          - id: c35
+            component:
+              Card:
+                child: c36
+          - id: c36
+            component:
+              Card:
+                child: c37
+          - id: c37
+            component:
+              Card:
+                child: c38
+          - id: c38
+            component:
+              Card:
+                child: c39
+          - id: c39
+            component:
+              Card:
+                child: c40
+          - id: c40
+            component:
+              Text:
+                text: End
 
-- name: test_validate_recursion_limit_valid_v08
-  description: Tests that global recursion limit is valid in v0.8.
+- name: test_validate_recursion_limit_valid_v09
+  description: Tests that global recursion limit is valid in v0.9.
   catalog:
-    version: "0.8"
-    s2c_schema: "test_data/simplified_s2c_v08.json"
+    version: "0.9"
+    common_types_schema: "test_data/simplified_common_types_v09.json"
+    s2c_schema: "test_data/simplified_s2c_v09.json"
     catalog_schema:
       catalogId: standard
       components:
         Card:
           type: object
           properties:
+            component:
+              const: Card
             child:
               type: string
+          required:
+            - component
+            - child
         Text:
           type: object
           properties:
+            component:
+              const: Text
             text:
               type: string
+          required:
+            - component
+            - text
+      $defs:
+        anyComponent:
+          oneOf:
+            - $ref: "#/components/Card"
+            - $ref: "#/components/Text"
+          discriminator:
+            propertyName: component
   action: validate
   payload:
-  - beginRendering:
-      surfaceId: test-surface
-      root: root
-  - surfaceUpdate:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component:
-          Card:
+    - version: v0.9
+      createSurface:
+        surfaceId: test-surface
+        catalogId: std
+    - version: v0.9
+      updateComponents:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component: Card
             child: c0
-      - id: c0
-        component:
-          Card:
+          - id: c0
+            component: Card
             child: c1
-      - id: c1
-        component:
-          Card:
+          - id: c1
+            component: Card
             child: c2
-      - id: c2
-        component:
-          Card:
+          - id: c2
+            component: Card
             child: c3
-      - id: c3
-        component:
-          Card:
+          - id: c3
+            component: Card
             child: c4
-      - id: c4
-        component:
-          Card:
+          - id: c4
+            component: Card
             child: c5
-      - id: c5
-        component:
-          Card:
+          - id: c5
+            component: Card
             child: c6
-      - id: c6
-        component:
-          Card:
+          - id: c6
+            component: Card
             child: c7
-      - id: c7
-        component:
-          Card:
+          - id: c7
+            component: Card
             child: c8
-      - id: c8
-        component:
-          Card:
+          - id: c8
+            component: Card
             child: c9
-      - id: c9
-        component:
-          Card:
+          - id: c9
+            component: Card
             child: c10
-      - id: c10
-        component:
-          Card:
+          - id: c10
+            component: Card
             child: c11
-      - id: c11
-        component:
-          Card:
+          - id: c11
+            component: Card
             child: c12
-      - id: c12
-        component:
-          Card:
+          - id: c12
+            component: Card
             child: c13
-      - id: c13
-        component:
-          Card:
+          - id: c13
+            component: Card
             child: c14
-      - id: c14
-        component:
-          Card:
+          - id: c14
+            component: Card
             child: c15
-      - id: c15
-        component:
-          Card:
+          - id: c15
+            component: Card
             child: c16
-      - id: c16
-        component:
-          Card:
+          - id: c16
+            component: Card
             child: c17
-      - id: c17
-        component:
-          Card:
+          - id: c17
+            component: Card
             child: c18
-      - id: c18
-        component:
-          Card:
+          - id: c18
+            component: Card
             child: c19
-      - id: c19
-        component:
-          Card:
+          - id: c19
+            component: Card
             child: c20
-      - id: c20
-        component:
-          Card:
+          - id: c20
+            component: Card
             child: c21
-      - id: c21
-        component:
-          Card:
+          - id: c21
+            component: Card
             child: c22
-      - id: c22
-        component:
-          Card:
+          - id: c22
+            component: Card
             child: c23
-      - id: c23
-        component:
-          Card:
+          - id: c23
+            component: Card
             child: c24
-      - id: c24
-        component:
-          Card:
+          - id: c24
+            component: Card
             child: c25
-      - id: c25
-        component:
-          Card:
+          - id: c25
+            component: Card
             child: c26
-      - id: c26
-        component:
-          Card:
+          - id: c26
+            component: Card
             child: c27
-      - id: c27
-        component:
-          Card:
+          - id: c27
+            component: Card
             child: c28
-      - id: c28
-        component:
-          Card:
+          - id: c28
+            component: Card
             child: c29
-      - id: c29
-        component:
-          Card:
+          - id: c29
+            component: Card
             child: c30
-      - id: c30
-        component:
-          Card:
+          - id: c30
+            component: Card
             child: c31
-      - id: c31
-        component:
-          Card:
+          - id: c31
+            component: Card
             child: c32
-      - id: c32
-        component:
-          Card:
+          - id: c32
+            component: Card
             child: c33
-      - id: c33
-        component:
-          Card:
+          - id: c33
+            component: Card
             child: c34
-      - id: c34
-        component:
-          Card:
+          - id: c34
+            component: Card
             child: c35
-      - id: c35
-        component:
-          Card:
+          - id: c35
+            component: Card
             child: c36
-      - id: c36
-        component:
-          Card:
+          - id: c36
+            component: Card
             child: c37
-      - id: c37
-        component:
-          Card:
+          - id: c37
+            component: Card
             child: c38
-      - id: c38
-        component:
-          Card:
+          - id: c38
+            component: Card
             child: c39
-      - id: c39
-        component:
-          Card:
+          - id: c39
+            component: Card
             child: c40
-      - id: c40
-        component:
-          Text:
+          - id: c40
+            component: Text
             text: End
 
-- name: test_validate_recursion_limit_valid_v09
-  description: Tests that global recursion limit is valid in v0.9.
-  catalog:
-    version: "0.9"
-    common_types_schema: "test_data/simplified_common_types_v09.json"
-    s2c_schema: "test_data/simplified_s2c_v09.json"
-    catalog_schema:
-      catalogId: standard
-      components:
-        Card:
-          type: object
-          properties:
-            component:
-              const: Card
-            child:
-              type: string
-          required:
-          - component
-          - child
-        Text:
-          type: object
-          properties:
-            component:
-              const: Text
-            text:
-              type: string
-          required:
-          - component
-          - text
-      $defs:
-        anyComponent:
-          oneOf:
-          - $ref: '#/components/Card'
-          - $ref: '#/components/Text'
-          discriminator:
-            propertyName: component
-  action: validate
-  payload:
-  - version: v0.9
-    createSurface:
-      surfaceId: test-surface
-      catalogId: std
-  - version: v0.9
-    updateComponents:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component: Card
-        child: c0
-      - id: c0
-        component: Card
-        child: c1
-      - id: c1
-        component: Card
-        child: c2
-      - id: c2
-        component: Card
-        child: c3
-      - id: c3
-        component: Card
-        child: c4
-      - id: c4
-        component: Card
-        child: c5
-      - id: c5
-        component: Card
-        child: c6
-      - id: c6
-        component: Card
-        child: c7
-      - id: c7
-        component: Card
-        child: c8
-      - id: c8
-        component: Card
-        child: c9
-      - id: c9
-        component: Card
-        child: c10
-      - id: c10
-        component: Card
-        child: c11
-      - id: c11
-        component: Card
-        child: c12
-      - id: c12
-        component: Card
-        child: c13
-      - id: c13
-        component: Card
-        child: c14
-      - id: c14
-        component: Card
-        child: c15
-      - id: c15
-        component: Card
-        child: c16
-      - id: c16
-        component: Card
-        child: c17
-      - id: c17
-        component: Card
-        child: c18
-      - id: c18
-        component: Card
-        child: c19
-      - id: c19
-        component: Card
-        child: c20
-      - id: c20
-        component: Card
-        child: c21
-      - id: c21
-        component: Card
-        child: c22
-      - id: c22
-        component: Card
-        child: c23
-      - id: c23
-        component: Card
-        child: c24
-      - id: c24
-        component: Card
-        child: c25
-      - id: c25
-        component: Card
-        child: c26
-      - id: c26
-        component: Card
-        child: c27
-      - id: c27
-        component: Card
-        child: c28
-      - id: c28
-        component: Card
-        child: c29
-      - id: c29
-        component: Card
-        child: c30
-      - id: c30
-        component: Card
-        child: c31
-      - id: c31
-        component: Card
-        child: c32
-      - id: c32
-        component: Card
-        child: c33
-      - id: c33
-        component: Card
-        child: c34
-      - id: c34
-        component: Card
-        child: c35
-      - id: c35
-        component: Card
-        child: c36
-      - id: c36
-        component: Card
-        child: c37
-      - id: c37
-        component: Card
-        child: c38
-      - id: c38
-        component: Card
-        child: c39
-      - id: c39
-        component: Card
-        child: c40
-      - id: c40
-        component: Text
-        text: End
-
 - name: test_validate_global_recursion_limit_exceeded_v09
   description: Tests that global recursion limit is exceeded for data model in v0.9.
   catalog:
@@ -1951,121 +1951,121 @@
     catalog_schema: "test_data/simplified_catalog_v09.json"
   action: validate
   payload:
-  - version: v0.9
-    updateDataModel:
-      surfaceId: test-surface
-      value:
-        level: 0
-        next:
-          level: 1
+    - version: v0.9
+      updateDataModel:
+        surfaceId: test-surface
+        value:
+          level: 0
           next:
-            level: 2
+            level: 1
             next:
-              level: 3
+              level: 2
               next:
-                level: 4
+                level: 3
                 next:
-                  level: 5
+                  level: 4
                   next:
-                    level: 6
+                    level: 5
                     next:
-                      level: 7
+                      level: 6
                       next:
-                        level: 8
+                        level: 7
                         next:
-                          level: 9
+                          level: 8
                           next:
-                            level: 10
+                            level: 9
                             next:
-                              level: 11
+                              level: 10
                               next:
-                                level: 12
+                                level: 11
                                 next:
-                                  level: 13
+                                  level: 12
                                   next:
-                                    level: 14
+                                    level: 13
                                     next:
-                                      level: 15
+                                      level: 14
                                       next:
-                                        level: 16
+                                        level: 15
                                         next:
-                                          level: 17
+                                          level: 16
                                           next:
-                                            level: 18
+                                            level: 17
                                             next:
-                                              level: 19
+                                              level: 18
                                               next:
-                                                level: 20
+                                                level: 19
                                                 next:
-                                                  level: 21
+                                                  level: 20
                                                   next:
-                                                    level: 22
+                                                    level: 21
                                                     next:
-                                                      level: 23
+                                                      level: 22
                                                       next:
-                                                        level: 24
+                                                        level: 23
                                                         next:
-                                                          level: 25
+                                                          level: 24
                                                           next:
-                                                            level: 26
+                                                            level: 25
                                                             next:
-                                                              level: 27
+                                                              level: 26
                                                               next:
-                                                                level: 28
+                                                                level: 27
                                                                 next:
-                                                                  level: 29
+                                                                  level: 28
                                                                   next:
-                                                                    level: 30
+                                                                    level: 29
                                                                     next:
-                                                                      level: 31
+                                                                      level: 30
                                                                       next:
-                                                                        level: 32
+                                                                        level: 31
                                                                         next:
-                                                                          level: 33
+                                                                          level: 32
                                                                           next:
-                                                                            level: 34
+                                                                            level: 33
                                                                             next:
-                                                                              level: 35
+                                                                              level: 34
                                                                               next:
-                                                                                level: 36
+                                                                                level: 35
                                                                                 next:
-                                                                                  level: 37
+                                                                                  level: 36
                                                                                   next:
-                                                                                    level: 38
+                                                                                    level: 37
                                                                                     next:
-                                                                                      level: 39
+                                                                                      level: 38
                                                                                       next:
-                                                                                        level: 40
+                                                                                        level: 39
                                                                                         next:
-                                                                                          level: 41
+                                                                                          level: 40
                                                                                           next:
-                                                                                            level: 42
+                                                                                            level: 41
                                                                                             next:
-                                                                                              level: 43
+                                                                                              level: 42
                                                                                               next:
-                                                                                                level: 44
+                                                                                                level: 43
                                                                                                 next:
-                                                                                                  level: 45
+                                                                                                  level: 44
                                                                                                   next:
-                                                                                                    level: 46
+                                                                                                    level: 45
                                                                                                     next:
-                                                                                                      level: 47
+                                                                                                      level: 46
                                                                                                       next:
-                                                                                                        level: 48
+                                                                                                        level: 47
                                                                                                         next:
-                                                                                                          level: 49
+                                                                                                          level: 48
                                                                                                           next:
-                                                                                                            level: 50
+                                                                                                            level: 49
                                                                                                             next:
-                                                                                                              level: 51
+                                                                                                              level: 50
                                                                                                               next:
-                                                                                                                level: 52
+                                                                                                                level: 51
                                                                                                                 next:
-                                                                                                                  level: 53
+                                                                                                                  level: 52
                                                                                                                   next:
-                                                                                                                    level: 54
+                                                                                                                    level: 53
                                                                                                                     next:
-                                                                                                                      level: 55
+                                                                                                                      level: 54
+                                                                                                                      next:
+                                                                                                                        level: 55
   expect_error: Global recursion limit exceeded
 
 - name: test_validate_circular_reference_v09
@@ -2090,18 +2090,18 @@
           discriminator: {propertyName: "component"}
   action: validate
   payload:
-  - version: v0.9
-    createSurface: {surfaceId: "s1", catalogId: "test_catalog"}
-  - version: v0.9
-    updateComponents:
-      surfaceId: "s1"
-      components:
-        - id: "root"
-          component: "Card"
-          child: "c1"
-        - id: "c1"
-          component: "Card"
-          child: "root"
+    - version: v0.9
+      createSurface: {surfaceId: "s1", catalogId: "test_catalog"}
+    - version: v0.9
+      updateComponents:
+        surfaceId: "s1"
+        components:
+          - id: "root"
+            component: "Card"
+            child: "c1"
+          - id: "c1"
+            component: "Card"
+            child: "root"
   expect_error: Circular reference detected
 
 - name: test_validate_multi_surface_v08
@@ -2124,34 +2124,34 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      surfaceId: surface-a
-      root: root-a
-  - beginRendering:
-      surfaceId: surface-b
-      root: root-b
-  - surfaceUpdate:
-      surfaceId: surface-a
-      components:
-      - id: root-a
-        component:
-          Card:
-            child: child-a
-      - id: child-a
-        component:
-          Text:
-            text: Hello A
-  - surfaceUpdate:
-      surfaceId: surface-b
-      components:
-      - id: root-b
-        component:
-          Card:
-            child: child-b
-      - id: child-b
-        component:
-          Text:
-            text: Hello B
+    - beginRendering:
+        surfaceId: surface-a
+        root: root-a
+    - beginRendering:
+        surfaceId: surface-b
+        root: root-b
+    - surfaceUpdate:
+        surfaceId: surface-a
+        components:
+          - id: root-a
+            component:
+              Card:
+                child: child-a
+          - id: child-a
+            component:
+              Text:
+                text: Hello A
+    - surfaceUpdate:
+        surfaceId: surface-b
+        components:
+          - id: root-b
+            component:
+              Card:
+                child: child-b
+          - id: child-b
+            component:
+              Text:
+                text: Hello B
 
 - name: test_validate_multi_surface_missing_root_v08
   description: Tests that missing root in one surface still fails validation.
@@ -2168,26 +2168,26 @@
               type: string
   action: validate
   payload:
-  - beginRendering:
-      surfaceId: surface-a
-      root: root-a
-  - beginRendering:
-      surfaceId: surface-b
-      root: root-b
-  - surfaceUpdate:
-      surfaceId: surface-a
-      components:
-      - id: root-a
-        component:
-          Text:
-            text: Hello A
-  - surfaceUpdate:
-      surfaceId: surface-b
-      components:
-      - id: not-root-b
-        component:
-          Text:
-            text: Hello B
+    - beginRendering:
+        surfaceId: surface-a
+        root: root-a
+    - beginRendering:
+        surfaceId: surface-b
+        root: root-b
+    - surfaceUpdate:
+        surfaceId: surface-a
+        components:
+          - id: root-a
+            component:
+              Text:
+                text: Hello A
+    - surfaceUpdate:
+        surfaceId: surface-b
+        components:
+          - id: not-root-b
+            component:
+              Text:
+                text: Hello B
   expect_error: Missing root component.*root-b
 
 - name: test_incremental_update_no_root_v08
@@ -2210,17 +2210,17 @@
               type: string
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: contact-card
-      components:
-      - id: main_card
-        component:
-          Card:
-            child: col
-      - id: col
-        component:
-          Text:
-            text: Updated
+    - surfaceUpdate:
+        surfaceId: contact-card
+        components:
+          - id: main_card
+            component:
+              Card:
+                child: col
+          - id: col
+            component:
+              Text:
+                text: Updated
 
 - name: test_incremental_update_no_root_v09
   description: Incremental update without root component should pass (v0.9).
@@ -2239,8 +2239,8 @@
             child:
               type: string
           required:
-          - component
-          - child
+            - component
+            - child
         Text:
           type: object
           properties:
@@ -2249,27 +2249,27 @@
             text:
               type: string
           required:
-          - component
-          - text
+            - component
+            - text
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Card'
-          - $ref: '#/components/Text'
+            - $ref: "#/components/Card"
+            - $ref: "#/components/Text"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    updateComponents:
-      surfaceId: contact-card
-      components:
-      - id: card1
-        component: Card
-        child: text1
-      - id: text1
-        component: Text
-        text: Updated
+    - version: v0.9
+      updateComponents:
+        surfaceId: contact-card
+        components:
+          - id: card1
+            component: Card
+            child: text1
+          - id: text1
+            component: Text
+            text: Updated
 
 - name: test_incremental_update_orphans_allowed_v08
   description: Incremental update with 'orphaned' components should pass.
@@ -2286,17 +2286,17 @@
               type: string
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: contact-card
-      components:
-      - id: text1
-        component:
-          Text:
-            text: Hello
-      - id: text2
-        component:
-          Text:
-            text: World
+    - surfaceUpdate:
+        surfaceId: contact-card
+        components:
+          - id: text1
+            component:
+              Text:
+                text: Hello
+          - id: text2
+            component:
+              Text:
+                text: World
 
 - name: test_incremental_update_self_ref_still_fails_v08
   description: Self-references should still be caught in incremental updates (v0.8).
@@ -2313,13 +2313,13 @@
               type: string
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: s1
-      components:
-      - id: card1
-        component:
-          Card:
-            child: card1
+    - surfaceUpdate:
+        surfaceId: s1
+        components:
+          - id: card1
+            component:
+              Card:
+                child: card1
   expect_error: Self-reference detected
 
 - name: test_incremental_update_self_ref_still_fails_v09
@@ -2339,23 +2339,23 @@
             child:
               type: string
           required:
-          - component
-          - child
+            - component
+            - child
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Card'
+            - $ref: "#/components/Card"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    updateComponents:
-      surfaceId: s1
-      components:
-      - id: card1
-        component: Card
-        child: card1
+    - version: v0.9
+      updateComponents:
+        surfaceId: s1
+        components:
+          - id: card1
+            component: Card
+            child: card1
   expect_error: Self-reference detected
 
 - name: test_incremental_update_cycle_still_fails_v08
@@ -2373,17 +2373,17 @@
               type: string
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: s1
-      components:
-      - id: a
-        component:
-          Card:
-            child: b
-      - id: b
-        component:
-          Card:
-            child: a
+    - surfaceUpdate:
+        surfaceId: s1
+        components:
+          - id: a
+            component:
+              Card:
+                child: b
+          - id: b
+            component:
+              Card:
+                child: a
   expect_error: Circular reference detected
 
 - name: test_incremental_update_cycle_still_fails_v09
@@ -2403,26 +2403,26 @@
             child:
               type: string
           required:
-          - component
-          - child
+            - component
+            - child
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Card'
+            - $ref: "#/components/Card"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    updateComponents:
-      surfaceId: s1
-      components:
-      - id: a
-        component: Card
-        child: b
-      - id: b
-        component: Card
-        child: a
+    - version: v0.9
+      updateComponents:
+        surfaceId: s1
+        components:
+          - id: a
+            component: Card
+            child: b
+          - id: b
+            component: Card
+            child: a
   expect_error: Circular reference detected
 
 - name: test_incremental_update_duplicates_still_fail_v08
@@ -2440,17 +2440,17 @@
               type: string
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: s1
-      components:
-      - id: text1
-        component:
-          Text:
-            text: A
-      - id: text1
-        component:
-          Text:
-            text: B
+    - surfaceUpdate:
+        surfaceId: s1
+        components:
+          - id: text1
+            component:
+              Text:
+                text: A
+          - id: text1
+            component:
+              Text:
+                text: B
   expect_error: Duplicate component ID
 
 - name: test_incremental_update_duplicates_still_fail_v09
@@ -2470,26 +2470,26 @@
             text:
               type: string
           required:
-          - component
-          - text
+            - component
+            - text
       $defs:
         anyComponent:
           oneOf:
-          - $ref: '#/components/Text'
+            - $ref: "#/components/Text"
           discriminator:
             propertyName: component
   action: validate
   payload:
-  - version: v0.9
-    updateComponents:
-      surfaceId: s1
-      components:
-      - id: text1
-        component: Text
-        text: A
-      - id: text1
-        component: Text
-        text: B
+    - version: v0.9
+      updateComponents:
+        surfaceId: s1
+        components:
+          - id: text1
+            component: Text
+            text: A
+          - id: text1
+            component: Text
+            text: B
   expect_error: Duplicate component ID
 
 - name: test_validate_global_recursion_limit_exceeded_v08
@@ -2505,126 +2505,126 @@
           additionalProperties: true
   action: validate
   payload:
-  - beginRendering:
-      surfaceId: test-surface
-      root: root
-  - surfaceUpdate:
-      surfaceId: test-surface
-      components:
-      - id: root
-        component:
-          DeepComp:
-            level: 0
-            next:
-              level: 1
-              next:
-                level: 2
+    - beginRendering:
+        surfaceId: test-surface
+        root: root
+    - surfaceUpdate:
+        surfaceId: test-surface
+        components:
+          - id: root
+            component:
+              DeepComp:
+                level: 0
                 next:
-                  level: 3
+                  level: 1
                   next:
-                    level: 4
+                    level: 2
                     next:
-                      level: 5
+                      level: 3
                       next:
-                        level: 6
+                        level: 4
                         next:
-                          level: 7
+                          level: 5
                           next:
-                            level: 8
+                            level: 6
                             next:
-                              level: 9
+                              level: 7
                               next:
-                                level: 10
+                                level: 8
                                 next:
-                                  level: 11
+                                  level: 9
                                   next:
-                                    level: 12
+                                    level: 10
                                     next:
-                                      level: 13
+                                      level: 11
                                       next:
-                                        level: 14
+                                        level: 12
                                         next:
-                                          level: 15
+                                          level: 13
                                           next:
-                                            level: 16
+                                            level: 14
                                             next:
-                                              level: 17
+                                              level: 15
                                               next:
-                                                level: 18
+                                                level: 16
                                                 next:
-                                                  level: 19
+                                                  level: 17
                                                   next:
-                                                    level: 20
+                                                    level: 18
                                                     next:
-                                                      level: 21
+                                                      level: 19
                                                       next:
-                                                        level: 22
+                                                        level: 20
                                                         next:
-                                                          level: 23
+                                                          level: 21
                                                           next:
-                                                            level: 24
+                                                            level: 22
                                                             next:
-                                                              level: 25
+                                                              level: 23
                                                               next:
-                                                                level: 26
+                                                                level: 24
                                                                 next:
-                                                                  level: 27
+                                                                  level: 25
                                                                   next:
-                                                                    level: 28
+                                                                    level: 26
                                                                     next:
-                                                                      level: 29
+                                                                      level: 27
                                                                       next:
-                                                                        level: 30
+                                                                        level: 28
                                                                         next:
-                                                                          level: 31
+                                                                          level: 29
                                                                           next:
-                                                                            level: 32
+                                                                            level: 30
                                                                             next:
-                                                                              level: 33
+                                                                              level: 31
                                                                               next:
-                                                                                level: 34
+                                                                                level: 32
                                                                                 next:
-                                                                                  level: 35
+                                                                                  level: 33
                                                                                   next:
-                                                                                    level: 36
+                                                                                    level: 34
                                                                                     next:
-                                                                                      level: 37
+                                                                                      level: 35
                                                                                       next:
-                                                                                        level: 38
+                                                                                        level: 36
                                                                                         next:
-                                                                                          level: 39
+                                                                                          level: 37
                                                                                           next:
-                                                                                            level: 40
+                                                                                            level: 38
                                                                                             next:
-                                                                                              level: 41
+                                                                                              level: 39
                                                                                               next:
-                                                                                                level: 42
+                                                                                                level: 40
                                                                                                 next:
-                                                                                                  level: 43
+                                                                                                  level: 41
                                                                                                   next:
-                                                                                                    level: 44
+                                                                                                    level: 42
                                                                                                     next:
-                                                                                                      level: 45
+                                                                                                      level: 43
                                                                                                       next:
-                                                                                                        level: 46
+                                                                                                        level: 44
                                                                                                         next:
-                                                                                                          level: 47
+                                                                                                          level: 45
                                                                                                           next:
-                                                                                                            level: 48
+                                                                                                            level: 46
                                                                                                             next:
-                                                                                                              level: 49
+                                                                                                              level: 47
                                                                                                               next:
-                                                                                                                level: 50
+                                                                                                                level: 48
                                                                                                                 next:
-                                                                                                                  level: 51
+                                                                                                                  level: 49
                                                                                                                   next:
-                                                                                                                    level: 52
+                                                                                                                    level: 50
                                                                                                                     next:
-                                                                                                                      level: 53
+                                                                                                                      level: 51
                                                                                                                       next:
-                                                                                                                        level: 54
+                                                                                                                        level: 52
                                                                                                                         next:
-                                                                                                                          level: 55
+                                                                                                                          level: 53
+                                                                                                                          next:
+                                                                                                                            level: 54
+                                                                                                                            next:
+                                                                                                                              level: 55
   expect_error: Global recursion limit exceeded
 
 - name: test_validate_invalid_child_type
@@ -2642,13 +2642,13 @@
               type: string
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: s1
-      components:
-      - id: c1
-        component:
-          Container:
-            child: 123
+    - surfaceUpdate:
+        surfaceId: s1
+        components:
+          - id: c1
+            component:
+              Container:
+                child: 123
   expect_error: "123 is not of type 'string'"
 
 - name: test_custom_catalog_validation_success_v09
@@ -2673,13 +2673,13 @@
           discriminator: {propertyName: "component"}
   action: validate
   payload:
-  - version: "v0.9"
-    updateComponents:
-      surfaceId: "s1"
-      components:
-      - id: "root"
-        component: "Text"
-        text: "hello"
+    - version: "v0.9"
+      updateComponents:
+        surfaceId: "s1"
+        components:
+          - id: "root"
+            component: "Text"
+            text: "hello"
 
 - name: test_custom_catalog_validation_success_v08
   description: Tests validation success with a custom catalog in v0.8.
@@ -2695,13 +2695,13 @@
             text: {type: string}
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: "s1"
-      components:
-      - id: "root"
-        component:
-          Text:
-            text: "hello"
+    - surfaceUpdate:
+        surfaceId: "s1"
+        components:
+          - id: "root"
+            component:
+              Text:
+                text: "hello"
 
 - name: test_custom_catalog_validation_failure_v08
   description: Tests validation failure with a custom catalog in v0.8.
@@ -2717,13 +2717,13 @@
             text: {type: string}
   action: validate
   payload:
-  - surfaceUpdate:
-      surfaceId: "s1"
-      components:
-        - id: "root"
-          component:
-             Text:
-              text: 123
+    - surfaceUpdate:
+        surfaceId: "s1"
+        components:
+          - id: "root"
+            component:
+              Text:
+                text: 123
   expect_error: "123 is not of type 'string'"
 
 - name: test_custom_catalog_validation_failure_v09
@@ -2748,11 +2748,11 @@
           discriminator: {propertyName: "component"}
   action: validate
   payload:
-  - version: "v0.9"
-    updateComponents:
-      surfaceId: "s1"
-      components:
-        - id: "root"
-          component: "Text"
-          text: 123
+    - version: "v0.9"
+      updateComponents:
+        surfaceId: "s1"
+        components:
+          - id: "root"
+            component: "Text"
+            text: 123
   expect_error: "123 is not of type 'string'"
diff --git a/agent_sdks/python/README.md b/agent_sdks/python/README.md
index 6eb2ff538..e00d62c9e 100644
--- a/agent_sdks/python/README.md
+++ b/agent_sdks/python/README.md
@@ -9,29 +9,29 @@ The following directories contain the base protocol logic, parsing, and schema o
 
 ### Schema Management (`src/a2ui/schema`)
 
-* **`manager.py`**: The `A2uiSchemaManager` handles loading specification
+- **`manager.py`**: The `A2uiSchemaManager` handles loading specification
   schemas, managing catalogs, and generating system prompts for LLMs.
-* **`validator.py`**: Implements `A2uiValidator` for validating A2UI messages
+- **`validator.py`**: Implements `A2uiValidator` for validating A2UI messages
   against JSON schemas and protocol rules.
-* **`catalog.py`**: Defines `A2uiCatalog` and `CatalogConfig` for handling
+- **`catalog.py`**: Defines `A2uiCatalog` and `CatalogConfig` for handling
   component libraries.
 
 ### Parser (`src/a2ui/parser`)
 
-* **`parser.py`**: Implementation of `parse_response` for synchronous parsing.
-* **`streaming.py`**: Incremental streaming parsers with automatic JSON healing and validation.
-* **`payload_fixer.py`**: Utilities to automatically correct common LLM output
+- **`parser.py`**: Implementation of `parse_response` for synchronous parsing.
+- **`streaming.py`**: Incremental streaming parsers with automatic JSON healing and validation.
+- **`payload_fixer.py`**: Utilities to automatically correct common LLM output
   issues in A2UI payloads.
 
 ## Basic Catalog (`src/a2ui/basic_catalog`)
 
-* **`provider.py`**: Implementation of `BasicCatalog` for handling the basic
+- **`provider.py`**: Implementation of `BasicCatalog` for handling the basic
   A2UI components.
 
 ## A2A (`src/a2ui/a2a`)
 
-* **`extension.py`**: Utilities for managing the A2UI extension URI and activation logic.
-* **`parts.py`**: Utilities for creating A2A Parts with A2UI data and helpers for response parsing.
+- **`extension.py`**: Utilities for managing the A2UI extension URI and activation logic.
+- **`parts.py`**: Utilities for creating A2A Parts with A2UI data and helpers for response parsing.
 
 ## ADK Extensions (`src/a2ui/adk`)
 
@@ -39,7 +39,7 @@ Support for
 the [Agent Development Kit (ADK)](https://github.com/google/adk-python) and A2A
 protocol.
 
-* **`send_a2ui_to_client_toolset.py`**: Implementation of
+- **`send_a2ui_to_client_toolset.py`**: Implementation of
   `SendA2uiToClientToolset` to enable agents to send UI to clients via tool
   calls.
 
diff --git a/agent_sdks/python/agent_development.md b/agent_sdks/python/agent_development.md
index 04bb588b5..63eafae78 100644
--- a/agent_sdks/python/agent_development.md
+++ b/agent_sdks/python/agent_development.md
@@ -8,11 +8,11 @@ message validation for A2A (Agent-to-Agent/Agent-to-Client) communication.
 
 The `agent_sdk` revolves around three main classes:
 
-* **`CatalogConfig`**: Defines the metadata for a component catalog (name,
+- **`CatalogConfig`**: Defines the metadata for a component catalog (name,
   schema path, examples path).
-* **`A2uiCatalog`**: Represents a processed catalog, providing methods for
+- **`A2uiCatalog`**: Represents a processed catalog, providing methods for
   validation and LLM instruction rendering.
-* **`A2uiSchemaManager`**: The central coordinator that loads catalogs, manages
+- **`A2uiSchemaManager`**: The central coordinator that loads catalogs, manages
   versioning, and generates system prompts.
 
 ## Prerequisites
@@ -188,10 +188,11 @@ yield {
 
 ##### Option B: Incremental Streaming Parsing (Advanced)
 
-Use this approach for sub-second UI updates. The `A2uiStreamParser` **automatically parses, validates, and fixes (heals)** the JSON payload chunks *incrementally* as they arrive from the LLM stream. It yields valid UI messages *before* the entire JSON block is complete by automatically closing open quotes and braces.
+Use this approach for sub-second UI updates. The `A2uiStreamParser` **automatically parses, validates, and fixes (heals)** the JSON payload chunks _incrementally_ as they arrive from the LLM stream. It yields valid UI messages _before_ the entire JSON block is complete by automatically closing open quotes and braces.
 
 > [!IMPORTANT]
 > **Prerequisite**: To use incremental streaming, your agent executor must support streaming mode. In ADK, enable this using `RunConfig`:
+>
 > ```python
 > run_config=run_config.RunConfig(
 >     streaming_mode=run_config.StreamingMode.SSE
@@ -208,7 +209,7 @@ parser = A2uiStreamParser(catalog=selected_catalog)
 for chunk in llm_response_stream:
     # Process text chunks as they arrive
     response_parts = parser.process_chunk(chunk.text)
-    
+
     for part in response_parts:
         if part.a2ui_json:
             # Yield partial UI updates immediately
@@ -330,7 +331,6 @@ When the LLM calls the UI tool, the toolset uses the dynamic catalog to:
 3. **Validate Payloads**: Validate the LLM's generated JSON against the specific
    `A2uiCatalog` object's validator.
 
-
 ### 3. Multiple Version Support
 
 To support multiple protocol versions (e.g., v0.8 and v0.9), pre-configure `A2uiSchemaManager` and `LlmAgent` instances for each version during your agent's initialization. At runtime, use `try_activate_a2ui_extension` to negotiate the version and select the pre-configured schema manager or runner.
@@ -397,6 +397,3 @@ agent_card = AgentCard(
     )
 )
 ```
-
-
-
diff --git a/docs/composer.md b/docs/composer.md
index 44f9be31c..f1e3521f3 100644
--- a/docs/composer.md
+++ b/docs/composer.md
@@ -15,4 +15,4 @@ The Widget Builder enables you to:
 - View real-time previews.
 - Copy the generated JSON for use in agents.
 
-Built by the [CopilotKit](https://www.copilotkit.ai/) team.
\ No newline at end of file
+Built by the [CopilotKit](https://www.copilotkit.ai/) team.
diff --git a/docs/concepts/actions.md b/docs/concepts/actions.md
index ac262d9e0..b60c0d832 100644
--- a/docs/concepts/actions.md
+++ b/docs/concepts/actions.md
@@ -21,13 +21,14 @@ Functions execute immediate behavior on the renderer without a network round-tri
   "action": {
     "functionCall": {
       "call": "openUrl",
-      "args": { "url": "https://a2ui.org/help" }
+      "args": {"url": "https://a2ui.org/help"}
     }
   }
 }
 ```
 
 Common uses for Functions include:
+
 - **Navigation**: Opening a URL or switching tabs.
 - **Validation**: Checking inputs before submission (see Checks below).
 
@@ -46,8 +47,8 @@ Components like `Button` expose an `action` property. Here is how an Event is wi
     "event": {
       "name": "submit_reservation",
       "context": {
-        "time": { "path": "/reservationTime" },
-        "size": { "path": "/partySize" }
+        "time": {"path": "/reservationTime"},
+        "size": {"path": "/partySize"}
       }
     }
   }
@@ -55,11 +56,10 @@ Components like `Button` expose an `action` property. Here is how an Event is wi
 ```
 
 - **`name`**: A stable identifier for the agent to switch on.
-- **`context`**: A map of key-value pairs. Values can be literal or use a `path` to pull from the current state of the data model. 
+- **`context`**: A map of key-value pairs. Values can be literal or use a `path` to pull from the current state of the data model.
 
 NOTE: **Context vs. Data Model**: While the Data Model represents the entire state tree of a surface, the `context` in an action is effectively a hand-picked **"view"** or subset of that state. This simplifies the Agent's job by providing exactly the values needed for a specific event, without requiring the Agent to navigate a potentially large and complex data model.
 
-
 ### Basic Catalog Function Validation (Checks)
 
 The basic catalog defines a limited set of checks that can be performed on the renderer. Interactive components can define a list of `checks` (using the [`Checkable`](../../specification/v0_9/json/common_types.json#L258-L270) schema in `common_types.json`). For a `Button`, if any check fails, the button is **automatically disabled** on the renderer.
@@ -77,12 +77,12 @@ This allows the UI to enforce requirements (like a non-empty field) before the u
     {
       "condition": {
         "call": "required",
-        "args": { "value": { "path": "/partySize" } }
+        "args": {"value": {"path": "/partySize"}}
       },
       "message": "Party size is required"
     }
   ],
-  "action": { "event": { "name": "submit_booking" } }
+  "action": {"event": {"name": "submit_booking"}}
 }
 ```
 
@@ -203,7 +203,7 @@ In an A2A (Agent-to-Agent) binding, the data model is placed in an `a2uiClientDa
 
 ```json
 {
-  "parts": [{ "text": "Submit the reservation" }],
+  "parts": [{"text": "Submit the reservation"}],
   "metadata": {
     "a2uiClientDataModel": {
       "version": "v0.9",
@@ -322,10 +322,10 @@ When the renderer sends an `action` back to the orchestrator, the orchestrator l
 async def handle_incoming_action(payload, session):
     action = payload.get("action")
     surface_id = action.get("surfaceId")
-    
+
     # Lookup the owning agent
     target_agent = session.state.get(f"owner_of_{surface_id}")
-    
+
     if target_agent:
         # Programmatically route the request to the sub-agent
         return transfer_to(target_agent)
@@ -344,14 +344,14 @@ This is best implemented in an outbound metadata interceptor:
 async def intercept(self, request_payload, target_agent, session):
     message = request_payload["params"]["message"]
     data_model = message.get("metadata", {}).get("a2uiClientDataModel")
-    
+
     if data_model:
         # Filter surfaces to only those owned by the target_agent
         filtered_surfaces = {
             surface_id: state for surface_id, state in data_model["surfaces"].items()
             if session.state.get(f"owner_of_{surface_id}") == target_agent.name
         }
-        
+
         # Replace with the stripped data model
         message["metadata"]["a2uiClientDataModel"]["surfaces"] = filtered_surfaces
 
@@ -371,6 +371,7 @@ CAUTION: **Security Risk: State Scraping**: If an Orchestrator fails to strip th
 This example shows a button that explicitly gathers the data it needs to send.
 
 **Component Definition:**
+
 ```json
 {
   "id": "submit-button",
@@ -380,8 +381,8 @@ This example shows a button that explicitly gathers the data it needs to send.
     "event": {
       "name": "submit_booking",
       "context": {
-        "partySize": { "path": "/partySize" },
-        "reservationTime": { "path": "/reservationTime" }
+        "partySize": {"path": "/partySize"},
+        "reservationTime": {"path": "/reservationTime"}
       }
     }
   }
@@ -414,7 +415,7 @@ The renderer sends an A2A message containing the user's text and the data model
 
 ```json
 {
-  "parts": [{ "text": "Okay, submit the form" }],
+  "parts": [{"text": "Okay, submit the form"}],
   "metadata": {
     "a2uiClientDataModel": {
       "version": "v0.9",
diff --git a/docs/concepts/catalogs.md b/docs/concepts/catalogs.md
index fa943bec1..0bc11a883 100644
--- a/docs/concepts/catalogs.md
+++ b/docs/concepts/catalogs.md
@@ -43,9 +43,7 @@ A catalog schema is a [JSON Schema file](../../specification/v0_9/json/client_ca
         }
       }
     },
-    "required": [
-      "catalogId"
-    ],
+    "required": ["catalogId"],
     "additionalProperties": false
   }
 }
@@ -61,7 +59,7 @@ Whether you are building a simple prototype or a complex production application,
 
 To help developers get started quickly, the A2UI team maintains the [Basic Catalog](../../specification/v0_9/json/basic_catalog.json).
 
-This is a pre-defined catalog file that contains a standard set of general-purpose components (Buttons, Inputs, Cards) and functions. It is not a special "type" of catalog; it is simply a version of a catalog that we have already written and have open source renderers for. 
+This is a pre-defined catalog file that contains a standard set of general-purpose components (Buttons, Inputs, Cards) and functions. It is not a special "type" of catalog; it is simply a version of a catalog that we have already written and have open source renderers for.
 
 The basic catalog allows you to bootstrap an application or validate A2UI concepts without needing to write your own schema from scratch. It is intentionally sparse to remain easily implementable by different renderers.
 
@@ -111,9 +109,7 @@ Here is a simple catalog defining a single component.
           "default": "#f0f0f0"
         }
       },
-      "required": [
-        "message"
-      ]
+      "required": ["message"]
     }
   }
 }
@@ -149,9 +145,9 @@ When the agent uses that catalog, it generates a payload strictly conforming to
 
 ### Freestanding Catalogs
 
-A2UI Catalogs must be standalone (no references to external files) to simplify LLM inference and dependency management. 
+A2UI Catalogs must be standalone (no references to external files) to simplify LLM inference and dependency management.
 
-While the final catalog must be freestanding, you may still author your catalogs modularly using JSON Schema `$ref` pointing to external documents during local development. Run  `tools/build_catalog/assemble_catalog.py` before distributing your catalog to bundle all external file references into a single, independent JSON Schema file:
+While the final catalog must be freestanding, you may still author your catalogs modularly using JSON Schema `$ref` pointing to external documents during local development. Run `tools/build_catalog/assemble_catalog.py` before distributing your catalog to bundle all external file references into a single, independent JSON Schema file:
 
 ```bash
 uv run tools/build_catalog/assemble_catalog.py [INPUTS ...] --output-name <OUTPUT_NAME> [--catalog-id <ID>] [--version <VERSION>] [--extend-basic-catalog] [--out-dir <DIR>] [--verbose]
@@ -159,18 +155,18 @@ uv run tools/build_catalog/assemble_catalog.py [INPUTS ...] --output-name <OUTPU
 
 where:
 
-* `inputs`: One or more paths or URLs to A2UI component catalog JSONs.
-* `--output-name`: (Required) The desired name of the combined catalog (e.g.
+- `inputs`: One or more paths or URLs to A2UI component catalog JSONs.
+- `--output-name`: (Required) The desired name of the combined catalog (e.g.
   `my_merged_catalog`). The `.json` extension is appended automatically if
   omitted.
-* `--catalog-id`: Custom `catalogId` for the output. Defaults to `urn:a2ui:catalog:<base_name>`.
-* `--version`: The A2UI specification version to use for official catalog
+- `--catalog-id`: Custom `catalogId` for the output. Defaults to `urn:a2ui:catalog:<base_name>`.
+- `--version`: The A2UI specification version to use for official catalog
   fallbacks. Choices are `0.9` or `0.10`. Defaults to `0.9`.
-* `--extend-basic-catalog`: If passed, automatically includes the entirety of
+- `--extend-basic-catalog`: If passed, automatically includes the entirety of
   `basic_catalog.json` in the root output regardless of whether the input
   catalogs explicitly reference it.
-* `--out-dir`, `-o`: The directory where the assembled catalog will be saved. Defaults to `dist`.
-* `--verbose`, `-v`: If passed, enables verbose debug logging to help diagnose issues.
+- `--out-dir`, `-o`: The directory where the assembled catalog will be saved. Defaults to `dist`.
+- `--verbose`, `-v`: If passed, enables verbose debug logging to help diagnose issues.
 
 ### Composition & Imports
 
@@ -185,7 +181,7 @@ This catalog imports all elements from the Basic Catalog and adds a new `Suggest
   "$id": "https://github.com/.../hello_world_with_all_basic/v1/catalog.json",
   "components": {
     "allOf": [
-      { "$ref": "basic_catalog_definition.json#/components" },
+      {"$ref": "basic_catalog_definition.json#/components"},
       {
         "SuggestionChips": {
           "type": "object",
@@ -196,7 +192,7 @@ This catalog imports all elements from the Basic Catalog and adds a new `Suggest
               "description": "The suggested prompts."
             }
           },
-          "required": [ "suggestions" ]
+          "required": ["suggestions"]
         }
       }
     ]
@@ -215,15 +211,15 @@ This catalog imports only `Text` from the Basic Catalog to build a simple Popup
   "$id": "https://github.com/.../hello_world_with_some_basic/v1/catalog.json",
   "components": {
     "allOf": [
-      { "$ref": "basic_catalog.json#/components/Text" },
+      {"$ref": "basic_catalog.json#/components/Text"},
       {
-        "Popup": { 
+        "Popup": {
           "type": "object",
           "description": "A modal overlay that displays an icon and text.",
           "properties": {
-            "text": { "$ref": "common_types.json#/$defs/ComponentId" }
+            "text": {"$ref": "common_types.json#/$defs/ComponentId"}
           },
-          "required": [ "text" ]
+          "required": ["text"]
         }
       }
     ]
@@ -240,29 +236,32 @@ Client renderers implement the catalog by mapping the schema definition to actua
 Example typescript renderer for the hello world catalog
 
 ```typescript
-import { Catalog, DEFAULT_CATALOG } from '@a2ui/angular'; 
-import { inputBinding } from '@angular/core'; 
-
-export const RIZZ_CHARTS_CATALOG = {   
-  ...DEFAULT_CATALOG, // Include the basic catalog   
-  HelloWorldBanner: {     
-    type: () => import('./hello_world_banner').then((r) => r.HelloWorldBanner),     
-    bindings: ({ properties }) => [       
-      inputBinding('message', () => ('message' in properties && properties['message']) || undefined)
-    ],   
-  }, 
+import {Catalog, DEFAULT_CATALOG} from '@a2ui/angular';
+import {inputBinding} from '@angular/core';
+
+export const RIZZ_CHARTS_CATALOG = {
+  ...DEFAULT_CATALOG, // Include the basic catalog
+  HelloWorldBanner: {
+    type: () => import('./hello_world_banner').then(r => r.HelloWorldBanner),
+    bindings: ({properties}) => [
+      inputBinding(
+        'message',
+        () => ('message' in properties && properties['message']) || undefined,
+      ),
+    ],
+  },
 } as Catalog;
 ```
 
 and the hello_world_banner implementation
 
 ```typescript
-import { DynamicComponent } from '@a2ui/angular';
-import { Component, Input } from '@angular/core';
+import {DynamicComponent} from '@a2ui/angular';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'hello-world-banner',
-  imports: [], 
+  imports: [],
   template: `
     <div>
       <h2>Hello World Banner</h2>
@@ -281,7 +280,7 @@ You can see a working example of a client renderer in the [Rizzcharts demo](../.
 
 Because clients and agents can support multiple catalogs, they must agree on which catalog to use through a catalog negotiation handshake.
 
-### Step 1: Agent advertises its support catalogs (optional) 
+### Step 1: Agent advertises its support catalogs (optional)
 
 The agent may optionally advertise which catalogs it is capable of speaking (e.g., in the A2A Agent Card). This is informational; it helps the client know if the agent supports their specific features, but the client doesn’t have to use it.
 
@@ -355,9 +354,9 @@ A2UI component catalogs require versioning because catalog definitions are often
 
 The `catalogId` is a unique text identifier used for negotiation between the client and the agent.
 
-* **Format:** While the `catalogId` is technically a string, the A2UI convention is to use a **URI** (e.g., `https://example.com/catalogs/mysurface/v1/catalog.json`).  
-* **Purpose:** We use URIs to make the ID globally unique and easy for human developers to inspect in a browser.  
-* **No Runtime Fetching:** This URI does not imply that the agent or client downloads the catalog at runtime. **The catalog definition must be known to the agent and client beforehand (at compile/deploy time)**. The URI serves only as a stable identifier.
+- **Format:** While the `catalogId` is technically a string, the A2UI convention is to use a **URI** (e.g., `https://example.com/catalogs/mysurface/v1/catalog.json`).
+- **Purpose:** We use URIs to make the ID globally unique and easy for human developers to inspect in a browser.
+- **No Runtime Fetching:** This URI does not imply that the agent or client downloads the catalog at runtime. **The catalog definition must be known to the agent and client beforehand (at compile/deploy time)**. The URI serves only as a stable identifier.
 
 ### Versioning Guidelines
 
@@ -365,20 +364,20 @@ To support continuous evolution without breaking older clients or agents, A2UI c
 
 While standard JSON parsers ignore unknown fields, dropping a component in a Server-Driven UI can drop its entire view tree. To balance safety and flexibility, updates are split into **Breaking** and **Non-Breaking** categories, relying on **Graceful Degradation** to absorb version lags.
 
-*   **Breaking Changes (Major Version Bump Required)**  
-    Any change that alters structure in a way that cannot be safely ignored by older clients incrementing the **Major** version in the `catalogId` URI (e.g., `v1` to `v2`).
-    *   **Adding a container component:** e.g., adding a `Grid` or `Accordion` component. If an older client ignores a container, it will drop all of its children, breaking the UI tree.
-    *   **Removing a container component:** e.g., removing a `Grid` or `Accordion` component. If an older agent uses the container it would be ignored by the client, and the client would drop all of its children, breaking the UI tree.
-    *   **Changing field types:** e.g., changing a property from a `string` to an `object`. This will fail JSON Schema validation on older clients.
-    *   **Adding a required property:** without a default value, as older agents won't know to send it.
-
-*   **Non-Breaking Changes (Allowable under Major Version)**  
-    Changes that can be safely ignored or degrade gracefully without breaking the layout or data model can stay at the current version.
-    *   **Adding a leaf component (non-container):** e.g., adding `Badge` or `Tooltip`. If ignored, the layout remains intact.
-    *   **Adding an optional property:** e.g., adding `subtitle` to a Card.
-    *   **Removing a property:** Safe for the client to ignore if the agent stops sending it.
-    *   **Adding new functions or styles:** These can generally be ignored without changing the semantic meaning of the component.
-    *   **Metadata Changes:** Updating `description` fields or fixing typos in docs requires no version bump and has no impact on runtime.
+- **Breaking Changes (Major Version Bump Required)**  
+  Any change that alters structure in a way that cannot be safely ignored by older clients incrementing the **Major** version in the `catalogId` URI (e.g., `v1` to `v2`).
+  - **Adding a container component:** e.g., adding a `Grid` or `Accordion` component. If an older client ignores a container, it will drop all of its children, breaking the UI tree.
+  - **Removing a container component:** e.g., removing a `Grid` or `Accordion` component. If an older agent uses the container it would be ignored by the client, and the client would drop all of its children, breaking the UI tree.
+  - **Changing field types:** e.g., changing a property from a `string` to an `object`. This will fail JSON Schema validation on older clients.
+  - **Adding a required property:** without a default value, as older agents won't know to send it.
+
+- **Non-Breaking Changes (Allowable under Major Version)**  
+  Changes that can be safely ignored or degrade gracefully without breaking the layout or data model can stay at the current version.
+  - **Adding a leaf component (non-container):** e.g., adding `Badge` or `Tooltip`. If ignored, the layout remains intact.
+  - **Adding an optional property:** e.g., adding `subtitle` to a Card.
+  - **Removing a property:** Safe for the client to ignore if the agent stops sending it.
+  - **Adding new functions or styles:** These can generally be ignored without changing the semantic meaning of the component.
+  - **Metadata Changes:** Updating `description` fields or fixing typos in docs requires no version bump and has no impact on runtime.
 
 ### Graceful Degradation
 
@@ -388,15 +387,15 @@ While standard JSON parsers ignore unknown fields, dropping a component in a Ser
 
 Here is how catalog version mismatches are handled in practice:
 
-*   **An old iOS client is using an older catalog than the agent**
-    *   The agent sends a new component `Badge` that the old iOS client doesn't know about. The client renders a generic textbox placeholder or safe text description for it, keeping the rest of the interface functional.
-    *   The agent sends a new property `badge` on a `Button` that an old client doesn't know about. The client safely ignores it and renders the standard button.
-    *   The agent no longer sends the `Facepile` component that was removed in a later catalog version. This causes no issues for the client.
+- **An old iOS client is using an older catalog than the agent**
+  - The agent sends a new component `Badge` that the old iOS client doesn't know about. The client renders a generic textbox placeholder or safe text description for it, keeping the rest of the interface functional.
+  - The agent sends a new property `badge` on a `Button` that an old client doesn't know about. The client safely ignores it and renders the standard button.
+  - The agent no longer sends the `Facepile` component that was removed in a later catalog version. This causes no issues for the client.
 
-*   **A web client rolls out a new catalog version ahead of the agent**
-    *   The web client supports the new `Badge` component, but the agent doesn't know about it yet.
-    *   The web client removed the `badge` property on `Button`, so it ignores it if the agent sends it.
-    *   The web client added new styles for `Button` that the agent doesn't know about. Again this causes no issues as the agent doesn't use them.
+- **A web client rolls out a new catalog version ahead of the agent**
+  - The web client supports the new `Badge` component, but the agent doesn't know about it yet.
+  - The web client removed the `badge` property on `Button`, so it ignores it if the agent sends it.
+  - The web client added new styles for `Button` that the agent doesn't know about. Again this causes no issues as the agent doesn't use them.
 
 ### Versioning with CatalogId
 
@@ -413,22 +412,22 @@ We recommend including the version in the catalogId. This allows using A2UI cata
 
 To upgrade a catalog without breaking active agents, use A2UI Catalog Negotiation:
 
-1. **Client Update:** The client updates its list of supportedCatalogIds to include *both* the old and new versions (e.g., [".../v2/...", ".../v1/..."]).  
-2. **Agent Update:** Agents are rebuilt with the v2 schema. When they see the client supports v2, they prefer it.  
+1. **Client Update:** The client updates its list of supportedCatalogIds to include _both_ the old and new versions (e.g., [".../v2/...", ".../v1/..."]).
+2. **Agent Update:** Agents are rebuilt with the v2 schema. When they see the client supports v2, they prefer it.
 3. **Legacy Support:** Older agents that have not yet been rebuilt will continue to match against v1 in the client's list, ensuring they remain functional.
 
-## A2UI Schema Validation & Fallback 
+## A2UI Schema Validation & Fallback
 
 To ensure a stable user experience, A2UI employs a two-phase validation strategy. This "defense in depth" approach catches errors as early as possible while ensuring clients remain robust when facing unexpected payloads.
 
 ### Two-Phase Validation
 
-1. **Agent-Side (Pre-Send):** Before transmitting any UI payload, the agent runtime validates the generated JSON against the catalog definition.  
-   * Purpose: To catch hallucinated properties or malformed structures at the source.  
-   * Outcome: If validation fails, the agent can attempt to fix or regenerate the A2UI JSON, or it can do graceful degradation such as falling back to text in a conversational app.  
-2. **Client-Side:** Upon receiving the payload, the client library validates the JSON against its local definition of the catalog.  
-   * Purpose: Security and stability. This ensures that the code executing on the user's device strictly conforms to the expected contract, protecting against version mismatches or compromised agent outputs.  
-   * Outcome: Failures here are reported back to the agent using the “error” client message
+1. **Agent-Side (Pre-Send):** Before transmitting any UI payload, the agent runtime validates the generated JSON against the catalog definition.
+   - Purpose: To catch hallucinated properties or malformed structures at the source.
+   - Outcome: If validation fails, the agent can attempt to fix or regenerate the A2UI JSON, or it can do graceful degradation such as falling back to text in a conversational app.
+2. **Client-Side:** Upon receiving the payload, the client library validates the JSON against its local definition of the catalog.
+   - Purpose: Security and stability. This ensures that the code executing on the user's device strictly conforms to the expected contract, protecting against version mismatches or compromised agent outputs.
+   - Outcome: Failures here are reported back to the agent using the “error” client message
 
 ### Graceful Degradation
 
@@ -436,8 +435,8 @@ Even if a payload passes schema validation, the renderer may encounter runtime i
 
 Clients should not crash when encountering these errors. Instead, they should employ Graceful Degradation:
 
-* **Unknown Components:** If a component is recognized in the schema but not implemented in the renderer, render a "safe" fallback (e.g., a generic card with the component's debug name) or skip rendering that specific node entirely.  
-* **Text Fallback:** If the entire surface fails to render, display the raw text description (if available) or a generic error message: *"This interface could not be displayed."*
+- **Unknown Components:** If a component is recognized in the schema but not implemented in the renderer, render a "safe" fallback (e.g., a generic card with the component's debug name) or skip rendering that specific node entirely.
+- **Text Fallback:** If the entire surface fails to render, display the raw text description (if available) or a generic error message: _"This interface could not be displayed."_
 
 ### Client-to-Server Error Reporting
 
diff --git a/docs/concepts/components.md b/docs/concepts/components.md
index 50c207a5c..8cb28a44e 100644
--- a/docs/concepts/components.md
+++ b/docs/concepts/components.md
@@ -180,6 +180,7 @@ For the complete component gallery with examples, see [Component Reference](../r
 ## Static vs. Dynamic Children
 
 **Static (`explicitList`)** - Fixed list of child IDs:
+
 ```json
 {
   "children": {
@@ -189,6 +190,7 @@ For the complete component gallery with examples, see [Component Reference](../r
 ```
 
 **Dynamic (`template`)** - Generate children from data array:
+
 ```json
 {
   "children": {
diff --git a/docs/concepts/data-binding.md b/docs/concepts/data-binding.md
index a23d97746..bc8fd353c 100644
--- a/docs/concepts/data-binding.md
+++ b/docs/concepts/data-binding.md
@@ -10,6 +10,7 @@ A2UI separates:
 2. **Application State** (Data Model): What data it displays
 
 This enables:
+
 - Reactive updates.
 - Data-driven UIs.
 - Reusable templates.
@@ -105,7 +106,7 @@ Components bound to data paths automatically update when the data changes:
   "id": "status",
   "component": {
     "Text": {
-      "text": { "path": "/order/status" }
+      "text": {"path": "/order/status"}
     }
   }
 }
@@ -137,11 +138,12 @@ Use templates to render arrays:
 ```
 
 **Data:**
+
 ```json
 {
   "products": [
-    { "name": "Widget", "price": 9.99 },
-    { "name": "Gadget", "price": 19.99 }
+    {"name": "Widget", "price": 9.99},
+    {"name": "Gadget", "price": 19.99}
   ]
 }
 ```
@@ -157,7 +159,7 @@ Inside a template, paths are scoped to the array item:
   "id": "product-name",
   "component": {
     "Text": {
-      "text": { "path": "/name" }
+      "text": {"path": "/name"}
     }
   }
 }
@@ -172,32 +174,32 @@ Adding/removing items automatically updates the rendered components.
 
 Interactive components update the data model bidirectionally:
 
-| Component | Example | User Action | Data Update |
-|-----------|---------|-------------|-------------|
-| **TextField** | `{"text": {"path": "/form/name"}}` | Types "Alice" | `/form/name` = "Alice" |
-| **CheckBox** | `{"value": {"path": "/form/agreed"}}` | Checks box | `/form/agreed` = true |
+| Component          | Example                                     | User Action      | Data Update              |
+| ------------------ | ------------------------------------------- | ---------------- | ------------------------ |
+| **TextField**      | `{"text": {"path": "/form/name"}}`          | Types "Alice"    | `/form/name` = "Alice"   |
+| **CheckBox**       | `{"value": {"path": "/form/agreed"}}`       | Checks box       | `/form/agreed` = true    |
 | **MultipleChoice** | `{"selections": {"path": "/form/country"}}` | Selects "Canada" | `/form/country` = ["ca"] |
 
 ## Best Practices
 
 - **Use granular updates**: Update only changed paths.
+
   ```json
   {
     "dataModelUpdate": {
       "path": "/user",
-      "contents": [
-        { "key": "name", "valueString": "Alice" }
-      ]
+      "contents": [{"key": "name", "valueString": "Alice"}]
     }
   }
   ```
 
 - **Organize by domain**: Group related data.
+
   ```json
   {"user": {...}, "cart": {...}, "ui": {...}}
   ```
 
 - **Pre-compute display values**: Formats data (currency, dates) on the agent before sending.
   ```json
-  {"price": "$19.99"}  // Not: {"price": 19.99}
+  {"price": "$19.99"} // Not: {"price": 19.99}
   ```
diff --git a/docs/concepts/overview.md b/docs/concepts/overview.md
index 794f564ce..7fb2d8d8b 100644
--- a/docs/concepts/overview.md
+++ b/docs/concepts/overview.md
@@ -15,12 +15,15 @@ A2UI is built around three core ideas:
 ## Key Topics
 
 ### [Data Flow](data-flow.md)
+
 How messages travel from agents to rendered UI. Includes a complete lifecycle example of a restaurant booking flow, transport options (SSE, WebSockets, A2A), progressive rendering, and error handling.
 
 ### [Component Structure](components.md)
+
 A2UI's **adjacency list model** for representing component hierarchies. Learn why flat lists are better than nested trees, how to use static vs. dynamic children, and best practices for incremental updates.
 
 ### [Data Binding](data-binding.md)
+
 How components connect to application state using JSON Pointer paths. Covers reactive components, dynamic lists, input bindings, and the separation of structure from state that makes A2UI powerful.
 
 ## Message Types
diff --git a/docs/concepts/transports.md b/docs/concepts/transports.md
index 2e9bfaa1c..7017b2b89 100644
--- a/docs/concepts/transports.md
+++ b/docs/concepts/transports.md
@@ -16,18 +16,18 @@ A2UI defines a sequence of JSON messages. The transport layer is responsible for
 
 ## Available Transports
 
-| Transport | Status | Use Case |
-|-----------|--------|----------|
-| **A2A Protocol** | ✅ Stable | Multi-agent systems, enterprise meshes |
-| **AG UI** | ✅ Stable | Full-stack React applications |
-| **REST API** | 📋 Planned | Simple HTTP endpoints |
-| **WebSockets** | 💡 Proposed | Real-time bidirectional |
-| **SSE (Server-Sent Events)** | 💡 Proposed | Web streaming |
+| Transport                    | Status      | Use Case                               |
+| ---------------------------- | ----------- | -------------------------------------- |
+| **A2A Protocol**             | ✅ Stable   | Multi-agent systems, enterprise meshes |
+| **AG UI**                    | ✅ Stable   | Full-stack React applications          |
+| **REST API**                 | 📋 Planned  | Simple HTTP endpoints                  |
+| **WebSockets**               | 💡 Proposed | Real-time bidirectional                |
+| **SSE (Server-Sent Events)** | 💡 Proposed | Web streaming                          |
 
 ## A2A Protocol
 
 The [Agent2Agent (A2A) protocol](https://a2a-protocol.org) provides secure,
-standardized agent communication.  An A2A extension provides easy integration with A2UI.
+standardized agent communication. An A2A extension provides easy integration with A2UI.
 
 **Benefits:**
 
@@ -72,4 +72,4 @@ You can use any transport that sends JSON:
 ## Next Steps
 
 - **[A2A Protocol Docs](https://a2a-protocol.org)**: Learn about A2A
-- **[A2A Extension Spec](../specification/v0.8-a2a-extension.md)**: A2UI + A2A details
\ No newline at end of file
+- **[A2A Extension Spec](../specification/v0.8-a2a-extension.md)**: A2UI + A2A details
diff --git a/docs/ecosystem/a2ui-in-the-world.md b/docs/ecosystem/a2ui-in-the-world.md
index 236cb977b..a8601ba2b 100644
--- a/docs/ecosystem/a2ui-in-the-world.md
+++ b/docs/ecosystem/a2ui-in-the-world.md
@@ -83,6 +83,7 @@ ADK integrated the A2UI v0.8 standard catalog to automatically render spec-compl
 - **Agent SDK**: The [A2UI Python agent SDK](https://github.com/google/A2UI/tree/main/agent_sdks/python) provides an ADK extension for generating A2UI from agents.
 
 **Try it:**
+
 - [ADK Documentation](https://google.github.io/adk-docs/)
 - [ADK Web](https://github.com/google/adk-web) (developer UI with A2UI support)
 - [Agent Development Guide](../guides/agent-development.md) (building A2UI agents with ADK)
@@ -165,19 +166,19 @@ The A2UI community is building exciting projects:
 ### Open Source Examples
 
 - **Restaurant Finder** ([samples/agent/adk/restaurant_finder](https://github.com/google/A2UI/tree/main/samples/agent/adk/restaurant_finder))
-    - Table reservation with dynamic forms
-    - Gemini-powered agent
-    - Full source code available
+  - Table reservation with dynamic forms
+  - Gemini-powered agent
+  - Full source code available
 
 - **Contact Lookup** ([samples/agent/adk/contact_lookup](https://github.com/google/A2UI/tree/main/samples/agent/adk/contact_lookup))
-    - Search interface with results list
-    - A2A agent example
-    - Demonstrates data binding
+  - Search interface with results list
+  - A2A agent example
+  - Demonstrates data binding
 
 - **Component Gallery** ([samples/client/angular - gallery mode](https://github.com/google/A2UI/tree/main/samples/client/angular))
-    - Interactive showcase of all components
-    - Live examples with code
-    - Great for learning
+  - Interactive showcase of all components
+  - Live examples with code
+  - Great for learning
 
 ### Third-Party Integrations
 
diff --git a/docs/ecosystem/renderers.md b/docs/ecosystem/renderers.md
index b228f8bdc..f6a3f2bd2 100644
--- a/docs/ecosystem/renderers.md
+++ b/docs/ecosystem/renderers.md
@@ -10,15 +10,14 @@ Community and third-party A2UI renderer implementations.
 
 ## Community Renderers
 
-| Renderer | Platform | v0.8 | v0.9 | Activity | Links |
-|----------|----------|------|------|----------|-------|
-| **easyops-cn/a2ui-sdk** (`@a2ui-sdk/react`) | React (Web) | ✅ | ❌ | ![Stars](https://img.shields.io/github/stars/easyops-cn/a2ui-sdk?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/easyops-cn/a2ui-sdk?style=flat-square&label=updated) | [GitHub](https://github.com/easyops-cn/a2ui-sdk) · [npm](https://www.npmjs.com/package/@a2ui-sdk/react) · [Docs](https://a2ui-sdk.js.org/) |
-| **lmee/A2UI-Android** | Android (Compose) | ✅ | ❌ | ![Stars](https://img.shields.io/github/stars/lmee/A2UI-Android?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/lmee/A2UI-Android?style=flat-square&label=updated) | [GitHub](https://github.com/lmee/A2UI-Android) |
-| **sivamrudram-eng/a2ui-react-native** | React Native | ✅ | ❌ | ![Stars](https://img.shields.io/github/stars/sivamrudram-eng/a2ui-react-native?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/sivamrudram-eng/a2ui-react-native?style=flat-square&label=updated) | [GitHub](https://github.com/sivamrudram-eng/a2ui-react-native) |
-| **zhama/a2ui** | React (Web) | ✅ | ❌ | — | [npm](https://www.npmjs.com/package/@zhama/a2ui) |
-| **jem-computer/A2UI-react** | React (Web) | ✅ | ❌ | ![Stars](https://img.shields.io/github/stars/jem-computer/A2UI-react?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/jem-computer/A2UI-react?style=flat-square&label=updated) | [GitHub](https://github.com/jem-computer/A2UI-react) |
-| **BBC6BAE9/a2ui-swift** | Apple (iOS, iPadOS, macOS, tvOS, watchOS, visionOS) | ✅ | ✅ | ![Stars](https://img.shields.io/github/stars/BBC6BAE9/a2ui-swift?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/BBC6BAE9/a2ui-swift?style=flat-square&label=updated) | [GitHub](https://github.com/BBC6BAE9/a2ui-swift) |
-
+| Renderer                                    | Platform                                            | v0.8 | v0.9 | Activity                                                                                                                                                                                                                               | Links                                                                                                                                      |
+| ------------------------------------------- | --------------------------------------------------- | ---- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| **easyops-cn/a2ui-sdk** (`@a2ui-sdk/react`) | React (Web)                                         | ✅   | ❌   | ![Stars](https://img.shields.io/github/stars/easyops-cn/a2ui-sdk?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/easyops-cn/a2ui-sdk?style=flat-square&label=updated)                             | [GitHub](https://github.com/easyops-cn/a2ui-sdk) · [npm](https://www.npmjs.com/package/@a2ui-sdk/react) · [Docs](https://a2ui-sdk.js.org/) |
+| **lmee/A2UI-Android**                       | Android (Compose)                                   | ✅   | ❌   | ![Stars](https://img.shields.io/github/stars/lmee/A2UI-Android?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/lmee/A2UI-Android?style=flat-square&label=updated)                                 | [GitHub](https://github.com/lmee/A2UI-Android)                                                                                             |
+| **sivamrudram-eng/a2ui-react-native**       | React Native                                        | ✅   | ❌   | ![Stars](https://img.shields.io/github/stars/sivamrudram-eng/a2ui-react-native?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/sivamrudram-eng/a2ui-react-native?style=flat-square&label=updated) | [GitHub](https://github.com/sivamrudram-eng/a2ui-react-native)                                                                             |
+| **zhama/a2ui**                              | React (Web)                                         | ✅   | ❌   | —                                                                                                                                                                                                                                      | [npm](https://www.npmjs.com/package/@zhama/a2ui)                                                                                           |
+| **jem-computer/A2UI-react**                 | React (Web)                                         | ✅   | ❌   | ![Stars](https://img.shields.io/github/stars/jem-computer/A2UI-react?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/jem-computer/A2UI-react?style=flat-square&label=updated)                     | [GitHub](https://github.com/jem-computer/A2UI-react)                                                                                       |
+| **BBC6BAE9/a2ui-swift**                     | Apple (iOS, iPadOS, macOS, tvOS, watchOS, visionOS) | ✅   | ✅   | ![Stars](https://img.shields.io/github/stars/BBC6BAE9/a2ui-swift?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/BBC6BAE9/a2ui-swift?style=flat-square&label=updated)                             | [GitHub](https://github.com/BBC6BAE9/a2ui-swift)                                                                                           |
 
 ### Notable Mentions
 
@@ -32,8 +31,8 @@ These projects are early-stage or experimental:
 
 These projects are not directly A2UI renderers but are closely related and do support A2UI:
 
-| Project | Platform | Description | Links |
-|---------|----------|-------------|-------|
+| Project                                        | Platform                                | Description                                                                                                                                                                                              | Links                                                                                                                                            |
+| ---------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **vercel-labs/json-render** (`@json-render/*`) | React, Vue, Svelte, Solid, React Native | Generative UI framework by Vercel — uses its own JSON schema (not A2UI protocol) with Zod-based component catalogs. Supports streaming, 36 pre-built shadcn/ui components, and cross-platform rendering. | [GitHub](https://github.com/vercel-labs/json-render) · [npm](https://www.npmjs.com/package/@json-render/core) · [Docs](https://json-render.dev/) |
 
 ### Highlights
diff --git a/docs/glossary.md b/docs/glossary.md
index f77820a84..8dba207f2 100644
--- a/docs/glossary.md
+++ b/docs/glossary.md
@@ -7,11 +7,12 @@ Terms, required by A2UI protocol.
 ### A2UI agent and A2UI renderer
 
 The A2UI protocol enables conversation between **agent** and **renderer**:
+
 1. **Renderer** provides **UI capabilities** in the form of A2UI catalog and **instructions** on how to use it.
 2. **Agent** iterates on the loop:
-    - Provides **UI** and **functions** to call, taking into account the received catalog
-    - Receives **user input**, communicated by renderer
-    - Updates **data** to show in UI
+   - Provides **UI** and **functions** to call, taking into account the received catalog
+   - Receives **user input**, communicated by renderer
+   - Updates **data** to show in UI
 
 ![agent and renderer](assets/agent-and-renderer.png)
 
@@ -19,7 +20,7 @@ While the protocol is designed for **AI-empowered agents**, it can work with det
 
 In case the agent is stateless or does not guarantee to preserve the catalog, the renderer should provide the catalog with every message.
 
-And, sometimes, an agent is using a predefined catalog, thus forcing the renderers to either support this catalog or use an adapter. 
+And, sometimes, an agent is using a predefined catalog, thus forcing the renderers to either support this catalog or use an adapter.
 
 ### GenUI Component
 
@@ -28,16 +29,16 @@ UI component, allowed for use by agent. Examples: date picker, carousel, button,
 ### Catalog
 
 1. Itemized renderer capabilities:
-    - List of components that the agent can use to generate UI
-    - List of functions that can be invoked by renderer
-    - Styles and themes
+   - List of components that the agent can use to generate UI
+   - List of functions that can be invoked by renderer
+   - Styles and themes
 2. Explanation on how the renderer capabilities should be used.
 
 It is observed that depending on use case, catalog components may be more or less specific to domain:
 
 - **Less specific**:
 
-  Basic UI primitives like buttons, labels, rows, columns, option-selectors and so on. 
+  Basic UI primitives like buttons, labels, rows, columns, option-selectors and so on.
 
 - **More specific**:
 
@@ -89,34 +90,31 @@ There are options for A2UI agent:
 Functionality of A2UI renderer consists of layers that can be developed separately and reused:
 
 - **Core Library**:
-  
+
   Set of primitives, needed to describe catalog and to interact with the agent.
 
   For example, see the [JavaScript web core library](../renderers/web_core/README.md).
 
 - **Catalog Schema**:
-  
+
   Definition of catalog in the form of JSON.
 
   For example, see the [basic catalog schema](../specification/v0_10/json/basic_catalog.json).
 
 - **Framework adapter**:<a id="fw-adapter"></a>
-  
+
   Code that implements the execution of the agent’s instructions in a concrete framework. For example:
-  
   - JavaScript core and catalogs may be adapted to Angular, Electron, React and Lit frameworks.
   - Dart core and catalogs may be adapted to Flutter and Jaspr frameworks.
 
   See the [Angular adapter](../renderers/angular/README.md).
 
 - **Catalog Implementation**:
-  
+
   Implementation of the catalog schema for a framework.
 
   For example:
-  
   - See the [Angular implementation of the basic catalog](../renderers/angular/src/v0_9/catalog/basic)
-  
 
 ```mermaid
 flowchart TD;
@@ -173,6 +171,7 @@ See the [example in common types](../specification/v0_9/json/common_types.json#L
 ### Action
 
 A container for an interaction triggered by the user in the UI. Actions come in two types:
+
 - **Event**: Dispatched to the agent for processing (e.g., clicking "Submit").
 - **Function**: Executed locally on the renderer (e.g., opening a URL).
 
diff --git a/docs/guides/a2ui-in-mcp-apps.md b/docs/guides/a2ui-in-mcp-apps.md
index 982a3989a..8d940dbac 100644
--- a/docs/guides/a2ui-in-mcp-apps.md
+++ b/docs/guides/a2ui-in-mcp-apps.md
@@ -1,7 +1,6 @@
 # A2UI Dynamic Rendering within MCP Applications
 
-This guide shows you how to serve rich, interactive A2UI interfaces within [MCP Apps](https://modelcontextprotocol.io/extensions/apps/overview) using Tools and Embedded Resources. By the end, you'll have a working MCP server that returns an MCP App which can render A2UI components and handle A2UI interactions. By supporting native A2UI within MCP Apps, your MCP server can securely collaborate with remote agents while maintaining consistency over UI styling. 
-
+This guide shows you how to serve rich, interactive A2UI interfaces within [MCP Apps](https://modelcontextprotocol.io/extensions/apps/overview) using Tools and Embedded Resources. By the end, you'll have a working MCP server that returns an MCP App which can render A2UI components and handle A2UI interactions. By supporting native A2UI within MCP Apps, your MCP server can securely collaborate with remote agents while maintaining consistency over UI styling.
 
 ## Prerequisites
 
@@ -21,20 +20,20 @@ The system consists of three main actors interacting through a chain of communic
 2.  **MCP Application (Sandboxed)**: The untrusted third-party web application (e.g., a Lit or Angular micro-app) running inside a double-iframe sandbox. This app contains the A2UI surface.
 3.  **MCP Server**: The backend server providing the application resources and handling tool calls.
 
-
 ## Deep Dive: The Communication Flow
 
 A key aspect of this pattern is that the **MCP App** renders the A2UI payloads directly, rather than relying on the Client Host Application to do so.
 
 ### Loading A2UI Components in MCP Apps
+
 Here is the sequence of events for dynamically loading A2UI components into MCP Apps:
 
 1.  **Trigger**: The MCP App decides it needs to fetch or update UI content (e.g., on initialization or via a user-initiated Action).
 2.  **Request**: The MCP App sends a JSON-RPC request to the Host via `window.parent.postMessage`.
-    *   *Example Method*: `ui/fetch_counter_a2ui`
+    - _Example Method_: `ui/fetch_counter_a2ui`
 3.  **Relay**: The Sandbox Proxy relays this message to the Client Host.
 4.  **MCP Call**: The Client Host translates this custom message into a standard MCP `tools/call` request to the MCP Server.
-    *   *Example Tool*: `fetch_counter_a2ui`
+    - _Example Tool_: `fetch_counter_a2ui`
 5.  **Response**: The MCP Server executes the tool and returns a result containing an `application/json+a2ui` resource.
 6.  **Response forwarding**: The Host receives the tool result and forwards it back down through the Sandbox Proxy to the MCP App.
 7.  **Rendering**: The MCP App extracts the A2UI JSON payload from the resource and feeds it into its local A2UI `MessageProcessor`, which updates the A2UI surface dynamically.
@@ -48,7 +47,7 @@ Interactivity within the rendered A2UI surface is handled by reversing the flow:
 3.  The MCP App captures this event via the A2UI `MessageProcessor.events` subscription.
 4.  The MCP App packages the action and sends it as a JSON-RPC message to the Host (e.g., `ui/increase_counter`).
 5.  The Host calls the corresponding tool on the MCP Server.
-6. The Server returns a new A2UI payload (representing the updated state), which is piped back to the MCP App to update the rendering.
+6.  The Server returns a new A2UI payload (representing the updated state), which is piped back to the MCP App to update the rendering.
 
 ### Sequence Diagram
 
@@ -106,7 +105,7 @@ MCP Apps are typically delivered as a single HTML resource from the MCP Server.
 3.  This produces a self-contained HTML file that can be safely loaded via `srcdoc` in the restricted iframe.
 
 !!! tip "Using Vite to inline "
-     If your project uses Vite (common for React, Vue, or Lit), you can achieve the same single-file output automatically using plugins like `vite-plugin-singlefile`. This eliminates the need for a custom post-build script by handling the inlining during the build process itself.
+If your project uses Vite (common for React, Vue, or Lit), you can achieve the same single-file output automatically using plugins like `vite-plugin-singlefile`. This eliminates the need for a custom post-build script by handling the inlining during the build process itself.
 
     **How to use it:**
     1.  **Install the plugin**:
@@ -117,7 +116,7 @@ MCP Apps are typically delivered as a single HTML resource from the MCP Server.
         ```typescript
         import { defineConfig } from 'vite'
         import { viteSingleFile } from 'vite-plugin-singlefile'
-        
+
             export default defineConfig({
             plugins: [viteSingleFile()],
         })
@@ -135,47 +134,48 @@ Your inlined app is now running in the sandbox. To leverage A2UI:
 
 **Example: Fetching and Rendering A2UI**
 
-
 ```typescript
 // 1. Request A2UI data from Host
-const result = await callHostMethod("ui/fetch_counter_a2ui");
+const result = await callHostMethod('ui/fetch_counter_a2ui');
 
 // 2. Find and parse the A2UI resource
-const a2uiResource = result.find(c => 
-    c.type === 'resource' && c.resource?.mimeType === 'application/json+a2ui'
+const a2uiResource = result.find(
+  c => c.type === 'resource' && c.resource?.mimeType === 'application/json+a2ui',
 );
 
 if (a2uiResource?.resource?.text) {
-    const messages = JSON.parse(a2uiResource.resource.text);
-    this.processor.processMessages(messages);
+  const messages = JSON.parse(a2uiResource.resource.text);
+  this.processor.processMessages(messages);
 }
 
-
 // Utility for JSON-RPC communication
 function callHostMethod(method: string, params: any = {}): Promise<any> {
-    return new Promise((resolve, reject) => {
-        const requestId = `${method}-${Date.now()}`;
-        
-        const handler = (event: MessageEvent) => {
-            if (event.data.id !== requestId) return;
-            window.removeEventListener('message', handler);
-            
-            if (event.data.error) {
-                reject(event.data.error);
-            } else {
-                resolve(event.data.result);
-            }
-        };
-        
-        window.addEventListener('message', handler);
-        
-        window.parent.postMessage({
-            jsonrpc: "2.0",
-            id: requestId,
-            method,
-            params
-        }, "*"); // Note: Replace "*" with explicit target origin in production
-    });
+  return new Promise((resolve, reject) => {
+    const requestId = `${method}-${Date.now()}`;
+
+    const handler = (event: MessageEvent) => {
+      if (event.data.id !== requestId) return;
+      window.removeEventListener('message', handler);
+
+      if (event.data.error) {
+        reject(event.data.error);
+      } else {
+        resolve(event.data.result);
+      }
+    };
+
+    window.addEventListener('message', handler);
+
+    window.parent.postMessage(
+      {
+        jsonrpc: '2.0',
+        id: requestId,
+        method,
+        params,
+      },
+      '*',
+    ); // Note: Replace "*" with explicit target origin in production
+  });
 }
 ```
 
@@ -187,23 +187,23 @@ To handle interactivity within the rendered A2UI surface, your MCP App must capt
 
 ```typescript
 // Subscribing to A2UI events in the MCP App ([main.ts](https://github.com/google/A2UI/blob/main/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.ts))
-this.processor.events.subscribe(async (event) => {
+this.processor.events.subscribe(async event => {
   if (!event.message.userAction) return;
-  
+
   const method = `ui/${event.message.userAction.name}`;
   const params = event.message.userAction.context;
 
   try {
-      // Translate A2UI UserAction to JSON-RPC, send to Host, and await response
-      const result = await callHostMethod(method, params);
-      
-      // Parse the updated A2UI payload and update the rendering
-      const messages = extractA2UIMessages(result);
-      if (messages) {
-          this.processor.processMessages(messages);
-      }
+    // Translate A2UI UserAction to JSON-RPC, send to Host, and await response
+    const result = await callHostMethod(method, params);
+
+    // Parse the updated A2UI payload and update the rendering
+    const messages = extractA2UIMessages(result);
+    if (messages) {
+      this.processor.processMessages(messages);
+    }
   } catch (error) {
-      console.error(`Error handling user action[${method}]:`, error);
+    console.error(`Error handling user action[${method}]:`, error);
   }
 });
 ```
@@ -212,5 +212,5 @@ This pattern enables the MCP App to serve as a dynamic interface for the MCP Ser
 
 ## Security Considerations
 
--   **Explicit Target Origin**: Always use specific target origins (e.g., `'https://trusted-host.com'`) instead of `*` when calling `postMessage` if the host origin is known. This prevents malicious iframes from intercepting your RPC requests.
--   **Null Origin Handling**: Remember that inside a strict sandbox (`sandbox="allow-scripts"` without `allow-same-origin`), `window.location.origin` will evaluate to `"null"`. You must validate incoming messages carefully by comparing `event.source` against the expected window object (e.g., `window.parent`).
\ No newline at end of file
+- **Explicit Target Origin**: Always use specific target origins (e.g., `'https://trusted-host.com'`) instead of `*` when calling `postMessage` if the host origin is known. This prevents malicious iframes from intercepting your RPC requests.
+- **Null Origin Handling**: Remember that inside a strict sandbox (`sandbox="allow-scripts"` without `allow-same-origin`), `window.location.origin` will evaluate to `"null"`. You must validate incoming messages carefully by comparing `event.source` against the expected window object (e.g., `window.parent`).
diff --git a/docs/guides/a2ui-with-any-agent-framework.md b/docs/guides/a2ui-with-any-agent-framework.md
index 7ead3e064..a684f072e 100644
--- a/docs/guides/a2ui-with-any-agent-framework.md
+++ b/docs/guides/a2ui-with-any-agent-framework.md
@@ -34,11 +34,11 @@ Turn on A2UI in `CopilotRuntime` and inject the `render_a2ui` tool so your
 agent can produce A2UI surfaces:
 
 ```ts title="app/api/copilotkit/route.ts"
-import { CopilotRuntime } from "@copilotkit/runtime";
+import {CopilotRuntime} from '@copilotkit/runtime';
 
 const runtime = new CopilotRuntime({
-  agents: { default: myAgent },
-  a2ui: { injectA2UITool: true },
+  agents: {default: myAgent},
+  a2ui: {injectA2UITool: true},
 });
 ```
 
@@ -49,15 +49,17 @@ Scope to specific agents with `a2ui: { injectA2UITool: true, agents: ["my-agent"
 The A2UI renderer activates automatically. Optionally pass a theme:
 
 {% raw %}
+
 ```tsx
-import { CopilotKitProvider } from "@copilotkit/react-core/v2";
-import "@copilotkit/react-core/v2/styles.css";
-import { myCustomTheme } from "@copilotkit/a2ui-renderer";
+import {CopilotKitProvider} from '@copilotkit/react-core/v2';
+import '@copilotkit/react-core/v2/styles.css';
+import {myCustomTheme} from '@copilotkit/a2ui-renderer';
 
-<CopilotKitProvider runtimeUrl="/api/copilotkit" a2ui={{ theme: myCustomTheme }}>
+<CopilotKitProvider runtimeUrl="/api/copilotkit" a2ui={{theme: myCustomTheme}}>
   {children}
-</CopilotKitProvider>
+</CopilotKitProvider>;
 ```
+
 {% endraw %}
 
 ### Custom components (BYOC)
@@ -82,22 +84,22 @@ gets injected into the agent's prompt so the LLM knows when to reach for
 each component; the schema validates the props the agent sends.
 
 ```ts title="lib/a2ui/definitions.ts"
-import { z } from "zod";
+import {z} from 'zod';
 
 export const myDefinitions = {
   StatusBadge: {
-    description: "A colored status badge.",
+    description: 'A colored status badge.',
     props: z.object({
       text: z.string(),
-      variant: z.enum(["success", "warning", "error"]).optional(),
+      variant: z.enum(['success', 'warning', 'error']).optional(),
     }),
   },
   Metric: {
-    description: "A key metric with label and value.",
+    description: 'A key metric with label and value.',
     props: z.object({
       label: z.string(),
       value: z.string(),
-      trend: z.enum(["up", "down"]).optional(),
+      trend: z.enum(['up', 'down']).optional(),
     }),
   },
 };
@@ -112,42 +114,52 @@ the definitions type, so the props your renderer receives are type-checked
 against the Zod schema — a typo in `props.text` is a compile error.
 
 {% raw %}
+
 ```tsx title="lib/a2ui/renderers.tsx"
-"use client";
+'use client';
 
-import { createCatalog, type CatalogRenderers } from "@copilotkit/a2ui-renderer";
-import { myDefinitions, type MyDefinitions } from "./definitions";
+import {createCatalog, type CatalogRenderers} from '@copilotkit/a2ui-renderer';
+import {myDefinitions, type MyDefinitions} from './definitions';
 
 const myRenderers: CatalogRenderers<MyDefinitions> = {
-  StatusBadge: ({ props }) => {
+  StatusBadge: ({props}) => {
     const colors = {
-      success: { bg: "#dcfce7", text: "#166534" },
-      warning: { bg: "#fef3c7", text: "#92400e" },
-      error: { bg: "#fee2e2", text: "#991b1b" },
+      success: {bg: '#dcfce7', text: '#166534'},
+      warning: {bg: '#fef3c7', text: '#92400e'},
+      error: {bg: '#fee2e2', text: '#991b1b'},
     };
-    const c = colors[props.variant ?? "success"];
+    const c = colors[props.variant ?? 'success'];
     return (
-      <span style={{ padding: "2px 8px", borderRadius: 9999, fontSize: "0.75rem", background: c.bg, color: c.text }}>
+      <span
+        style={{
+          padding: '2px 8px',
+          borderRadius: 9999,
+          fontSize: '0.75rem',
+          background: c.bg,
+          color: c.text,
+        }}
+      >
         {props.text}
       </span>
     );
   },
 
-  Metric: ({ props }) => (
+  Metric: ({props}) => (
     <div>
-      <div style={{ fontSize: "0.75rem", color: "#6b7280" }}>{props.label}</div>
-      <div style={{ fontSize: "1.5rem", fontWeight: 700 }}>
-        {props.value} {props.trend === "up" ? "↑" : props.trend === "down" ? "↓" : ""}
+      <div style={{fontSize: '0.75rem', color: '#6b7280'}}>{props.label}</div>
+      <div style={{fontSize: '1.5rem', fontWeight: 700}}>
+        {props.value} {props.trend === 'up' ? '↑' : props.trend === 'down' ? '↓' : ''}
       </div>
     </div>
   ),
 };
 
 export const myCatalog = createCatalog(myDefinitions, myRenderers, {
-  catalogId: "my-app-catalog",
+  catalogId: 'my-app-catalog',
   includeBasicCatalog: true, // merges with built-in components
 });
 ```
+
 {% endraw %}
 
 `catalogId` is the stable handle the agent uses to target this catalog;
@@ -157,21 +169,23 @@ alongside your own (omit it to render _only_ your components).
 #### 3. Pass the catalog to CopilotKit
 
 {% raw %}
+
 ```tsx title="app/layout.tsx"
-"use client";
+'use client';
 
-import { CopilotKitProvider } from "@copilotkit/react-core/v2";
-import "@copilotkit/react-core/v2/styles.css";
-import { myCatalog } from "@/lib/a2ui/renderers";
+import {CopilotKitProvider} from '@copilotkit/react-core/v2';
+import '@copilotkit/react-core/v2/styles.css';
+import {myCatalog} from '@/lib/a2ui/renderers';
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function Layout({children}: {children: React.ReactNode}) {
   return (
-    <CopilotKitProvider runtimeUrl="/api/copilotkit" a2ui={{ catalog: myCatalog }}>
+    <CopilotKitProvider runtimeUrl="/api/copilotkit" a2ui={{catalog: myCatalog}}>
       {children}
     </CopilotKitProvider>
   );
 }
 ```
+
 {% endraw %}
 
 Agents will now see your custom components alongside the built-ins and
diff --git a/docs/guides/a2ui_over_mcp.md b/docs/guides/a2ui_over_mcp.md
index 4f6235b2e..eb26be451 100644
--- a/docs/guides/a2ui_over_mcp.md
+++ b/docs/guides/a2ui_over_mcp.md
@@ -44,6 +44,7 @@ In the Inspector:
 > NOTE: Note
 >
 > The sample uses a local path reference to the A2UI Agent SDK. For your own projects, install from PyPI:
+>
 > ```bash
 > pip install a2ui-agent-sdk
 > ```
@@ -90,9 +91,7 @@ MCP is a stateful session protocol, so the most efficient approach is to declare
       "a2ui": {
         "clientCapabilities": {
           "v0.9": {
-            "supportedCatalogIds": [
-              "https://a2ui.org/specification/v0_9/basic_catalog.json"
-            ]
+            "supportedCatalogIds": ["https://a2ui.org/specification/v0_9/basic_catalog.json"]
           }
         }
       }
@@ -114,14 +113,12 @@ If your server must remain stateless, the client can pass A2UI capabilities in t
   "id": "id-123",
   "params": {
     "name": "generate_report",
-    "arguments": { "date": "2026-03-01" },
+    "arguments": {"date": "2026-03-01"},
     "_meta": {
       "a2ui": {
         "clientCapabilities": {
           "v0.9": {
-            "supportedCatalogIds": [
-              "https://a2ui.org/specification/v0_9/basic_catalog.json"
-            ],
+            "supportedCatalogIds": ["https://a2ui.org/specification/v0_9/basic_catalog.json"],
             "inlineCatalogs": []
           }
         }
@@ -312,10 +309,10 @@ a2ui_resource = types.EmbeddedResource(
 )
 ```
 
-| Audience | Behavior |
-|----------|----------|
-| *(empty)* | Visible to both user and LLM |
-| `["user"]` | Rendered for the user; hidden from LLM context |
+| Audience        | Behavior                                               |
+| --------------- | ------------------------------------------------------ |
+| _(empty)_       | Visible to both user and LLM                           |
+| `["user"]`      | Rendered for the user; hidden from LLM context         |
 | `["assistant"]` | Available to LLM for follow-up reasoning; not rendered |
 
 ## Using the A2UI Agent SDK
diff --git a/docs/guides/agent-development.md b/docs/guides/agent-development.md
index 3fc9a91ac..b3c30b6fa 100644
--- a/docs/guides/agent-development.md
+++ b/docs/guides/agent-development.md
@@ -82,7 +82,7 @@ root_agent = Agent(
 )
 ```
 
-Don't forget to set the `GOOGLE_API_KEY` environment variable to run this example.  
+Don't forget to set the `GOOGLE_API_KEY` environment variable to run this example.
 
 ```bash
 echo 'GOOGLE_API_KEY="YOUR_API_KEY"' > .env
@@ -94,7 +94,7 @@ You can test out this agent with the ADK web interface:
 adk web
 ```
 
-Select `my_agent` from the list, and ask questions about restaurants in New York.  You should see a list of restaurants in the UI as plain text.
+Select `my_agent` from the list, and ask questions about restaurants in New York. You should see a list of restaurants in the UI as plain text.
 
 ## Generating A2UI Messages
 
@@ -162,8 +162,8 @@ Your agent will no longer strictly output text. Instead, it will output text and
 
 The `A2UI_SCHEMA` that we imported is a standard JSON schema that defines valid operations like:
 
-* `render` (displaying a UI)
-* `update` (changing data in an existing UI)
+- `render` (displaying a UI)
+- `update` (changing data in an existing UI)
 
 Because the output is structured JSON, you may parse and validate it before sending it to the client.
 
@@ -183,4 +183,4 @@ jsonschema.validate(
 
 By validating the output against `A2UI_SCHEMA`, you ensure that your client never receives malformed UI instructions.
 
-TODO: Continue this guide with examples of how to parse, validate, and send the output to the client renderer   without the A2A extension.
+TODO: Continue this guide with examples of how to parse, validate, and send the output to the client renderer without the A2A extension.
diff --git a/docs/guides/authoring-components.md b/docs/guides/authoring-components.md
index 366ff5f37..f52cd4db7 100644
--- a/docs/guides/authoring-components.md
+++ b/docs/guides/authoring-components.md
@@ -111,10 +111,10 @@ Implement your component using your client-side framework. For Angular, your com
 In the [`rizzcharts`](../../samples/client/angular/projects/rizzcharts/README.md) example, the `Chart` component is defined in [`chart.ts`](../../samples/client/angular/projects/rizzcharts/src/a2ui-catalog/chart.ts).
 
 ```typescript
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
-import { Component, computed, input, Signal, signal } from '@angular/core';
+import {Component, computed, input, Signal, signal} from '@angular/core';
 
 @Component({
   selector: 'a2ui-chart',
@@ -138,6 +138,7 @@ export class Chart extends DynamicComponent<Types.CustomNode> {
 ```
 
 Keep these key points in mind when implementing components:
+
 - **Extend `DynamicComponent`**: This gives you access to `resolvePrimitive` for data binding resolution.
 - **Use Angular Inputs**: Map properties from the schema to Angular inputs.
 
@@ -150,14 +151,14 @@ Once the component is implemented, register it in your client catalog. This maps
 In the [`rizzcharts`](../../samples/agent/adk/rizzcharts/python/README.md) example, this is done in [`catalog.ts`](../../samples/client/angular/projects/rizzcharts/src/a2ui-catalog/catalog.ts).
 
 ```typescript
-import { Catalog, DEFAULT_CATALOG } from '@a2ui/angular';
-import { inputBinding } from '@angular/core';
+import {Catalog, DEFAULT_CATALOG} from '@a2ui/angular';
+import {inputBinding} from '@angular/core';
 
 export const RIZZ_CHARTS_CATALOG = {
   ...DEFAULT_CATALOG,
   Chart: {
-    type: () => import('./chart').then((r) => r.Chart),
-    bindings: ({ properties }) => [
+    type: () => import('./chart').then(r => r.Chart),
+    bindings: ({properties}) => [
       inputBinding('type', () => ('type' in properties && properties['type']) || undefined),
       inputBinding('title', () => ('title' in properties && properties['title']) || undefined),
       inputBinding(
@@ -170,6 +171,7 @@ export const RIZZ_CHARTS_CATALOG = {
 ```
 
 Key points for registration:
+
 - **Lazy Loading**: Use `import()` to lazy-load the component code.
 - **Input Bindings**: Use `inputBinding` to map properties from the schema to Angular inputs.
 
@@ -240,4 +242,3 @@ from a2ui.adk.send_a2ui_to_client_toolset import (
 
 config = A2aAgentExecutorConfig(event_converter=A2uiEventConverter())
 ```
-
diff --git a/docs/guides/client-setup.md b/docs/guides/client-setup.md
index 4e6df3286..7302ef2e3 100644
--- a/docs/guides/client-setup.md
+++ b/docs/guides/client-setup.md
@@ -4,19 +4,19 @@ Integrate A2UI into your application using the renderer for your platform.
 
 ## Renderers
 
-| Renderer                 | Platform           | v0.8 | v0.9 | Status            |
-| ------------------------ | ------------------ | ---- | ---- | ----------------- |
-| **[React](https://github.com/google/A2UI/tree/main/renderers/react)** | Web | ✅ | ✅ | ✅ Stable |
-| **[Lit (Web Components)](https://github.com/google/A2UI/tree/main/renderers/lit)** | Web | ✅ | ✅ | ✅ Stable |
-| **[Angular](https://github.com/google/A2UI/tree/main/renderers/angular)** | Web | ✅ | ✅ | ✅ Stable |
-| **[Flutter (GenUI SDK)](https://docs.flutter.dev/ai/genui)** | Mobile/Desktop/Web | ✅ | ✅ | ✅ Stable |
-| **Jetpack Compose**      | Android            | —    | —    | 🚧 Planned Q2 2026 |
+| Renderer                                                                           | Platform           | v0.8 | v0.9 | Status             |
+| ---------------------------------------------------------------------------------- | ------------------ | ---- | ---- | ------------------ |
+| **[React](https://github.com/google/A2UI/tree/main/renderers/react)**              | Web                | ✅   | ✅   | ✅ Stable          |
+| **[Lit (Web Components)](https://github.com/google/A2UI/tree/main/renderers/lit)** | Web                | ✅   | ✅   | ✅ Stable          |
+| **[Angular](https://github.com/google/A2UI/tree/main/renderers/angular)**          | Web                | ✅   | ✅   | ✅ Stable          |
+| **[Flutter (GenUI SDK)](https://docs.flutter.dev/ai/genui)**                       | Mobile/Desktop/Web | ✅   | ✅   | ✅ Stable          |
+| **Jetpack Compose**                                                                | Android            | —    | —    | 🚧 Planned Q2 2026 |
 
 For more see all [A2UI Renderers](../reference/renderers.md) and [Community A2UI Renderers](../ecosystem/renderers.md).
 
 ## Component Catalogs
 
-A component catalog is any collection of components.  A2UI provides a "Basic Catalog" but we expect you will add your own components, or shared libraries or fully replace the basic components with your own. 
+A component catalog is any collection of components. A2UI provides a "Basic Catalog" but we expect you will add your own components, or shared libraries or fully replace the basic components with your own.
 
 **Your design system is what matters.** You can register any collection of components and functions, and A2UI will work with them. The catalog is just the contract between your agent and your renderer.
 
@@ -32,7 +32,6 @@ The shared `web_core` library provides:
 
 - **Message Processor**: Manages A2UI state and processes incoming messages.
 
-
 ## Web Components (Lit)
 
 ```bash
@@ -64,12 +63,8 @@ Once installed, you can use the renderer in your app. The Angular renderer provi
 A2UI uses versioned imports for its protocol-specific implementations. For v0.9, configure your application providers as follows:
 
 ```typescript
-import { ApplicationConfig } from '@angular/core';
-import { 
-  A2UI_RENDERER_CONFIG, 
-  A2uiRendererService, 
-  minimalCatalog 
-} from '@a2ui/angular/v0_9';
+import {ApplicationConfig} from '@angular/core';
+import {A2UI_RENDERER_CONFIG, A2uiRendererService, minimalCatalog} from '@a2ui/angular/v0_9';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -77,13 +72,13 @@ export const appConfig: ApplicationConfig = {
       provide: A2UI_RENDERER_CONFIG,
       useValue: {
         catalogs: [minimalCatalog],
-        actionHandler: (action) => {
+        actionHandler: action => {
           console.log('Action dispatched:', action);
-        }
-      }
+        },
+      },
     },
-    A2uiRendererService
-  ]
+    A2uiRendererService,
+  ],
 };
 ```
 
diff --git a/docs/guides/defining-your-own-catalog.md b/docs/guides/defining-your-own-catalog.md
index d561c3fff..cb70fe2fb 100644
--- a/docs/guides/defining-your-own-catalog.md
+++ b/docs/guides/defining-your-own-catalog.md
@@ -9,9 +9,10 @@ By defining your own catalog, you restrict the agent to using exactly the compon
 Every A2UI surface is driven by a **Catalog**. A catalog is simply a JSON Schema file that tells the agent which components, functions, and themes are available for it to use.
 
 Defining your own catalog offers the following benefits:
--   **Design System Alignment**: Restrict the agent to using exactly the components and visual language that exist in your application.
--   **Security and Type Safety**: You register entire catalogs with your client application, ensuring that only trusted components are rendered.
--   **No Mappers Needed**: It is recommended to build catalogs that directly reflect your client's design system rather than trying to map a generic catalog (like the Basic Catalog) to it through an adapter.
+
+- **Design System Alignment**: Restrict the agent to using exactly the components and visual language that exist in your application.
+- **Security and Type Safety**: You register entire catalogs with your client application, ensuring that only trusted components are rendered.
+- **No Mappers Needed**: It is recommended to build catalogs that directly reflect your client's design system rather than trying to map a generic catalog (like the Basic Catalog) to it through an adapter.
 
 The Basic Catalog is just one example and is intentionally sparse to remain easily implementable by different renderers.
 
@@ -31,10 +32,11 @@ It is recommended to create catalogs that directly map to your existing componen
 
     To implement your own catalog on the web:
     -   Create a JSON Schema containing your component definitions.
+
 - Create your own `Component` objects and `Catalog` object within your chosen web renderer.
-    -   Provide the schema or reference ID to the agent.
+  - Provide the schema or reference ID to the agent.
 
-    *Detailed guides for each framework coming soon.*
+  _Detailed guides for each framework coming soon._
 
 === "Flutter"
 
@@ -54,6 +56,6 @@ When defining and registering catalogs:
 
 ## Next Steps
 
--   **[Theming & Styling](theming.md)**: Customize the look and feel of components.
--   **[Component Reference](../reference/components.md)**: Explore standard types that might be available for reuse.
--   **[Agent Development](agent-development.md)**: Build agents that interact with your Catalog.
+- **[Theming & Styling](theming.md)**: Customize the look and feel of components.
+- **[Component Reference](../reference/components.md)**: Explore standard types that might be available for reuse.
+- **[Agent Development](agent-development.md)**: Build agents that interact with your Catalog.
diff --git a/docs/guides/mcp-apps-in-a2ui.md b/docs/guides/mcp-apps-in-a2ui.md
index b24071562..388fd97a6 100644
--- a/docs/guides/mcp-apps-in-a2ui.md
+++ b/docs/guides/mcp-apps-in-a2ui.md
@@ -23,11 +23,11 @@ To prevent this, A2UI strictly excludes `allow-same-origin` for the inner iframe
 ### The Architecture
 
 1.  **[Sandbox Proxy (`sandbox.html`)](https://github.com/google/A2UI/blob/main/samples/client/shared/mcp_apps_inner_iframe/sandbox.html)**: An intermediate `iframe` served from the same origin. It isolates raw DOM injection from the main app while maintaining a structured JSON-RPC channel.
-    -   Permissions: **Do not sandbox** in the host template (e.g., [`mcp-app.ts`](https://github.com/google/A2UI/blob/main/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts) or [`mcp-apps-component.ts`](https://github.com/google/A2UI/blob/main/samples/client/lit/custom-components-example/ui/custom-components/mcp-apps-component.ts)).
-    -   Host origin validation: Validates that messages come from the expected host origin.
+    - Permissions: **Do not sandbox** in the host template (e.g., [`mcp-app.ts`](https://github.com/google/A2UI/blob/main/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts) or [`mcp-apps-component.ts`](https://github.com/google/A2UI/blob/main/samples/client/lit/custom-components-example/ui/custom-components/mcp-apps-component.ts)).
+    - Host origin validation: Validates that messages come from the expected host origin.
 2.  **Embedded App (Inner Iframe)**: The innermost `iframe`. Injected dynamically via `srcdoc` with restricted permissions.
-    -   Permissions: `sandbox="allow-scripts allow-forms allow-popups allow-modals"` (**MUST NOT** include `allow-same-origin`).
-    -   Isolation: Removes access to `localStorage`, `sessionStorage`, `IndexedDB`, and cookies due to unique origin.
+    - Permissions: `sandbox="allow-scripts allow-forms allow-popups allow-modals"` (**MUST NOT** include `allow-same-origin`).
+    - Isolation: Removes access to `localStorage`, `sessionStorage`, `IndexedDB`, and cookies due to unique origin.
 
 ### Architecture Diagram
 
@@ -53,13 +53,13 @@ The MCP Apps component typically resolves to a `custom` node in the A2UI catalog
 You must register the component in your catalog application. For example, in Angular:
 
 ```typescript
-import { Catalog } from '@a2ui/angular';
-import { inputBinding } from '@angular/core';
+import {Catalog} from '@a2ui/angular';
+import {inputBinding} from '@angular/core';
 
 export const DEMO_CATALOG = {
   McpApp: {
-    type: () => import('./mcp-app').then((r) => r.McpApp),
-    bindings: ({ properties }) => [
+    type: () => import('./mcp-app').then(r => r.McpApp),
+    bindings: ({properties}) => [
       inputBinding(
         'content',
         () => ('content' in properties && properties['content']) || undefined,
@@ -102,24 +102,25 @@ If the content is complex or requires encoding, you can pass a URL-encoded strin
 
 Communication between the Host and the embedded inner iframe is facilitated via a structured JSON-RPC channel over `postMessage`.
 
--   **Events**: The Host Component listens for a `SANDBOX_PROXY_READY_METHOD` message from the proxy.
--   **Bridging**: An `AppBridge` handles message relaying. Developers (specifically the MCP App Developer inside the untrusted iframe) can call tools on the MCP server using `bridge.callTool()`.
--   **The Host**: Resolves callbacks (e.g., specific resizing, Tool results).
+- **Events**: The Host Component listens for a `SANDBOX_PROXY_READY_METHOD` message from the proxy.
+- **Bridging**: An `AppBridge` handles message relaying. Developers (specifically the MCP App Developer inside the untrusted iframe) can call tools on the MCP server using `bridge.callTool()`.
+- **The Host**: Resolves callbacks (e.g., specific resizing, Tool results).
 
 ### Limitations
 
 Because `allow-same-origin` is strictly omitted for the innermost iframe, the following conditions apply:
--   The MCP app **cannot** use `localStorage`, `sessionStorage`, `IndexedDB`, or cookies. Each application runs with a unique origin.
--   Direct DOM manipulation by the parent is blocked. All interactions must proceed via message passing.
+
+- The MCP app **cannot** use `localStorage`, `sessionStorage`, `IndexedDB`, or cookies. Each application runs with a unique origin.
+- Direct DOM manipulation by the parent is blocked. All interactions must proceed via message passing.
 
 ## Prerequisites
 
 To run the samples, ensure you have the following installed:
 
--   **Python 3.10+** — Required for the agent and MCP server backends
--   **[uv](https://docs.astral.sh/uv/)** — Fast Python package manager (used to run all Python samples)
--   **Node.js 18+** and **npm** — Required for building and running the client apps
--   **A `GEMINI_API_KEY`** — Required by all ADK-based agents. Get one from [Google AI Studio](https://aistudio.google.com/apikey)
+- **Python 3.10+** — Required for the agent and MCP server backends
+- **[uv](https://docs.astral.sh/uv/)** — Fast Python package manager (used to run all Python samples)
+- **Node.js 18+** and **npm** — Required for building and running the client apps
+- **A `GEMINI_API_KEY`** — Required by all ADK-based agents. Get one from [Google AI Studio](https://aistudio.google.com/apikey)
 
 > ⚠️ **Environment variable setup**: You can either export `GEMINI_API_KEY` in your shell or create a `.env` file in each agent directory. The agents use `dotenv` to load `.env` files automatically.
 >
@@ -141,13 +142,13 @@ There are two primary samples demonstrating MCP Apps integration. Each sample re
 
 This sample verifies the sandbox with a Lit-based client and an ADK-based A2A agent.
 
--   **A2A Agent Server**:
-    -   Path: [`samples/agent/adk/mcp-apps-in-a2ui-sample/`](https://github.com/google/A2UI/tree/main/samples/agent/adk/mcp-apps-in-a2ui-sample/)
-    -   Command: `uv run .` (requires `GEMINI_API_KEY` in `.env`)
--   **Lit Client App**:
-    -   Path: [`samples/client/lit/mcp-apps-in-a2ui-sample/`](https://github.com/google/A2UI/tree/main/samples/client/lit/mcp-apps-in-a2ui-sample/)
-    -   Command: `npm install && npm run dev` (requires building the Lit renderer first)
-    -   URL: `http://localhost:5173/`
+- **A2A Agent Server**:
+  - Path: [`samples/agent/adk/mcp-apps-in-a2ui-sample/`](https://github.com/google/A2UI/tree/main/samples/agent/adk/mcp-apps-in-a2ui-sample/)
+  - Command: `uv run .` (requires `GEMINI_API_KEY` in `.env`)
+- **Lit Client App**:
+  - Path: [`samples/client/lit/mcp-apps-in-a2ui-sample/`](https://github.com/google/A2UI/tree/main/samples/client/lit/mcp-apps-in-a2ui-sample/)
+  - Command: `npm install && npm run dev` (requires building the Lit renderer first)
+  - URL: `http://localhost:5173/`
 
 **What to expect**: A simple interface loading the MCP App, with a button to trigger an action handled by the agent.
 
@@ -171,7 +172,9 @@ This sample verifies the sandbox with an Angular-based client, an MCP Proxy Agen
 cd samples/mcp/mcp-apps-calculator/
 uv run .
 ```
+
 =======
+
 ```bash
 cd samples/client/lit/mcp-apps-in-a2ui-sample
 npm install
@@ -209,7 +212,8 @@ This sample verifies the sandbox with an Angular-based client, an MCP Proxy Agen
 cd samples/mcp/mcp-apps-calculator/
 uv run .
 ```
->>>>>>> e3c17f1f (docs: add npm install step to MCP guide)
+
+> > > > > > > e3c17f1f (docs: add npm install step to MCP guide)
 
 The MCP server starts on `http://localhost:8000` using SSE transport.
 
@@ -256,8 +260,8 @@ http://localhost:4200/?disable_security_self_test=true
 
 **What to expect**: A set of smart chips to load calculator app or pong app will be rendered. Both apps run in their own sandboxed iframes.
 
-| Calculator App | Pong App |
-| :---: | :---: |
+|                                                 Calculator App                                                 |                                 Pong App                                  |
+| :------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------: |
 | ![An animated GIF of the calculator app being used to perform multiplications.](../assets/calculator_demo.gif) | ![An animated GIF of the pong app being played.](../assets/pong_demo.gif) |
 
 ---
@@ -271,19 +275,20 @@ For testing purposes, you can opt-out of the security self-test by using specifi
 This query parameter allows you to bypass the security self-test that verifies iframe isolation. This is useful for debugging and testing environments where the double-iframe setup may not pass strict origin checks (e.g., `localhost` development).
 
 Example usage:
+
 ```
 http://localhost:4200/?disable_security_self_test=true
 ```
 
 ## Troubleshooting
 
-| Problem | Solution |
-|---------|----------|
-| `GEMINI_API_KEY environment variable not set` | Export the key or add a `.env` file in the agent directory |
-| Python version error on `contact_lookup` agent | Install Python 3.13+ (required by that sample's `pyproject.toml`) |
-| `npm run build:renderer` fails | Make sure you ran `npm install` first in `samples/client/lit/` |
-| Angular client shows blank page | Ensure you ran `npm run build:sandbox` before `npm start` |
-| MCP app iframe doesn't load | Check that both the MCP server (port 8000) and proxy agent (port 10006) are running |
-| `ng serve` not found | Run `npm install --include=dev` to install dev dependencies including `@angular/cli` |
-| "URL with hostname not allowed" | Angular 21 restricts allowed hosts. Use `localhost` (the default) — do not pass `--host 0.0.0.0` |
-| Security self-test fails in dev | Add `?disable_security_self_test=true` to the URL |
+| Problem                                        | Solution                                                                                         |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `GEMINI_API_KEY environment variable not set`  | Export the key or add a `.env` file in the agent directory                                       |
+| Python version error on `contact_lookup` agent | Install Python 3.13+ (required by that sample's `pyproject.toml`)                                |
+| `npm run build:renderer` fails                 | Make sure you ran `npm install` first in `samples/client/lit/`                                   |
+| Angular client shows blank page                | Ensure you ran `npm run build:sandbox` before `npm start`                                        |
+| MCP app iframe doesn't load                    | Check that both the MCP server (port 8000) and proxy agent (port 10006) are running              |
+| `ng serve` not found                           | Run `npm install --include=dev` to install dev dependencies including `@angular/cli`             |
+| "URL with hostname not allowed"                | Angular 21 restricts allowed hosts. Use `localhost` (the default) — do not pass `--host 0.0.0.0` |
+| Security self-test fails in dev                | Add `?disable_security_self_test=true` to the URL                                                |
diff --git a/docs/guides/renderer-development.md b/docs/guides/renderer-development.md
index 6086fdc60..6e703cab0 100644
--- a/docs/guides/renderer-development.md
+++ b/docs/guides/renderer-development.md
@@ -12,14 +12,14 @@ If you're building a renderer for the web (React, Vue, Svelte, etc.), you don't
 
 ### What `web_core` provides
 
-| Module | What it does |
-|--------|-------------|
-| **`MessageProcessor`** | Processes the A2UI JSONL stream, dispatches messages, manages surface lifecycle |
-| **`SurfaceModel` / `SurfaceGroupModel`** | State management for surfaces, components, and data models |
-| **`DataModel` / `DataContext`** | Data binding resolution, path-based lookups, template list rendering |
-| **`ComponentModel`** | Component tree state, adjacency list → tree resolution |
-| **Types & Schemas** | TypeScript types for all A2UI components, primitives, colors, styles, and JSON schema validation |
-| **Expression parser** | Client-side function evaluation (v0.9) |
+| Module                                   | What it does                                                                                     |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| **`MessageProcessor`**                   | Processes the A2UI JSONL stream, dispatches messages, manages surface lifecycle                  |
+| **`SurfaceModel` / `SurfaceGroupModel`** | State management for surfaces, components, and data models                                       |
+| **`DataModel` / `DataContext`**          | Data binding resolution, path-based lookups, template list rendering                             |
+| **`ComponentModel`**                     | Component tree state, adjacency list → tree resolution                                           |
+| **Types & Schemas**                      | TypeScript types for all A2UI components, primitives, colors, styles, and JSON schema validation |
+| **Expression parser**                    | Client-side function evaluation (v0.9)                                                           |
 
 ### How the maintained renderers use it
 
@@ -31,11 +31,11 @@ import type * as Types from '@a2ui/web_core/types/types';
 import type * as Primitives from '@a2ui/web_core/types/primitives';
 
 // v0.8: Message processing and state
-import { A2uiMessageProcessor } from '@a2ui/web_core/data/model-processor';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
 
 // v0.9: Message processing, surfaces, catalogs
-import { MessageProcessor } from '@a2ui/web_core/v0_9';
-import { SurfaceModel } from '@a2ui/web_core/v0_9';
+import {MessageProcessor} from '@a2ui/web_core/v0_9';
+import {SurfaceModel} from '@a2ui/web_core/v0_9';
 
 // Styles and layout helpers
 import * as Styles from '@a2ui/web_core/styles/index';
diff --git a/docs/guides/theming.md b/docs/guides/theming.md
index dd6b97795..33a5873bc 100644
--- a/docs/guides/theming.md
+++ b/docs/guides/theming.md
@@ -6,8 +6,8 @@ Customize the look and feel of A2UI components to match your brand.
 
 A2UI follows a **renderer-controlled styling** approach by default, but allows for flexibility through catalogs:
 
-- **Agents describe *what* to show** (components and structure)
-- **Renderers decide *how* it looks** (colors, fonts, spacing)
+- **Agents describe _what_ to show** (components and structure)
+- **Renderers decide _how_ it looks** (colors, fonts, spacing)
 
 However, the protocol is flexible enough to allow agents to influence styling when needed.
 
@@ -29,7 +29,7 @@ flowchart TD
 
 ### Semantic hints
 
-Agents provide semantic hints (not visual styles) to guide rendering. In the *basic catalog*:
+Agents provide semantic hints (not visual styles) to guide rendering. In the _basic catalog_:
 
 ```json
 {
@@ -56,21 +56,21 @@ The A2UI protocol allows for an arbitrary `theme` property in the `createSurface
 defined as `z.any().optional()` in the Zod schema, meaning the agent can pass any JSON structure that the client
 renderer and catalog understand.
 
-* See the schema definition in [server-to-client.ts](../../renderers/web_core/src/v0_9/schema/server-to-client.ts).
-* See the `Catalog` class and `themeSchema` in [catalog/types.ts](../../renderers/web_core/src/v0_9/catalog/types.ts).
+- See the schema definition in [server-to-client.ts](../../renderers/web_core/src/v0_9/schema/server-to-client.ts).
+- See the `Catalog` class and `themeSchema` in [catalog/types.ts](../../renderers/web_core/src/v0_9/catalog/types.ts).
 
-**Note:** The *basic catalog* components are not wired to use the `theme` coming from the agent.
+**Note:** The _basic catalog_ components are not wired to use the `theme` coming from the agent.
 
 _Want to influence this design? Chime in here: [#1118](https://github.com/google/A2UI/issues/1118)._
 
 ## Catalog theming
 
 Theming is a responsibility of the catalog implementation. Each catalog can provide whatever theming solution it wants.
-As an example, this is how the default *basic catalog* does it:
+As an example, this is how the default _basic catalog_ does it:
 
 ### The Web Basic Catalog Theming
 
-On the web, the *basic catalog* provided by the default A2UI renderers is themed by overriding CSS variables.
+On the web, the _basic catalog_ provided by the default A2UI renderers is themed by overriding CSS variables.
 
 Basic catalog components inject a small stylesheet with default values for these variables. The stylesheet targets
 `:where(:root)` so their specificity is minimal, and the host app can override them easily.
@@ -93,7 +93,7 @@ See the default styles in [default.ts](../../renderers/web_core/src/v0_9/basic_c
 
 ### Per-component overrides
 
-Beyond global theming, each component of the *basic catalog* exposes custom variables to further refine its appearance.
+Beyond global theming, each component of the _basic catalog_ exposes custom variables to further refine its appearance.
 For example, the `Card` component exposes a `--a2ui-card-background` variable.
 
 Check the documentation of each component to see what variables it exposes.
@@ -109,7 +109,7 @@ To always force dark or light mode (or to programmatically control switching), u
 
 ### Custom Fonts
 
-Fonts can be loaded as in any other web application. The *basic catalog* components attempt to inherit the font family
+Fonts can be loaded as in any other web application. The _basic catalog_ components attempt to inherit the font family
 of their container, but offer two overridable values: `--a2ui-font-family-title` and `--a2ui-font-family-monospace` to
 set a different font for headings and monospace text blocks.
 
@@ -117,7 +117,7 @@ set a different font for headings and monospace text blocks.
 
 Flutter has built-in theming support. See:
 
-* [Use themes to share colors and font styles](https://docs.flutter.dev/cookbook/design/themes) from the Flutter docs.
+- [Use themes to share colors and font styles](https://docs.flutter.dev/cookbook/design/themes) from the Flutter docs.
 
 ## Best Practices
 
diff --git a/docs/index.md b/docs/index.md
index 79197fbac..4f62102b2 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,10 +22,10 @@ A2UI enables AI agents to generate rich, interactive user interfaces that render
 
 ## Specification Versions
 
-| Version | Status | Description |
-|---------|--------|-------------|
-| **[v0.8](specification/v0.8-a2ui.md)** | **Stable** | Current production release. Surfaces, components, data binding, adjacency list model. |
-| **[v0.9](specification/v0.9-a2ui.md)** | **Draft** | Adds `createSurface`, client-side functions, custom catalogs, and the extension specification. [Evolution guide →](specification/v0.9-evolution-guide.md) |
+| Version                                | Status     | Description                                                                                                                                               |
+| -------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **[v0.8](specification/v0.8-a2ui.md)** | **Stable** | Current production release. Surfaces, components, data binding, adjacency list model.                                                                     |
+| **[v0.9](specification/v0.9-a2ui.md)** | **Draft**  | Adds `createSurface`, client-side functions, custom catalogs, and the extension specification. [Evolution guide →](specification/v0.9-evolution-guide.md) |
 
 A2UI is Apache 2.0 licensed,
 created by Google with contributions from CopilotKit and the open source community,
@@ -36,6 +36,7 @@ A2UI solves the following problem: **how can AI agents safely send rich UIs acro
 Instead of text-only responses or risky code execution, A2UI lets agents send **declarative component descriptions** that clients render using their own native widgets. It's like having agents speak a universal UI language.
 
 This repository contains:
+
 - **[A2UI specifications](specification/v0.8-a2ui.md)** (v0.8 stable, v0.9 draft).
 - **Implementations for [renderers](reference/renderers.md)** (Angular, Flutter, Lit, Markdown, etc.) on the client side.
 - **Transports like [A2A](concepts/transports.md)** which communicate A2UI messages between agents and clients.
@@ -44,27 +45,27 @@ This repository contains:
 
 - :material-shield-check: **Secure by Design**
 
-    ---
+  ***
 
-    Declarative data format, not executable code. Agents can only use pre-approved components from your catalog—no UI injection attacks.
+  Declarative data format, not executable code. Agents can only use pre-approved components from your catalog—no UI injection attacks.
 
 - :material-rocket-launch: **LLM-Friendly**
 
-    ---
+  ***
 
-    Flat, streaming JSON structure designed for easy generation. LLMs can build UIs incrementally without perfect JSON in one shot.
+  Flat, streaming JSON structure designed for easy generation. LLMs can build UIs incrementally without perfect JSON in one shot.
 
 - :material-devices: **Framework-Agnostic**
 
-    ---
+  ***
 
-    One agent response works everywhere. Render the same UI on Angular, Flutter, React, or native mobile with your own styled components.
+  One agent response works everywhere. Render the same UI on Angular, Flutter, React, or native mobile with your own styled components.
 
 - :material-chart-timeline: **Progressive Rendering**
 
-    ---
+  ***
 
-    Stream UI updates as they're generated. Users see the interface building in real-time instead of waiting for complete responses.
+  Stream UI updates as they're generated. Users see the interface building in real-time instead of waiting for complete responses.
 
 </div>
 
@@ -74,59 +75,59 @@ This repository contains:
 
 - :material-clock-fast:{ .lg .middle } **[Quickstart Restaurant Finder Demo](quickstart.md)**
 
-    ---
+  ***
 
-    Run the full-stack demo locally with a Gemini powered ADK agent and Lit renderer. Learn A2UI end-to-end and customize to your use case.
+  Run the full-stack demo locally with a Gemini powered ADK agent and Lit renderer. Learn A2UI end-to-end and customize to your use case.
 
-    [:octicons-arrow-right-24: Run the demo](quickstart.md)
+  [:octicons-arrow-right-24: Run the demo](quickstart.md)
 
 - :material-react:{ .lg .middle } **[A2UI + AG-UI (React)](guides/a2ui-with-any-agent-framework.md)**
 
-    ---
+  ***
 
-    Scaffold a Next.js app wired to any agent framework via AG-UI. This is a React + A2UI app, ready to ship.
+  Scaffold a Next.js app wired to any agent framework via AG-UI. This is a React + A2UI app, ready to ship.
 
-    [:octicons-arrow-right-24: Use with any agent](guides/a2ui-with-any-agent-framework.md)
+  [:octicons-arrow-right-24: Use with any agent](guides/a2ui-with-any-agent-framework.md)
 
 - :material-palette-outline:{ .lg .middle } **[A2UI Composer](https://a2ui-composer.ag-ui.com/)**
 
-    ---
+  ***
 
-    Generate A2UI JSON from a visual editor — no install required. Paste the output into any agent prompt.
+  Generate A2UI JSON from a visual editor — no install required. Paste the output into any agent prompt.
 
-    [:octicons-arrow-right-24: Open the composer](https://a2ui-composer.ag-ui.com/)
+  [:octicons-arrow-right-24: Open the composer](https://a2ui-composer.ag-ui.com/)
 
 - :material-play-circle-outline:{ .lg .middle } **[A2UI Theater](https://a2ui-composer.ag-ui.com/theater)**
 
-    ---
+  ***
 
-    Step through pre-built A2UI streaming scenarios across Lit, React, and Angular renderers. See the protocol in motion before writing code.
+  Step through pre-built A2UI streaming scenarios across Lit, React, and Angular renderers. See the protocol in motion before writing code.
 
-    [:octicons-arrow-right-24: Open the playground](https://a2ui-composer.ag-ui.com/theater)
+  [:octicons-arrow-right-24: Open the playground](https://a2ui-composer.ag-ui.com/theater)
 
 - :material-book-open-variant:{ .lg .middle } **[Core Concepts](concepts/overview.md)**
 
-    ---
+  ***
 
-    Understand surfaces, components, data binding, and the adjacency list model.
+  Understand surfaces, components, data binding, and the adjacency list model.
 
-    [:octicons-arrow-right-24: Learn concepts](concepts/overview.md)
+  [:octicons-arrow-right-24: Learn concepts](concepts/overview.md)
 
 - :material-code-braces:{ .lg .middle } **[Developer Guides](guides/client-setup.md)**
 
-    ---
+  ***
 
-    Integrate A2UI renderers into your app or build agents that generate UIs.
+  Integrate A2UI renderers into your app or build agents that generate UIs.
 
-    [:octicons-arrow-right-24: Start building](guides/client-setup.md)
+  [:octicons-arrow-right-24: Start building](guides/client-setup.md)
 
 - :material-file-document:{ .lg .middle } **Protocol Specifications**
 
-    ---
+  ***
 
-    Dive into the complete technical specs: [v0.8 (stable)](specification/v0.8-a2ui.md) · [v0.9 (draft)](specification/v0.9-a2ui.md)
+  Dive into the complete technical specs: [v0.8 (stable)](specification/v0.8-a2ui.md) · [v0.9 (draft)](specification/v0.9-a2ui.md)
 
-    [:octicons-arrow-right-24: Read the v0.8 spec](specification/v0.8-a2ui.md)
+  [:octicons-arrow-right-24: Read the v0.8 spec](specification/v0.8-a2ui.md)
 
 </div>
 
@@ -178,4 +179,3 @@ The typical interaction flow consists of these steps:
 CopilotKit has a public [A2UI Widget Builder](https://go.copilotkit.ai/A2UI-widget-builder) to try out as well.
 
 [![A2UI Composer](assets/A2UI-widget-builder.png)](https://go.copilotkit.ai/A2UI-widget-builder)
-
diff --git a/docs/introduction/agent-ui-ecosystem.md b/docs/introduction/agent-ui-ecosystem.md
index 9f2469cf0..ab7dc9ae4 100644
--- a/docs/introduction/agent-ui-ecosystem.md
+++ b/docs/introduction/agent-ui-ecosystem.md
@@ -4,16 +4,16 @@ The agentic UI space is evolving rapidly. Here's how A2UI relates to the other m
 
 ## At a Glance
 
-| | **A2UI** | **MCP Apps** | **AG UI** |
-|---|---|---|---|
-| **Approach** | Declarative component blueprints | Pre-built HTML via `ui://` URIs | High-bandwidth protocol connecting backends to frontends |
-| **Rendering** | Native components (Angular, Flutter, Lit, etc.) | Sandboxed `iframe` | Developer-defined (any framework) |
-| **Styling** | Host app controls — inherits design system | Isolated — remote server controls appearance | Developer controls — part of the host app |
-| **Security** | Declarative data, no code execution | Sandboxed iframe isolation | Trusted code within your own app |
-| **Multi-agent** | ✅ Across trust boundaries | ✅ Multiple MCP servers | ⚠️ Primarily single-agent |
-| **Cross-platform** | ✅ Web, mobile, desktop, native | ⚠️ Web-focused (iframe) | ✅ Protocol is framework-agnostic |
-| **LLM generation** | ✅ Designed for streaming output | ❌ Pre-built by server | ✅ Via A2UI integration |
-| **Spec** | Open protocol (Apache 2.0) | [MCP extension](https://modelcontextprotocol.io/docs/extensions/apps) (SEP-1865) | Open source (by CopilotKit) |
+|                    | **A2UI**                                        | **MCP Apps**                                                                     | **AG UI**                                                |
+| ------------------ | ----------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| **Approach**       | Declarative component blueprints                | Pre-built HTML via `ui://` URIs                                                  | High-bandwidth protocol connecting backends to frontends |
+| **Rendering**      | Native components (Angular, Flutter, Lit, etc.) | Sandboxed `iframe`                                                               | Developer-defined (any framework)                        |
+| **Styling**        | Host app controls — inherits design system      | Isolated — remote server controls appearance                                     | Developer controls — part of the host app                |
+| **Security**       | Declarative data, no code execution             | Sandboxed iframe isolation                                                       | Trusted code within your own app                         |
+| **Multi-agent**    | ✅ Across trust boundaries                      | ✅ Multiple MCP servers                                                          | ⚠️ Primarily single-agent                                |
+| **Cross-platform** | ✅ Web, mobile, desktop, native                 | ⚠️ Web-focused (iframe)                                                          | ✅ Protocol is framework-agnostic                        |
+| **LLM generation** | ✅ Designed for streaming output                | ❌ Pre-built by server                                                           | ✅ Via A2UI integration                                  |
+| **Spec**           | Open protocol (Apache 2.0)                      | [MCP extension](https://modelcontextprotocol.io/docs/extensions/apps) (SEP-1865) | Open source (by CopilotKit)                              |
 
 ## A2UI vs MCP Apps
 
diff --git a/docs/introduction/who-is-it-for.md b/docs/introduction/who-is-it-for.md
index b94ff40c3..bc34d9be8 100644
--- a/docs/introduction/who-is-it-for.md
+++ b/docs/introduction/who-is-it-for.md
@@ -34,7 +34,7 @@ Build agents that generate forms, dashboards, and interactive workflows.
 
 ### 3. Platform Builders (SDK Creators)
 
-Build agent orchestration platforms, frameworks, or UI integrations.  
+Build agent orchestration platforms, frameworks, or UI integrations.
 
 Do you bring remote agents into your app?
 
@@ -53,6 +53,7 @@ Do you ship your agent into other apps you don't necessarily control?
 ## When to Use A2UI
 
 Use A2UI in the following scenarios:
+
 - **Agent-generated UI**: Core purpose.
 - **Multi-agent systems**: Standard protocol across trust boundaries.
 - **Cross-platform apps**: One agent, many renderers (web/mobile/desktop).
@@ -60,6 +61,7 @@ Use A2UI in the following scenarios:
 - **Brand consistency**: Client controls styling.
 
 Do not use A2UI for:
+
 - **Static websites**: Use HTML/CSS.
 - **Simple text-only chat**: Use Markdown.
 - **Remote widgets not integrated with client**: Use iframes, like [MCP Apps](../introduction/agent-ui-ecosystem.md).
diff --git a/docs/quickstart.md b/docs/quickstart.md
index a80bab972..8d23bdf76 100644
--- a/docs/quickstart.md
+++ b/docs/quickstart.md
@@ -69,12 +69,14 @@ The source code for the Restaurant Finder agent is located in [`samples/agent/ad
 If you prefer to run the agent and client in separate terminals, or need to troubleshoot:
 
 **1. Run the Agent:**
+
 ```bash
 cd samples/agent/adk/restaurant_finder
 uv run .
 ```
 
 **2. Run the Client:**
+
 ```bash
 cd samples/client/lit/shell
 npm run dev
@@ -208,6 +210,7 @@ This runs a client-only demo showcasing every standard component (Card, Button,
 ### Other Languages and Frameworks
 
 While this guide uses the Lit client as an example, A2UI provides samples for other popular frameworks in the `samples/client` directory:
+
 - **Angular**: `samples/client/angular`
 - **React**: `samples/client/react`
 
diff --git a/docs/reference/agents.md b/docs/reference/agents.md
index ac759a9ea..69a22a177 100644
--- a/docs/reference/agents.md
+++ b/docs/reference/agents.md
@@ -21,30 +21,31 @@ User interactions from the client can be treated as new user input.
 
 The A2UI repository includes sample agents you can learn from:
 
-- [Restaurant Finder](https://github.com/google/A2UI/tree/main/samples/agent/adk/restaurant_finder) 
-    - Table reservations with forms.
-    - Written with the ADK.
-- [Contact Lookup](https://github.com/google/A2UI/tree/main/samples/agent/adk/contact_lookup) 
-    - Search with result lists.
-    - Written with the ADK.
-- [Rizzcharts](https://github.com/google/A2UI/tree/main/samples/agent/adk/rizzcharts/python) 
-    - A2UI Custom components demo.
-    - Written with the ADK.
-- [Orchestrator](https://github.com/google/A2UI/tree/main/samples/agent/adk/orchestrator) 
-    - Passes A2UI messages from remote subagents.
-    - Written with the ADK.
+- [Restaurant Finder](https://github.com/google/A2UI/tree/main/samples/agent/adk/restaurant_finder)
+  - Table reservations with forms.
+  - Written with the ADK.
+- [Contact Lookup](https://github.com/google/A2UI/tree/main/samples/agent/adk/contact_lookup)
+  - Search with result lists.
+  - Written with the ADK.
+- [Rizzcharts](https://github.com/google/A2UI/tree/main/samples/agent/adk/rizzcharts/python)
+  - A2UI Custom components demo.
+  - Written with the ADK.
+- [Orchestrator](https://github.com/google/A2UI/tree/main/samples/agent/adk/orchestrator)
+  - Passes A2UI messages from remote subagents.
+  - Written with the ADK.
 
 ## Agent Types in A2A
 
 ### 1. User Facing Agent (standalone)
 
-A user facing agent is one that is directly interacted with by the user. 
+A user facing agent is one that is directly interacted with by the user.
 
 ### 2. User Facing Agent as a host for a Remote Agent
 
 This is a pattern where the user facing agent is a host for one or more remote agents. The user facing agent will call the remote agent and the remote agent will generate the A2UI messages. This is a common pattern in [A2A](https://a2a-protocol.org) with the client agent calling the server agent.
 
 In this pattern, the user-facing agent can handle messages in two ways:
+
 - The user facing agent may "passthrough" the A2UI message without altering them.
 - The user facing agent may alter the A2UI message before sending it to the client.
 
diff --git a/docs/reference/components.md b/docs/reference/components.md
index 9a050ec83..339a04784 100644
--- a/docs/reference/components.md
+++ b/docs/reference/components.md
@@ -612,18 +612,18 @@ All components share:
 
 The component names and properties are largely the same across versions. The structural differences are:
 
-| Aspect | v0.8 | v0.9 |
-|--------|------|------|
-| Component wrapper | `"component": { "Text": { ... } }` | `"component": "Text", ...props` |
-| String values | `{ "literalString": "Hello" }` | `"Hello"` |
-| Children | `{ "explicitList": ["a", "b"] }` | `["a", "b"]` |
-| Data binding | `{ "path": "/data" }` | `{ "path": "/data" }` (same) |
-| Text/Image styling | `usageHint` | `variant` |
-| Button styling | `primary: true` | `variant: "primary"` |
-| Action format | `{ "name": "..." }` | `{ "event": { "name": "..." } }` |
-| Choice component | `MultipleChoice` | `ChoicePicker` |
-| Layout alignment | `distribution`, `alignment` | `justify`, `align` |
-| TextField value | `text` | `value` |
+| Aspect             | v0.8                               | v0.9                             |
+| ------------------ | ---------------------------------- | -------------------------------- |
+| Component wrapper  | `"component": { "Text": { ... } }` | `"component": "Text", ...props`  |
+| String values      | `{ "literalString": "Hello" }`     | `"Hello"`                        |
+| Children           | `{ "explicitList": ["a", "b"] }`   | `["a", "b"]`                     |
+| Data binding       | `{ "path": "/data" }`              | `{ "path": "/data" }` (same)     |
+| Text/Image styling | `usageHint`                        | `variant`                        |
+| Button styling     | `primary: true`                    | `variant: "primary"`             |
+| Action format      | `{ "name": "..." }`                | `{ "event": { "name": "..." } }` |
+| Choice component   | `MultipleChoice`                   | `ChoicePicker`                   |
+| Layout alignment   | `distribution`, `alignment`        | `justify`, `align`               |
+| TextField value    | `text`                             | `value`                          |
 
 ## Live Examples
 
diff --git a/docs/reference/messages.md b/docs/reference/messages.md
index 77f634705..a7ea91b7a 100644
--- a/docs/reference/messages.md
+++ b/docs/reference/messages.md
@@ -586,11 +586,12 @@ Remove a surface and all its components and data.
 
 | Property    | Type   | Required | Description                 |
 | ----------- | ------ | -------- | --------------------------- |
-| `surfaceId` | string | ✅        | ID of the surface to delete |
+| `surfaceId` | string | ✅       | ID of the surface to delete |
 
 ### Usage Notes
 
 Keep these usage notes in mind:
+
 - Removes all components associated with the surface.
 - Clears the data model for the surface.
 - Client should remove the surface from the UI.
diff --git a/docs/reference/renderers.md b/docs/reference/renderers.md
index 1de73143d..99f04d399 100644
--- a/docs/reference/renderers.md
+++ b/docs/reference/renderers.md
@@ -14,20 +14,20 @@ You have a lot of flexibility, to bring custom components to a renderer, or buil
 
 ### Web
 
-| Renderer | Platform | v0.8 | v0.9 | Links |
-|----------|----------|------|------|-------|
-| **React** | Web | ✅ Stable | ❌ | [Code](https://github.com/google/A2UI/tree/main/renderers/react) |
-| **Lit (Web Components)** | Web | ✅ Stable | ✅ Stable | [Code](https://github.com/google/A2UI/tree/main/renderers/lit) |
-| **Angular** | Web | ✅ Stable | ✅ Stable | [Code](https://github.com/google/A2UI/tree/main/renderers/angular) |
-| **Flutter (GenUI SDK)** | Mobile/Desktop/Web | ✅ Stable | ✅ Stable | [Docs](https://docs.flutter.dev/ai/genui) · [Code](https://github.com/flutter/genui) |
+| Renderer                 | Platform           | v0.8      | v0.9      | Links                                                                                |
+| ------------------------ | ------------------ | --------- | --------- | ------------------------------------------------------------------------------------ |
+| **React**                | Web                | ✅ Stable | ❌        | [Code](https://github.com/google/A2UI/tree/main/renderers/react)                     |
+| **Lit (Web Components)** | Web                | ✅ Stable | ✅ Stable | [Code](https://github.com/google/A2UI/tree/main/renderers/lit)                       |
+| **Angular**              | Web                | ✅ Stable | ✅ Stable | [Code](https://github.com/google/A2UI/tree/main/renderers/angular)                   |
+| **Flutter (GenUI SDK)**  | Mobile/Desktop/Web | ✅ Stable | ✅ Stable | [Docs](https://docs.flutter.dev/ai/genui) · [Code](https://github.com/flutter/genui) |
 
 ### Mobile
 
-| Renderer | Platform | v0.8 | v0.9 | Links |
-|----------|----------|------|------|-------|
-| **Flutter (GenUI SDK)** | Mobile/Desktop/Web | ✅ Stable | ✅ Stable | [Docs](https://docs.flutter.dev/ai/genui) · [Code](https://github.com/flutter/genui) |
-| **SwiftUI** | iOS/macOS | — | 🚧 Planned Q2 | — |
-| **Jetpack Compose** | Android | — | 🚧 Planned Q2 | — |
+| Renderer                | Platform           | v0.8      | v0.9          | Links                                                                                |
+| ----------------------- | ------------------ | --------- | ------------- | ------------------------------------------------------------------------------------ |
+| **Flutter (GenUI SDK)** | Mobile/Desktop/Web | ✅ Stable | ✅ Stable     | [Docs](https://docs.flutter.dev/ai/genui) · [Code](https://github.com/flutter/genui) |
+| **SwiftUI**             | iOS/macOS          | —         | 🚧 Planned Q2 | —                                                                                    |
+| **Jetpack Compose**     | Android            | —         | 🚧 Planned Q2 | —                                                                                    |
 
 Check the [Roadmap](../roadmap.md) for more.
 
diff --git a/docs/roadmap.md b/docs/roadmap.md
index 930d29dfb..9bcd7a023 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -6,10 +6,10 @@ This roadmap outlines the current state and future plans for the A2UI project. T
 
 ### Protocol
 
-| Version | Status | Notes |
-|---------|--------|-------|
-| **v0.8** | ✅ Stable | Initial public release |
-| **v0.9** | 🚧 Draft | Prompt-First specification improvements |
+| Version  | Status    | Notes                                   |
+| -------- | --------- | --------------------------------------- |
+| **v0.8** | ✅ Stable | Initial public release                  |
+| **v0.9** | 🚧 Draft  | Prompt-First specification improvements |
 
 Key features:
 
@@ -21,51 +21,51 @@ Key features:
 
 ### Renderers
 
-| Client libraries | Status | Platform | Notes |
-|-----------------|--------|----------|-------|
-| **Web Components (Lit)** | ✅ Stable | Web | Framework-agnostic, works anywhere |
-| **Angular** | ✅ Stable | Web | Full Angular integration |
-| **Flutter (GenUI SDK)** | ✅ Stable | Multi-platform | Works on mobile, web, desktop |
-| **React** | 🚧 In Progress | Web | Coming Q1 2026 |
-| **SwiftUI** | 📋 Planned | iOS/macOS | Planned for Q2 2026 |
-| **Jetpack Compose** | 📋 Planned | Android | Planned for Q2 2026 |
-| **Vue** | 💡 Proposed | Web | Community interest |
-| [**Svelte/Kit**](https://svelte.dev/docs/kit/introduction) | 💡 Proposed | Web | [Community interest](https://news.ycombinator.com/item?id=46287728) |
-| **ShadCN (React)** | 💡 Proposed | Web | Community interest |
+| Client libraries                                           | Status         | Platform       | Notes                                                               |
+| ---------------------------------------------------------- | -------------- | -------------- | ------------------------------------------------------------------- |
+| **Web Components (Lit)**                                   | ✅ Stable      | Web            | Framework-agnostic, works anywhere                                  |
+| **Angular**                                                | ✅ Stable      | Web            | Full Angular integration                                            |
+| **Flutter (GenUI SDK)**                                    | ✅ Stable      | Multi-platform | Works on mobile, web, desktop                                       |
+| **React**                                                  | 🚧 In Progress | Web            | Coming Q1 2026                                                      |
+| **SwiftUI**                                                | 📋 Planned     | iOS/macOS      | Planned for Q2 2026                                                 |
+| **Jetpack Compose**                                        | 📋 Planned     | Android        | Planned for Q2 2026                                                 |
+| **Vue**                                                    | 💡 Proposed    | Web            | Community interest                                                  |
+| [**Svelte/Kit**](https://svelte.dev/docs/kit/introduction) | 💡 Proposed    | Web            | [Community interest](https://news.ycombinator.com/item?id=46287728) |
+| **ShadCN (React)**                                         | 💡 Proposed    | Web            | Community interest                                                  |
 
 ### Transports
 
-| Transport | Status | Notes |
-|-------------|--------|-------|
-| **A2A Protocol** | ✅ Complete | Native A2A transport |
-| **AG UI** | ✅ Complete | Day-zero compatibility |
-| **REST API** | 📋 Planned | Bidirectional communication |
-| **WebSockets** | 💡 Proposed | Bidirectional communication |
-| **SSE (Server-Sent Events)** | 💡 Proposed | Web streaming |
-| **MCP (Model Context Protocol)** | 💡 Proposed | Community interest |
+| Transport                        | Status      | Notes                       |
+| -------------------------------- | ----------- | --------------------------- |
+| **A2A Protocol**                 | ✅ Complete | Native A2A transport        |
+| **AG UI**                        | ✅ Complete | Day-zero compatibility      |
+| **REST API**                     | 📋 Planned  | Bidirectional communication |
+| **WebSockets**                   | 💡 Proposed | Bidirectional communication |
+| **SSE (Server-Sent Events)**     | 💡 Proposed | Web streaming               |
+| **MCP (Model Context Protocol)** | 💡 Proposed | Community interest          |
 
 ### Agent UI toolkits
 
-| Agent UI toolkit | Status | Notes |
-|-------------|--------|-------|
-| **CopilotKit** | ✅ Complete | Day-zero compatibility thanks to AG UI |
-| **Open AI ChatKit** | 💡 Proposed | Community interest |
-| **Vecel AI SDK UI** | 💡 Proposed | Community interest |
+| Agent UI toolkit    | Status      | Notes                                  |
+| ------------------- | ----------- | -------------------------------------- |
+| **CopilotKit**      | ✅ Complete | Day-zero compatibility thanks to AG UI |
+| **Open AI ChatKit** | 💡 Proposed | Community interest                     |
+| **Vecel AI SDK UI** | 💡 Proposed | Community interest                     |
 
 ### Agent frameworks
 
-| Integration | Status | Notes |
-|-------------|--------|-------|
-| **Any agent with A2A support** | ✅ Complete | Day-zero compatibility thanks to A2A protocol |
-| **ADK** | 📋 Planned | Still designing developer ergonomics, see [samples](../samples/agent/adk) |
-| **Genkit** | 💡 Proposed | Community interest |
-| **LangGraph** | 💡 Proposed | Community interest |
-| **CrewAI** | 💡 Proposed | Community interest |
-| **AG2** | ✅ Complete | [A2UIAgent](https://docs.ag2.ai/latest/docs/user-guide/reference-agents/a2uiagent) |
-| **Claude Agent SDK** | 💡 Proposed | Community interest |
-| **OpenAI Agent SDK** | 💡 Proposed | Community interest |
-| **Microsoft Agent Framework** | 💡 Proposed | Community interest |
-| **AWS Strands Agent SDK** | 💡 Proposed | Community interest |
+| Integration                    | Status      | Notes                                                                              |
+| ------------------------------ | ----------- | ---------------------------------------------------------------------------------- |
+| **Any agent with A2A support** | ✅ Complete | Day-zero compatibility thanks to A2A protocol                                      |
+| **ADK**                        | 📋 Planned  | Still designing developer ergonomics, see [samples](../samples/agent/adk)          |
+| **Genkit**                     | 💡 Proposed | Community interest                                                                 |
+| **LangGraph**                  | 💡 Proposed | Community interest                                                                 |
+| **CrewAI**                     | 💡 Proposed | Community interest                                                                 |
+| **AG2**                        | ✅ Complete | [A2UIAgent](https://docs.ag2.ai/latest/docs/user-guide/reference-agents/a2uiagent) |
+| **Claude Agent SDK**           | 💡 Proposed | Community interest                                                                 |
+| **OpenAI Agent SDK**           | 💡 Proposed | Community interest                                                                 |
+| **Microsoft Agent Framework**  | 💡 Proposed | Community interest                                                                 |
+| **AWS Strands Agent SDK**      | 💡 Proposed | Community interest                                                                 |
 
 ## Recent Milestones
 
diff --git a/docs/scripts/README.md b/docs/scripts/README.md
index b21d2df6a..33d5ea1dc 100644
--- a/docs/scripts/README.md
+++ b/docs/scripts/README.md
@@ -13,6 +13,7 @@ The script performs a uni-directional transformation: **GitHub Markdown → MkDo
 ### Alert/Admonition Conversion
 
 The script handles the following conversions:
+
 - GitHub uses a blockquote-based syntax for alerts.
 - MkDocs requires the `!!!` or `???` syntax to render colored callout boxes.
 
@@ -27,6 +28,7 @@ python docs/scripts/convert_docs.py
 ### Example
 
 - **Source (GitHub-flavored Markdown):**
+
   ```markdown
   > ⚠️ **Attention**
   >
@@ -36,5 +38,5 @@ python docs/scripts/convert_docs.py
 - **Target (MkDocs Syntax):**
   ```markdown
   !!! warning "Attention"
-      This is an alert.
+  This is an alert.
   ```
diff --git a/docs/specification/v0.8-a2a-extension.md b/docs/specification/v0.8-a2a-extension.md
index e1fa89d33..14c7bc3cf 100644
--- a/docs/specification/v0.8-a2a-extension.md
+++ b/docs/specification/v0.8-a2a-extension.md
@@ -1,8 +1,7 @@
 # A2UI Extension for A2A Protocol <span class="version-badge stable">v0.8 — Stable</span>
 
-
 > NOTE: Living Document
-> 
+>
 > This specification is automatically included from `specification/v0_8/docs/a2ui_extension_specification.md`. Any updates to the specification will automatically appear here.
 
 > NOTE: Version Compatibility
diff --git a/docs/specification/v0.8-a2ui.md b/docs/specification/v0.8-a2ui.md
index eda04d6b4..c9aff9975 100644
--- a/docs/specification/v0.8-a2ui.md
+++ b/docs/specification/v0.8-a2ui.md
@@ -1,5 +1,5 @@
 # A2UI Protocol <span class="version-badge stable">v0.8 — Stable</span>
->
+
 > Version 0.8 is the current stable release, recommended for production use.
 
 > NOTE: Living Document
diff --git a/docs/specification/v0.9-a2ui.md b/docs/specification/v0.9-a2ui.md
index 810c35806..be693c5b9 100644
--- a/docs/specification/v0.9-a2ui.md
+++ b/docs/specification/v0.9-a2ui.md
@@ -1,9 +1,9 @@
 # A2UI Protocol <span class="version-badge draft">v0.9 — Draft</span>
->
+
 > Version 0.9 is currently in draft status. For production use, consider [v0.8 (Stable)](v0.8-a2ui.md).
 
 > NOTE: Living Document
-> 
+>
 > This specification is automatically included from `specification/v0_9/docs/a2ui_protocol.md`. Any updates to the specification will automatically appear here.
 
 For more information, see the following related documentation:
diff --git a/docs/specification/v0.9-evolution-guide.md b/docs/specification/v0.9-evolution-guide.md
index c5f2c8d91..dc3c557cf 100644
--- a/docs/specification/v0.9-evolution-guide.md
+++ b/docs/specification/v0.9-evolution-guide.md
@@ -1,5 +1,5 @@
 # Evolution Guide <span class="version-badge info">v0.8 → v0.9</span>
-> 
+
 > This guide is automatically included from `specification/v0_9/docs/evolution_guide.md`. Any updates will automatically appear here.
 
 For more information, see the following related documentation:
diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css
index d01639f28..60747d826 100644
--- a/docs/stylesheets/custom.css
+++ b/docs/stylesheets/custom.css
@@ -31,12 +31,12 @@
 /* --- Dark/Light Mode Utilities --- */
 
 /* Hide elements meant for dark mode when in light (default) mode */
-[data-md-color-scheme="default"] .dark-mode-only {
+[data-md-color-scheme='default'] .dark-mode-only {
   display: none !important;
 }
 
 /* Hide elements meant for light mode when in dark (slate) mode */
-[data-md-color-scheme="slate"] .light-mode-only {
+[data-md-color-scheme='slate'] .light-mode-only {
   display: none !important;
 }
 
@@ -68,17 +68,17 @@
 }
 
 /* Dark mode overrides */
-[data-md-color-scheme="slate"] .version-badge.stable {
+[data-md-color-scheme='slate'] .version-badge.stable {
   background-color: #1b5e20;
   color: #a5d6a7;
   border-color: #2e7d32;
 }
-[data-md-color-scheme="slate"] .version-badge.draft {
+[data-md-color-scheme='slate'] .version-badge.draft {
   background-color: #e65100;
   color: #ffe0b2;
   border-color: #ef6c00;
 }
-[data-md-color-scheme="slate"] .version-badge.info {
+[data-md-color-scheme='slate'] .version-badge.info {
   background-color: #01579b;
   color: #b3e5fc;
   border-color: #0277bd;
diff --git a/mkdocs.yaml b/mkdocs.yaml
index 6574c804a..9d4c5d6fc 100644
--- a/mkdocs.yaml
+++ b/mkdocs.yaml
@@ -23,12 +23,12 @@ extra:
     provider: google
     property: G-YX9TPV8DCC
   consent:
-      title: Cookie consent
-      description: >-
-        We use cookies to recognize repeated visits and preferences,
-        as well as to measure the effectiveness of our documentation and
-        whether users find the information they need. With your consent,
-        you're helping us to make our documentation better.
+    title: Cookie consent
+    description: >-
+      We use cookies to recognize repeated visits and preferences,
+      as well as to measure the effectiveness of our documentation and
+      whether users find the information they need. With your consent,
+      you're helping us to make our documentation better.
 
 # Navigation
 nav:
@@ -55,7 +55,7 @@ nav:
       - Renderer Development: guides/renderer-development.md
       - Defining Your Own Catalog: guides/defining-your-own-catalog.md
       - Authoring Custom Components: guides/authoring-components.md
-      - Theming & Styling: guides/theming.md      
+      - Theming & Styling: guides/theming.md
       - A2UI over MCP: guides/a2ui_over_mcp.md
       - MCP Apps in A2UI: guides/mcp-apps-in-a2ui.md
       - A2UI in MCP Apps: guides/a2ui-in-mcp-apps.md
@@ -92,7 +92,6 @@ copyright: Copyright Google 2025&nbsp;&nbsp;|&nbsp;&nbsp;<a href="//policies.goo
 extra_css:
   - stylesheets/custom.css
 
-
 # Configuration
 theme:
   name: material
@@ -194,18 +193,17 @@ plugins:
   - redirects:
       redirect_maps:
         # Files moved in docs-file-org reorganization
-        'catalogs.md': 'concepts/catalogs.md'
-        'transports.md': 'concepts/transports.md'
-        'actions.md': 'concepts/actions.md'
-        'renderers.md': 'reference/renderers.md'
-        'agents.md': 'reference/agents.md'
-        'community.md': 'ecosystem/community.md'
-        'introduction/where-is-it-used.md': 'ecosystem/a2ui-in-the-world.md'
-        'guides/guide_a2ui_dynamic_mcp.md': 'guides/a2ui-in-mcp-apps.md'
-        'guides/mcp-apps-in-a2ui-surface.md': 'guides/mcp-apps-in-a2ui.md'
+        "catalogs.md": "concepts/catalogs.md"
+        "transports.md": "concepts/transports.md"
+        "actions.md": "concepts/actions.md"
+        "renderers.md": "reference/renderers.md"
+        "agents.md": "reference/agents.md"
+        "community.md": "ecosystem/community.md"
+        "introduction/where-is-it-used.md": "ecosystem/a2ui-in-the-world.md"
+        "guides/guide_a2ui_dynamic_mcp.md": "guides/a2ui-in-mcp-apps.md"
+        "guides/mcp-apps-in-a2ui-surface.md": "guides/mcp-apps-in-a2ui.md"
   # - llmstxt:
   #     full_output: llms-full.txt
   #     sections:
   #       "Specification":
   #         - a2ui_protocol.md
-
diff --git a/pubspec.yaml b/pubspec.yaml
index 9fdf94c2b..9e07fd90a 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -23,7 +23,7 @@ environment:
 workspace:
   - samples/client/flutter/restaurant_finder/app
   - samples/client/flutter/restaurant_finder/e2e_test
-  
+
 flutter:
   uses-material-design: true
 dev_dependencies:
diff --git a/renderers/angular/README.md b/renderers/angular/README.md
index c3e10af82..08ce8b092 100644
--- a/renderers/angular/README.md
+++ b/renderers/angular/README.md
@@ -22,8 +22,8 @@ A2UI supports multiple protocol versions to ensure backward compatibility as the
 To use the v0.9 implementation, import from the versioned path:
 
 ```typescript
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '@a2ui/angular/v0_9';
-import { BasicCatalog } from '@a2ui/angular/v0_9';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from '@a2ui/angular/v0_9';
+import {BasicCatalog} from '@a2ui/angular/v0_9';
 ```
 
 ## Basic Setup
@@ -31,8 +31,8 @@ import { BasicCatalog } from '@a2ui/angular/v0_9';
 Configure the renderer in your `app.config.ts` using the `A2UI_RENDER_CONFIG` injection token:
 
 ```typescript
-import { ApplicationConfig } from '@angular/core';
-import { A2UI_RENDERER_CONFIG, A2uiRendererService, BasicCatalog } from '@a2ui/angular/v0_9';
+import {ApplicationConfig} from '@angular/core';
+import {A2UI_RENDERER_CONFIG, A2uiRendererService, BasicCatalog} from '@a2ui/angular/v0_9';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -40,7 +40,7 @@ export const appConfig: ApplicationConfig = {
       provide: A2UI_RENDERER_CONFIG,
       useValue: {
         catalogs: [new BasicCatalog()],
-        actionHandler: (action) => {
+        actionHandler: action => {
           console.log('Action received:', action);
         },
       },
@@ -57,8 +57,8 @@ export const appConfig: ApplicationConfig = {
 The simplest way to render an A2UI surface is using the `SurfaceComponent`. This component handles setting up the root `ComponentHost` for you.
 
 ```typescript
-import { Component } from '@angular/core';
-import { SurfaceComponent } from '@a2ui/angular/v0_9';
+import {Component} from '@angular/core';
+import {SurfaceComponent} from '@a2ui/angular/v0_9';
 
 @Component({
   selector: 'app-root',
@@ -74,8 +74,8 @@ export class AppComponent {}
 For more fine-grained control, use the `ComponentHostComponent` to render specific components within a surface:
 
 ```typescript
-import { Component } from '@angular/core';
-import { ComponentHostComponent } from '@a2ui/angular/v0_9';
+import {Component} from '@angular/core';
+import {ComponentHostComponent} from '@a2ui/angular/v0_9';
 
 @Component({
   selector: 'app-custom-layout',
diff --git a/renderers/angular/a2ui_explorer/src/app/action-dispatcher.service.ts b/renderers/angular/a2ui_explorer/src/app/action-dispatcher.service.ts
index 20477c558..b6145a45e 100644
--- a/renderers/angular/a2ui_explorer/src/app/action-dispatcher.service.ts
+++ b/renderers/angular/a2ui_explorer/src/app/action-dispatcher.service.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
-import { A2uiClientAction } from '@a2ui/web_core/v0_9';
+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs';
+import {A2uiClientAction} from '@a2ui/web_core/v0_9';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class ActionDispatcher {
   private action$ = new Subject<A2uiClientAction>();
   actions = this.action$.asObservable();
diff --git a/renderers/angular/a2ui_explorer/src/app/agent-stub.service.spec.ts b/renderers/angular/a2ui_explorer/src/app/agent-stub.service.spec.ts
index 102e6f30f..30450f262 100644
--- a/renderers/angular/a2ui_explorer/src/app/agent-stub.service.spec.ts
+++ b/renderers/angular/a2ui_explorer/src/app/agent-stub.service.spec.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { AgentStubService } from './agent-stub.service';
-import { A2uiRendererService } from '@a2ui/angular/v0_9';
-import { ActionDispatcher } from './action-dispatcher.service';
-import { Subject } from 'rxjs';
-import { A2uiMessage } from '@a2ui/web_core/v0_9';
+import {TestBed} from '@angular/core/testing';
+import {AgentStubService} from './agent-stub.service';
+import {A2uiRendererService} from '@a2ui/angular/v0_9';
+import {ActionDispatcher} from './action-dispatcher.service';
+import {Subject} from 'rxjs';
+import {A2uiMessage} from '@a2ui/web_core/v0_9';
 
 describe('AgentStubService', () => {
   let service: AgentStubService;
@@ -44,8 +44,8 @@ describe('AgentStubService', () => {
     TestBed.configureTestingModule({
       providers: [
         AgentStubService,
-        { provide: A2uiRendererService, useValue: mockRendererService },
-        { provide: ActionDispatcher, useValue: mockActionDispatcher },
+        {provide: A2uiRendererService, useValue: mockRendererService},
+        {provide: ActionDispatcher, useValue: mockActionDispatcher},
       ],
     });
     service = TestBed.inject(AgentStubService);
@@ -77,7 +77,7 @@ describe('AgentStubService', () => {
       mockRendererService.processMessages.calls.reset();
 
       // 2. Second call: Surface now exists
-      mockSurfaceGroup.getSurface.and.returnValue({ id: surfaceId });
+      mockSurfaceGroup.getSurface.and.returnValue({id: surfaceId});
       service.initializeDemo(messages);
 
       // Should have called processMessages twice:
@@ -85,7 +85,7 @@ describe('AgentStubService', () => {
       const deleteMessages = [
         {
           version: 'v0.9' as const,
-          deleteSurface: { surfaceId },
+          deleteSurface: {surfaceId},
         },
       ];
       expect(mockRendererService.processMessages.calls.allArgs()).toEqual([
diff --git a/renderers/angular/a2ui_explorer/src/app/agent-stub.service.ts b/renderers/angular/a2ui_explorer/src/app/agent-stub.service.ts
index 6454172f5..2bc3b4467 100644
--- a/renderers/angular/a2ui_explorer/src/app/agent-stub.service.ts
+++ b/renderers/angular/a2ui_explorer/src/app/agent-stub.service.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import { A2uiRendererService } from '@a2ui/angular/v0_9';
+import {Injectable} from '@angular/core';
+import {A2uiRendererService} from '@a2ui/angular/v0_9';
 
-import { A2uiClientAction, A2uiMessage } from '@a2ui/web_core/v0_9';
-import { ActionDispatcher } from './action-dispatcher.service';
+import {A2uiClientAction, A2uiMessage} from '@a2ui/web_core/v0_9';
+import {ActionDispatcher} from './action-dispatcher.service';
 
 /**
  * Context for the 'update_property' event.
@@ -46,14 +46,14 @@ interface SubmitFormContext {
 })
 export class AgentStubService {
   /** Log of actions received from the surface. */
-  actionsLog: Array<{ timestamp: Date; action: A2uiClientAction }> = [];
+  actionsLog: Array<{timestamp: Date; action: A2uiClientAction}> = [];
 
   constructor(
     private rendererService: A2uiRendererService,
     private dispatcher: ActionDispatcher,
   ) {
     // Subscribe to actions dispatched by the renderer
-    this.dispatcher.actions.subscribe((action) => this.handleAction(action));
+    this.dispatcher.actions.subscribe(action => this.handleAction(action));
   }
 
   /**
@@ -61,13 +61,13 @@ export class AgentStubService {
    */
   handleAction(action: A2uiClientAction) {
     console.log('[AgentStub] handleAction action:', action);
-    this.actionsLog.push({ timestamp: new Date(), action });
+    this.actionsLog.push({timestamp: new Date(), action});
 
     // Simulate server processing delay
     setTimeout(() => {
-      const { name, context } = action;
+      const {name, context} = action;
       if (name === 'update_property' && context) {
-        const { path, value, surfaceId } = context as unknown as UpdatePropertyContext;
+        const {path, value, surfaceId} = context as unknown as UpdatePropertyContext;
         console.log(
           '[AgentStub] update_property path:',
           path,
@@ -127,7 +127,7 @@ export class AgentStubService {
             this.rendererService.processMessages([
               {
                 version: 'v0.9',
-                deleteSurface: { surfaceId: createSurface.surfaceId },
+                deleteSurface: {surfaceId: createSurface.surfaceId},
               },
             ]);
           }
diff --git a/renderers/angular/a2ui_explorer/src/app/app.config.ts b/renderers/angular/a2ui_explorer/src/app/app.config.ts
index 7b73c5be3..90a01595b 100644
--- a/renderers/angular/a2ui_explorer/src/app/app.config.ts
+++ b/renderers/angular/a2ui_explorer/src/app/app.config.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideMarkdownRenderer } from '../../../src/v0_9/core/markdown';
+import {ApplicationConfig, provideBrowserGlobalErrorListeners} from '@angular/core';
+import {provideMarkdownRenderer} from '../../../src/v0_9/core/markdown';
 
 export const appConfig: ApplicationConfig = {
   providers: [provideBrowserGlobalErrorListeners(), provideMarkdownRenderer()],
diff --git a/renderers/angular/a2ui_explorer/src/app/app.spec.ts b/renderers/angular/a2ui_explorer/src/app/app.spec.ts
index e905d1ab9..a6b41e1cf 100644
--- a/renderers/angular/a2ui_explorer/src/app/app.spec.ts
+++ b/renderers/angular/a2ui_explorer/src/app/app.spec.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { App } from './app';
+import {TestBed, fakeAsync, tick} from '@angular/core/testing';
+import {App} from './app';
 
 describe('App', () => {
   beforeEach(async () => {
diff --git a/renderers/angular/a2ui_explorer/src/app/app.ts b/renderers/angular/a2ui_explorer/src/app/app.ts
index 23665e10d..a4e2fd0f1 100644
--- a/renderers/angular/a2ui_explorer/src/app/app.ts
+++ b/renderers/angular/a2ui_explorer/src/app/app.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { DemoComponent } from './demo.component';
+import {Component} from '@angular/core';
+import {DemoComponent} from './demo.component';
 
 /**
  * Root Component of the A2UI Angular Demo app.
diff --git a/renderers/angular/a2ui_explorer/src/app/card.component.ts b/renderers/angular/a2ui_explorer/src/app/card.component.ts
index 5b7343228..b5fd10daf 100644
--- a/renderers/angular/a2ui_explorer/src/app/card.component.ts
+++ b/renderers/angular/a2ui_explorer/src/app/card.component.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ComponentHostComponent } from '@a2ui/angular/v0_9';
-import { BoundProperty } from '@a2ui/angular/v0_9';
+import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ComponentHostComponent} from '@a2ui/angular/v0_9';
+import {BoundProperty} from '@a2ui/angular/v0_9';
 
 /**
  * A simple card component for the demo.
diff --git a/renderers/angular/a2ui_explorer/src/app/custom-slider.component.ts b/renderers/angular/a2ui_explorer/src/app/custom-slider.component.ts
index e983bab64..27d29472c 100644
--- a/renderers/angular/a2ui_explorer/src/app/custom-slider.component.ts
+++ b/renderers/angular/a2ui_explorer/src/app/custom-slider.component.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CatalogComponent } from 'src/v0_9/core/catalog_component';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CatalogComponent} from 'src/v0_9/core/catalog_component';
 import z from 'zod';
-import { ComponentApi } from '@a2ui/web_core/v0_9';
+import {ComponentApi} from '@a2ui/web_core/v0_9';
 
 const customSliderApi = {
   name: 'CustomSlider',
@@ -71,4 +71,7 @@ export class CustomSliderComponent extends CatalogComponent<typeof customSliderA
   }
 }
 
-export const customSliderComponentDeclaration = { ...customSliderApi, component: CustomSliderComponent };
+export const customSliderComponentDeclaration = {
+  ...customSliderApi,
+  component: CustomSliderComponent,
+};
diff --git a/renderers/angular/a2ui_explorer/src/app/demo-catalog.ts b/renderers/angular/a2ui_explorer/src/app/demo-catalog.ts
index ce9d7e5bf..ddb5bbc4c 100644
--- a/renderers/angular/a2ui_explorer/src/app/demo-catalog.ts
+++ b/renderers/angular/a2ui_explorer/src/app/demo-catalog.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import { z } from 'zod';
-import { BasicCatalogBase, BASIC_FUNCTIONS } from '@a2ui/angular/v0_9';
-import { customSliderComponentDeclaration } from './custom-slider.component';
-import { createFunctionImplementation, FunctionImplementation } from '@a2ui/web_core/v0_9';
+import {Injectable} from '@angular/core';
+import {z} from 'zod';
+import {BasicCatalogBase, BASIC_FUNCTIONS} from '@a2ui/angular/v0_9';
+import {customSliderComponentDeclaration} from './custom-slider.component';
+import {createFunctionImplementation, FunctionImplementation} from '@a2ui/web_core/v0_9';
 
 /**
  * A catalog specific to the demo, extending the basic catalog with custom components.
@@ -28,14 +28,13 @@ import { createFunctionImplementation, FunctionImplementation } from '@a2ui/web_
 })
 export class DemoCatalog extends BasicCatalogBase {
   constructor() {
-
     const capitalizeImplementation: FunctionImplementation = createFunctionImplementation(
       {
         name: 'capitalize',
         returnType: 'string',
-        schema: z.object({ value: z.string().optional() }) as any,
+        schema: z.object({value: z.string().optional()}) as any,
       },
-      (args) => {
+      args => {
         const value = String(args.value || '');
         return value.charAt(0).toUpperCase() + value.slice(1);
       },
diff --git a/renderers/angular/a2ui_explorer/src/app/demo.component.ts b/renderers/angular/a2ui_explorer/src/app/demo.component.ts
index 0f56493e5..ab738bb35 100644
--- a/renderers/angular/a2ui_explorer/src/app/demo.component.ts
+++ b/renderers/angular/a2ui_explorer/src/app/demo.component.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { ChangeDetectorRef, Component, OnInit, inject, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '@a2ui/angular/v0_9';
-import { AgentStubService } from './agent-stub.service';
-import { SurfaceComponent } from '@a2ui/angular/v0_9';
-import { AngularCatalog } from '@a2ui/angular/v0_9';
-import { DemoCatalog } from './demo-catalog';
-import { A2uiClientAction, CreateSurfaceMessage } from '@a2ui/web_core/v0_9';
-import { EXAMPLES } from './generated/examples-bundle';
-import { Example } from './types';
-import { ActionDispatcher } from './action-dispatcher.service';
+import {ChangeDetectorRef, Component, OnInit, inject, OnDestroy} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from '@a2ui/angular/v0_9';
+import {AgentStubService} from './agent-stub.service';
+import {SurfaceComponent} from '@a2ui/angular/v0_9';
+import {AngularCatalog} from '@a2ui/angular/v0_9';
+import {DemoCatalog} from './demo-catalog';
+import {A2uiClientAction, CreateSurfaceMessage} from '@a2ui/web_core/v0_9';
+import {EXAMPLES} from './generated/examples-bundle';
+import {Example} from './types';
+import {ActionDispatcher} from './action-dispatcher.service';
 
 /**
  * Main dashboard component for A2UI v0.9 Angular Renderer.
@@ -73,17 +73,28 @@ import { ActionDispatcher } from './action-dispatcher.service';
       <!-- Inspect Panel -->
       <div class="inspect-area">
         <div class="inspect-section surface-section" [class.folded]="isSurfaceMessageFolded">
-          <div class="section-header" 
-               (click)="toggleSurfaceMessage()" 
-               (keydown.enter)="toggleSurfaceMessage()"
-               (keydown.space)="toggleSurfaceMessage(); $event.preventDefault()"
-               style="cursor: pointer;"
-               role="button"
-               tabindex="0"
-               [attr.aria-expanded]="!isSurfaceMessageFolded">
+          <div
+            class="section-header"
+            (click)="toggleSurfaceMessage()"
+            (keydown.enter)="toggleSurfaceMessage()"
+            (keydown.space)="toggleSurfaceMessage(); $event.preventDefault()"
+            style="cursor: pointer;"
+            role="button"
+            tabindex="0"
+            [attr.aria-expanded]="!isSurfaceMessageFolded"
+          >
             <div class="header-left">
               <span class="toggle-icon" [class.expanded]="!isSurfaceMessageFolded">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
                   <polyline points="9 18 15 12 9 6"></polyline>
                 </svg>
               </span>
@@ -108,17 +119,28 @@ import { ActionDispatcher } from './action-dispatcher.service';
         </div>
 
         <div class="inspect-section data-section" [class.folded]="isDataModelFolded">
-          <div class="section-header" 
-               (click)="toggleDataModel()" 
-               (keydown.enter)="toggleDataModel()"
-               (keydown.space)="toggleDataModel(); $event.preventDefault()"
-               style="cursor: pointer;"
-               role="button"
-               tabindex="0"
-               [attr.aria-expanded]="!isDataModelFolded">
+          <div
+            class="section-header"
+            (click)="toggleDataModel()"
+            (keydown.enter)="toggleDataModel()"
+            (keydown.space)="toggleDataModel(); $event.preventDefault()"
+            style="cursor: pointer;"
+            role="button"
+            tabindex="0"
+            [attr.aria-expanded]="!isDataModelFolded"
+          >
             <div class="header-left">
               <span class="toggle-icon" [class.expanded]="!isDataModelFolded">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
                   <polyline points="9 18 15 12 9 6"></polyline>
                 </svg>
               </span>
@@ -143,24 +165,37 @@ import { ActionDispatcher } from './action-dispatcher.service';
         </div>
 
         <div class="inspect-section events-section" [class.folded]="isEventsLogFolded">
-          <div class="section-header" 
-               (click)="toggleEventsLog()" 
-               (keydown.enter)="toggleEventsLog()"
-               (keydown.space)="toggleEventsLog(); $event.preventDefault()"
-               style="cursor: pointer;"
-               role="button"
-               tabindex="0"
-               [attr.aria-expanded]="!isEventsLogFolded">
+          <div
+            class="section-header"
+            (click)="toggleEventsLog()"
+            (keydown.enter)="toggleEventsLog()"
+            (keydown.space)="toggleEventsLog(); $event.preventDefault()"
+            style="cursor: pointer;"
+            role="button"
+            tabindex="0"
+            [attr.aria-expanded]="!isEventsLogFolded"
+          >
             <div class="header-left">
               <span class="toggle-icon" [class.expanded]="!isEventsLogFolded">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="3"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
                   <polyline points="9 18 15 12 9 6"></polyline>
                 </svg>
               </span>
               <h4>Events Log</h4>
             </div>
             <div>
-              <button class="clear-btn" (click)="eventsLog = []; $event.stopPropagation()">Clear</button>
+              <button class="clear-btn" (click)="eventsLog = []; $event.stopPropagation()">
+                Clear
+              </button>
             </div>
           </div>
           <div class="section-content" *ngIf="!isEventsLogFolded">
@@ -460,7 +495,7 @@ import { ActionDispatcher } from './action-dispatcher.service';
   ],
   providers: [
     A2uiRendererService,
-    { provide: AngularCatalog, useClass: DemoCatalog },
+    {provide: AngularCatalog, useClass: DemoCatalog},
     ActionDispatcher,
     AgentStubService,
     {
@@ -484,7 +519,7 @@ export class DemoComponent implements OnInit, OnDestroy {
   inspectTab: 'data' | 'events' = 'data';
 
   currentDataModel: Record<string, unknown> = {};
-  eventsLog: Array<{ timestamp: Date; action: A2uiClientAction }> = [];
+  eventsLog: Array<{timestamp: Date; action: A2uiClientAction}> = [];
   currentCreateSurfaceMessageJson: string = '';
   messageError: string | null = null;
   currentDataModelJson: string = '';
@@ -509,8 +544,8 @@ export class DemoComponent implements OnInit, OnDestroy {
     localStorage.setItem('isEventsLogFolded', String(this.isEventsLogFolded));
   }
 
-  private actionSub?: { unsubscribe: () => void };
-  private dataModelSub?: { unsubscribe: () => void };
+  private actionSub?: {unsubscribe: () => void};
+  private dataModelSub?: {unsubscribe: () => void};
 
   ngOnInit(): void {
     if (typeof window !== 'undefined') {
@@ -564,8 +599,8 @@ export class DemoComponent implements OnInit, OnDestroy {
       if (this.actionSub) {
         this.actionSub.unsubscribe();
       }
-      this.actionSub = this.rendererService.surfaceGroup.onAction.subscribe((action) => {
-        this.eventsLog.unshift({ timestamp: new Date(), action });
+      this.actionSub = this.rendererService.surfaceGroup.onAction.subscribe(action => {
+        this.eventsLog.unshift({timestamp: new Date(), action});
         this.cdr.detectChanges();
       });
     }
@@ -592,7 +627,7 @@ export class DemoComponent implements OnInit, OnDestroy {
       if (!('createSurface' in parsed) || !this.selectedExample) return;
 
       const updatedMessages = this.selectedExample.messages.map(m =>
-        'createSurface' in m ? parsed : m
+        'createSurface' in m ? parsed : m,
       );
 
       // Re-initialize the demo with the updated messages
@@ -611,7 +646,7 @@ export class DemoComponent implements OnInit, OnDestroy {
       this.surfaceId = newSurfaceId;
       const surface = this.rendererService.surfaceGroup?.getSurface(this.surfaceId!);
       if (surface) {
-        this.dataModelSub = surface.dataModel.subscribe('/', (data) => {
+        this.dataModelSub = surface.dataModel.subscribe('/', data => {
           this.currentDataModel = data as Record<string, unknown>;
           this.currentDataModelJson = JSON.stringify(data, null, 2);
           this.cdr.detectChanges();
@@ -675,12 +710,16 @@ export class DemoComponent implements OnInit, OnDestroy {
   }
 
   private slugify(text: string): string {
-    return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    return text
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '');
   }
 
   private selectExampleFromUrl(): void {
     const hash = window.location.hash.substring(1) || '';
-    const example: Example | undefined = this.examples.find(ex => this.slugify(ex.name) === hash) || this.examples[0];
+    const example: Example | undefined =
+      this.examples.find(ex => this.slugify(ex.name) === hash) || this.examples[0];
     if (!example) return;
     this.selectExample(example);
   }
diff --git a/renderers/angular/a2ui_explorer/src/app/kitchen-sink-surface.ts b/renderers/angular/a2ui_explorer/src/app/kitchen-sink-surface.ts
index 1e137d033..673696dd1 100644
--- a/renderers/angular/a2ui_explorer/src/app/kitchen-sink-surface.ts
+++ b/renderers/angular/a2ui_explorer/src/app/kitchen-sink-surface.ts
@@ -93,13 +93,13 @@ export const KITCHEN_SINK_SURFACE = [
           id: 'name-field',
           component: 'TextField',
           label: 'Your Name',
-          value: { path: '/user/name' },
+          value: {path: '/user/name'},
         },
         {
           id: 'satisfaction-slider',
           component: 'CustomSlider',
           label: 'Satisfaction Level',
-          value: { path: '/user/satisfaction' },
+          value: {path: '/user/satisfaction'},
           min: 0,
           max: 10,
         },
@@ -107,7 +107,7 @@ export const KITCHEN_SINK_SURFACE = [
           id: 'email-field',
           component: 'TextField',
           label: 'Email Address',
-          value: { path: '/user/email' },
+          value: {path: '/user/email'},
           variant: 'shortText',
         },
         {
@@ -119,8 +119,8 @@ export const KITCHEN_SINK_SURFACE = [
             event: {
               name: 'submit_form',
               context: {
-                name: { path: '/user/name' },
-                email: { path: '/user/email' },
+                name: {path: '/user/name'},
+                email: {path: '/user/email'},
               },
             },
           },
@@ -133,7 +133,7 @@ export const KITCHEN_SINK_SURFACE = [
         {
           id: 'result-msg',
           component: 'Text',
-          text: { path: '/form/responseMessage' },
+          text: {path: '/form/responseMessage'},
         },
         {
           id: 'footer',
diff --git a/renderers/angular/a2ui_explorer/src/app/types.ts b/renderers/angular/a2ui_explorer/src/app/types.ts
index 208d46691..c24524ccb 100644
--- a/renderers/angular/a2ui_explorer/src/app/types.ts
+++ b/renderers/angular/a2ui_explorer/src/app/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { A2uiMessage } from '@a2ui/web_core/v0_9';
+import {A2uiMessage} from '@a2ui/web_core/v0_9';
 
 /**
  * Represents a demo example configuration.
diff --git a/renderers/angular/a2ui_explorer/src/main.ts b/renderers/angular/a2ui_explorer/src/main.ts
index 94303b012..56f29a67f 100644
--- a/renderers/angular/a2ui_explorer/src/main.ts
+++ b/renderers/angular/a2ui_explorer/src/main.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {App} from './app/app';
 
-bootstrapApplication(App, appConfig).catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch(err => console.error(err));
diff --git a/renderers/angular/karma.conf.js b/renderers/angular/karma.conf.js
index 1402572ad..f1e790433 100644
--- a/renderers/angular/karma.conf.js
+++ b/renderers/angular/karma.conf.js
@@ -41,7 +41,7 @@ module.exports = function (config) {
     coverageReporter: {
       dir: require('path').join(__dirname, './coverage/lib'),
       subdir: '.',
-      reporters: [{ type: 'html' }, { type: 'text-summary' }],
+      reporters: [{type: 'html'}, {type: 'text-summary'}],
     },
     reporters: ['progress', 'kjhtml'],
     browsers: ['Chrome'],
diff --git a/renderers/angular/package.json b/renderers/angular/package.json
index e9e9b535a..b3f1f6e03 100644
--- a/renderers/angular/package.json
+++ b/renderers/angular/package.json
@@ -75,18 +75,6 @@
     "vitest": "^4.0.15"
   },
   "sideEffects": false,
-  "prettier": {
-    "printWidth": 100,
-    "singleQuote": true,
-    "overrides": [
-      {
-        "files": "*.html",
-        "options": {
-          "parser": "angular"
-        }
-      }
-    ]
-  },
   "overrides": {
     "@preact/signals-core": "^1.13.0"
   }
diff --git a/renderers/angular/scripts/generate-examples.mjs b/renderers/angular/scripts/generate-examples.mjs
index 95be93e43..9b6955c65 100644
--- a/renderers/angular/scripts/generate-examples.mjs
+++ b/renderers/angular/scripts/generate-examples.mjs
@@ -16,7 +16,7 @@
 
 import fs from 'fs';
 import path from 'path';
-import { parseArgs } from 'node:util';
+import {parseArgs} from 'node:util';
 
 /**
  * The default output file path where the generated examples bundle will be written.
@@ -37,11 +37,11 @@ const DEFAULT_CATALOGS = ['minimal', 'basic'];
  * The options that this script accepts.
  */
 const options = {
-  help: { type: 'boolean', short: 'h' },
-  'out-file': { type: 'string', short: 'o', default: DEFAULT_OUT_FILE },
-  'spec-path': { type: 'string', short: 's', default: DEFAULT_SPEC_PATH },
-  catalog: { type: 'string', short: 'c', multiple: true, default: DEFAULT_CATALOGS },
-  'override-minimal-catalog-id': { type: 'boolean', default: true },
+  help: {type: 'boolean', short: 'h'},
+  'out-file': {type: 'string', short: 'o', default: DEFAULT_OUT_FILE},
+  'spec-path': {type: 'string', short: 's', default: DEFAULT_SPEC_PATH},
+  catalog: {type: 'string', short: 'c', multiple: true, default: DEFAULT_CATALOGS},
+  'override-minimal-catalog-id': {type: 'boolean', default: true},
 };
 
 /**
@@ -62,7 +62,7 @@ Options:
  * preserving the version in the path.
  */
 function overrideMessagesCatalogId(messages) {
-  const overrideCatalogId = (catalogId) => {
+  const overrideCatalogId = catalogId => {
     return catalogId.replace('catalogs/minimal/minimal_catalog.json', 'basic_catalog.json');
   };
   for (const msg of messages) {
@@ -83,7 +83,7 @@ function overrideMessagesCatalogId(messages) {
  * Parses arguments, reads catalog examples, and generates the TypeScript bundle.
  */
 async function main() {
-  const { values } = parseArgs({ options, allowNegative: true });
+  const {values} = parseArgs({options, allowNegative: true});
 
   if (values.help) {
     console.log(HELP_MESSAGE);
@@ -96,7 +96,7 @@ async function main() {
   const overrideCatalogId = values['override-minimal-catalog-id'];
 
   if (!fs.existsSync(outDir)) {
-    fs.mkdirSync(outDir, { recursive: true });
+    fs.mkdirSync(outDir, {recursive: true});
   }
 
   const catalogs = values.catalog;
@@ -107,7 +107,7 @@ async function main() {
     if (fs.existsSync(examplesDir)) {
       const files = fs
         .readdirSync(examplesDir)
-        .filter((f) => f.endsWith('.json'))
+        .filter(f => f.endsWith('.json'))
         .sort();
       for (const file of files) {
         const filePath = path.join(examplesDir, file);
@@ -120,7 +120,7 @@ async function main() {
             .replace('.json', '')
             .replace(/^[0-9]+_/, '')
             .replace(/[-_]/g, ' ')
-            .replace(/\b\w/g, (l) => l.toUpperCase());
+            .replace(/\b\w/g, l => l.toUpperCase());
 
           // Ensure it's in the Example format
           if (Array.isArray(data)) {
@@ -145,7 +145,7 @@ async function main() {
 
           examples.push(example);
         } catch (e) {
-          throw new Error(`Error parsing ${filePath}`, { cause: e });
+          throw new Error(`Error parsing ${filePath}`, {cause: e});
         }
       }
     } else {
@@ -173,7 +173,7 @@ export const EXAMPLES: Example[] = ${JSON.stringify(examples, null, 2)};
 /**
  * Entry point of the script.
  */
-main().catch((err) => {
+main().catch(err => {
   console.error(err);
   process.exit(1);
 });
diff --git a/renderers/angular/src/v0_8/catalog/index.ts b/renderers/angular/src/v0_8/catalog/index.ts
index 4591fbfce..a0185f06b 100644
--- a/renderers/angular/src/v0_8/catalog/index.ts
+++ b/renderers/angular/src/v0_8/catalog/index.ts
@@ -14,27 +14,27 @@
  * limitations under the License.
  */
 
-import { Catalog } from '../rendering/catalog';
+import {Catalog} from '../rendering/catalog';
 
 // Components
-import { AudioPlayer } from '../components/audio';
-import { Button } from '../components/button';
-import { Card } from '../components/card';
-import { Checkbox } from '../components/checkbox';
-import { Column } from '../components/column';
-import { DateTimeInput } from '../components/datetime-input';
-import { Divider } from '../components/divider';
-import { Icon } from '../components/icon';
-import { Image } from '../components/image';
-import { List } from '../components/list';
-import { Modal } from '../components/modal';
-import { MultipleChoice } from '../components/multiple-choice';
-import { Row } from '../components/row';
-import { Slider } from '../components/slider';
-import { Tabs } from '../components/tabs';
-import { Text } from '../components/text';
-import { TextField } from '../components/text-field';
-import { Video } from '../components/video';
+import {AudioPlayer} from '../components/audio';
+import {Button} from '../components/button';
+import {Card} from '../components/card';
+import {Checkbox} from '../components/checkbox';
+import {Column} from '../components/column';
+import {DateTimeInput} from '../components/datetime-input';
+import {Divider} from '../components/divider';
+import {Icon} from '../components/icon';
+import {Image} from '../components/image';
+import {List} from '../components/list';
+import {Modal} from '../components/modal';
+import {MultipleChoice} from '../components/multiple-choice';
+import {Row} from '../components/row';
+import {Slider} from '../components/slider';
+import {Tabs} from '../components/tabs';
+import {Text} from '../components/text';
+import {TextField} from '../components/text-field';
+import {Video} from '../components/video';
 
 export const DEFAULT_CATALOG: Catalog = {
   AudioPlayer: () => AudioPlayer,
diff --git a/renderers/angular/src/v0_8/components/audio.spec.ts b/renderers/angular/src/v0_8/components/audio.spec.ts
index 42af324a9..634827cb1 100644
--- a/renderers/angular/src/v0_8/components/audio.spec.ts
+++ b/renderers/angular/src/v0_8/components/audio.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AudioPlayer } from './audio';
-import type { AudioPlayerNode } from '../types';
-import { Theme } from '../rendering/theming';
-import { ChangeDetectionStrategy } from '@angular/core';
-import { MessageProcessor } from '../data/processor';
-import { Catalog } from '../rendering/catalog';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {AudioPlayer} from './audio';
+import type {AudioPlayerNode} from '../types';
+import {Theme} from '../rendering/theming';
+import {ChangeDetectionStrategy} from '@angular/core';
+import {MessageProcessor} from '../data/processor';
+import {Catalog} from '../rendering/catalog';
 
 describe('AudioPlayer Component', () => {
   let component: AudioPlayer;
@@ -33,7 +33,7 @@ describe('AudioPlayer Component', () => {
     type: 'AudioPlayer',
     weight: 1,
     properties: {
-      url: { literalString: 'https://example.com/audio.mp3' },
+      url: {literalString: 'https://example.com/audio.mp3'},
     },
   };
 
@@ -44,18 +44,18 @@ describe('AudioPlayer Component', () => {
       'getData',
     ]);
     mockTheme = new Theme();
-    mockTheme.additionalStyles = { AudioPlayer: { backgroundColor: 'red' } } as any;
+    mockTheme.additionalStyles = {AudioPlayer: {backgroundColor: 'red'}} as any;
 
     await TestBed.configureTestingModule({
       imports: [AudioPlayer],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(AudioPlayer, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
+        set: {changeDetection: ChangeDetectionStrategy.Default},
       })
       .compileComponents();
 
diff --git a/renderers/angular/src/v0_8/components/audio.ts b/renderers/angular/src/v0_8/components/audio.ts
index d337b5780..bbced37e0 100644
--- a/renderers/angular/src/v0_8/components/audio.ts
+++ b/renderers/angular/src/v0_8/components/audio.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import type { AudioPlayerNode, StringValue } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import type {AudioPlayerNode, StringValue} from '../types';
 
 @Component({
   selector: 'a2ui-audio',
diff --git a/renderers/angular/src/v0_8/components/button.spec.ts b/renderers/angular/src/v0_8/components/button.spec.ts
index d72853cf4..cf0790c54 100644
--- a/renderers/angular/src/v0_8/components/button.spec.ts
+++ b/renderers/angular/src/v0_8/components/button.spec.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Button } from './button';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { Renderer } from '../rendering/renderer';
-import type { Action, ButtonNode, A2UIClientEventMessage } from '../types';
-import { Directive, Input } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Button} from './button';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {Renderer} from '../rendering/renderer';
+import type {Action, ButtonNode, A2UIClientEventMessage} from '../types';
+import {Directive, Input} from '@angular/core';
 
 // Mock Renderer directive to avoid full tree rendering issues for isolated unit tests
 @Directive({
@@ -49,7 +49,7 @@ describe('Button Component', () => {
     type: 'Button',
     weight: 1,
     properties: {
-      child: { id: 'text-1', type: 'Text', properties: { text: 'Click Me' } },
+      child: {id: 'text-1', type: 'Text', properties: {text: 'Click Me'}},
       action: mockAction,
     },
   };
@@ -63,22 +63,22 @@ describe('Button Component', () => {
     mockProcessor.dispatch.and.returnValue(Promise.resolve([]));
 
     mockTheme = new Theme();
-    mockTheme.components = { Button: 'btn-class' } as any;
-    mockTheme.additionalStyles = { Button: { color: 'red' } } as any;
+    mockTheme.components = {Button: 'btn-class'} as any;
+    mockTheme.additionalStyles = {Button: {color: 'red'}} as any;
 
     const mockCatalog = {};
 
     await TestBed.configureTestingModule({
       imports: [Button],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: mockCatalog },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: mockCatalog},
       ],
     })
       .overrideComponent(Button, {
-        remove: { imports: [Renderer] },
-        add: { imports: [MockRenderer] },
+        remove: {imports: [Renderer]},
+        add: {imports: [MockRenderer]},
       })
       .compileComponents();
 
diff --git a/renderers/angular/src/v0_8/components/button.ts b/renderers/angular/src/v0_8/components/button.ts
index fbfc6f3c3..0ff926a8b 100644
--- a/renderers/angular/src/v0_8/components/button.ts
+++ b/renderers/angular/src/v0_8/components/button.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import type { ButtonNode, Action, AnyComponentNode } from '../types';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import type {ButtonNode, Action, AnyComponentNode} from '../types';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import {Renderer} from '../rendering/renderer';
 
 @Component({
   selector: 'a2ui-button',
diff --git a/renderers/angular/src/v0_8/components/card.spec.ts b/renderers/angular/src/v0_8/components/card.spec.ts
index f16d92f0a..42fd4f895 100644
--- a/renderers/angular/src/v0_8/components/card.spec.ts
+++ b/renderers/angular/src/v0_8/components/card.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Card } from './card';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import type { CardNode } from '../types';
-import { Directive, Input, ChangeDetectionStrategy } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Card} from './card';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import type {CardNode} from '../types';
+import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -46,21 +46,21 @@ describe('Card Component', () => {
     type: 'Card',
     weight: 1,
     properties: {
-      child: { id: 'dummy-1', type: 'Text', properties: { text: 'Empty' } },
+      child: {id: 'dummy-1', type: 'Text', properties: {text: 'Empty'}},
       children: [],
     },
   };
 
   beforeEach(async () => {
     mockTheme = new Theme();
-    mockTheme.components = { Card: 'card-class' } as any;
+    mockTheme.components = {Card: 'card-class'} as any;
 
     await TestBed.configureTestingModule({
       imports: [Card],
       providers: [
-        { provide: MessageProcessor, useValue: {} },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: {}},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(Card, {
@@ -93,7 +93,7 @@ describe('Card Component', () => {
   });
 
   it('should render child if provided', () => {
-    const childNode = { id: 'child-1', type: 'Text', properties: {} };
+    const childNode = {id: 'child-1', type: 'Text', properties: {}};
     fixture.componentRef.setInput('child', childNode);
     fixture.detectChanges();
 
@@ -107,8 +107,8 @@ describe('Card Component', () => {
 
   it('should render children if provided', () => {
     const childrenNodes = [
-      { id: 'child-1', type: 'Text', properties: {} },
-      { id: 'child-2', type: 'Text', properties: {} },
+      {id: 'child-1', type: 'Text', properties: {}},
+      {id: 'child-2', type: 'Text', properties: {}},
     ];
     fixture.componentRef.setInput('children', childrenNodes);
     fixture.detectChanges();
diff --git a/renderers/angular/src/v0_8/components/card.ts b/renderers/angular/src/v0_8/components/card.ts
index 0ee465bfc..165bde4cb 100644
--- a/renderers/angular/src/v0_8/components/card.ts
+++ b/renderers/angular/src/v0_8/components/card.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
-import type { AnyComponentNode, CardNode } from '../types';
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import {Renderer} from '../rendering/renderer';
+import type {AnyComponentNode, CardNode} from '../types';
 
 @Component({
   selector: 'a2ui-card',
diff --git a/renderers/angular/src/v0_8/components/checkbox.spec.ts b/renderers/angular/src/v0_8/components/checkbox.spec.ts
index 8c6153b8c..4e85be139 100644
--- a/renderers/angular/src/v0_8/components/checkbox.spec.ts
+++ b/renderers/angular/src/v0_8/components/checkbox.spec.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Checkbox } from './checkbox';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import type { A2UIClientEventMessage, CheckboxNode } from '../types';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Checkbox} from './checkbox';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import type {A2UIClientEventMessage, CheckboxNode} from '../types';
 
 describe('Checkbox Component', () => {
   let component: Checkbox;
@@ -30,8 +30,8 @@ describe('Checkbox Component', () => {
     type: 'CheckBox',
     weight: 1,
     properties: {
-      label: { literalString: 'Accept Terms' },
-      value: { literalBoolean: false },
+      label: {literalString: 'Accept Terms'},
+      value: {literalBoolean: false},
     },
   };
 
@@ -46,8 +46,8 @@ describe('Checkbox Component', () => {
     await TestBed.configureTestingModule({
       imports: [Checkbox],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: new Theme() },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: new Theme()},
       ],
     }).compileComponents();
 
@@ -57,8 +57,8 @@ describe('Checkbox Component', () => {
     fixture.componentRef.setInput('surfaceId', 'surface-1');
     fixture.componentRef.setInput('component', mockNode);
     fixture.componentRef.setInput('weight', 1);
-    fixture.componentRef.setInput('label', { literalString: 'Accept Terms' });
-    fixture.componentRef.setInput('value', { literalBoolean: false });
+    fixture.componentRef.setInput('label', {literalString: 'Accept Terms'});
+    fixture.componentRef.setInput('value', {literalBoolean: false});
 
     fixture.detectChanges();
   });
@@ -76,7 +76,7 @@ describe('Checkbox Component', () => {
     const inputEl = fixture.nativeElement.querySelector('input');
     expect(inputEl.checked).toBeFalse();
 
-    fixture.componentRef.setInput('value', { literalBoolean: true });
+    fixture.componentRef.setInput('value', {literalBoolean: true});
     fixture.detectChanges();
     expect(inputEl.checked).toBeTrue();
   });
diff --git a/renderers/angular/src/v0_8/components/checkbox.ts b/renderers/angular/src/v0_8/components/checkbox.ts
index 1650de704..eba7cdb6f 100644
--- a/renderers/angular/src/v0_8/components/checkbox.ts
+++ b/renderers/angular/src/v0_8/components/checkbox.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import type { BooleanValue, CheckboxNode, StringValue } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import type {BooleanValue, CheckboxNode, StringValue} from '../types';
 
 @Component({
   selector: 'a2ui-checkbox',
@@ -66,14 +66,14 @@ export class Checkbox extends DynamicComponent<CheckboxNode> {
               checkedNode.path as string,
               this.component().dataContextPath,
             ),
-            contents: [{ key: '.', valueBoolean: checked }],
+            contents: [{key: '.', valueBoolean: checked}],
           },
         },
       ]);
     } else {
       this.sendAction({
         name: 'toggle',
-        context: [{ key: 'checked', value: { literalBoolean: checked } }],
+        context: [{key: 'checked', value: {literalBoolean: checked}}],
       });
     }
   }
diff --git a/renderers/angular/src/v0_8/components/column.spec.ts b/renderers/angular/src/v0_8/components/column.spec.ts
index eb872f38f..9e954d5c1 100644
--- a/renderers/angular/src/v0_8/components/column.spec.ts
+++ b/renderers/angular/src/v0_8/components/column.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Column } from './column';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import type { ColumnNode } from '../types';
-import { Directive, Input, ChangeDetectionStrategy } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Column} from './column';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import type {ColumnNode} from '../types';
+import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -46,20 +46,20 @@ describe('Column Component', () => {
     type: 'Column',
     weight: 1,
     properties: {
-      children: [{ id: 'child-1', type: 'Text', properties: {} }],
+      children: [{id: 'child-1', type: 'Text', properties: {}}],
     },
   };
 
   beforeEach(async () => {
     mockTheme = new Theme();
-    mockTheme.components = { Column: { 'custom-col': true } } as any;
+    mockTheme.components = {Column: {'custom-col': true}} as any;
 
     await TestBed.configureTestingModule({
       imports: [Column],
       providers: [
-        { provide: MessageProcessor, useValue: {} },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: {}},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(Column, {
diff --git a/renderers/angular/src/v0_8/components/column.ts b/renderers/angular/src/v0_8/components/column.ts
index 1e0218bb0..a8b2b99c7 100644
--- a/renderers/angular/src/v0_8/components/column.ts
+++ b/renderers/angular/src/v0_8/components/column.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import type { AnyComponentNode, ColumnNode, ResolvedColumn } from '../types';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import type {AnyComponentNode, ColumnNode, ResolvedColumn} from '../types';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import {Renderer} from '../rendering/renderer';
 
 @Component({
   selector: 'a2ui-column',
diff --git a/renderers/angular/src/v0_8/components/datetime-input.spec.ts b/renderers/angular/src/v0_8/components/datetime-input.spec.ts
index 43f5bd047..205efec48 100644
--- a/renderers/angular/src/v0_8/components/datetime-input.spec.ts
+++ b/renderers/angular/src/v0_8/components/datetime-input.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DateTimeInput } from './datetime-input';
-import type { A2UIClientEventMessage, DateTimeInputNode } from '../types';
-import { Theme } from '../rendering/theming';
-import { ChangeDetectionStrategy } from '@angular/core';
-import { MessageProcessor } from '../data/processor';
-import { Catalog } from '../rendering/catalog';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {DateTimeInput} from './datetime-input';
+import type {A2UIClientEventMessage, DateTimeInputNode} from '../types';
+import {Theme} from '../rendering/theming';
+import {ChangeDetectionStrategy} from '@angular/core';
+import {MessageProcessor} from '../data/processor';
+import {Catalog} from '../rendering/catalog';
 
 describe('DateTimeInput Component', () => {
   let component: DateTimeInput;
@@ -33,7 +33,7 @@ describe('DateTimeInput Component', () => {
     type: 'DateTimeInput',
     weight: 1,
     properties: {
-      value: { literalString: '2023-10-27' },
+      value: {literalString: '2023-10-27'},
     },
   };
 
@@ -44,22 +44,22 @@ describe('DateTimeInput Component', () => {
     mockTheme = new Theme();
     mockTheme.components = {
       DateTimeInput: {
-        container: { 'dt-container': true },
-        label: { 'dt-label': true },
-        element: { 'dt-element': true },
+        container: {'dt-container': true},
+        label: {'dt-label': true},
+        element: {'dt-element': true},
       },
     } as any;
 
     await TestBed.configureTestingModule({
       imports: [DateTimeInput],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(DateTimeInput, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
+        set: {changeDetection: ChangeDetectionStrategy.Default},
       })
       .compileComponents();
 
@@ -70,7 +70,7 @@ describe('DateTimeInput Component', () => {
     fixture.componentRef.setInput('component', mockDatetimeNode);
     fixture.componentRef.setInput('weight', 1);
     fixture.componentRef.setInput('value', mockDatetimeNode.properties.value);
-    fixture.componentRef.setInput('label', { literalString: 'Select Date' });
+    fixture.componentRef.setInput('label', {literalString: 'Select Date'});
 
     fixture.detectChanges();
   });
@@ -118,7 +118,7 @@ describe('DateTimeInput Component', () => {
     expect(message.userAction!.name).toBe('change');
 
     // Verify context
-    expect(message.userAction!.context).toEqual({ value: '2023-10-28' });
+    expect(message.userAction!.context).toEqual({value: '2023-10-28'});
   });
 
   it('should apply theme classes', () => {
diff --git a/renderers/angular/src/v0_8/components/datetime-input.ts b/renderers/angular/src/v0_8/components/datetime-input.ts
index 7d9224105..8b10ac544 100644
--- a/renderers/angular/src/v0_8/components/datetime-input.ts
+++ b/renderers/angular/src/v0_8/components/datetime-input.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import type { DateTimeInputNode, StringValue } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import type {DateTimeInputNode, StringValue} from '../types';
 
 @Component({
   selector: 'a2ui-datetime-input',
@@ -74,12 +74,12 @@ export class DateTimeInput extends DynamicComponent<DateTimeInputNode> {
               valueNode.path as string,
               this.component().dataContextPath,
             ),
-            contents: [{ key: '.', valueString: value }],
+            contents: [{key: '.', valueString: value}],
           },
         },
       ]);
     } else {
-      this.handleAction('change', { value });
+      this.handleAction('change', {value});
     }
   }
 
@@ -88,7 +88,7 @@ export class DateTimeInput extends DynamicComponent<DateTimeInputNode> {
       name,
       context: Object.entries(context).map(([key, val]) => ({
         key,
-        value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+        value: typeof val === 'number' ? {literalNumber: val} : {literalString: String(val)},
       })),
     });
   }
diff --git a/renderers/angular/src/v0_8/components/divider.spec.ts b/renderers/angular/src/v0_8/components/divider.spec.ts
index 7533e473b..f57b83321 100644
--- a/renderers/angular/src/v0_8/components/divider.spec.ts
+++ b/renderers/angular/src/v0_8/components/divider.spec.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Divider } from './divider';
-import { Theme } from '../rendering/theming';
-import { MessageProcessor } from '../data/processor';
-import type { DividerNode } from '../types';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Divider} from './divider';
+import {Theme} from '../rendering/theming';
+import {MessageProcessor} from '../data/processor';
+import type {DividerNode} from '../types';
 
 describe('Divider Component', () => {
   let component: Divider;
@@ -34,13 +34,13 @@ describe('Divider Component', () => {
 
   beforeEach(async () => {
     mockTheme = new Theme();
-    mockTheme.components = { Divider: 'divider-class' } as any;
+    mockTheme.components = {Divider: 'divider-class'} as any;
 
     await TestBed.configureTestingModule({
       imports: [Divider],
       providers: [
-        { provide: Theme, useValue: mockTheme },
-        { provide: MessageProcessor, useValue: {} },
+        {provide: Theme, useValue: mockTheme},
+        {provide: MessageProcessor, useValue: {}},
       ],
     }).compileComponents();
 
diff --git a/renderers/angular/src/v0_8/components/divider.ts b/renderers/angular/src/v0_8/components/divider.ts
index 56152205c..e04b49ed7 100644
--- a/renderers/angular/src/v0_8/components/divider.ts
+++ b/renderers/angular/src/v0_8/components/divider.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import type { DividerNode } from '../types';
-import { DynamicComponent } from '../rendering/dynamic-component';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import type {DividerNode} from '../types';
+import {DynamicComponent} from '../rendering/dynamic-component';
 
 @Component({
   selector: 'a2ui-divider',
diff --git a/renderers/angular/src/v0_8/components/icon.spec.ts b/renderers/angular/src/v0_8/components/icon.spec.ts
index 8e481cba0..f5ba56a9f 100644
--- a/renderers/angular/src/v0_8/components/icon.spec.ts
+++ b/renderers/angular/src/v0_8/components/icon.spec.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Icon } from './icon';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Icon} from './icon';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {By} from '@angular/platform-browser';
 
 describe('Icon Component', () => {
   let component: Icon;
@@ -28,17 +28,17 @@ describe('Icon Component', () => {
 
   beforeEach(async () => {
     mockTheme = new Theme();
-    mockTheme.components = { Icon: 'icon-class' } as any;
+    mockTheme.components = {Icon: 'icon-class'} as any;
 
     await TestBed.configureTestingModule({
       imports: [Icon],
       providers: [
         {
           provide: MessageProcessor,
-          useValue: { resolvePrimitive: (p: any) => p?.literalString || p },
+          useValue: {resolvePrimitive: (p: any) => p?.literalString || p},
         },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     }).compileComponents();
 
@@ -46,7 +46,7 @@ describe('Icon Component', () => {
     component = fixture.componentInstance;
 
     fixture.componentRef.setInput('surfaceId', 'surface-1');
-    fixture.componentRef.setInput('component', { id: 'icon-1', type: 'Icon', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'icon-1', type: 'Icon', weight: 1});
     fixture.componentRef.setInput('weight', 1);
     fixture.componentRef.setInput('name', null);
   });
@@ -56,7 +56,7 @@ describe('Icon Component', () => {
   });
 
   it('should render icon name inside span if provided', () => {
-    fixture.componentRef.setInput('name', { literalString: 'home' });
+    fixture.componentRef.setInput('name', {literalString: 'home'});
     fixture.detectChanges();
 
     const spanEl = fixture.debugElement.query(By.css('.g-icon'));
diff --git a/renderers/angular/src/v0_8/components/icon.ts b/renderers/angular/src/v0_8/components/icon.ts
index 4aeee2829..757c1114e 100644
--- a/renderers/angular/src/v0_8/components/icon.ts
+++ b/renderers/angular/src/v0_8/components/icon.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import type { IconNode, StringValue } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import type {IconNode, StringValue} from '../types';
 
 @Component({
   selector: 'a2ui-icon',
diff --git a/renderers/angular/src/v0_8/components/image.spec.ts b/renderers/angular/src/v0_8/components/image.spec.ts
index b314a96aa..162637f35 100644
--- a/renderers/angular/src/v0_8/components/image.spec.ts
+++ b/renderers/angular/src/v0_8/components/image.spec.ts
@@ -2,12 +2,12 @@
  * Copyright 2026 Google LLC
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Image } from './image';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Image} from './image';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {By} from '@angular/platform-browser';
 
 describe('Image Component', () => {
   let component: Image;
@@ -18,17 +18,17 @@ describe('Image Component', () => {
     mockTheme = new Theme();
     mockTheme.components = {
       Image: {
-        all: { 'image-all-class': true },
-        Avatar: { 'image-avatar-class': true },
+        all: {'image-all-class': true},
+        Avatar: {'image-avatar-class': true},
       },
     } as any;
 
     await TestBed.configureTestingModule({
       imports: [Image],
       providers: [
-        { provide: MessageProcessor, useValue: { resolvePrimitive: (p: any) => p?.value || p } },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: {resolvePrimitive: (p: any) => p?.value || p}},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     }).compileComponents();
 
@@ -37,7 +37,7 @@ describe('Image Component', () => {
 
     // Set required inputs
     fixture.componentRef.setInput('surfaceId', 'surf-1');
-    fixture.componentRef.setInput('component', { id: 'img-1', type: 'Image', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'img-1', type: 'Image', weight: 1});
     fixture.componentRef.setInput('weight', 1);
     fixture.componentRef.setInput('usageHint', null);
   });
@@ -47,7 +47,7 @@ describe('Image Component', () => {
   });
 
   it('should render <img> if url is provided', () => {
-    fixture.componentRef.setInput('url', { literalString: 'http://example.com/a.png' });
+    fixture.componentRef.setInput('url', {literalString: 'http://example.com/a.png'});
     fixture.detectChanges();
 
     const imgEl = fixture.debugElement.query(By.css('img'));
@@ -60,8 +60,8 @@ describe('Image Component', () => {
   });
 
   it('should render <img> with altText if provided', () => {
-    fixture.componentRef.setInput('url', { literalString: 'http://example.com/a.png' });
-    fixture.componentRef.setInput('altText', { literalString: 'A beautiful sunset' });
+    fixture.componentRef.setInput('url', {literalString: 'http://example.com/a.png'});
+    fixture.componentRef.setInput('altText', {literalString: 'A beautiful sunset'});
     fixture.detectChanges();
 
     const imgEl = fixture.debugElement.query(By.css('img'));
@@ -78,7 +78,7 @@ describe('Image Component', () => {
   });
 
   it('should apply usageHint class if provided', () => {
-    fixture.componentRef.setInput('url', { literalString: 'http://example.com/a.png' });
+    fixture.componentRef.setInput('url', {literalString: 'http://example.com/a.png'});
     fixture.componentRef.setInput('usageHint', 'Avatar');
     fixture.detectChanges();
 
diff --git a/renderers/angular/src/v0_8/components/image.ts b/renderers/angular/src/v0_8/components/image.ts
index 297c32945..de633740e 100644
--- a/renderers/angular/src/v0_8/components/image.ts
+++ b/renderers/angular/src/v0_8/components/image.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Styles from '@a2ui/web_core/styles/index';
-import type { ImageNode, ResolvedImage } from '../types';
-import { DynamicComponent } from '../rendering/dynamic-component';
+import type {ImageNode, ResolvedImage} from '../types';
+import {DynamicComponent} from '../rendering/dynamic-component';
 
 @Component({
   selector: 'a2ui-image',
diff --git a/renderers/angular/src/v0_8/components/list.spec.ts b/renderers/angular/src/v0_8/components/list.spec.ts
index 54f46b5e8..cd79042a0 100644
--- a/renderers/angular/src/v0_8/components/list.spec.ts
+++ b/renderers/angular/src/v0_8/components/list.spec.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { List } from './list';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import type { ListNode } from '../types';
-import { Directive, Input, ChangeDetectionStrategy } from '@angular/core';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {List} from './list';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import type {ListNode} from '../types';
+import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {By} from '@angular/platform-browser';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -47,20 +47,20 @@ describe('List Component', () => {
     type: 'List',
     weight: 1,
     properties: {
-      children: [{ id: 'child-1', type: 'Text', properties: {} }],
+      children: [{id: 'child-1', type: 'Text', properties: {}}],
     },
   };
 
   beforeEach(async () => {
     mockTheme = new Theme();
-    mockTheme.components = { List: 'list-class' } as any;
+    mockTheme.components = {List: 'list-class'} as any;
 
     await TestBed.configureTestingModule({
       imports: [List],
       providers: [
-        { provide: MessageProcessor, useValue: {} },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: {}},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(List, {
diff --git a/renderers/angular/src/v0_8/components/list.ts b/renderers/angular/src/v0_8/components/list.ts
index 53a56ba6d..c0ad5f01a 100644
--- a/renderers/angular/src/v0_8/components/list.ts
+++ b/renderers/angular/src/v0_8/components/list.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import type { AnyComponentNode, ListNode, ResolvedList } from '../types';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import type {AnyComponentNode, ListNode, ResolvedList} from '../types';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import {Renderer} from '../rendering/renderer';
 
 @Component({
   selector: 'a2ui-list',
diff --git a/renderers/angular/src/v0_8/components/modal.spec.ts b/renderers/angular/src/v0_8/components/modal.spec.ts
index 7d6465831..330b1a4b2 100644
--- a/renderers/angular/src/v0_8/components/modal.spec.ts
+++ b/renderers/angular/src/v0_8/components/modal.spec.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Modal } from './modal';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import type { AnyComponentNode } from '../types';
-import { Directive, Input, ChangeDetectionStrategy } from '@angular/core';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Modal} from './modal';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import type {AnyComponentNode} from '../types';
+import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {By} from '@angular/platform-browser';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -45,12 +45,12 @@ describe('Modal Component', () => {
   const mockEntryPoint: AnyComponentNode = {
     id: 'btn-1',
     type: 'Button',
-    properties: { text: 'Open' },
+    properties: {text: 'Open'},
   };
   const mockContent: AnyComponentNode = {
     id: 'text-1',
     type: 'Text',
-    properties: { text: 'Hello' },
+    properties: {text: 'Hello'},
   };
 
   beforeEach(async () => {
@@ -65,9 +65,9 @@ describe('Modal Component', () => {
     await TestBed.configureTestingModule({
       imports: [Modal],
       providers: [
-        { provide: MessageProcessor, useValue: {} },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: {}},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(Modal, {
@@ -86,7 +86,7 @@ describe('Modal Component', () => {
     fixture.componentRef.setInput('surfaceId', 'surface-1');
     fixture.componentRef.setInput('entryPointChild', mockEntryPoint);
     fixture.componentRef.setInput('contentChild', mockContent);
-    fixture.componentRef.setInput('component', { id: 'modal-1', type: 'Modal', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'modal-1', type: 'Modal', weight: 1});
     fixture.componentRef.setInput('weight', 1);
 
     fixture.detectChanges();
diff --git a/renderers/angular/src/v0_8/components/modal.ts b/renderers/angular/src/v0_8/components/modal.ts
index 8d2872bcc..1e0e62953 100644
--- a/renderers/angular/src/v0_8/components/modal.ts
+++ b/renderers/angular/src/v0_8/components/modal.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
-import type { AnyComponentNode, ModalNode } from '../types';
+import {ChangeDetectionStrategy, Component, input, signal} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import {Renderer} from '../rendering/renderer';
+import type {AnyComponentNode, ModalNode} from '../types';
 
 @Component({
   selector: 'a2ui-modal',
diff --git a/renderers/angular/src/v0_8/components/multiple-choice.spec.ts b/renderers/angular/src/v0_8/components/multiple-choice.spec.ts
index 767323fea..68465d6f9 100644
--- a/renderers/angular/src/v0_8/components/multiple-choice.spec.ts
+++ b/renderers/angular/src/v0_8/components/multiple-choice.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MultipleChoice } from './multiple-choice';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { By } from '@angular/platform-browser';
-import { ChangeDetectionStrategy } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MultipleChoice} from './multiple-choice';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {By} from '@angular/platform-browser';
+import {ChangeDetectionStrategy} from '@angular/core';
 
 describe('MultipleChoice Component', () => {
   let component: MultipleChoice;
@@ -29,8 +29,8 @@ describe('MultipleChoice Component', () => {
   let mockProcessor: jasmine.SpyObj<MessageProcessor>;
 
   const mockOptions = [
-    { label: { literalString: 'Option 1' } as any, value: 'opt1' },
-    { label: { literalString: 'Option 2' } as any, value: 'opt2' },
+    {label: {literalString: 'Option 1'} as any, value: 'opt1'},
+    {label: {literalString: 'Option 2'} as any, value: 'opt2'},
   ];
 
   beforeEach(async () => {
@@ -53,9 +53,9 @@ describe('MultipleChoice Component', () => {
     await TestBed.configureTestingModule({
       imports: [MultipleChoice],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(MultipleChoice, {
@@ -69,11 +69,11 @@ describe('MultipleChoice Component', () => {
     component = fixture.componentInstance;
 
     fixture.componentRef.setInput('surfaceId', 'surface-1');
-    fixture.componentRef.setInput('component', { id: 'mc-1', type: 'MultipleChoice', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'mc-1', type: 'MultipleChoice', weight: 1});
     fixture.componentRef.setInput('weight', 1);
-    fixture.componentRef.setInput('label', { literalString: 'Select an option' });
+    fixture.componentRef.setInput('label', {literalString: 'Select an option'});
     fixture.componentRef.setInput('options', mockOptions);
-    fixture.componentRef.setInput('selections', { literalArray: ['opt1'] });
+    fixture.componentRef.setInput('selections', {literalArray: ['opt1']});
 
     fixture.detectChanges();
   });
@@ -107,6 +107,6 @@ describe('MultipleChoice Component', () => {
     const message = mockProcessor.dispatch.calls.mostRecent().args[0];
     expect(message.userAction).toBeTruthy();
     expect(message.userAction!.name).toBe('change');
-    expect(message.userAction!.context).toEqual({ value: 'opt2' });
+    expect(message.userAction!.context).toEqual({value: 'opt2'});
   });
 });
diff --git a/renderers/angular/src/v0_8/components/multiple-choice.ts b/renderers/angular/src/v0_8/components/multiple-choice.ts
index bced5a576..b6981430a 100644
--- a/renderers/angular/src/v0_8/components/multiple-choice.ts
+++ b/renderers/angular/src/v0_8/components/multiple-choice.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import type { AnyComponentNode, MultipleChoiceNode, StringValue } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import type {AnyComponentNode, MultipleChoiceNode, StringValue} from '../types';
 
 @Component({
   selector: 'a2ui-multiple-choice',
@@ -49,7 +49,7 @@ import type { AnyComponentNode, MultipleChoiceNode, StringValue } from '../types
 })
 export class MultipleChoice extends DynamicComponent<MultipleChoiceNode> {
   readonly label = input<StringValue | null>(null);
-  readonly options = input.required<{ label: StringValue; value: string }[]>();
+  readonly options = input.required<{label: StringValue; value: string}[]>();
   readonly selections = input.required<AnyComponentNode | null>();
 
   protected readonly selectId = super.getUniqueId('a2ui-multiple-choice');
@@ -57,7 +57,7 @@ export class MultipleChoice extends DynamicComponent<MultipleChoiceNode> {
   protected readonly resolvedLabel = computed(() => this.resolvePrimitive(this.label()));
 
   protected readonly resolvedOptions = computed(() =>
-    this.options().map((opt) => ({
+    this.options().map(opt => ({
       label: this.resolvePrimitive(opt.label),
       value: opt.value,
     })),
@@ -89,12 +89,12 @@ export class MultipleChoice extends DynamicComponent<MultipleChoiceNode> {
               selectionsNode.path as string,
               this.component().dataContextPath,
             ),
-            contents: [{ key: '.', valueString: JSON.stringify({ literalArray: [value] }) }],
+            contents: [{key: '.', valueString: JSON.stringify({literalArray: [value]})}],
           },
         },
       ]);
     } else {
-      this.handleAction('change', { value });
+      this.handleAction('change', {value});
     }
   }
 
@@ -103,7 +103,7 @@ export class MultipleChoice extends DynamicComponent<MultipleChoiceNode> {
       name,
       context: Object.entries(context).map(([key, val]) => ({
         key,
-        value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+        value: typeof val === 'number' ? {literalNumber: val} : {literalString: String(val)},
       })),
     });
   }
diff --git a/renderers/angular/src/v0_8/components/row-integration.spec.ts b/renderers/angular/src/v0_8/components/row-integration.spec.ts
index 536d54425..05c120ed8 100644
--- a/renderers/angular/src/v0_8/components/row-integration.spec.ts
+++ b/renderers/angular/src/v0_8/components/row-integration.spec.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Renderer } from '../rendering/renderer';
-import { Catalog } from '../rendering/catalog';
-import { DEFAULT_CATALOG } from '../catalog';
-import { Theme } from '../rendering/theming';
-import { MessageProcessor } from '../data/processor';
-import { MarkdownRenderer } from '../data/markdown';
-import { Component } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Renderer} from '../rendering/renderer';
+import {Catalog} from '../rendering/catalog';
+import {DEFAULT_CATALOG} from '../catalog';
+import {Theme} from '../rendering/theming';
+import {MessageProcessor} from '../data/processor';
+import {MarkdownRenderer} from '../data/markdown';
+import {Component} from '@angular/core';
 
 @Component({
   template: `<ng-container
@@ -52,8 +52,8 @@ describe('Row Component Integration (Real Renderer)', () => {
     await TestBed.configureTestingModule({
       imports: [TestHost],
       providers: [
-        { provide: MessageProcessor, useValue: processor },
-        { provide: Catalog, useValue: DEFAULT_CATALOG },
+        {provide: MessageProcessor, useValue: processor},
+        {provide: Catalog, useValue: DEFAULT_CATALOG},
         {
           provide: MarkdownRenderer,
           useValue: {
@@ -67,8 +67,8 @@ describe('Row Component Integration (Real Renderer)', () => {
     const theme = TestBed.inject(Theme);
     theme.update({
       components: {
-        Row: { 'a2ui-row': true },
-        Text: { all: { 'a2ui-text': true } },
+        Row: {'a2ui-row': true},
+        Text: {all: {'a2ui-text': true}},
       } as any,
       elements: {} as any,
       markdown: {
@@ -99,12 +99,12 @@ describe('Row Component Integration (Real Renderer)', () => {
           {
             type: 'Text',
             id: 'child-1',
-            properties: { text: { literalString: 'Child 1' } },
+            properties: {text: {literalString: 'Child 1'}},
           },
           {
             type: 'Text',
             id: 'child-2',
-            properties: { text: { literalString: 'Child 2' } },
+            properties: {text: {literalString: 'Child 2'}},
           },
         ],
       },
diff --git a/renderers/angular/src/v0_8/components/row.spec.ts b/renderers/angular/src/v0_8/components/row.spec.ts
index a021c0091..dd30d6bbd 100644
--- a/renderers/angular/src/v0_8/components/row.spec.ts
+++ b/renderers/angular/src/v0_8/components/row.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Row } from './row';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import type { RowNode } from '../types';
-import { Directive, Input, ChangeDetectionStrategy } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Row} from './row';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import type {RowNode} from '../types';
+import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -46,20 +46,20 @@ describe('Row Component', () => {
     type: 'Row',
     weight: 1,
     properties: {
-      children: [{ id: 'child-1', type: 'Text', properties: {} }],
+      children: [{id: 'child-1', type: 'Text', properties: {}}],
     },
   };
 
   beforeEach(async () => {
     mockTheme = new Theme();
-    mockTheme.components = { Row: { 'custom-row': true } } as any;
+    mockTheme.components = {Row: {'custom-row': true}} as any;
 
     await TestBed.configureTestingModule({
       imports: [Row],
       providers: [
-        { provide: MessageProcessor, useValue: {} },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: {}},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(Row, {
diff --git a/renderers/angular/src/v0_8/components/row.ts b/renderers/angular/src/v0_8/components/row.ts
index 2c45e2cd3..e4348f747 100644
--- a/renderers/angular/src/v0_8/components/row.ts
+++ b/renderers/angular/src/v0_8/components/row.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
-import type { AnyComponentNode, ResolvedRow, RowNode } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import {Renderer} from '../rendering/renderer';
+import type {AnyComponentNode, ResolvedRow, RowNode} from '../types';
 
 @Component({
   selector: 'a2ui-row',
diff --git a/renderers/angular/src/v0_8/components/slider.spec.ts b/renderers/angular/src/v0_8/components/slider.spec.ts
index f470af148..1fc2bc08a 100644
--- a/renderers/angular/src/v0_8/components/slider.spec.ts
+++ b/renderers/angular/src/v0_8/components/slider.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Slider } from './slider';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { By } from '@angular/platform-browser';
-import { ChangeDetectionStrategy } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Slider} from './slider';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {By} from '@angular/platform-browser';
+import {ChangeDetectionStrategy} from '@angular/core';
 
 describe('Slider Component', () => {
   let component: Slider;
@@ -48,9 +48,9 @@ describe('Slider Component', () => {
     await TestBed.configureTestingModule({
       imports: [Slider],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(Slider, {
@@ -64,10 +64,10 @@ describe('Slider Component', () => {
     component = fixture.componentInstance;
 
     fixture.componentRef.setInput('surfaceId', 'surface-1');
-    fixture.componentRef.setInput('component', { id: 'slider-1', type: 'Slider', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'slider-1', type: 'Slider', weight: 1});
     fixture.componentRef.setInput('weight', 1);
-    fixture.componentRef.setInput('label', { literalString: 'Volume' });
-    fixture.componentRef.setInput('value', { literalNumber: 50 });
+    fixture.componentRef.setInput('label', {literalString: 'Volume'});
+    fixture.componentRef.setInput('value', {literalNumber: 50});
     fixture.componentRef.setInput('minValue', 0);
     fixture.componentRef.setInput('maxValue', 100);
 
@@ -102,6 +102,6 @@ describe('Slider Component', () => {
     const message = mockProcessor.dispatch.calls.mostRecent().args[0];
     expect(message.userAction).toBeTruthy();
     expect(message.userAction!.name).toBe('change');
-    expect(message.userAction!.context).toEqual({ value: 75 });
+    expect(message.userAction!.context).toEqual({value: 75});
   });
 });
diff --git a/renderers/angular/src/v0_8/components/slider.ts b/renderers/angular/src/v0_8/components/slider.ts
index 42d8c625c..14e6807b3 100644
--- a/renderers/angular/src/v0_8/components/slider.ts
+++ b/renderers/angular/src/v0_8/components/slider.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import type { NumberValue, SliderNode, StringValue } from '../types';
-import { DynamicComponent } from '../rendering/dynamic-component';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import type {NumberValue, SliderNode, StringValue} from '../types';
+import {DynamicComponent} from '../rendering/dynamic-component';
 
 @Component({
   selector: 'a2ui-slider',
@@ -69,12 +69,12 @@ export class Slider extends DynamicComponent<SliderNode> {
               valueNode.path as string,
               this.component().dataContextPath,
             ),
-            contents: [{ key: '.', valueNumber: value }],
+            contents: [{key: '.', valueNumber: value}],
           },
         },
       ]);
     } else {
-      this.handleAction('change', { value });
+      this.handleAction('change', {value});
     }
   }
 
@@ -83,7 +83,7 @@ export class Slider extends DynamicComponent<SliderNode> {
       name,
       context: Object.entries(context).map(([key, val]) => ({
         key,
-        value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+        value: typeof val === 'number' ? {literalNumber: val} : {literalString: String(val)},
       })),
     });
   }
diff --git a/renderers/angular/src/v0_8/components/surface.spec.ts b/renderers/angular/src/v0_8/components/surface.spec.ts
index b40b7dac2..aedf7be6a 100644
--- a/renderers/angular/src/v0_8/components/surface.spec.ts
+++ b/renderers/angular/src/v0_8/components/surface.spec.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Surface } from './surface';
-import { MessageProcessor } from '../data/processor';
-import type { AnyComponentNode, Surface as SurfaceType } from '../types';
-import { Directive, Input, ChangeDetectionStrategy } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Surface} from './surface';
+import {MessageProcessor} from '../data/processor';
+import type {AnyComponentNode, Surface as SurfaceType} from '../types';
+import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -57,7 +57,7 @@ describe('Surface Component', () => {
 
     await TestBed.configureTestingModule({
       imports: [Surface],
-      providers: [{ provide: MessageProcessor, useValue: mockProcessor }],
+      providers: [{provide: MessageProcessor, useValue: mockProcessor}],
     })
       .overrideComponent(Surface, {
         set: {
diff --git a/renderers/angular/src/v0_8/components/surface.ts b/renderers/angular/src/v0_8/components/surface.ts
index f7eaa7ff4..3a9088694 100644
--- a/renderers/angular/src/v0_8/components/surface.ts
+++ b/renderers/angular/src/v0_8/components/surface.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-import { MessageProcessor } from '../data';
-import { Renderer } from '../rendering/renderer';
-import type { Surface as SurfaceType, SurfaceID } from '../types';
+import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';
+import {MessageProcessor} from '../data';
+import {Renderer} from '../rendering/renderer';
+import type {Surface as SurfaceType, SurfaceID} from '../types';
 
 @Component({
   selector: 'a2ui-surface',
@@ -39,7 +39,7 @@ import type { Surface as SurfaceType, SurfaceID } from '../types';
 export class Surface {
   private readonly processor = inject(MessageProcessor);
   readonly surfaceId = input.required<SurfaceID>();
-  readonly surfaceInput = input<SurfaceType | null>(null, { alias: 'surface' });
+  readonly surfaceInput = input<SurfaceType | null>(null, {alias: 'surface'});
 
   protected readonly surface = computed(() => {
     this.processor.version(); // Track dependency on in-place mutations
diff --git a/renderers/angular/src/v0_8/components/tabs.spec.ts b/renderers/angular/src/v0_8/components/tabs.spec.ts
index b0db58613..e2cf583c5 100644
--- a/renderers/angular/src/v0_8/components/tabs.spec.ts
+++ b/renderers/angular/src/v0_8/components/tabs.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Tabs } from './tabs';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { Directive, Input, ChangeDetectionStrategy } from '@angular/core';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Tabs} from './tabs';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {Directive, Input, ChangeDetectionStrategy} from '@angular/core';
+import {By} from '@angular/platform-browser';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -43,12 +43,12 @@ describe('Tabs Component', () => {
 
   const mockTabItems = [
     {
-      title: { literalString: 'Tab 1' } as any,
-      child: { id: 'child-1', type: 'Text', properties: { text: 'Content 1' } },
+      title: {literalString: 'Tab 1'} as any,
+      child: {id: 'child-1', type: 'Text', properties: {text: 'Content 1'}},
     },
     {
-      title: { literalString: 'Tab 2' } as any,
-      child: { id: 'child-2', type: 'Text', properties: { text: 'Content 2' } },
+      title: {literalString: 'Tab 2'} as any,
+      child: {id: 'child-2', type: 'Text', properties: {text: 'Content 2'}},
     },
   ];
 
@@ -59,7 +59,7 @@ describe('Tabs Component', () => {
         container: 'tabs-container',
         controls: {
           all: 'tabs-controls-all',
-          selected: { 'tabs-controls-selected': true },
+          selected: {'tabs-controls-selected': true},
         },
       },
     } as any;
@@ -69,10 +69,10 @@ describe('Tabs Component', () => {
       providers: [
         {
           provide: MessageProcessor,
-          useValue: { resolvePrimitive: (p: any) => p?.literalString || p },
+          useValue: {resolvePrimitive: (p: any) => p?.literalString || p},
         },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(Tabs, {
@@ -89,7 +89,7 @@ describe('Tabs Component', () => {
     component = fixture.componentInstance;
 
     fixture.componentRef.setInput('surfaceId', 'surface-1');
-    fixture.componentRef.setInput('component', { id: 'tabs-1', type: 'Tabs', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'tabs-1', type: 'Tabs', weight: 1});
     fixture.componentRef.setInput('weight', 1);
     fixture.componentRef.setInput('tabItems', mockTabItems);
 
diff --git a/renderers/angular/src/v0_8/components/tabs.ts b/renderers/angular/src/v0_8/components/tabs.ts
index 97dd17a57..8f49935fd 100644
--- a/renderers/angular/src/v0_8/components/tabs.ts
+++ b/renderers/angular/src/v0_8/components/tabs.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import { Renderer } from '../rendering/renderer';
-import type { ResolvedTabs, TabsNode } from '../types';
+import {ChangeDetectionStrategy, Component, input, signal} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import {Renderer} from '../rendering/renderer';
+import type {ResolvedTabs, TabsNode} from '../types';
 
 @Component({
   selector: 'a2ui-tabs',
diff --git a/renderers/angular/src/v0_8/components/text-field.spec.ts b/renderers/angular/src/v0_8/components/text-field.spec.ts
index df3b947fc..ed39e5ce9 100644
--- a/renderers/angular/src/v0_8/components/text-field.spec.ts
+++ b/renderers/angular/src/v0_8/components/text-field.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TextField } from './text-field';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { By } from '@angular/platform-browser';
-import { ChangeDetectionStrategy } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TextField} from './text-field';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {By} from '@angular/platform-browser';
+import {ChangeDetectionStrategy} from '@angular/core';
 
 describe('TextField Component', () => {
   let component: TextField;
@@ -48,9 +48,9 @@ describe('TextField Component', () => {
     await TestBed.configureTestingModule({
       imports: [TextField],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(TextField, {
@@ -64,10 +64,10 @@ describe('TextField Component', () => {
     component = fixture.componentInstance;
 
     fixture.componentRef.setInput('surfaceId', 'surface-1');
-    fixture.componentRef.setInput('component', { id: 'tf-1', type: 'TextField', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'tf-1', type: 'TextField', weight: 1});
     fixture.componentRef.setInput('weight', 1);
-    fixture.componentRef.setInput('label', { literalString: 'Name' });
-    fixture.componentRef.setInput('text', { literalString: 'John Doe' });
+    fixture.componentRef.setInput('label', {literalString: 'Name'});
+    fixture.componentRef.setInput('text', {literalString: 'John Doe'});
 
     fixture.detectChanges();
   });
@@ -111,6 +111,6 @@ describe('TextField Component', () => {
     const message = mockProcessor.dispatch.calls.mostRecent().args[0];
     expect(message.userAction).toBeTruthy();
     expect(message.userAction!.name).toBe('input');
-    expect(message.userAction!.context).toEqual({ value: 'Jane Doe' });
+    expect(message.userAction!.context).toEqual({value: 'Jane Doe'});
   });
 });
diff --git a/renderers/angular/src/v0_8/components/text-field.ts b/renderers/angular/src/v0_8/components/text-field.ts
index babc9bf35..c71e0370e 100644
--- a/renderers/angular/src/v0_8/components/text-field.ts
+++ b/renderers/angular/src/v0_8/components/text-field.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import type { ResolvedTextField, StringValue, TextFieldNode } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import type {ResolvedTextField, StringValue, TextFieldNode} from '../types';
 
 @Component({
   selector: 'a2ui-text-field',
@@ -75,12 +75,12 @@ export class TextField extends DynamicComponent<TextFieldNode> {
               textNode.path as string,
               this.component().dataContextPath,
             ),
-            contents: [{ key: '.', valueString: value }],
+            contents: [{key: '.', valueString: value}],
           },
         },
       ]);
     } else {
-      this.handleAction('input', { value });
+      this.handleAction('input', {value});
     }
   }
 
@@ -89,7 +89,7 @@ export class TextField extends DynamicComponent<TextFieldNode> {
       name,
       context: Object.entries(context).map(([key, val]) => ({
         key,
-        value: typeof val === 'number' ? { literalNumber: val } : { literalString: String(val) },
+        value: typeof val === 'number' ? {literalNumber: val} : {literalString: String(val)},
       })),
     });
   }
diff --git a/renderers/angular/src/v0_8/components/text.spec.ts b/renderers/angular/src/v0_8/components/text.spec.ts
index 487d6dc25..9e864e421 100644
--- a/renderers/angular/src/v0_8/components/text.spec.ts
+++ b/renderers/angular/src/v0_8/components/text.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Text } from './text';
-import { MessageProcessor } from '../data/processor';
-import { Theme } from '../rendering/theming';
-import { Catalog } from '../rendering/catalog';
-import { MarkdownRenderer } from '../data/markdown';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Text} from './text';
+import {MessageProcessor} from '../data/processor';
+import {Theme} from '../rendering/theming';
+import {Catalog} from '../rendering/catalog';
+import {MarkdownRenderer} from '../data/markdown';
+import {By} from '@angular/platform-browser';
 
 describe('Text Component', () => {
   let component: Text;
@@ -32,11 +32,11 @@ describe('Text Component', () => {
     mockTheme = new Theme();
     mockTheme.components = {
       Text: {
-        all: { 'base-all': true },
-        h1: { 'style-h1': true },
-        h2: { 'style-h2': true },
-        body: { 'style-body': true },
-        caption: { 'style-caption': true },
+        all: {'base-all': true},
+        h1: {'style-h1': true},
+        h2: {'style-h2': true},
+        body: {'style-body': true},
+        caption: {'style-caption': true},
       },
     } as any;
 
@@ -48,10 +48,10 @@ describe('Text Component', () => {
     await TestBed.configureTestingModule({
       imports: [Text],
       providers: [
-        { provide: MessageProcessor, useValue: {} },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
-        { provide: MarkdownRenderer, useValue: mockMarkdownRenderer },
+        {provide: MessageProcessor, useValue: {}},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
+        {provide: MarkdownRenderer, useValue: mockMarkdownRenderer},
       ],
     })
       // Text component uses ChangeDetectionStrategy.Eager originally!
@@ -61,9 +61,9 @@ describe('Text Component', () => {
     component = fixture.componentInstance;
 
     fixture.componentRef.setInput('surfaceId', 'surface-1');
-    fixture.componentRef.setInput('component', { id: 'text-1', type: 'Text', weight: 1 });
+    fixture.componentRef.setInput('component', {id: 'text-1', type: 'Text', weight: 1});
     fixture.componentRef.setInput('weight', 1);
-    fixture.componentRef.setInput('text', { literalString: 'Hello World' });
+    fixture.componentRef.setInput('text', {literalString: 'Hello World'});
     fixture.componentRef.setInput('usageHint', 'body');
 
     fixture.detectChanges();
diff --git a/renderers/angular/src/v0_8/components/text.ts b/renderers/angular/src/v0_8/components/text.ts
index ab3fce11a..4682044fb 100644
--- a/renderers/angular/src/v0_8/components/text.ts
+++ b/renderers/angular/src/v0_8/components/text.ts
@@ -22,12 +22,12 @@ import {
   input,
   ViewEncapsulation,
 } from '@angular/core';
-import { AsyncPipe } from '@angular/common';
-import { DynamicComponent } from '../rendering/dynamic-component';
+import {AsyncPipe} from '@angular/common';
+import {DynamicComponent} from '../rendering/dynamic-component';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Styles from '@a2ui/web_core/styles/index';
-import type { ResolvedText, TextNode } from '../types';
-import { MarkdownRenderer } from '../data/markdown';
+import type {ResolvedText, TextNode} from '../types';
+import {MarkdownRenderer} from '../data/markdown';
 
 interface HintedStyles {
   h1: Record<string, string>;
@@ -143,6 +143,6 @@ export class Text extends DynamicComponent<TextNode> {
     }
 
     const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'caption', 'body'];
-    return expected.every((v) => v in styles);
+    return expected.every(v => v in styles);
   }
 }
diff --git a/renderers/angular/src/v0_8/components/video.spec.ts b/renderers/angular/src/v0_8/components/video.spec.ts
index 4d604595d..dce45f6c6 100644
--- a/renderers/angular/src/v0_8/components/video.spec.ts
+++ b/renderers/angular/src/v0_8/components/video.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Video } from './video';
-import type { VideoNode } from '../types';
-import { Theme } from '../rendering/theming';
-import { ChangeDetectionStrategy } from '@angular/core';
-import { MessageProcessor } from '../data/processor';
-import { Catalog } from '../rendering/catalog';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Video} from './video';
+import type {VideoNode} from '../types';
+import {Theme} from '../rendering/theming';
+import {ChangeDetectionStrategy} from '@angular/core';
+import {MessageProcessor} from '../data/processor';
+import {Catalog} from '../rendering/catalog';
 
 describe('Video Component', () => {
   let component: Video;
@@ -33,7 +33,7 @@ describe('Video Component', () => {
     type: 'Video',
     weight: 1,
     properties: {
-      url: { literalString: 'https://example.com/video.mp4' },
+      url: {literalString: 'https://example.com/video.mp4'},
     },
   };
 
@@ -44,19 +44,19 @@ describe('Video Component', () => {
       'getData',
     ]);
     mockTheme = new Theme();
-    mockTheme.components = { Video: { 'vid-class': true } } as any;
-    mockTheme.additionalStyles = { Video: { borderColor: 'blue' } } as any;
+    mockTheme.components = {Video: {'vid-class': true}} as any;
+    mockTheme.additionalStyles = {Video: {borderColor: 'blue'}} as any;
 
     await TestBed.configureTestingModule({
       imports: [Video],
       providers: [
-        { provide: MessageProcessor, useValue: mockProcessor },
-        { provide: Theme, useValue: mockTheme },
-        { provide: Catalog, useValue: {} },
+        {provide: MessageProcessor, useValue: mockProcessor},
+        {provide: Theme, useValue: mockTheme},
+        {provide: Catalog, useValue: {}},
       ],
     })
       .overrideComponent(Video, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
+        set: {changeDetection: ChangeDetectionStrategy.Default},
       })
       .compileComponents();
 
diff --git a/renderers/angular/src/v0_8/components/video.ts b/renderers/angular/src/v0_8/components/video.ts
index 93f4e877d..3e85ba31d 100644
--- a/renderers/angular/src/v0_8/components/video.ts
+++ b/renderers/angular/src/v0_8/components/video.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { DynamicComponent } from '../rendering/dynamic-component';
-import type { StringValue, VideoNode } from '../types';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DynamicComponent} from '../rendering/dynamic-component';
+import type {StringValue, VideoNode} from '../types';
 
 @Component({
   selector: 'a2ui-video',
diff --git a/renderers/angular/src/v0_8/config.ts b/renderers/angular/src/v0_8/config.ts
index fe2508510..4c5c2376c 100644
--- a/renderers/angular/src/v0_8/config.ts
+++ b/renderers/angular/src/v0_8/config.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
-import { Catalog, Theme } from './rendering';
-import type { Theme as ThemeType } from './types';
+import {EnvironmentProviders, makeEnvironmentProviders} from '@angular/core';
+import {Catalog, Theme} from './rendering';
+import type {Theme as ThemeType} from './types';
 
-export function provideA2UI(config: { catalog: Catalog; theme: ThemeType }): EnvironmentProviders {
+export function provideA2UI(config: {catalog: Catalog; theme: ThemeType}): EnvironmentProviders {
   return makeEnvironmentProviders([
-    { provide: Catalog, useValue: config.catalog },
+    {provide: Catalog, useValue: config.catalog},
     {
       provide: Theme,
       useFactory: () => {
diff --git a/renderers/angular/src/v0_8/data/index.ts b/renderers/angular/src/v0_8/data/index.ts
index dabe62c15..1379d413e 100644
--- a/renderers/angular/src/v0_8/data/index.ts
+++ b/renderers/angular/src/v0_8/data/index.ts
@@ -16,4 +16,4 @@
 
 export * from './processor';
 export * from './types';
-export { provideMarkdownRenderer } from './markdown';
+export {provideMarkdownRenderer} from './markdown';
diff --git a/renderers/angular/src/v0_8/data/markdown.ts b/renderers/angular/src/v0_8/data/markdown.ts
index ab44b1103..4603cb0d7 100644
--- a/renderers/angular/src/v0_8/data/markdown.ts
+++ b/renderers/angular/src/v0_8/data/markdown.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import type { MarkdownRenderer as MarkdownRendererType, MarkdownRendererOptions } from '../types';
+import {Injectable} from '@angular/core';
+import type {MarkdownRenderer as MarkdownRendererType, MarkdownRendererOptions} from '../types';
 
 @Injectable({
   providedIn: 'root',
@@ -33,7 +33,7 @@ export class DefaultMarkdownRenderer extends MarkdownRenderer {
   override async render(markdown: string, options?: MarkdownRendererOptions): Promise<string> {
     try {
       // @ts-ignore - optional peer dependency
-      const { renderMarkdown } = await import('@a2ui/markdown-it');
+      const {renderMarkdown} = await import('@a2ui/markdown-it');
       return await renderMarkdown(markdown, options);
     } catch (e) {
       if (!DefaultMarkdownRenderer.warningLogged) {
@@ -57,5 +57,5 @@ export function provideMarkdownRenderer(renderFn?: MarkdownRendererType) {
       },
     };
   }
-  return { provide: MarkdownRenderer, useClass: DefaultMarkdownRenderer };
+  return {provide: MarkdownRenderer, useClass: DefaultMarkdownRenderer};
 }
diff --git a/renderers/angular/src/v0_8/data/processor.spec.ts b/renderers/angular/src/v0_8/data/processor.spec.ts
index 1565a8bba..00cd95819 100644
--- a/renderers/angular/src/v0_8/data/processor.spec.ts
+++ b/renderers/angular/src/v0_8/data/processor.spec.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { MessageProcessor, A2UIClientEvent } from './processor';
-import { Catalog } from '../rendering/catalog';
-import type { A2UIClientEventMessage, AnyComponentNode, ServerToClientMessage } from '../types';
+import {TestBed} from '@angular/core/testing';
+import {MessageProcessor, A2UIClientEvent} from './processor';
+import {Catalog} from '../rendering/catalog';
+import type {A2UIClientEventMessage, AnyComponentNode, ServerToClientMessage} from '../types';
 import * as WebCore from '@a2ui/web_core/v0_8';
 
 describe('MessageProcessor', () => {
@@ -28,7 +28,7 @@ describe('MessageProcessor', () => {
     mockCatalog = {};
 
     TestBed.configureTestingModule({
-      providers: [MessageProcessor, { provide: Catalog, useValue: mockCatalog }],
+      providers: [MessageProcessor, {provide: Catalog, useValue: mockCatalog}],
     });
     service = TestBed.inject(MessageProcessor);
   });
@@ -47,7 +47,7 @@ describe('MessageProcessor', () => {
     expect(baseProcessor.processMessages).toHaveBeenCalledWith(messages);
   });
 
-  it('should dispatch events and emit to observable', (done) => {
+  it('should dispatch events and emit to observable', done => {
     const mockMessage: A2UIClientEventMessage = {
       userAction: {
         name: 'click',
@@ -68,10 +68,10 @@ describe('MessageProcessor', () => {
 
   it('should resolve dispatch promise when completion is triggered', async () => {
     const mockMessage: A2UIClientEventMessage = {
-      userAction: { name: 'click', sourceComponentId: '1', surfaceId: '1', timestamp: '' },
+      userAction: {name: 'click', sourceComponentId: '1', surfaceId: '1', timestamp: ''},
     };
 
-    const replyMessages: ServerToClientMessage[] = [{ type: 'UpdateSurface' } as any];
+    const replyMessages: ServerToClientMessage[] = [{type: 'UpdateSurface'} as any];
 
     // Setup subscription to trigger completion
     service.events.subscribe((event: A2UIClientEvent) => {
@@ -86,7 +86,7 @@ describe('MessageProcessor', () => {
     const baseProcessor = (service as any).baseProcessor;
     spyOn(baseProcessor, 'getData').and.returnValue('mock-value');
 
-    const node = { id: '1', type: 'Text' } as any as AnyComponentNode;
+    const node = {id: '1', type: 'Text'} as any as AnyComponentNode;
     const result = service.getData(node, 'path/to/data', 'surf-1');
 
     expect(baseProcessor.getData).toHaveBeenCalledWith(node, 'path/to/data', 'surf-1');
@@ -97,7 +97,7 @@ describe('MessageProcessor', () => {
     const baseProcessor = (service as any).baseProcessor;
     spyOn(baseProcessor, 'setData');
 
-    const node = { id: '1', type: 'Text' } as any as AnyComponentNode;
+    const node = {id: '1', type: 'Text'} as any as AnyComponentNode;
     service.setData(node, 'path/to/data', 'new-value', 'surf-1');
 
     expect(baseProcessor.setData).toHaveBeenCalledWith(node, 'path/to/data', 'new-value', 'surf-1');
@@ -134,7 +134,7 @@ describe('MessageProcessor', () => {
         id: readyComponentId,
         type: 'Text',
         properties: {
-          text: { literalString: 'Ready to render' },
+          text: {literalString: 'Ready to render'},
         },
       },
       dataModel: new Map(),
diff --git a/renderers/angular/src/v0_8/data/processor.ts b/renderers/angular/src/v0_8/data/processor.ts
index e8efdc8c1..cb7775c48 100644
--- a/renderers/angular/src/v0_8/data/processor.ts
+++ b/renderers/angular/src/v0_8/data/processor.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Injectable, signal } from '@angular/core';
-import { Subject, Observable } from 'rxjs';
+import {Injectable, signal} from '@angular/core';
+import {Subject, Observable} from 'rxjs';
 import * as WebCore from '@a2ui/web_core/v0_8';
 
-import type { A2UIClientEventMessage, AnyComponentNode, ServerToClientMessage } from '../types';
+import type {A2UIClientEventMessage, AnyComponentNode, ServerToClientMessage} from '../types';
 
 export interface A2UIClientEvent {
   message: A2UIClientEventMessage;
@@ -50,7 +50,7 @@ export class MessageProcessor {
    * This should be called after any update to the underlying base processor's surfaces.
    */
   private notify() {
-    this.versionSignal.update((v) => v + 1);
+    this.versionSignal.update(v => v + 1);
   }
 
   processMessages(messages: ServerToClientMessage[]) {
@@ -62,12 +62,12 @@ export class MessageProcessor {
     const completion = new Subject<ServerToClientMessage[]>();
     const promise = new Promise<ServerToClientMessage[]>((resolve, reject) => {
       completion.subscribe({
-        next: (msgs) => resolve(msgs),
-        error: (err) => reject(err),
+        next: msgs => resolve(msgs),
+        error: err => reject(err),
       });
     });
 
-    this.eventsSubject.next({ message, completion });
+    this.eventsSubject.next({message, completion});
     return promise;
   }
 
diff --git a/renderers/angular/src/v0_8/data/types.ts b/renderers/angular/src/v0_8/data/types.ts
index d1e58f404..d143dc873 100644
--- a/renderers/angular/src/v0_8/data/types.ts
+++ b/renderers/angular/src/v0_8/data/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { ServerToClientMessage } from '../types';
+import type {ServerToClientMessage} from '../types';
 
 export interface A2TextPayload {
   kind: 'text';
@@ -26,4 +26,4 @@ export interface A2DataPayload {
   data: ServerToClientMessage;
 }
 
-export type A2AServerPayload = Array<A2DataPayload | A2TextPayload> | { error: string };
+export type A2AServerPayload = Array<A2DataPayload | A2TextPayload> | {error: string};
diff --git a/renderers/angular/src/v0_8/rendering/catalog.ts b/renderers/angular/src/v0_8/rendering/catalog.ts
index ee4039a74..4e04dcfc9 100644
--- a/renderers/angular/src/v0_8/rendering/catalog.ts
+++ b/renderers/angular/src/v0_8/rendering/catalog.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Binding, InjectionToken, Type } from '@angular/core';
-import { DynamicComponent } from './dynamic-component';
-import type { AnyComponentNode } from '../types';
+import {Binding, InjectionToken, Type} from '@angular/core';
+import {DynamicComponent} from './dynamic-component';
+import type {AnyComponentNode} from '../types';
 
 export type CatalogLoader = () =>
   | Promise<Type<DynamicComponent<any>>>
diff --git a/renderers/angular/src/v0_8/rendering/dynamic-component.ts b/renderers/angular/src/v0_8/rendering/dynamic-component.ts
index 17ad90856..6f6d2fce3 100644
--- a/renderers/angular/src/v0_8/rendering/dynamic-component.ts
+++ b/renderers/angular/src/v0_8/rendering/dynamic-component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Directive, inject, input } from '@angular/core';
-import { MessageProcessor } from '../data';
-import { Theme } from './theming';
+import {Directive, inject, input} from '@angular/core';
+import {MessageProcessor} from '../data';
+import {Theme} from './theming';
 import type {
   A2UIClientEventMessage,
   Action,
diff --git a/renderers/angular/src/v0_8/rendering/renderer.spec.ts b/renderers/angular/src/v0_8/rendering/renderer.spec.ts
index 232f8c28f..837b8f8a0 100644
--- a/renderers/angular/src/v0_8/rendering/renderer.spec.ts
+++ b/renderers/angular/src/v0_8/rendering/renderer.spec.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Renderer } from './renderer';
-import { Catalog } from './catalog';
-import { Component, Input } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Renderer} from './renderer';
+import {Catalog} from './catalog';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'test-comp',
@@ -51,12 +51,12 @@ describe('v0.8 Renderer', () => {
 
   beforeEach(async () => {
     mockCatalog = {
-      TestComp: { type: () => TestComp },
+      TestComp: {type: () => TestComp},
     };
 
     await TestBed.configureTestingModule({
       imports: [TestHost],
-      providers: [{ provide: Catalog, useValue: mockCatalog }],
+      providers: [{provide: Catalog, useValue: mockCatalog}],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestHost);
@@ -66,7 +66,7 @@ describe('v0.8 Renderer', () => {
     fixture.componentInstance.surfaceId = 'surf-1';
     fixture.componentInstance.component = {
       type: 'TestComp',
-      properties: { text: 'Hello v0.8' },
+      properties: {text: 'Hello v0.8'},
       weight: 10,
     };
 
@@ -84,7 +84,7 @@ describe('v0.8 Renderer', () => {
     fixture.componentInstance.surfaceId = 'surf-1';
     fixture.componentInstance.component = {
       type: 'TestComp',
-      properties: { text: 'Async Hello' },
+      properties: {text: 'Async Hello'},
     };
 
     fixture.detectChanges();
@@ -113,7 +113,7 @@ describe('v0.8 Renderer', () => {
     fixture.componentInstance.surfaceId = 'surf-1';
     fixture.componentInstance.component = {
       type: 'TestComp',
-      properties: { text: 'Function Hello' },
+      properties: {text: 'Function Hello'},
     };
 
     fixture.detectChanges();
@@ -158,12 +158,12 @@ describe('v0.8 Renderer Regression Tests', () => {
 
   beforeEach(async () => {
     mockCatalog = {
-      CompWithInputs: { type: () => CompWithInputs },
+      CompWithInputs: {type: () => CompWithInputs},
     };
 
     await TestBed.configureTestingModule({
       imports: [TestHost],
-      providers: [{ provide: Catalog, useValue: mockCatalog }],
+      providers: [{provide: Catalog, useValue: mockCatalog}],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestHost);
@@ -213,14 +213,14 @@ describe('v0.8 Renderer Regression Tests', () => {
       }
     }
 
-    mockCatalog['CompWithChildren'] = { type: () => CompWithChildren };
+    mockCatalog['CompWithChildren'] = {type: () => CompWithChildren};
 
     fixture.componentInstance.surfaceId = 'surf-1';
     fixture.componentInstance.component = {
       type: 'CompWithChildren',
       properties: {
-        children: [{ id: 'child-1' }],
-        child: { id: 'child-2' },
+        children: [{id: 'child-1'}],
+        child: {id: 'child-2'},
       },
     };
 
@@ -228,8 +228,8 @@ describe('v0.8 Renderer Regression Tests', () => {
     await fixture.whenStable();
     fixture.detectChanges();
 
-    expect(setCapture.children).toEqual([{ id: 'child-1' }]);
-    expect(setCapture.child).toEqual({ id: 'child-2' });
+    expect(setCapture.children).toEqual([{id: 'child-1'}]);
+    expect(setCapture.child).toEqual({id: 'child-2'});
   });
 
   it('should gracefully handle components with missing properties', async () => {
diff --git a/renderers/angular/src/v0_8/rendering/renderer.ts b/renderers/angular/src/v0_8/rendering/renderer.ts
index 9482dee24..4bb1e40cd 100644
--- a/renderers/angular/src/v0_8/rendering/renderer.ts
+++ b/renderers/angular/src/v0_8/rendering/renderer.ts
@@ -24,12 +24,12 @@ import {
   PLATFORM_ID,
   ComponentRef,
 } from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { structuralStyles } from '@a2ui/web_core/styles/index';
-import { Catalog } from './catalog';
-import { MessageProcessor } from '../data';
-import type { AnyComponentNode, SurfaceID } from '../types';
-import { DynamicComponent } from './dynamic-component';
+import {DOCUMENT, isPlatformBrowser} from '@angular/common';
+import {structuralStyles} from '@a2ui/web_core/styles/index';
+import {Catalog} from './catalog';
+import {MessageProcessor} from '../data';
+import type {AnyComponentNode, SurfaceID} from '../types';
+import {DynamicComponent} from './dynamic-component';
 
 @Directive({
   selector: '[a2ui-renderer]',
@@ -120,7 +120,7 @@ export class Renderer {
     const componentTypeOrPromise = this.resolveComponentType(config);
 
     if (componentTypeOrPromise instanceof Promise) {
-      componentTypeOrPromise.then((componentType) => {
+      componentTypeOrPromise.then(componentType => {
         // Ensure we are still supposed to render this component
         if (this.currentId === node.id && this.currentType === node.type) {
           const componentRef = container.createComponent(componentType) as ComponentRef<
diff --git a/renderers/angular/src/v0_8/rendering/theming.ts b/renderers/angular/src/v0_8/rendering/theming.ts
index fe6ed0622..762106d62 100644
--- a/renderers/angular/src/v0_8/rendering/theming.ts
+++ b/renderers/angular/src/v0_8/rendering/theming.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import type { Theme as ThemeType } from '../types';
+import {Injectable} from '@angular/core';
+import type {Theme as ThemeType} from '../types';
 
 @Injectable({
   providedIn: 'root',
diff --git a/renderers/angular/src/v0_8/v0_8_integration.spec.ts b/renderers/angular/src/v0_8/v0_8_integration.spec.ts
index 6c85663e6..e9496322b 100644
--- a/renderers/angular/src/v0_8/v0_8_integration.spec.ts
+++ b/renderers/angular/src/v0_8/v0_8_integration.spec.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Renderer } from './rendering/renderer';
-import { Catalog } from './rendering/catalog';
-import { DEFAULT_CATALOG } from './catalog';
-import { Theme } from './rendering/theming';
-import { MessageProcessor } from './data/processor';
-import { MarkdownRenderer } from './data/markdown';
-import { Component } from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Renderer} from './rendering/renderer';
+import {Catalog} from './rendering/catalog';
+import {DEFAULT_CATALOG} from './catalog';
+import {Theme} from './rendering/theming';
+import {MessageProcessor} from './data/processor';
+import {MarkdownRenderer} from './data/markdown';
+import {Component} from '@angular/core';
 import * as restaurantCardMock from './test_data/mocks/restaurant-card.json';
 import * as contactCardMock from './test_data/mocks/contact-card.json';
 
@@ -30,7 +30,7 @@ import * as contactCardMock from './test_data/mocks/contact-card.json';
  * This handles the v0.8 format where children are often referenced by ID.
  */
 function resolveComponentTree(messages: any[], rootId: string): any {
-  const surfaceUpdate = messages.find((m) => m.surfaceUpdate)?.surfaceUpdate;
+  const surfaceUpdate = messages.find(m => m.surfaceUpdate)?.surfaceUpdate;
   if (!surfaceUpdate) return null;
 
   const componentMap = new Map(surfaceUpdate.components.map((c: any) => [c.id, c]));
@@ -48,7 +48,7 @@ function resolveComponentTree(messages: any[], rootId: string): any {
       // If it's in the { id, component: { Type: { ... } } } format
       if (idOrNode.component) {
         const type = Object.keys(idOrNode.component)[0];
-        const properties = { ...idOrNode.component[type] };
+        const properties = {...idOrNode.component[type]};
 
         // Recursively resolve children
         if (properties.child) {
@@ -109,8 +109,8 @@ describe('v0.8 Angular Renderer Integration', () => {
     await TestBed.configureTestingModule({
       imports: [TestHost],
       providers: [
-        { provide: MessageProcessor, useValue: processor },
-        { provide: Catalog, useValue: DEFAULT_CATALOG },
+        {provide: MessageProcessor, useValue: processor},
+        {provide: Catalog, useValue: DEFAULT_CATALOG},
         {
           provide: MarkdownRenderer,
           useValue: {
@@ -124,22 +124,22 @@ describe('v0.8 Angular Renderer Integration', () => {
     theme.update({
       components: {
         Text: {
-          all: { 'a2ui-text': true },
-          h1: { 'a2ui-text-h1': true },
-          h2: { 'a2ui-text-h2': true },
-          h3: { 'a2ui-text-h3': true },
-          h4: { 'a2ui-text-h4': true },
-          h5: { 'a2ui-text-h5': true },
-          body: { 'common-body': true },
-          caption: { 'caption-style': true },
+          all: {'a2ui-text': true},
+          h1: {'a2ui-text-h1': true},
+          h2: {'a2ui-text-h2': true},
+          h3: {'a2ui-text-h3': true},
+          h4: {'a2ui-text-h4': true},
+          h5: {'a2ui-text-h5': true},
+          body: {'common-body': true},
+          caption: {'caption-style': true},
         },
-        Card: { 'a2ui-card': true },
-        Row: { 'a2ui-row': true },
-        Column: { 'a2ui-column': true },
-        Image: { all: { 'a2ui-image': true }, avatar: { 'avatar-style': true } },
-        Divider: { 'a2ui-divider': true },
-        Icon: { 'a2ui-icon': true },
-        Button: { 'a2ui-button': true },
+        Card: {'a2ui-card': true},
+        Row: {'a2ui-row': true},
+        Column: {'a2ui-column': true},
+        Image: {all: {'a2ui-image': true}, avatar: {'avatar-style': true}},
+        Divider: {'a2ui-divider': true},
+        Icon: {'a2ui-icon': true},
+        Button: {'a2ui-button': true},
       } as any,
       elements: {} as any,
       markdown: {
@@ -165,7 +165,7 @@ describe('v0.8 Angular Renderer Integration', () => {
     fixture.componentInstance.component = {
       type: 'Row',
       id: 'row-1',
-      properties: { children: [] },
+      properties: {children: []},
     };
     fixture.detectChanges();
 
@@ -194,7 +194,7 @@ describe('v0.8 Angular Renderer Integration', () => {
                 type: 'Text',
                 id: 'name',
                 properties: {
-                  text: { path: '/name' },
+                  text: {path: '/name'},
                   usageHint: 'h2',
                 },
               },
@@ -229,7 +229,7 @@ describe('v0.8 Angular Renderer Integration', () => {
       id: 'wrapper-test',
       component: {
         Text: {
-          text: { literalString: 'Wrapped Text' },
+          text: {literalString: 'Wrapped Text'},
         },
       },
     };
@@ -249,7 +249,7 @@ describe('v0.8 Angular Renderer Integration', () => {
       type: 'Text',
       id: 'text-1',
       properties: {
-        text: { literalString: 'Resilient' },
+        text: {literalString: 'Resilient'},
         unknownProp: 'should not crash',
       },
     };
diff --git a/renderers/angular/src/v0_9/catalog/basic/audio-player.component.ts b/renderers/angular/src/v0_9/catalog/basic/audio-player.component.ts
index 0728dfed3..f284de4b2 100644
--- a/renderers/angular/src/v0_9/catalog/basic/audio-player.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/audio-player.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { AudioPlayerApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {AudioPlayerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI AudioPlayer component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.spec.ts b/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.spec.ts
index d9cde7469..2f0946920 100644
--- a/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.spec.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '../../core/a2ui-renderer.service';
-import { BasicCatalog } from './basic-catalog';
-import { ComponentApi } from '@a2ui/web_core/v0_9';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from '../../core/a2ui-renderer.service';
+import {BasicCatalog} from './basic-catalog';
+import {ComponentApi} from '@a2ui/web_core/v0_9';
 import z from 'zod';
 
 export const TestComponentApi = {
@@ -36,8 +36,7 @@ export const TestComponentApi = {
   template: '<div>Test</div>',
   standalone: true,
 })
-class TestBasicComp extends BasicCatalogComponent<typeof TestComponentApi> {
-}
+class TestBasicComp extends BasicCatalogComponent<typeof TestComponentApi> {}
 
 describe('BasicCatalogComponent', () => {
   let fixture: ComponentFixture<TestBasicComp>;
diff --git a/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.ts b/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.ts
index be6237c6b..285ae8623 100644
--- a/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/basic-catalog-component.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Directive, computed, HostBinding, inject } from '@angular/core';
-import { injectBasicCatalogStyles } from '@a2ui/web_core/v0_9/basic_catalog';
-import { A2uiRendererService } from '../../core/a2ui-renderer.service';
-import { ComponentApi } from '@a2ui/web_core/v0_9';
-import { CatalogComponent } from '../../core/catalog_component';
+import {Directive, computed, HostBinding, inject} from '@angular/core';
+import {injectBasicCatalogStyles} from '@a2ui/web_core/v0_9/basic_catalog';
+import {A2uiRendererService} from '../../core/a2ui-renderer.service';
+import {ComponentApi} from '@a2ui/web_core/v0_9';
+import {CatalogComponent} from '../../core/catalog_component';
 
 /**
  * Base class for A2UI basic catalog components in Angular.
@@ -27,7 +27,9 @@ import { CatalogComponent } from '../../core/catalog_component';
  * Also binds the primary brand color to the host element.
  */
 @Directive()
-export abstract class BasicCatalogComponent<Api extends ComponentApi> extends CatalogComponent<Api> {
+export abstract class BasicCatalogComponent<
+  Api extends ComponentApi,
+> extends CatalogComponent<Api> {
   protected rendererService = inject(A2uiRendererService);
 
   readonly surface = computed(() => {
@@ -63,4 +65,3 @@ export abstract class BasicCatalogComponent<Api extends ComponentApi> extends Ca
     return this.primaryColor() || null;
   }
 }
-
diff --git a/renderers/angular/src/v0_9/catalog/basic/basic-catalog.ts b/renderers/angular/src/v0_9/catalog/basic/basic-catalog.ts
index 52abefdc6..b72515022 100644
--- a/renderers/angular/src/v0_9/catalog/basic/basic-catalog.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/basic-catalog.ts
@@ -14,26 +14,26 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
-import { AngularCatalog, AngularComponentImplementation } from '../types';
-import { TextComponent } from './text.component';
-import { RowComponent } from './row.component';
-import { ColumnComponent } from './column.component';
-import { ButtonComponent } from './button.component';
-import { TextFieldComponent } from './text-field.component';
-import { ImageComponent } from './image.component';
-import { IconComponent } from './icon.component';
-import { VideoComponent } from './video.component';
-import { AudioPlayerComponent } from './audio-player.component';
-import { ListComponent } from './list.component';
-import { CardComponent } from './card.component';
-import { TabsComponent } from './tabs.component';
-import { ModalComponent } from './modal.component';
-import { DividerComponent } from './divider.component';
-import { CheckBoxComponent } from './check-box.component';
-import { ChoicePickerComponent } from './choice-picker.component';
-import { SliderComponent } from './slider.component';
-import { DateTimeInputComponent } from './date-time-input.component';
+import {Injectable} from '@angular/core';
+import {AngularCatalog, AngularComponentImplementation} from '../types';
+import {TextComponent} from './text.component';
+import {RowComponent} from './row.component';
+import {ColumnComponent} from './column.component';
+import {ButtonComponent} from './button.component';
+import {TextFieldComponent} from './text-field.component';
+import {ImageComponent} from './image.component';
+import {IconComponent} from './icon.component';
+import {VideoComponent} from './video.component';
+import {AudioPlayerComponent} from './audio-player.component';
+import {ListComponent} from './list.component';
+import {CardComponent} from './card.component';
+import {TabsComponent} from './tabs.component';
+import {ModalComponent} from './modal.component';
+import {DividerComponent} from './divider.component';
+import {CheckBoxComponent} from './check-box.component';
+import {ChoicePickerComponent} from './choice-picker.component';
+import {SliderComponent} from './slider.component';
+import {DateTimeInputComponent} from './date-time-input.component';
 
 import {
   BASIC_FUNCTIONS,
@@ -56,30 +56,30 @@ import {
   SliderApi,
   DateTimeInputApi,
 } from '@a2ui/web_core/v0_9/basic_catalog';
-import { FunctionImplementation } from '@a2ui/web_core/v0_9';
+import {FunctionImplementation} from '@a2ui/web_core/v0_9';
 
 /**
  * The set of default Angular implementations for each component in the basic catalog.
  */
 const DEFAULT_COMPONENT_IMPLEMENTATIONS: Record<string, AngularComponentImplementation> = {
-  text: { ...TextApi, component: TextComponent },
-  row: { ...RowApi, component: RowComponent },
-  column: { ...ColumnApi, component: ColumnComponent },
-  button: { ...ButtonApi, component: ButtonComponent },
-  textField: { ...TextFieldApi, component: TextFieldComponent },
-  image: { ...ImageApi, component: ImageComponent },
-  icon: { ...IconApi, component: IconComponent },
-  video: { ...VideoApi, component: VideoComponent },
-  audioPlayer: { ...AudioPlayerApi, component: AudioPlayerComponent },
-  list: { ...ListApi, component: ListComponent },
-  card: { ...CardApi, component: CardComponent },
-  tabs: { ...TabsApi, component: TabsComponent },
-  modal: { ...ModalApi, component: ModalComponent },
-  divider: { ...DividerApi, component: DividerComponent },
-  checkBox: { ...CheckBoxApi, component: CheckBoxComponent },
-  choicePicker: { ...ChoicePickerApi, component: ChoicePickerComponent },
-  slider: { ...SliderApi, component: SliderComponent },
-  dateTimeInput: { ...DateTimeInputApi, component: DateTimeInputComponent },
+  text: {...TextApi, component: TextComponent},
+  row: {...RowApi, component: RowComponent},
+  column: {...ColumnApi, component: ColumnComponent},
+  button: {...ButtonApi, component: ButtonComponent},
+  textField: {...TextFieldApi, component: TextFieldComponent},
+  image: {...ImageApi, component: ImageComponent},
+  icon: {...IconApi, component: IconComponent},
+  video: {...VideoApi, component: VideoComponent},
+  audioPlayer: {...AudioPlayerApi, component: AudioPlayerComponent},
+  list: {...ListApi, component: ListComponent},
+  card: {...CardApi, component: CardComponent},
+  tabs: {...TabsApi, component: TabsComponent},
+  modal: {...ModalApi, component: ModalComponent},
+  divider: {...DividerApi, component: DividerComponent},
+  checkBox: {...CheckBoxApi, component: CheckBoxComponent},
+  choicePicker: {...ChoicePickerApi, component: ChoicePickerComponent},
+  slider: {...SliderApi, component: SliderComponent},
+  dateTimeInput: {...DateTimeInputApi, component: DateTimeInputComponent},
 } as const;
 
 /**
@@ -120,7 +120,7 @@ export const BASIC_COMPONENTS: AngularComponentImplementation[] = Object.values(
 /**
  * The set of client-side functions provided by the basic catalog.
  */
-export { BASIC_FUNCTIONS };
+export {BASIC_FUNCTIONS};
 
 /**
  * A base class for basic catalogs, providing extensibility for non-DI use cases.
@@ -134,7 +134,7 @@ export class BasicCatalogBase extends AngularCatalog {
     const components: AngularComponentImplementation[] = [
       ...Object.entries(DEFAULT_COMPONENT_IMPLEMENTATIONS).map(([key, defaultValue]) => {
         const impl = (overrides as any)[key] ?? defaultValue;
-        return { ...impl, name: impl.name || key };
+        return {...impl, name: impl.name || key};
       }),
       ...(options.extraComponents ?? []),
     ];
diff --git a/renderers/angular/src/v0_9/catalog/basic/button.component.spec.ts b/renderers/angular/src/v0_9/catalog/basic/button.component.spec.ts
index 0e56ec8ae..bdd7a2bc2 100644
--- a/renderers/angular/src/v0_9/catalog/basic/button.component.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/button.component.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, input, signal } from '@angular/core';
-import { ButtonComponent } from './button.component';
-import { ComponentModel } from '@a2ui/web_core/v0_9';
-import { A2uiRendererService } from '../../core/a2ui-renderer.service';
-import { ComponentBinder } from '../../core/component-binder.service';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, input, signal} from '@angular/core';
+import {ButtonComponent} from './button.component';
+import {ComponentModel} from '@a2ui/web_core/v0_9';
+import {A2uiRendererService} from '../../core/a2ui-renderer.service';
+import {ComponentBinder} from '../../core/component-binder.service';
+import {By} from '@angular/platform-browser';
 
 describe('ButtonComponent', () => {
   let component: ButtonComponent;
@@ -33,7 +33,7 @@ describe('ButtonComponent', () => {
     mockSurface = {
       dispatchAction: jasmine.createSpy('dispatchAction'),
       componentsModel: new Map([
-        ['child1', new ComponentModel('child1', 'Text', { text: 'Child Content' })],
+        ['child1', new ComponentModel('child1', 'Text', {text: 'Child Content'})],
       ]),
       catalog: {
         id: 'test-catalog',
@@ -70,13 +70,13 @@ describe('ButtonComponent', () => {
     };
 
     const mockBinder = jasmine.createSpyObj('ComponentBinder', ['bind']);
-    mockBinder.bind.and.returnValue({ text: { value: () => 'bound text' } });
+    mockBinder.bind.and.returnValue({text: {value: () => 'bound text'}});
 
     await TestBed.configureTestingModule({
       imports: [ButtonComponent],
       providers: [
-        { provide: A2uiRendererService, useValue: mockRendererService },
-        { provide: ComponentBinder, useValue: mockBinder },
+        {provide: A2uiRendererService, useValue: mockRendererService},
+        {provide: ComponentBinder, useValue: mockBinder},
       ],
     }).compileComponents();
 
@@ -85,11 +85,11 @@ describe('ButtonComponent', () => {
     fixture.componentRef.setInput('surfaceId', 'surf1');
     fixture.componentRef.setInput('componentId', 'comp1');
     fixture.componentRef.setInput('props', {
-      variant: { value: signal('primary'), raw: 'primary', onUpdate: () => {} },
-      child: { value: signal({ id: 'child1', basePath: '/' }), raw: 'child1', onUpdate: () => {} },
+      variant: {value: signal('primary'), raw: 'primary', onUpdate: () => {}},
+      child: {value: signal({id: 'child1', basePath: '/'}), raw: 'child1', onUpdate: () => {}},
       action: {
-        value: signal({ type: 'test-action', data: {} }),
-        raw: { type: 'test-action', data: {} },
+        value: signal({type: 'test-action', data: {}}),
+        raw: {type: 'test-action', data: {}},
         onUpdate: () => {},
       },
     });
@@ -139,13 +139,13 @@ describe('ButtonComponent', () => {
     fixture.detectChanges();
     const host = fixture.debugElement.query(By.css('a2ui-v09-component-host'));
     expect(host).toBeTruthy();
-    expect(host.componentInstance.componentKey()).toEqual({ id: 'child1', basePath: '/' });
+    expect(host.componentInstance.componentKey()).toEqual({id: 'child1', basePath: '/'});
   });
 
   it('should not show child component host if child prop is absent', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      child: { value: signal(null), raw: null, onUpdate: () => {} },
+      child: {value: signal(null), raw: null, onUpdate: () => {}},
     });
     fixture.detectChanges();
     const host = fixture.debugElement.query(By.css('a2ui-v09-component-host'));
@@ -157,7 +157,7 @@ describe('ButtonComponent', () => {
 
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      isValid: { value: isValidSig, raw: true, onUpdate: () => {} },
+      isValid: {value: isValidSig, raw: true, onUpdate: () => {}},
     });
 
     fixture.detectChanges();
@@ -170,7 +170,7 @@ describe('ButtonComponent', () => {
   });
 
   it('should override the button default background color when primary color is set', () => {
-    mockSurface.theme = { primaryColor: 'red' };
+    mockSurface.theme = {primaryColor: 'red'};
     fixture.detectChanges();
     const button = fixture.debugElement.query(By.css('button'));
     const computedStyle = window.getComputedStyle(button.nativeElement);
diff --git a/renderers/angular/src/v0_9/catalog/basic/button.component.ts b/renderers/angular/src/v0_9/catalog/basic/button.component.ts
index a3699b13b..849ab51db 100644
--- a/renderers/angular/src/v0_9/catalog/basic/button.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/button.component.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { ComponentHostComponent } from '../../core/component-host.component';
-import { DataContext } from '@a2ui/web_core/v0_9';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { ButtonApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {ComponentHostComponent} from '../../core/component-host.component';
+import {DataContext} from '@a2ui/web_core/v0_9';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Button component (v0.9).
@@ -96,7 +96,6 @@ import { ButtonApi } from '@a2ui/web_core/v0_9/basic_catalog';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent extends BasicCatalogComponent<typeof ButtonApi> {
-
   readonly variant = computed(() => this.props()['variant']?.value() ?? 'default');
   readonly child = computed(() => this.props()['child']?.value());
   readonly action = computed(() => this.props()['action']?.value());
@@ -112,4 +111,4 @@ export class ButtonComponent extends BasicCatalogComponent<typeof ButtonApi> {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/renderers/angular/src/v0_9/catalog/basic/card.component.ts b/renderers/angular/src/v0_9/catalog/basic/card.component.ts
index a269cd2f7..ab891b2a7 100644
--- a/renderers/angular/src/v0_9/catalog/basic/card.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/card.component.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { ComponentHostComponent } from '../../core/component-host.component';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { CardApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {ComponentHostComponent} from '../../core/component-host.component';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {CardApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Card component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/check-box.component.ts b/renderers/angular/src/v0_9/catalog/basic/check-box.component.ts
index 00824ce04..c864a6127 100644
--- a/renderers/angular/src/v0_9/catalog/basic/check-box.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/check-box.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { CheckBoxApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI CheckBox component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/choice-picker.component.ts b/renderers/angular/src/v0_9/catalog/basic/choice-picker.component.ts
index 5dd5d35bd..dd7280470 100644
--- a/renderers/angular/src/v0_9/catalog/basic/choice-picker.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/choice-picker.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { ChoicePickerApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {ChoicePickerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI ChoicePicker component (v0.9).
@@ -128,9 +128,7 @@ import { ChoicePickerApi } from '@a2ui/web_core/v0_9/basic_catalog';
 })
 export class ChoicePickerComponent extends BasicCatalogComponent<typeof ChoicePickerApi> {
   readonly displayStyle = computed(() => this.props()['displayStyle']?.value());
-  readonly options = computed(
-    () => this.props()['options']?.value() || [],
-  );
+  readonly options = computed(() => this.props()['options']?.value() || []);
   readonly variant = computed(() => this.props()['variant']?.value());
   readonly selectedValue = computed(() => this.props()['value']?.value());
 
diff --git a/renderers/angular/src/v0_9/catalog/basic/column.component.spec.ts b/renderers/angular/src/v0_9/catalog/basic/column.component.spec.ts
index 7eb9a603e..d562f5e1d 100644
--- a/renderers/angular/src/v0_9/catalog/basic/column.component.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/column.component.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, input, signal } from '@angular/core';
-import { ColumnComponent } from './column.component';
-import { ComponentModel } from '@a2ui/web_core/v0_9';
-import { A2uiRendererService } from '../../core/a2ui-renderer.service';
-import { ComponentBinder } from '../../core/component-binder.service';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, input, signal} from '@angular/core';
+import {ColumnComponent} from './column.component';
+import {ComponentModel} from '@a2ui/web_core/v0_9';
+import {A2uiRendererService} from '../../core/a2ui-renderer.service';
+import {ComponentBinder} from '../../core/component-binder.service';
+import {By} from '@angular/platform-browser';
 
 @Component({
   standalone: true,
@@ -51,7 +51,7 @@ describe('ColumnComponent', () => {
       ]),
       catalog: {
         id: 'test-catalog',
-        components: new Map([['Child', { component: DummyChild }]]),
+        components: new Map([['Child', {component: DummyChild}]]),
       },
     };
 
@@ -64,13 +64,13 @@ describe('ColumnComponent', () => {
     };
 
     mockBinder = jasmine.createSpyObj('ComponentBinder', ['bind']);
-    mockBinder.bind.and.returnValue({ text: { value: () => 'bound' } });
+    mockBinder.bind.and.returnValue({text: {value: () => 'bound'}});
 
     await TestBed.configureTestingModule({
       imports: [ColumnComponent],
       providers: [
-        { provide: A2uiRendererService, useValue: mockRendererService },
-        { provide: ComponentBinder, useValue: mockBinder },
+        {provide: A2uiRendererService, useValue: mockRendererService},
+        {provide: ComponentBinder, useValue: mockBinder},
       ],
     }).compileComponents();
 
@@ -78,8 +78,8 @@ describe('ColumnComponent', () => {
     component = fixture.componentInstance;
     fixture.componentRef.setInput('surfaceId', 'surf1');
     fixture.componentRef.setInput('props', {
-      justify: { value: signal('start'), raw: 'start', onUpdate: () => {} },
-      align: { value: signal('stretch'), raw: 'stretch', onUpdate: () => {} },
+      justify: {value: signal('start'), raw: 'start', onUpdate: () => {}},
+      align: {value: signal('stretch'), raw: 'stretch', onUpdate: () => {}},
       children: {
         value: signal(['child1', 'child2']),
         raw: ['child1', 'child2'],
@@ -103,7 +103,7 @@ describe('ColumnComponent', () => {
   it('should apply flex style from weight prop', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      weight: { value: signal(2), raw: 2, onUpdate: () => {} },
+      weight: {value: signal(2), raw: 2, onUpdate: () => {}},
     });
     fixture.detectChanges();
     const style = window.getComputedStyle(fixture.debugElement.nativeElement);
@@ -113,7 +113,7 @@ describe('ColumnComponent', () => {
   it('should apply flex style from weight prop when value is 0', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      weight: { value: signal(0), raw: 0, onUpdate: () => {} },
+      weight: {value: signal(0), raw: 0, onUpdate: () => {}},
     });
     fixture.detectChanges();
     const style = window.getComputedStyle(fixture.debugElement.nativeElement);
@@ -123,7 +123,7 @@ describe('ColumnComponent', () => {
   it('should not apply flex style when weight prop is null', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      weight: { value: signal(null), raw: null, onUpdate: () => {} },
+      weight: {value: signal(null), raw: null, onUpdate: () => {}},
     });
     fixture.detectChanges();
     const style = window.getComputedStyle(fixture.debugElement.nativeElement);
@@ -135,8 +135,8 @@ describe('ColumnComponent', () => {
     fixture.detectChanges();
     const hosts = fixture.debugElement.queryAll(By.css('a2ui-v09-component-host'));
     expect(hosts.length).toBe(2);
-    expect(hosts[0].componentInstance.componentKey()).toEqual({ id: 'child1', basePath: '/' });
-    expect(hosts[1].componentInstance.componentKey()).toEqual({ id: 'child2', basePath: '/' });
+    expect(hosts[0].componentInstance.componentKey()).toEqual({id: 'child1', basePath: '/'});
+    expect(hosts[1].componentInstance.componentKey()).toEqual({id: 'child2', basePath: '/'});
   });
 
   it('should render repeating children', () => {
@@ -181,8 +181,8 @@ describe('ColumnComponent', () => {
 
   it('should handle missing children property', () => {
     fixture.componentRef.setInput('props', {
-      justify: { value: signal('start'), raw: 'start', onUpdate: () => {} },
-      align: { value: signal('stretch'), raw: 'stretch', onUpdate: () => {} },
+      justify: {value: signal('start'), raw: 'start', onUpdate: () => {}},
+      align: {value: signal('stretch'), raw: 'stretch', onUpdate: () => {}},
     });
     fixture.detectChanges();
     const hosts = fixture.debugElement.queryAll(By.css('a2ui-v09-component-host'));
diff --git a/renderers/angular/src/v0_9/catalog/basic/column.component.ts b/renderers/angular/src/v0_9/catalog/basic/column.component.ts
index c5ef815c0..1723451d7 100644
--- a/renderers/angular/src/v0_9/catalog/basic/column.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/column.component.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { ComponentHostComponent } from '../../core/component-host.component';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {ComponentHostComponent} from '../../core/component-host.component';
 
-import { getNormalizedPath } from '../../core/utils';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { JUSTIFY_MAP, ALIGN_MAP } from './utils';
-import { ColumnApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {getNormalizedPath} from '../../core/utils';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {JUSTIFY_MAP, ALIGN_MAP} from './utils';
+import {ColumnApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Column component (v0.9).
@@ -54,7 +54,7 @@ import { ColumnApi } from '@a2ui/web_core/v0_9/basic_catalog';
     @if (isRepeating()) {
       @for (item of children(); track item; let i = $index) {
         <a2ui-v09-component-host
-          [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
           [surfaceId]="surfaceId()"
         >
         </a2ui-v09-component-host>
@@ -88,11 +88,11 @@ export class ColumnComponent extends BasicCatalogComponent<typeof ColumnApi> {
 
   protected readonly normalizedChildren = computed(() => {
     if (this.isRepeating()) return [];
-    return this.children().map((child) => {
+    return this.children().map(child => {
       if (typeof child === 'object' && child !== null && 'id' in child) {
-        return child as { id: string; basePath: string };
+        return child as {id: string; basePath: string};
       }
-      return { id: child as string, basePath: this.dataContextPath() };
+      return {id: child as string, basePath: this.dataContextPath()};
     });
   });
 
diff --git a/renderers/angular/src/v0_9/catalog/basic/complex-components.spec.ts b/renderers/angular/src/v0_9/catalog/basic/complex-components.spec.ts
index ed0495eb4..f9cad0419 100644
--- a/renderers/angular/src/v0_9/catalog/basic/complex-components.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/complex-components.spec.ts
@@ -14,20 +14,20 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, signal as angularSignal, input } from '@angular/core';
-import { CheckBoxComponent } from './check-box.component';
-import { ChoicePickerComponent } from './choice-picker.component';
-import { SliderComponent } from './slider.component';
-import { DateTimeInputComponent } from './date-time-input.component';
-import { ListComponent } from './list.component';
-import { TabsComponent } from './tabs.component';
-import { ComponentModel } from '@a2ui/web_core/v0_9';
-import { ModalComponent } from './modal.component';
-import { BoundProperty } from '../../core/types';
-import { A2uiRendererService } from '../../core/a2ui-renderer.service';
-import { ComponentBinder } from '../../core/component-binder.service';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, signal as angularSignal, input} from '@angular/core';
+import {CheckBoxComponent} from './check-box.component';
+import {ChoicePickerComponent} from './choice-picker.component';
+import {SliderComponent} from './slider.component';
+import {DateTimeInputComponent} from './date-time-input.component';
+import {ListComponent} from './list.component';
+import {TabsComponent} from './tabs.component';
+import {ComponentModel} from '@a2ui/web_core/v0_9';
+import {ModalComponent} from './modal.component';
+import {BoundProperty} from '../../core/types';
+import {A2uiRendererService} from '../../core/a2ui-renderer.service';
+import {ComponentBinder} from '../../core/component-binder.service';
+import {By} from '@angular/platform-browser';
 
 describe('Complex Components', () => {
   let mockRendererService: any;
@@ -38,25 +38,19 @@ describe('Complex Components', () => {
       surfaceGroup: {
         getSurface: jasmine.createSpy('getSurface').and.returnValue({
           componentsModel: new Map([
-            ['child-1', new ComponentModel('child-1', 'Text', { text: { value: 'Child 1' } })],
-            ['child-2', new ComponentModel('child-2', 'Text', { text: { value: 'Child 2' } })],
-            [
-              'content-1',
-              new ComponentModel('content-1', 'Text', { text: { value: 'Content 1' } }),
-            ],
-            [
-              'content-2',
-              new ComponentModel('content-2', 'Text', { text: { value: 'Content 2' } }),
-            ],
-            ['trigger-btn', new ComponentModel('trigger-btn', 'Text', { text: { value: 'Open' } })],
+            ['child-1', new ComponentModel('child-1', 'Text', {text: {value: 'Child 1'}})],
+            ['child-2', new ComponentModel('child-2', 'Text', {text: {value: 'Child 2'}})],
+            ['content-1', new ComponentModel('content-1', 'Text', {text: {value: 'Content 1'}})],
+            ['content-2', new ComponentModel('content-2', 'Text', {text: {value: 'Content 2'}})],
+            ['trigger-btn', new ComponentModel('trigger-btn', 'Text', {text: {value: 'Open'}})],
             [
               'modal-content',
-              new ComponentModel('modal-content', 'Text', { text: { value: 'Modal' } }),
+              new ComponentModel('modal-content', 'Text', {text: {value: 'Modal'}}),
             ],
           ]),
           catalog: {
             id: 'mock-catalog',
-            components: new Map([['Text', { type: 'Text', component: DummyTextComponent }]]),
+            components: new Map([['Text', {type: 'Text', component: DummyTextComponent}]]),
           },
         }),
       },
@@ -93,8 +87,8 @@ describe('Complex Components', () => {
       await TestBed.configureTestingModule({
         imports: [CheckBoxComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
 
@@ -124,7 +118,7 @@ describe('Complex Components', () => {
       const onUpdateSpy = jasmine.createSpy('onUpdate');
       fixture.componentRef.setInput('props', {
         label: createBoundProperty('Check me'),
-        value: { value: angularSignal(false), raw: false, onUpdate: onUpdateSpy },
+        value: {value: angularSignal(false), raw: false, onUpdate: onUpdateSpy},
       });
       fixture.detectChanges();
       const input = fixture.nativeElement.querySelector('input');
@@ -138,9 +132,9 @@ describe('Complex Components', () => {
         value: createBoundProperty(true),
       });
       mockRendererService.surfaceGroup.getSurface.and.returnValue({
-        theme: { primaryColor: 'rgb(255, 0, 0)' },
+        theme: {primaryColor: 'rgb(255, 0, 0)'},
         componentsModel: new Map(),
-        catalog: { components: new Map() },
+        catalog: {components: new Map()},
       });
       fixture.detectChanges();
 
@@ -159,8 +153,8 @@ describe('Complex Components', () => {
       await TestBed.configureTestingModule({
         imports: [ChoicePickerComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
 
@@ -180,8 +174,8 @@ describe('Complex Components', () => {
       fixture.componentRef.setInput('props', {
         label: createBoundProperty('Pick one'),
         options: createBoundProperty([
-          { label: 'Opt 1', value: '1' },
-          { label: 'Opt 2', value: '2' },
+          {label: 'Opt 1', value: '1'},
+          {label: 'Opt 2', value: '2'},
         ]),
         value: createBoundProperty('1'),
         variant: createBoundProperty('mutuallyExclusive'),
@@ -198,10 +192,10 @@ describe('Complex Components', () => {
       fixture.componentRef.setInput('props', {
         label: createBoundProperty('Pick one'),
         options: createBoundProperty([
-          { label: 'Opt 1', value: '1' },
-          { label: 'Opt 2', value: '2' },
+          {label: 'Opt 1', value: '1'},
+          {label: 'Opt 2', value: '2'},
         ]),
-        value: { value: angularSignal('1'), raw: '1', onUpdate: onUpdateSpy },
+        value: {value: angularSignal('1'), raw: '1', onUpdate: onUpdateSpy},
         variant: createBoundProperty('mutuallyExclusive'),
         displayStyle: createBoundProperty('checkbox'),
       });
@@ -215,10 +209,10 @@ describe('Complex Components', () => {
       const onUpdateSpy = jasmine.createSpy('onUpdate');
       fixture.componentRef.setInput('props', {
         options: createBoundProperty([
-          { label: 'Chip 1', value: 'c1' },
-          { label: 'Chip 2', value: 'c2' },
+          {label: 'Chip 1', value: 'c1'},
+          {label: 'Chip 2', value: 'c2'},
         ]),
-        value: { value: angularSignal(['c1']), raw: ['c1'], onUpdate: onUpdateSpy },
+        value: {value: angularSignal(['c1']), raw: ['c1'], onUpdate: onUpdateSpy},
         variant: createBoundProperty('multipleSelection'),
         displayStyle: createBoundProperty('chips'),
       });
@@ -244,8 +238,8 @@ describe('Complex Components', () => {
       await TestBed.configureTestingModule({
         imports: [SliderComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
 
@@ -276,7 +270,7 @@ describe('Complex Components', () => {
     it('should call onUpdate when slider value changes', () => {
       const onUpdateSpy = jasmine.createSpy('onUpdate');
       fixture.componentRef.setInput('props', {
-        value: { value: angularSignal(50), raw: 50, onUpdate: onUpdateSpy },
+        value: {value: angularSignal(50), raw: 50, onUpdate: onUpdateSpy},
       });
       fixture.detectChanges();
       const input = fixture.nativeElement.querySelector('input');
@@ -294,8 +288,8 @@ describe('Complex Components', () => {
       await TestBed.configureTestingModule({
         imports: [DateTimeInputComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
 
@@ -372,8 +366,8 @@ describe('Complex Components', () => {
       await TestBed.configureTestingModule({
         imports: [ListComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
 
@@ -459,8 +453,8 @@ describe('Complex Components', () => {
       await TestBed.configureTestingModule({
         imports: [TabsComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
 
@@ -478,8 +472,8 @@ describe('Complex Components', () => {
     it('should render tabs and switch content', () => {
       fixture.componentRef.setInput('props', {
         tabs: createBoundProperty([
-          { title: 'Tab 1', child: 'content-1' },
-          { title: 'Tab 2', child: 'content-2' },
+          {title: 'Tab 1', child: 'content-1'},
+          {title: 'Tab 2', child: 'content-2'},
         ]),
       });
       fixture.detectChanges();
@@ -488,12 +482,12 @@ describe('Complex Components', () => {
       expect(tabs[0].textContent).toContain('Tab 1');
 
       let host = fixture.debugElement.query(By.css('a2ui-v09-component-host'));
-      expect(host.componentInstance.componentKey()).toEqual({ id: 'content-1', basePath: '/' });
+      expect(host.componentInstance.componentKey()).toEqual({id: 'content-1', basePath: '/'});
 
       tabs[1].click();
       fixture.detectChanges();
       host = fixture.debugElement.query(By.css('a2ui-v09-component-host'));
-      expect(host.componentInstance.componentKey()).toEqual({ id: 'content-2', basePath: '/' });
+      expect(host.componentInstance.componentKey()).toEqual({id: 'content-2', basePath: '/'});
     });
 
     it('should handle missing tabs property', () => {
@@ -521,8 +515,8 @@ describe('Complex Components', () => {
       await TestBed.configureTestingModule({
         imports: [ModalComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
 
@@ -539,8 +533,8 @@ describe('Complex Components', () => {
 
     it('should render trigger and open modal on click', () => {
       fixture.componentRef.setInput('props', {
-        trigger: createBoundProperty({ id: 'trigger-btn', basePath: '/' }),
-        content: createBoundProperty({ id: 'modal-content', basePath: '/' }),
+        trigger: createBoundProperty({id: 'trigger-btn', basePath: '/'}),
+        content: createBoundProperty({id: 'modal-content', basePath: '/'}),
       });
       fixture.detectChanges();
       const triggerHost = fixture.debugElement.query(
@@ -569,8 +563,8 @@ describe('Complex Components', () => {
 
     it('should close modal when close button clicked', () => {
       fixture.componentRef.setInput('props', {
-        trigger: createBoundProperty({ id: 'trigger-btn', basePath: '/' }),
-        content: createBoundProperty({ id: 'modal-content', basePath: '/' }),
+        trigger: createBoundProperty({id: 'trigger-btn', basePath: '/'}),
+        content: createBoundProperty({id: 'modal-content', basePath: '/'}),
       });
       fixture.detectChanges();
 
@@ -585,8 +579,8 @@ describe('Complex Components', () => {
 
     it('should close modal when overlay clicked', () => {
       fixture.componentRef.setInput('props', {
-        trigger: createBoundProperty({ id: 'trigger-btn', basePath: '/' }),
-        content: createBoundProperty({ id: 'modal-content', basePath: '/' }),
+        trigger: createBoundProperty({id: 'trigger-btn', basePath: '/'}),
+        content: createBoundProperty({id: 'modal-content', basePath: '/'}),
       });
       fixture.detectChanges();
 
diff --git a/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts b/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts
index 211143ac9..88beba62b 100644
--- a/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/date-time-input.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { DateTimeInputApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {DateTimeInputApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI DateTimeInput component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/divider.component.ts b/renderers/angular/src/v0_9/catalog/basic/divider.component.ts
index c790e078c..106b1ad85 100644
--- a/renderers/angular/src/v0_9/catalog/basic/divider.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/divider.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { DividerApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {DividerApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Divider component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/icon.component.ts b/renderers/angular/src/v0_9/catalog/basic/icon.component.ts
index bb4934c9b..18b508396 100644
--- a/renderers/angular/src/v0_9/catalog/basic/icon.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/icon.component.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { IconApi } from '@a2ui/web_core/v0_9/basic_catalog';
-import { AnyDuringSchemaAlignment } from '../types';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {IconApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {AnyDuringSchemaAlignment} from '../types';
 
 const ICON_NAME_OVERRIDES: Record<string, string> = {
   play: 'play_arrow',
@@ -103,6 +103,6 @@ export class IconComponent extends BasicCatalogComponent<typeof IconApi> {
     if (typeof name !== 'string') return '';
     if (ICON_NAME_OVERRIDES[name]) return ICON_NAME_OVERRIDES[name];
     // Convert camelCase to snake_case for Material Icons
-    return name.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+    return name.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
   });
 }
diff --git a/renderers/angular/src/v0_9/catalog/basic/image.component.ts b/renderers/angular/src/v0_9/catalog/basic/image.component.ts
index 0408b9ff3..bb8b48e53 100644
--- a/renderers/angular/src/v0_9/catalog/basic/image.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/image.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { ImageApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {ImageApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Image component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/list.component.ts b/renderers/angular/src/v0_9/catalog/basic/list.component.ts
index 50d31ec5a..f334836a6 100644
--- a/renderers/angular/src/v0_9/catalog/basic/list.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/list.component.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { ComponentHostComponent } from '../../core/component-host.component';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { Child } from '../../core/component-binder.service';
-import { ListApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {ComponentHostComponent} from '../../core/component-host.component';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {Child} from '../../core/component-binder.service';
+import {ListApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI List component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/modal.component.ts b/renderers/angular/src/v0_9/catalog/basic/modal.component.ts
index 547c01ead..612e242b6 100644
--- a/renderers/angular/src/v0_9/catalog/basic/modal.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/modal.component.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy, signal } from '@angular/core';
-import { ComponentHostComponent } from '../../core/component-host.component';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { ModalApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy, signal} from '@angular/core';
+import {ComponentHostComponent} from '../../core/component-host.component';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {ModalApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Modal component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/row.component.spec.ts b/renderers/angular/src/v0_9/catalog/basic/row.component.spec.ts
index 175b47c7e..2b7e59c23 100644
--- a/renderers/angular/src/v0_9/catalog/basic/row.component.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/row.component.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, input, signal } from '@angular/core';
-import { RowComponent } from './row.component';
-import { ComponentModel } from '@a2ui/web_core/v0_9';
-import { A2uiRendererService } from '../../core/a2ui-renderer.service';
-import { ComponentBinder } from '../../core/component-binder.service';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, input, signal} from '@angular/core';
+import {RowComponent} from './row.component';
+import {ComponentModel} from '@a2ui/web_core/v0_9';
+import {A2uiRendererService} from '../../core/a2ui-renderer.service';
+import {ComponentBinder} from '../../core/component-binder.service';
+import {By} from '@angular/platform-browser';
 
 @Component({
   standalone: true,
@@ -51,7 +51,7 @@ describe('RowComponent', () => {
       ]),
       catalog: {
         id: 'test-catalog',
-        components: new Map([['Child', { component: DummyChild }]]),
+        components: new Map([['Child', {component: DummyChild}]]),
       },
     };
 
@@ -64,13 +64,13 @@ describe('RowComponent', () => {
     };
 
     mockBinder = jasmine.createSpyObj('ComponentBinder', ['bind']);
-    mockBinder.bind.and.returnValue({ text: { value: () => 'bound' } });
+    mockBinder.bind.and.returnValue({text: {value: () => 'bound'}});
 
     await TestBed.configureTestingModule({
       imports: [RowComponent],
       providers: [
-        { provide: A2uiRendererService, useValue: mockRendererService },
-        { provide: ComponentBinder, useValue: mockBinder },
+        {provide: A2uiRendererService, useValue: mockRendererService},
+        {provide: ComponentBinder, useValue: mockBinder},
       ],
     }).compileComponents();
 
@@ -78,8 +78,8 @@ describe('RowComponent', () => {
     component = fixture.componentInstance;
     fixture.componentRef.setInput('surfaceId', 'surf1');
     fixture.componentRef.setInput('props', {
-      justify: { value: signal('center'), raw: 'center', onUpdate: () => {} },
-      align: { value: signal('baseline'), raw: 'baseline', onUpdate: () => {} },
+      justify: {value: signal('center'), raw: 'center', onUpdate: () => {}},
+      align: {value: signal('baseline'), raw: 'baseline', onUpdate: () => {}},
       children: {
         value: signal(['child1', 'child2']),
         raw: ['child1', 'child2'],
@@ -104,8 +104,8 @@ describe('RowComponent', () => {
     fixture.detectChanges();
     const hosts = fixture.debugElement.queryAll(By.css('a2ui-v09-component-host'));
     expect(hosts.length).toBe(2);
-    expect(hosts[0].componentInstance.componentKey()).toEqual({ id: 'child1', basePath: '/' });
-    expect(hosts[1].componentInstance.componentKey()).toEqual({ id: 'child2', basePath: '/' });
+    expect(hosts[0].componentInstance.componentKey()).toEqual({id: 'child1', basePath: '/'});
+    expect(hosts[1].componentInstance.componentKey()).toEqual({id: 'child2', basePath: '/'});
   });
 
   it('should render repeating children', () => {
@@ -150,8 +150,8 @@ describe('RowComponent', () => {
 
   it('should handle missing children property', () => {
     fixture.componentRef.setInput('props', {
-      justify: { value: signal('center'), raw: 'center', onUpdate: () => {} },
-      align: { value: signal('baseline'), raw: 'baseline', onUpdate: () => {} },
+      justify: {value: signal('center'), raw: 'center', onUpdate: () => {}},
+      align: {value: signal('baseline'), raw: 'baseline', onUpdate: () => {}},
     });
     fixture.detectChanges();
     const hosts = fixture.debugElement.queryAll(By.css('a2ui-v09-component-host'));
diff --git a/renderers/angular/src/v0_9/catalog/basic/row.component.ts b/renderers/angular/src/v0_9/catalog/basic/row.component.ts
index f38dd3f0d..4f1a9282e 100644
--- a/renderers/angular/src/v0_9/catalog/basic/row.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/row.component.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { ComponentHostComponent } from '../../core/component-host.component';
-import { getNormalizedPath } from '../../core/utils';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { JUSTIFY_MAP, ALIGN_MAP } from './utils';
-import { RowApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {ComponentHostComponent} from '../../core/component-host.component';
+import {getNormalizedPath} from '../../core/utils';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {JUSTIFY_MAP, ALIGN_MAP} from './utils';
+import {RowApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Row component (v0.9).
@@ -52,7 +52,7 @@ import { RowApi } from '@a2ui/web_core/v0_9/basic_catalog';
     @if (isRepeating()) {
       @for (item of children(); track item; let i = $index) {
         <a2ui-v09-component-host
-          [componentKey]="{ id: templateId()!, basePath: getNormalizedPath(i) }"
+          [componentKey]="{id: templateId()!, basePath: getNormalizedPath(i)}"
           [surfaceId]="surfaceId()"
         >
         </a2ui-v09-component-host>
@@ -86,11 +86,11 @@ export class RowComponent extends BasicCatalogComponent<typeof RowApi> {
 
   protected readonly normalizedChildren = computed(() => {
     if (this.isRepeating()) return [];
-    return this.children().map((child) => {
+    return this.children().map(child => {
       if (typeof child === 'object' && child !== null && 'id' in child) {
-        return child as { id: string; basePath: string };
+        return child as {id: string; basePath: string};
       }
-      return { id: child as string, basePath: this.dataContextPath() };
+      return {id: child as string, basePath: this.dataContextPath()};
     });
   });
 
diff --git a/renderers/angular/src/v0_9/catalog/basic/simple-components.spec.ts b/renderers/angular/src/v0_9/catalog/basic/simple-components.spec.ts
index 8961251c1..a37bf3f14 100644
--- a/renderers/angular/src/v0_9/catalog/basic/simple-components.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/simple-components.spec.ts
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, signal as angularSignal, input } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { DividerComponent } from './divider.component';
-import { ImageComponent } from './image.component';
-import { IconComponent } from './icon.component';
-import { VideoComponent } from './video.component';
-import { AudioPlayerComponent } from './audio-player.component';
-import { ComponentModel } from '@a2ui/web_core/v0_9';
-import { CardComponent } from './card.component';
-import { BoundProperty } from '../../core/types';
-import { A2uiRendererService } from '../../core/a2ui-renderer.service';
-import { ComponentBinder } from '../../core/component-binder.service';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, signal as angularSignal, input} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {DividerComponent} from './divider.component';
+import {ImageComponent} from './image.component';
+import {IconComponent} from './icon.component';
+import {VideoComponent} from './video.component';
+import {AudioPlayerComponent} from './audio-player.component';
+import {ComponentModel} from '@a2ui/web_core/v0_9';
+import {CardComponent} from './card.component';
+import {BoundProperty} from '../../core/types';
+import {A2uiRendererService} from '../../core/a2ui-renderer.service';
+import {ComponentBinder} from '../../core/component-binder.service';
 
 describe('Simple Components', () => {
   let mockRendererService: any;
@@ -37,25 +37,19 @@ describe('Simple Components', () => {
       surfaceGroup: {
         getSurface: jasmine.createSpy('getSurface').and.returnValue({
           componentsModel: new Map([
-            ['child-1', new ComponentModel('child-1', 'Text', { text: { value: 'Child 1' } })],
-            ['child-2', new ComponentModel('child-2', 'Text', { text: { value: 'Child 2' } })],
-            [
-              'content-1',
-              new ComponentModel('content-1', 'Text', { text: { value: 'Content 1' } }),
-            ],
-            [
-              'content-2',
-              new ComponentModel('content-2', 'Text', { text: { value: 'Content 2' } }),
-            ],
-            ['trigger-btn', new ComponentModel('trigger-btn', 'Text', { text: { value: 'Open' } })],
+            ['child-1', new ComponentModel('child-1', 'Text', {text: {value: 'Child 1'}})],
+            ['child-2', new ComponentModel('child-2', 'Text', {text: {value: 'Child 2'}})],
+            ['content-1', new ComponentModel('content-1', 'Text', {text: {value: 'Content 1'}})],
+            ['content-2', new ComponentModel('content-2', 'Text', {text: {value: 'Content 2'}})],
+            ['trigger-btn', new ComponentModel('trigger-btn', 'Text', {text: {value: 'Open'}})],
             [
               'modal-content',
-              new ComponentModel('modal-content', 'Text', { text: { value: 'Modal' } }),
+              new ComponentModel('modal-content', 'Text', {text: {value: 'Modal'}}),
             ],
           ]),
           catalog: {
             id: 'mock-catalog',
-            components: new Map([['Text', { type: 'Text', component: DummyTextComponent }]]),
+            components: new Map([['Text', {type: 'Text', component: DummyTextComponent}]]),
           },
         }),
       },
@@ -92,8 +86,8 @@ describe('Simple Components', () => {
       await TestBed.configureTestingModule({
         imports: [DividerComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
     });
@@ -137,8 +131,8 @@ describe('Simple Components', () => {
       await TestBed.configureTestingModule({
         imports: [ImageComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
     });
@@ -207,8 +201,8 @@ describe('Simple Components', () => {
       await TestBed.configureTestingModule({
         imports: [IconComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
     });
@@ -281,7 +275,7 @@ describe('Simple Components', () => {
 
     it('should render path icon', () => {
       fixture.componentRef.setInput('props', {
-        name: createBoundProperty({ path: 'M10 10...' }),
+        name: createBoundProperty({path: 'M10 10...'}),
       });
       fixture.detectChanges();
       const svg = fixture.nativeElement.querySelector('svg');
@@ -297,8 +291,8 @@ describe('Simple Components', () => {
       await TestBed.configureTestingModule({
         imports: [VideoComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
     });
@@ -342,8 +336,8 @@ describe('Simple Components', () => {
       await TestBed.configureTestingModule({
         imports: [AudioPlayerComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
     });
@@ -397,8 +391,8 @@ describe('Simple Components', () => {
       await TestBed.configureTestingModule({
         imports: [CardComponent],
         providers: [
-          { provide: A2uiRendererService, useValue: mockRendererService },
-          { provide: ComponentBinder, useValue: mockBinder },
+          {provide: A2uiRendererService, useValue: mockRendererService},
+          {provide: ComponentBinder, useValue: mockBinder},
         ],
       }).compileComponents();
     });
@@ -417,12 +411,12 @@ describe('Simple Components', () => {
 
     it('should render component-host for child', () => {
       fixture.componentRef.setInput('props', {
-        child: createBoundProperty({ id: 'child-1', basePath: '/' }),
+        child: createBoundProperty({id: 'child-1', basePath: '/'}),
       });
       fixture.detectChanges();
       const host = fixture.debugElement.query(By.css('a2ui-v09-component-host'));
       expect(host).toBeTruthy();
-      expect(host.componentInstance.componentKey()).toEqual({ id: 'child-1', basePath: '/' });
+      expect(host.componentInstance.componentKey()).toEqual({id: 'child-1', basePath: '/'});
     });
   });
 });
diff --git a/renderers/angular/src/v0_9/catalog/basic/slider.component.ts b/renderers/angular/src/v0_9/catalog/basic/slider.component.ts
index e7489a48d..2b7a44d1e 100644
--- a/renderers/angular/src/v0_9/catalog/basic/slider.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/slider.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { SliderApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {SliderApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Slider component (v0.9).
diff --git a/renderers/angular/src/v0_9/catalog/basic/tabs.component.ts b/renderers/angular/src/v0_9/catalog/basic/tabs.component.ts
index a7f8c5ff7..de96e3656 100644
--- a/renderers/angular/src/v0_9/catalog/basic/tabs.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/tabs.component.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy, signal } from '@angular/core';
-import { ComponentHostComponent } from '../../core/component-host.component';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { TabsApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy, signal} from '@angular/core';
+import {ComponentHostComponent} from '../../core/component-host.component';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {TabsApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Tabs component (v0.9).
@@ -105,9 +105,9 @@ export class TabsComponent extends BasicCatalogComponent<typeof TabsApi> {
     const child = this.activeTab()?.child;
     if (!child) return null;
     if (typeof child === 'object' && child !== null && 'id' in child) {
-      return child as { id: string; basePath: string };
+      return child as {id: string; basePath: string};
     }
-    return { id: child as string, basePath: this.dataContextPath() };
+    return {id: child as string, basePath: this.dataContextPath()};
   });
 
   setActiveTab(index: number) {
diff --git a/renderers/angular/src/v0_9/catalog/basic/text-field.component.spec.ts b/renderers/angular/src/v0_9/catalog/basic/text-field.component.spec.ts
index f010f5af0..4faaac0a0 100644
--- a/renderers/angular/src/v0_9/catalog/basic/text-field.component.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/text-field.component.spec.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TextFieldComponent } from './text-field.component';
-import { signal } from '@angular/core';
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '../../core/a2ui-renderer.service';
-import { By } from '@angular/platform-browser';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TextFieldComponent} from './text-field.component';
+import {signal} from '@angular/core';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from '../../core/a2ui-renderer.service';
+import {By} from '@angular/platform-browser';
 
 describe('TextFieldComponent', () => {
   let component: TextFieldComponent;
@@ -27,24 +27,21 @@ describe('TextFieldComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [TextFieldComponent],
-      providers: [
-        A2uiRendererService,
-        { provide: A2UI_RENDERER_CONFIG, useValue: { catalogs: [] } },
-      ],
+      providers: [A2uiRendererService, {provide: A2UI_RENDERER_CONFIG, useValue: {catalogs: []}}],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TextFieldComponent);
     component = fixture.componentInstance;
     fixture.componentRef.setInput('surfaceId', 'surf1');
     fixture.componentRef.setInput('props', {
-      label: { value: signal('Username'), raw: 'Username', onUpdate: () => {} },
+      label: {value: signal('Username'), raw: 'Username', onUpdate: () => {}},
       value: {
         value: signal('testuser'),
         raw: 'testuser',
         onUpdate: jasmine.createSpy('onUpdate'),
       },
-      placeholder: { value: signal('Enter username'), raw: 'Enter username', onUpdate: () => {} },
-      variant: { value: signal('text'), raw: 'text', onUpdate: () => {} },
+      placeholder: {value: signal('Enter username'), raw: 'Enter username', onUpdate: () => {}},
+      variant: {value: signal('text'), raw: 'text', onUpdate: () => {}},
     });
   });
 
@@ -62,7 +59,7 @@ describe('TextFieldComponent', () => {
   it('should not render label if not provided', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      label: { value: signal(null), raw: null, onUpdate: () => {} },
+      label: {value: signal(null), raw: null, onUpdate: () => {}},
     });
     fixture.detectChanges();
     const label = fixture.debugElement.query(By.css('label'));
@@ -81,13 +78,13 @@ describe('TextFieldComponent', () => {
 
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      variant: { value: signal('obscured'), raw: 'obscured', onUpdate: () => {} },
+      variant: {value: signal('obscured'), raw: 'obscured', onUpdate: () => {}},
     });
     expect(component.inputType()).toBe('password');
 
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      variant: { value: signal('number'), raw: 'number', onUpdate: () => {} },
+      variant: {value: signal('number'), raw: 'number', onUpdate: () => {}},
     });
     expect(component.inputType()).toBe('number');
   });
@@ -96,7 +93,7 @@ describe('TextFieldComponent', () => {
     fixture.detectChanges();
     const input = fixture.debugElement.query(By.css('input'));
     input.nativeElement.value = 'newuser';
-    input.triggerEventHandler('input', { target: input.nativeElement });
+    input.triggerEventHandler('input', {target: input.nativeElement});
 
     expect(component.props()['value']!.onUpdate).toHaveBeenCalledWith('newuser');
   });
@@ -107,8 +104,8 @@ describe('TextFieldComponent', () => {
 
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      isValid: { value: isValidSig, raw: true, onUpdate: () => {} },
-      validationErrors: { value: errorsSig, raw: [], onUpdate: () => {} },
+      isValid: {value: isValidSig, raw: true, onUpdate: () => {}},
+      validationErrors: {value: errorsSig, raw: [], onUpdate: () => {}},
     });
 
     fixture.detectChanges();
@@ -128,7 +125,7 @@ describe('TextFieldComponent', () => {
   it('should handle multiple error messages', () => {
     fixture.componentRef.setInput('props', {
       ...component.props(),
-      isValid: { value: signal(false), raw: false, onUpdate: () => {} },
+      isValid: {value: signal(false), raw: false, onUpdate: () => {}},
       validationErrors: {
         value: signal(['Error 1', 'Error 2']),
         raw: ['Error 1', 'Error 2'],
diff --git a/renderers/angular/src/v0_9/catalog/basic/text-field.component.ts b/renderers/angular/src/v0_9/catalog/basic/text-field.component.ts
index a16c828d5..8d77a3187 100644
--- a/renderers/angular/src/v0_9/catalog/basic/text-field.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/text-field.component.ts
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { TextFieldApi } from '@a2ui/web_core/v0_9/basic_catalog';
-import { AnyDuringSchemaAlignment } from '../types';
-
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {TextFieldApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {AnyDuringSchemaAlignment} from '../types';
 
 /**
  * Angular implementation of the A2UI TextField component (v0.9).
@@ -99,7 +98,9 @@ import { AnyDuringSchemaAlignment } from '../types';
 export class TextFieldComponent extends BasicCatalogComponent<typeof TextFieldApi> {
   readonly label = computed(() => this.props()['label']?.value());
   readonly value = computed(() => this.props()['value']?.value() || '');
-  readonly placeholder = computed(() => (this.props() as AnyDuringSchemaAlignment)['placeholder']?.value() || '');
+  readonly placeholder = computed(
+    () => (this.props() as AnyDuringSchemaAlignment)['placeholder']?.value() || '',
+  );
   readonly variant = computed(() => this.props()['variant']?.value());
 
   readonly inputType = computed(() => {
diff --git a/renderers/angular/src/v0_9/catalog/basic/text.component.spec.ts b/renderers/angular/src/v0_9/catalog/basic/text.component.spec.ts
index 392251e2d..72219dedb 100644
--- a/renderers/angular/src/v0_9/catalog/basic/text.component.spec.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/text.component.spec.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TextComponent } from './text.component';
-import { By } from '@angular/platform-browser';
-import { signal } from '@angular/core';
-import { MarkdownRenderer } from '../../core/markdown';
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from '../../core/a2ui-renderer.service';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TextComponent} from './text.component';
+import {By} from '@angular/platform-browser';
+import {signal} from '@angular/core';
+import {MarkdownRenderer} from '../../core/markdown';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from '../../core/a2ui-renderer.service';
 
 describe('TextComponent', () => {
   let component: TextComponent;
@@ -33,9 +33,9 @@ describe('TextComponent', () => {
     await TestBed.configureTestingModule({
       imports: [TextComponent],
       providers: [
-        { provide: MarkdownRenderer, useValue: mockMarkdownRenderer },
+        {provide: MarkdownRenderer, useValue: mockMarkdownRenderer},
         A2uiRendererService,
-        { provide: A2UI_RENDERER_CONFIG, useValue: { catalogs: [] } },
+        {provide: A2UI_RENDERER_CONFIG, useValue: {catalogs: []}},
       ],
     }).compileComponents();
 
@@ -46,7 +46,7 @@ describe('TextComponent', () => {
 
   it('should create', () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Hello World'), raw: 'Hello World', onUpdate: () => {} },
+      text: {value: signal('Hello World'), raw: 'Hello World', onUpdate: () => {}},
     });
     fixture.detectChanges();
     expect(component).toBeTruthy();
@@ -54,7 +54,7 @@ describe('TextComponent', () => {
 
   it('should render the markdown text', async () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Hello World'), raw: 'Hello World', onUpdate: () => {} },
+      text: {value: signal('Hello World'), raw: 'Hello World', onUpdate: () => {}},
     });
     fixture.detectChanges();
     await fixture.whenStable();
@@ -67,8 +67,8 @@ describe('TextComponent', () => {
 
   it('should handle variant h1', async () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Heading'), raw: 'Heading', onUpdate: () => {} },
-      variant: { value: signal('h1'), raw: 'h1', onUpdate: () => {} },
+      text: {value: signal('Heading'), raw: 'Heading', onUpdate: () => {}},
+      variant: {value: signal('h1'), raw: 'h1', onUpdate: () => {}},
     });
     fixture.detectChanges();
     await fixture.whenStable();
@@ -79,8 +79,8 @@ describe('TextComponent', () => {
 
   it('should handle variant caption', async () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Caption'), raw: 'Caption', onUpdate: () => {} },
-      variant: { value: signal('caption'), raw: 'caption', onUpdate: () => {} },
+      text: {value: signal('Caption'), raw: 'Caption', onUpdate: () => {}},
+      variant: {value: signal('caption'), raw: 'caption', onUpdate: () => {}},
     });
     fixture.detectChanges();
     await fixture.whenStable();
@@ -91,8 +91,8 @@ describe('TextComponent', () => {
 
   it('should handle variant h2', async () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Heading'), raw: 'Heading', onUpdate: () => {} },
-      variant: { value: signal('h2'), raw: 'h2', onUpdate: () => {} },
+      text: {value: signal('Heading'), raw: 'Heading', onUpdate: () => {}},
+      variant: {value: signal('h2'), raw: 'h2', onUpdate: () => {}},
     });
     fixture.detectChanges();
     await fixture.whenStable();
@@ -103,8 +103,8 @@ describe('TextComponent', () => {
 
   it('should handle variant h3', async () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Heading'), raw: 'Heading', onUpdate: () => {} },
-      variant: { value: signal('h3'), raw: 'h3', onUpdate: () => {} },
+      text: {value: signal('Heading'), raw: 'Heading', onUpdate: () => {}},
+      variant: {value: signal('h3'), raw: 'h3', onUpdate: () => {}},
     });
     fixture.detectChanges();
     await fixture.whenStable();
@@ -115,8 +115,8 @@ describe('TextComponent', () => {
 
   it('should handle variant h4', async () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Heading'), raw: 'Heading', onUpdate: () => {} },
-      variant: { value: signal('h4'), raw: 'h4', onUpdate: () => {} },
+      text: {value: signal('Heading'), raw: 'Heading', onUpdate: () => {}},
+      variant: {value: signal('h4'), raw: 'h4', onUpdate: () => {}},
     });
     fixture.detectChanges();
     await fixture.whenStable();
@@ -127,8 +127,8 @@ describe('TextComponent', () => {
 
   it('should handle variant h5', async () => {
     fixture.componentRef.setInput('props', {
-      text: { value: signal('Heading'), raw: 'Heading', onUpdate: () => {} },
-      variant: { value: signal('h5'), raw: 'h5', onUpdate: () => {} },
+      text: {value: signal('Heading'), raw: 'Heading', onUpdate: () => {}},
+      variant: {value: signal('h5'), raw: 'h5', onUpdate: () => {}},
     });
     fixture.detectChanges();
     await fixture.whenStable();
diff --git a/renderers/angular/src/v0_9/catalog/basic/text.component.ts b/renderers/angular/src/v0_9/catalog/basic/text.component.ts
index 80292b638..7c7915602 100644
--- a/renderers/angular/src/v0_9/catalog/basic/text.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/text.component.ts
@@ -14,17 +14,10 @@
  * limitations under the License.
  */
 
-import {
-  Component,
-  computed,
-  ChangeDetectionStrategy,
-  inject,
-  signal,
-  effect,
-} from '@angular/core';
-import { MarkdownRenderer } from '../../core/markdown';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { TextApi } from '@a2ui/web_core/v0_9/basic_catalog';
+import {Component, computed, ChangeDetectionStrategy, inject, signal, effect} from '@angular/core';
+import {MarkdownRenderer} from '../../core/markdown';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * Angular implementation of the A2UI Text component (v0.9).
@@ -149,7 +142,7 @@ export class TextComponent extends BasicCatalogComponent<typeof TextApi> {
       }
 
       const requestId = ++this.renderRequestId;
-      this.markdownRenderer.render(value).then((rendered) => {
+      this.markdownRenderer.render(value).then(rendered => {
         if (requestId === this.renderRequestId) {
           this.resolvedText.set(rendered);
         }
diff --git a/renderers/angular/src/v0_9/catalog/basic/video.component.ts b/renderers/angular/src/v0_9/catalog/basic/video.component.ts
index 39426c096..c65963b80 100644
--- a/renderers/angular/src/v0_9/catalog/basic/video.component.ts
+++ b/renderers/angular/src/v0_9/catalog/basic/video.component.ts
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
-import { BasicCatalogComponent } from './basic-catalog-component';
-import { VideoApi } from '@a2ui/web_core/v0_9/basic_catalog';
-import { AnyDuringSchemaAlignment } from '../types';
-
+import {Component, computed, ChangeDetectionStrategy} from '@angular/core';
+import {BasicCatalogComponent} from './basic-catalog-component';
+import {VideoApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {AnyDuringSchemaAlignment} from '../types';
 
 /**
  * Angular implementation of the A2UI Video component (v0.9).
@@ -62,5 +61,7 @@ import { AnyDuringSchemaAlignment } from '../types';
 })
 export class VideoComponent extends BasicCatalogComponent<typeof VideoApi> {
   readonly url = computed(() => this.props()['url']?.value());
-  readonly posterUrl = computed(() => (this.props() as AnyDuringSchemaAlignment)['posterUrl']?.value());
+  readonly posterUrl = computed(() =>
+    (this.props() as AnyDuringSchemaAlignment)['posterUrl']?.value(),
+  );
 }
diff --git a/renderers/angular/src/v0_9/catalog/types.ts b/renderers/angular/src/v0_9/catalog/types.ts
index f6e60257d..c61da4aff 100644
--- a/renderers/angular/src/v0_9/catalog/types.ts
+++ b/renderers/angular/src/v0_9/catalog/types.ts
@@ -14,20 +14,19 @@
  * limitations under the License.
  */
 
-import { Type } from '@angular/core';
-import { Catalog, ComponentApi } from '@a2ui/web_core/v0_9';
-import { CatalogComponentInstance } from '../core/catalog_component';
+import {Type} from '@angular/core';
+import {Catalog, ComponentApi} from '@a2ui/web_core/v0_9';
+import {CatalogComponentInstance} from '../core/catalog_component';
 
 /**
  * Temporary type used during basic catalog schema alignment to bypass strict type checking.
- * 
+ *
  * To be removed once all properties implemented in Angular basic catalog components conform
  * to the basic catalog schema.
  * @see https://github.com/google/A2UI/issues/1303
  */
 export type AnyDuringSchemaAlignment = any;
 
-
 /**
  * Extends the generic {@link ComponentApi} to include Angular-specific component metadata.
  */
diff --git a/renderers/angular/src/v0_9/core/a2ui-renderer.service.spec.ts b/renderers/angular/src/v0_9/core/a2ui-renderer.service.spec.ts
index 2960d126e..e2811bbb5 100644
--- a/renderers/angular/src/v0_9/core/a2ui-renderer.service.spec.ts
+++ b/renderers/angular/src/v0_9/core/a2ui-renderer.service.spec.ts
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from './a2ui-renderer.service';
-
+import {TestBed} from '@angular/core/testing';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from './a2ui-renderer.service';
 
 describe('A2uiRendererService', () => {
   let service: A2uiRendererService;
@@ -41,7 +40,7 @@ describe('A2uiRendererService', () => {
         A2uiRendererService,
         {
           provide: A2UI_RENDERER_CONFIG,
-          useValue: { catalogs: [mockCatalog] },
+          useValue: {catalogs: [mockCatalog]},
         },
       ],
     });
diff --git a/renderers/angular/src/v0_9/core/a2ui-renderer.service.ts b/renderers/angular/src/v0_9/core/a2ui-renderer.service.ts
index 2e4e00458..7e2f462c7 100644
--- a/renderers/angular/src/v0_9/core/a2ui-renderer.service.ts
+++ b/renderers/angular/src/v0_9/core/a2ui-renderer.service.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable, OnDestroy, InjectionToken, Inject } from '@angular/core';
+import {Injectable, OnDestroy, InjectionToken, Inject} from '@angular/core';
 import {
   MessageProcessor,
   SurfaceGroupModel,
@@ -22,7 +22,7 @@ import {
   A2uiMessage,
   A2uiClientAction as Action,
 } from '@a2ui/web_core/v0_9';
-import { AngularComponentImplementation, AngularCatalog } from '../catalog/types';
+import {AngularComponentImplementation, AngularCatalog} from '../catalog/types';
 
 /**
  * Configuration for the A2UI renderer.
diff --git a/renderers/angular/src/v0_9/core/catalog_component.ts b/renderers/angular/src/v0_9/core/catalog_component.ts
index 601a92ad5..0c725bdcf 100644
--- a/renderers/angular/src/v0_9/core/catalog_component.ts
+++ b/renderers/angular/src/v0_9/core/catalog_component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentApi } from "@a2ui/web_core/v0_9";
-import { Directive, input, Signal } from "@angular/core";
-import { ComponentApiToProps } from './types';
+import {ComponentApi} from '@a2ui/web_core/v0_9';
+import {Directive, input, Signal} from '@angular/core';
+import {ComponentApiToProps} from './types';
 
 /** Describes the properties that a Catalog component needs to implement. For ease of use, please extend CatalogComponent. */
 export interface CatalogComponentInstance {
@@ -28,13 +28,15 @@ export interface CatalogComponentInstance {
 
 /**
  * Base class for A2UI catalog component in Angular.
- * 
+ *
  * All Angular catalog components should extend this base class,
  * which provides type safe access to props() and other common
  * fields.
  */
 @Directive()
-export abstract class CatalogComponent<Api extends ComponentApi> implements CatalogComponentInstance {
+export abstract class CatalogComponent<
+  Api extends ComponentApi,
+> implements CatalogComponentInstance {
   /**
    * Reactive properties resolved from the A2UI ComponentModel.
    */
@@ -42,4 +44,4 @@ export abstract class CatalogComponent<Api extends ComponentApi> implements Cata
   readonly surfaceId = input.required<string>();
   readonly componentId = input.required<string>();
   readonly dataContextPath = input<string>('/');
-}
\ No newline at end of file
+}
diff --git a/renderers/angular/src/v0_9/core/component-binder.service.spec.ts b/renderers/angular/src/v0_9/core/component-binder.service.spec.ts
index c71e606e7..d2ce41c5f 100644
--- a/renderers/angular/src/v0_9/core/component-binder.service.spec.ts
+++ b/renderers/angular/src/v0_9/core/component-binder.service.spec.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { DestroyRef } from '@angular/core';
-import { signal as preactSignal } from '@preact/signals-core';
-import { ComponentContext } from '@a2ui/web_core/v0_9';
-import { ComponentBinder } from './component-binder.service';
+import {TestBed} from '@angular/core/testing';
+import {DestroyRef} from '@angular/core';
+import {signal as preactSignal} from '@preact/signals-core';
+import {ComponentContext} from '@a2ui/web_core/v0_9';
+import {ComponentBinder} from './component-binder.service';
 
 describe('ComponentBinder', () => {
   let binder: ComponentBinder;
@@ -31,7 +31,7 @@ describe('ComponentBinder', () => {
     });
 
     TestBed.configureTestingModule({
-      providers: [ComponentBinder, { provide: DestroyRef, useValue: mockDestroyRef }],
+      providers: [ComponentBinder, {provide: DestroyRef, useValue: mockDestroyRef}],
     });
 
     binder = TestBed.inject(ComponentBinder);
@@ -81,7 +81,7 @@ describe('ComponentBinder', () => {
   it('should add update() method for data bindings (two-way binding)', () => {
     const mockComponentModel = {
       properties: {
-        value: { path: '/data/text' },
+        value: {path: '/data/text'},
       },
     };
 
@@ -141,7 +141,7 @@ describe('ComponentBinder', () => {
   it('should expand ChildList object templates', () => {
     const mockComponentModel = {
       properties: {
-        children: { componentId: 'item-comp', path: '/list/data' },
+        children: {componentId: 'item-comp', path: '/list/data'},
       },
     };
 
@@ -153,7 +153,7 @@ describe('ComponentBinder', () => {
       }),
       nested: jasmine.createSpy('nested').and.callFake((path: string) => ({
         path,
-        nested: (sub: string) => ({ path: `${path}/${sub}` }),
+        nested: (sub: string) => ({path: `${path}/${sub}`}),
       })),
       set: jasmine.createSpy('set'),
     };
@@ -169,7 +169,7 @@ describe('ComponentBinder', () => {
     const children = bound['children'].value();
     expect(Array.isArray(children)).toBe(true);
     expect(children.length).toBe(2);
-    expect(children[0]).toEqual({ id: 'item-comp', basePath: '/list/data/0' });
-    expect(children[1]).toEqual({ id: 'item-comp', basePath: '/list/data/1' });
+    expect(children[0]).toEqual({id: 'item-comp', basePath: '/list/data/0'});
+    expect(children[1]).toEqual({id: 'item-comp', basePath: '/list/data/1'});
   });
 });
diff --git a/renderers/angular/src/v0_9/core/component-binder.service.ts b/renderers/angular/src/v0_9/core/component-binder.service.ts
index 201dd3ddd..5b0ce2f20 100644
--- a/renderers/angular/src/v0_9/core/component-binder.service.ts
+++ b/renderers/angular/src/v0_9/core/component-binder.service.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { DestroyRef, Injectable, inject, NgZone } from '@angular/core';
-import { ComponentContext, computed } from '@a2ui/web_core/v0_9';
-import { toAngularSignal } from './utils';
-import { BoundProperty } from './types';
+import {DestroyRef, Injectable, inject, NgZone} from '@angular/core';
+import {ComponentContext, computed} from '@a2ui/web_core/v0_9';
+import {toAngularSignal} from './utils';
+import {BoundProperty} from './types';
 
 /** Represents a reference to a child component. */
 export interface Child {
@@ -54,11 +54,13 @@ export class ComponentBinder {
       const value = props[key];
 
       let preactSig;
-      const isChildListTemplate = value && typeof value === 'object' && 'componentId' in value && 'path' in value;
-      const isBoundPath = value && typeof value === 'object' && 'path' in value && !('componentId' in value);
+      const isChildListTemplate =
+        value && typeof value === 'object' && 'componentId' in value && 'path' in value;
+      const isBoundPath =
+        value && typeof value === 'object' && 'path' in value && !('componentId' in value);
 
       if (isChildListTemplate) {
-        const listSig = context.dataContext.resolveSignal({ path: value.path });
+        const listSig = context.dataContext.resolveSignal({path: value.path});
         const listContext = context.dataContext.nested(value.path);
         preactSig = computed(() => {
           const arr = listSig.value;
@@ -80,7 +82,7 @@ export class ComponentBinder {
           if (typeof val === 'object' && val !== null && 'id' in val) {
             return val;
           }
-          return { id: val, basePath: context.dataContext.path };
+          return {id: val, basePath: context.dataContext.path};
         });
       } else if (key === 'children') {
         const originalSig = preactSig;
@@ -91,7 +93,7 @@ export class ComponentBinder {
             if (typeof item === 'object' && item !== null && 'id' in item) {
               return item;
             }
-            return { id: item, basePath: context.dataContext.path };
+            return {id: item, basePath: context.dataContext.path};
           });
         });
       }
@@ -113,7 +115,7 @@ export class ComponentBinder {
           const condition = rule.condition || rule;
           const message = rule.message || 'Validation failed';
           const conditionSig = context.dataContext.resolveSignal(condition);
-          return { conditionSig, message };
+          return {conditionSig, message};
         });
 
         const isValidPreactSig = computed(() => {
@@ -121,9 +123,7 @@ export class ComponentBinder {
         });
 
         const validationErrorsPreactSig = computed(() => {
-          return ruleResults
-            .filter((r: any) => !r.conditionSig.value)
-            .map((r: any) => r.message);
+          return ruleResults.filter((r: any) => !r.conditionSig.value).map((r: any) => r.message);
         });
 
         bound['isValid'] = {
diff --git a/renderers/angular/src/v0_9/core/component-host.component.spec.ts b/renderers/angular/src/v0_9/core/component-host.component.spec.ts
index 6bb2d304c..c9c928fdd 100644
--- a/renderers/angular/src/v0_9/core/component-host.component.spec.ts
+++ b/renderers/angular/src/v0_9/core/component-host.component.spec.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { ComponentHostComponent } from './component-host.component';
-import { A2uiRendererService } from './a2ui-renderer.service';
-import { ComponentModel, SurfaceComponentsModel, SurfaceModel } from '@a2ui/web_core/v0_9';
-import { Component, Input } from '@angular/core';
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+import {ComponentHostComponent} from './component-host.component';
+import {A2uiRendererService} from './a2ui-renderer.service';
+import {ComponentModel, SurfaceComponentsModel, SurfaceModel} from '@a2ui/web_core/v0_9';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'test-child',
@@ -43,11 +43,13 @@ describe('ComponentHostComponent', () => {
   beforeEach(async () => {
     mockCatalog = {
       id: 'test-catalog',
-      components: new Map([['TestType', { component: TestChildComponent }]]),
+      components: new Map([['TestType', {component: TestChildComponent}]]),
     };
 
     const mockSurfaceComponentsModel = new SurfaceComponentsModel();
-    mockSurfaceComponentsModel.addComponent(new ComponentModel('comp1', 'TestType', { text: 'Hello' }));
+    mockSurfaceComponentsModel.addComponent(
+      new ComponentModel('comp1', 'TestType', {text: 'Hello'}),
+    );
 
     mockSurface = {
       componentsModel: mockSurfaceComponentsModel,
@@ -64,14 +66,12 @@ describe('ComponentHostComponent', () => {
 
     await TestBed.configureTestingModule({
       imports: [ComponentHostComponent],
-      providers: [
-        { provide: A2uiRendererService, useValue: mockRendererService },
-      ],
+      providers: [{provide: A2uiRendererService, useValue: mockRendererService}],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ComponentHostComponent);
     component = fixture.componentInstance;
-    fixture.componentRef.setInput('componentKey', { id: 'comp1', basePath: '/' });
+    fixture.componentRef.setInput('componentKey', {id: 'comp1', basePath: '/'});
     fixture.componentRef.setInput('surfaceId', 'surf1');
   });
 
@@ -97,7 +97,7 @@ describe('ComponentHostComponent', () => {
     });
 
     it('should use provided dataContextPath for ComponentContext', () => {
-      fixture.componentRef.setInput('componentKey', { id: 'comp1', basePath: '/nested/path' });
+      fixture.componentRef.setInput('componentKey', {id: 'comp1', basePath: '/nested/path'});
       fixture.detectChanges();
 
       const childDebugElement = fixture.debugElement.query(By.directive(TestChildComponent));
@@ -109,15 +109,15 @@ describe('ComponentHostComponent', () => {
 
     it('should update props when component model is updated', () => {
       fixture.detectChanges(); // Trigger change detection
-      
+
       const childDebugElement = fixture.debugElement.query(By.directive(TestChildComponent));
       const childInstance = childDebugElement.componentInstance as TestChildComponent;
-      
+
       expect(childInstance.props.text.value()).toBe('Hello');
 
       const compModel = mockSurface.componentsModel.get('comp1')!;
       // This properties assignment triggers the update.
-      compModel.properties = { text: 'Hello', newProp: 'new value' };
+      compModel.properties = {text: 'Hello', newProp: 'new value'};
 
       fixture.detectChanges(); // Propagate changes
 
@@ -143,7 +143,9 @@ describe('ComponentHostComponent', () => {
 
       const childDebugElement = fixture.debugElement.query(By.directive(TestChildComponent));
       expect(childDebugElement).toBeFalsy();
-      expect(consoleWarnSpy).toHaveBeenCalledWith('Component comp1 not found in surface surf1. Waiting for it...');
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        'Component comp1 not found in surface surf1. Waiting for it...',
+      );
     });
 
     it('should error and return if component type not in catalog', () => {
@@ -178,7 +180,7 @@ describe('ComponentHostComponent', () => {
       expect(compiled.innerHTML).toContain('Child Component');
     });
     it('should pass dataContextPath to the rendered component', () => {
-      fixture.componentRef.setInput('componentKey', { id: 'comp1', basePath: '/some/path' });
+      fixture.componentRef.setInput('componentKey', {id: 'comp1', basePath: '/some/path'});
       fixture.detectChanges();
 
       const childDebugElement = fixture.debugElement.query(By.directive(TestChildComponent));
diff --git a/renderers/angular/src/v0_9/core/component-host.component.ts b/renderers/angular/src/v0_9/core/component-host.component.ts
index 2a6c5470d..793de9dc0 100644
--- a/renderers/angular/src/v0_9/core/component-host.component.ts
+++ b/renderers/angular/src/v0_9/core/component-host.component.ts
@@ -45,7 +45,7 @@ import {BoundProperty} from './types';
   selector: 'a2ui-v09-component-host',
   imports: [NgComponentOutlet],
   host: {
-    'style': 'display: contents;'
+    style: 'display: contents;',
   },
   template: `
     @if (componentType) {
@@ -127,7 +127,7 @@ export class ComponentHostComponent {
     if (!componentModel) {
       console.warn(`Component ${id} not found in surface ${surfaceId}. Waiting for it...`);
 
-      const sub = surface.componentsModel.onCreated.subscribe((comp) => {
+      const sub = surface.componentsModel.onCreated.subscribe(comp => {
         if (comp.id === id) {
           this.initializeComponent(surface, comp, id, basePath);
           sub.unsubscribe();
diff --git a/renderers/angular/src/v0_9/core/function_binding.spec.ts b/renderers/angular/src/v0_9/core/function_binding.spec.ts
index b3b570c74..ec0427623 100644
--- a/renderers/angular/src/v0_9/core/function_binding.spec.ts
+++ b/renderers/angular/src/v0_9/core/function_binding.spec.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { DataContext, SurfaceModel } from '@a2ui/web_core/v0_9';
-import { DestroyRef } from '@angular/core';
-import { BasicCatalogBase } from '../catalog/basic/basic-catalog';
-import { toAngularSignal } from './utils';
+import {DataContext, SurfaceModel} from '@a2ui/web_core/v0_9';
+import {DestroyRef} from '@angular/core';
+import {BasicCatalogBase} from '../catalog/basic/basic-catalog';
+import {toAngularSignal} from './utils';
 
 describe('Function Bindings', () => {
   let mockDestroyRef: jasmine.SpyObj<DestroyRef>;
diff --git a/renderers/angular/src/v0_9/core/markdown.ts b/renderers/angular/src/v0_9/core/markdown.ts
index 724b1057b..76f8d9065 100644
--- a/renderers/angular/src/v0_9/core/markdown.ts
+++ b/renderers/angular/src/v0_9/core/markdown.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 
 export interface MarkdownRendererOptions {
   tagClassMap?: Record<string, string>;
@@ -30,17 +30,16 @@ export abstract class MarkdownRenderer {
 export class DefaultMarkdownRenderer extends MarkdownRenderer {
   private static warningLogged = false;
 
-  override async render(
-    markdown: string,
-    options?: MarkdownRendererOptions,
-  ): Promise<string> {
+  override async render(markdown: string, options?: MarkdownRendererOptions): Promise<string> {
     try {
       // @ts-ignore - optional peer dependency
-      const { renderMarkdown } = await import('@a2ui/markdown-it');
+      const {renderMarkdown} = await import('@a2ui/markdown-it');
       return await renderMarkdown(markdown, options as any);
     } catch (e) {
       if (!DefaultMarkdownRenderer.warningLogged) {
-        console.warn("[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback.");
+        console.warn(
+          '[DefaultMarkdownRenderer] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback.',
+        );
         DefaultMarkdownRenderer.warningLogged = true;
       }
       return markdown;
@@ -48,7 +47,9 @@ export class DefaultMarkdownRenderer extends MarkdownRenderer {
   }
 }
 
-export function provideMarkdownRenderer(renderFn?: (markdown: string, options?: MarkdownRendererOptions) => Promise<string>) {
+export function provideMarkdownRenderer(
+  renderFn?: (markdown: string, options?: MarkdownRendererOptions) => Promise<string>,
+) {
   if (renderFn) {
     return {
       provide: MarkdownRenderer,
@@ -57,5 +58,5 @@ export function provideMarkdownRenderer(renderFn?: (markdown: string, options?:
       },
     };
   }
-  return { provide: MarkdownRenderer, useClass: DefaultMarkdownRenderer };
+  return {provide: MarkdownRenderer, useClass: DefaultMarkdownRenderer};
 }
diff --git a/renderers/angular/src/v0_9/core/surface.component.spec.ts b/renderers/angular/src/v0_9/core/surface.component.spec.ts
index bdf4aac20..911b6d226 100644
--- a/renderers/angular/src/v0_9/core/surface.component.spec.ts
+++ b/renderers/angular/src/v0_9/core/surface.component.spec.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SurfaceComponent } from './surface.component';
-import { ComponentHostComponent } from './component-host.component';
-import { By } from '@angular/platform-browser';
-import { A2uiRendererService } from './a2ui-renderer.service';
-import { ComponentBinder } from './component-binder.service';
-import { ComponentModel } from '@a2ui/web_core/v0_9';
+import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {SurfaceComponent} from './surface.component';
+import {ComponentHostComponent} from './component-host.component';
+import {By} from '@angular/platform-browser';
+import {A2uiRendererService} from './a2ui-renderer.service';
+import {ComponentBinder} from './component-binder.service';
+import {ComponentModel} from '@a2ui/web_core/v0_9';
 
 @Component({
   selector: 'test-text',
@@ -47,11 +47,11 @@ describe('SurfaceComponent', () => {
       surfaceGroup: {
         getSurface: jasmine.createSpy('getSurface').and.returnValue({
           componentsModel: new Map([
-            ['root', new ComponentModel('root', 'Text', { text: { value: 'Hello' } })],
+            ['root', new ComponentModel('root', 'Text', {text: {value: 'Hello'}})],
           ]),
           catalog: {
             id: 'mock-catalog',
-            components: new Map([['Text', { type: 'Text', component: TestTextComponent }]]),
+            components: new Map([['Text', {type: 'Text', component: TestTextComponent}]]),
           },
         }),
       },
@@ -61,8 +61,8 @@ describe('SurfaceComponent', () => {
     await TestBed.configureTestingModule({
       imports: [SurfaceComponent],
       providers: [
-        { provide: A2uiRendererService, useValue: mockRendererService },
-        { provide: ComponentBinder, useValue: mockBinder },
+        {provide: A2uiRendererService, useValue: mockRendererService},
+        {provide: ComponentBinder, useValue: mockBinder},
       ],
     }).compileComponents();
 
@@ -84,7 +84,7 @@ describe('SurfaceComponent', () => {
     const host = fixture.debugElement.query(By.directive(ComponentHostComponent));
     expect(host).toBeTruthy();
     expect(host.componentInstance.surfaceId()).toBe('test-surface');
-    expect(host.componentInstance.componentKey()).toEqual({ id: 'root', basePath: '/custom/path' });
+    expect(host.componentInstance.componentKey()).toEqual({id: 'root', basePath: '/custom/path'});
   });
 
   it('should use default dataContextPath of "/"', () => {
@@ -92,6 +92,6 @@ describe('SurfaceComponent', () => {
     fixture.detectChanges();
 
     const host = fixture.debugElement.query(By.directive(ComponentHostComponent));
-    expect(host.componentInstance.componentKey()).toEqual({ id: 'root', basePath: '/' });
+    expect(host.componentInstance.componentKey()).toEqual({id: 'root', basePath: '/'});
   });
 });
diff --git a/renderers/angular/src/v0_9/core/surface.component.ts b/renderers/angular/src/v0_9/core/surface.component.ts
index 078dd371e..79c77c4a2 100644
--- a/renderers/angular/src/v0_9/core/surface.component.ts
+++ b/renderers/angular/src/v0_9/core/surface.component.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { ComponentHostComponent } from './component-host.component';
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import {ComponentHostComponent} from './component-host.component';
 
 /**
  * High-level component for rendering an entire A2UI surface.
@@ -29,11 +29,11 @@ import { ComponentHostComponent } from './component-host.component';
   standalone: true,
   imports: [ComponentHostComponent],
   host: {
-    'style': 'display: contents;'
+    style: 'display: contents;',
   },
   template: `
     <a2ui-v09-component-host
-      [componentKey]="{ id: 'root', basePath: dataContextPath() }"
+      [componentKey]="{id: 'root', basePath: dataContextPath()}"
       [surfaceId]="surfaceId()"
     >
     </a2ui-v09-component-host>
diff --git a/renderers/angular/src/v0_9/core/types.ts b/renderers/angular/src/v0_9/core/types.ts
index 42238a847..c34a8df19 100644
--- a/renderers/angular/src/v0_9/core/types.ts
+++ b/renderers/angular/src/v0_9/core/types.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { Signal } from '@angular/core';
-import { z } from 'zod';
-import { ComponentApi, DataBindingSchema, FunctionCallSchema } from '@a2ui/web_core/v0_9';
-import { Child } from './component-binder.service';
+import {Signal} from '@angular/core';
+import {z} from 'zod';
+import {ComponentApi, DataBindingSchema, FunctionCallSchema} from '@a2ui/web_core/v0_9';
+import {Child} from './component-binder.service';
 
 /**
  * Represents a component property bound to an Angular Signal and update logic.
@@ -60,9 +60,9 @@ type DynamicSchemaValueToRaw<Input> = Exclude<Input, DataBindingType | FunctionC
 
 type InferredInterfaceToProps<InferredSchema> = {
   [K in keyof InferredSchema]: K extends 'children' | 'child' | 'trigger' | 'content'
-  ? BoundProperty<Child>
-  : BoundProperty<DynamicSchemaValueToRaw<InferredSchema[K]>>
-}
+    ? BoundProperty<Child>
+    : BoundProperty<DynamicSchemaValueToRaw<InferredSchema[K]>>;
+};
 
 interface CheckProps {
   isValid: boolean;
@@ -70,24 +70,26 @@ interface CheckProps {
 }
 
 /** The binder can add some properties to the Props object. This util adds them to the type. */
-export type ExtendedProps<ComponentProps extends { [key: string]: any }> =
-  'checks' extends keyof ComponentProps ? Omit<ComponentProps, 'checks'> & CheckProps : ComponentProps;
+export type ExtendedProps<ComponentProps extends {[key: string]: any}> =
+  'checks' extends keyof ComponentProps
+    ? Omit<ComponentProps, 'checks'> & CheckProps
+    : ComponentProps;
 
 /**
-* Utility to convert a component Api Type to the props Type, where the
-* values are wrapped in BoundProperty. This is used to correctly type the props()
-* in a UI component
-* 
-* @example
-* export const TextComponentApi = {
-*   name: 'Text',
-*   schema: z.object({
-*     text: z.string(),
-*   })
-*   .strict(),
-* } satisfies ComponentApi;
-* export type TextComponentProps = ComponentApiToProps<typeof TextComponentApi>; // outputs { text: BoundProperty<string>; }
-*/
-export type ComponentApiToProps<Api extends ComponentApi> = InferredInterfaceToProps<ExtendedProps<z.infer<
-  Api['schema']
->>>;
+ * Utility to convert a component Api Type to the props Type, where the
+ * values are wrapped in BoundProperty. This is used to correctly type the props()
+ * in a UI component
+ *
+ * @example
+ * export const TextComponentApi = {
+ *   name: 'Text',
+ *   schema: z.object({
+ *     text: z.string(),
+ *   })
+ *   .strict(),
+ * } satisfies ComponentApi;
+ * export type TextComponentProps = ComponentApiToProps<typeof TextComponentApi>; // outputs { text: BoundProperty<string>; }
+ */
+export type ComponentApiToProps<Api extends ComponentApi> = InferredInterfaceToProps<
+  ExtendedProps<z.infer<Api['schema']>>
+>;
diff --git a/renderers/angular/src/v0_9/core/utils.spec.ts b/renderers/angular/src/v0_9/core/utils.spec.ts
index 7327e5741..e438dbcdc 100644
--- a/renderers/angular/src/v0_9/core/utils.spec.ts
+++ b/renderers/angular/src/v0_9/core/utils.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { signal as preactSignal } from '@preact/signals-core';
-import { DestroyRef } from '@angular/core';
-import { toAngularSignal, getNormalizedPath } from './utils';
+import {signal as preactSignal} from '@preact/signals-core';
+import {DestroyRef} from '@angular/core';
+import {toAngularSignal, getNormalizedPath} from './utils';
 
 describe('toAngularSignal', () => {
   let mockDestroyRef: jasmine.SpyObj<DestroyRef>;
diff --git a/renderers/angular/src/v0_9/core/utils.ts b/renderers/angular/src/v0_9/core/utils.ts
index a9f97d93e..d8bb6afc9 100644
--- a/renderers/angular/src/v0_9/core/utils.ts
+++ b/renderers/angular/src/v0_9/core/utils.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { DestroyRef, Signal, signal as angularSignal } from '@angular/core';
-import { Signal as PreactSignal, effect, signal as preactSignal } from '@a2ui/web_core/v0_9';
-export { preactSignal };
+import {DestroyRef, Signal, signal as angularSignal} from '@angular/core';
+import {Signal as PreactSignal, effect, signal as preactSignal} from '@a2ui/web_core/v0_9';
+export {preactSignal};
 
 /**
  * Bridges a Preact Signal (from A2UI web_core) to a reactive Angular Signal.
@@ -32,7 +32,7 @@ export { preactSignal };
  *               (necessary for correct change detection in OnPush components).
  * @returns A read-only Angular Signal.
  */
-import { NgZone } from '@angular/core';
+import {NgZone} from '@angular/core';
 
 export function toAngularSignal<T>(
   preactSignal: PreactSignal<T>,
diff --git a/renderers/angular/src/v0_9/test_data/mocks/contact-card.json b/renderers/angular/src/v0_9/test_data/mocks/contact-card.json
index 4cbf17de3..af010d118 100644
--- a/renderers/angular/src/v0_9/test_data/mocks/contact-card.json
+++ b/renderers/angular/src/v0_9/test_data/mocks/contact-card.json
@@ -19,32 +19,25 @@
         {
           "id": "main-column",
           "component": "Column",
-          "children": [
-            "avatar-image",
-            "name",
-            "title",
-            "divider",
-            "contact-info",
-            "actions"
-          ],
+          "children": ["avatar-image", "name", "title", "divider", "contact-info", "actions"],
           "align": "center"
         },
         {
           "id": "avatar-image",
           "component": "Image",
-          "url": { "path": "/avatar" },
+          "url": {"path": "/avatar"},
           "fit": "cover"
         },
         {
           "id": "name",
           "component": "Text",
-          "text": { "path": "/name" },
+          "text": {"path": "/name"},
           "weight": 700
         },
         {
           "id": "title",
           "component": "Text",
-          "text": { "path": "/title" }
+          "text": {"path": "/title"}
         },
         {
           "id": "divider",
@@ -69,7 +62,7 @@
         {
           "id": "phone-text",
           "component": "Text",
-          "text": { "path": "/phone" }
+          "text": {"path": "/phone"}
         },
         {
           "id": "email-row",
@@ -85,7 +78,7 @@
         {
           "id": "email-text",
           "component": "Text",
-          "text": { "path": "/email" }
+          "text": {"path": "/email"}
         },
         {
           "id": "location-row",
@@ -101,7 +94,7 @@
         {
           "id": "location-text",
           "component": "Text",
-          "text": { "path": "/location" }
+          "text": {"path": "/location"}
         },
         {
           "id": "actions",
@@ -115,7 +108,7 @@
           "action": {
             "functionCall": {
               "call": "call",
-              "args": { "number": { "path": "/phone" } }
+              "args": {"number": {"path": "/phone"}}
             }
           }
         },
@@ -131,7 +124,7 @@
           "action": {
             "functionCall": {
               "call": "message",
-              "args": { "recipient": { "path": "/email" } }
+              "args": {"recipient": {"path": "/email"}}
             }
           }
         },
diff --git a/renderers/angular/src/v0_9/test_data/mocks/restaurant-card.json b/renderers/angular/src/v0_9/test_data/mocks/restaurant-card.json
index faa4f405f..6e9197db5 100644
--- a/renderers/angular/src/v0_9/test_data/mocks/restaurant-card.json
+++ b/renderers/angular/src/v0_9/test_data/mocks/restaurant-card.json
@@ -24,7 +24,7 @@
         {
           "id": "restaurant-image",
           "component": "Image",
-          "url": { "path": "/image" },
+          "url": {"path": "/image"},
           "fit": "cover"
         },
         {
@@ -42,18 +42,18 @@
         {
           "id": "restaurant-name",
           "component": "Text",
-          "text": { "path": "/name" },
+          "text": {"path": "/name"},
           "weight": 700
         },
         {
           "id": "price-range",
           "component": "Text",
-          "text": { "path": "/priceRange" }
+          "text": {"path": "/priceRange"}
         },
         {
           "id": "cuisine",
           "component": "Text",
-          "text": { "path": "/cuisine" },
+          "text": {"path": "/cuisine"},
           "style": "italic"
         },
         {
@@ -70,12 +70,12 @@
         {
           "id": "rating",
           "component": "Text",
-          "text": { "path": "/rating" }
+          "text": {"path": "/rating"}
         },
         {
           "id": "reviews",
           "component": "Text",
-          "text": { "path": "/reviewCount" }
+          "text": {"path": "/reviewCount"}
         },
         {
           "id": "details-row",
@@ -85,12 +85,12 @@
         {
           "id": "distance",
           "component": "Text",
-          "text": { "path": "/distance" }
+          "text": {"path": "/distance"}
         },
         {
           "id": "delivery-time",
           "component": "Text",
-          "text": { "path": "/deliveryTime" }
+          "text": {"path": "/deliveryTime"}
         }
       ]
     }
diff --git a/renderers/angular/src/v0_9/v0_9_integration.spec.ts b/renderers/angular/src/v0_9/v0_9_integration.spec.ts
index 231141be7..4c408fbf7 100644
--- a/renderers/angular/src/v0_9/v0_9_integration.spec.ts
+++ b/renderers/angular/src/v0_9/v0_9_integration.spec.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { A2uiRendererService, A2UI_RENDERER_CONFIG } from './core/a2ui-renderer.service';
-import { SurfaceComponent } from './core/surface.component';
-import { BasicCatalog } from './catalog/basic/basic-catalog';
-import { A2uiMessage } from '@a2ui/web_core/v0_9';
-import { MarkdownRenderer } from './core/markdown';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
+import {A2uiRendererService, A2UI_RENDERER_CONFIG} from './core/a2ui-renderer.service';
+import {SurfaceComponent} from './core/surface.component';
+import {BasicCatalog} from './catalog/basic/basic-catalog';
+import {A2uiMessage} from '@a2ui/web_core/v0_9';
+import {MarkdownRenderer} from './core/markdown';
 
 import * as restaurantCardMock from './test_data/mocks/restaurant-card.json';
 import * as contactCardMock from './test_data/mocks/contact-card.json';
@@ -147,7 +147,7 @@ describe('v0.9 Angular Renderer Integration', () => {
             {
               id: 'root',
               component: 'Text',
-              text: { path: '/user/name' },
+              text: {path: '/user/name'},
             },
           ],
         },
@@ -202,7 +202,7 @@ describe('v0.9 Angular Renderer Integration', () => {
               action: {
                 event: {
                   name: 'navigate',
-                  context: { url: 'https://example.com' },
+                  context: {url: 'https://example.com'},
                 },
               },
             },
@@ -227,7 +227,7 @@ describe('v0.9 Angular Renderer Integration', () => {
     const actionArg = actionSpy.calls.mostRecent().args[0];
     expect(actionArg.surfaceId).toBe('test-surface');
     expect(actionArg.name).toBe('navigate');
-    expect(actionArg.context).toEqual({ url: 'https://example.com' });
+    expect(actionArg.context).toEqual({url: 'https://example.com'});
     expect(actionArg.sourceComponentId).toBe('root');
     expect(actionArg.timestamp).toBeDefined();
   });
diff --git a/renderers/docs/web_publishing.md b/renderers/docs/web_publishing.md
index 480df5560..9c5cd8a82 100644
--- a/renderers/docs/web_publishing.md
+++ b/renderers/docs/web_publishing.md
@@ -32,6 +32,7 @@ renderers/scripts/increment_version.mjs lit 0.9.2-beta.1
 ```
 
 This script will:
+
 - Update the `package.json` of the target package.
 - Scan the entire mono-repo for internal dependents (via `file:` links).
 - Run `npm install` in those dependents to update their lockfiles.
@@ -46,6 +47,7 @@ Once versions are updated and merged into `main`, use the `publish_npm` script t
 ```
 
 This script will:
+
 - Run `npx google-artifactregistry-auth` to authenticate.
 - Sort packages topologically (e.g., publishing `web_core` before `lit`).
 - Verify that if a renderer is being published, `web_core` is also included (use `--force` to skip).
@@ -53,9 +55,10 @@ This script will:
 - For each package: `npm install` -> `npm test` -> `npm run publish:package`.
 
 **Advanced Flags for publish_npm.mjs:**
+
 - `--force`: Skips the `web_core` inclusion warning.
 - `--yes`: Bypasses the manual user confirmation prompt (useful for CI).
-- `--dry-run`: Simulates the process, printing the commands it *would* execute without actually running them.
+- `--dry-run`: Simulates the process, printing the commands it _would_ execute without actually running them.
 - `--skip-tests`: Skips the `npm run test` phase before publishing.
 - `--test-only`: Runs the full build and test suite in topological order, but skips the final `npm run publish:package` step. Useful for verifying that packages build and tests pass before performing a real release.
 
@@ -74,6 +77,7 @@ This generates a `manifest.json` with the current versions of all renderer packa
 You can also do this step manually, if you are authenticated with `gcloud` with a corporate Google account in the correct groups:
 
 1. Create a new manifest.json file with these contents:
+
    ```json
    {
      "publish_all": true
@@ -106,7 +110,7 @@ Because these are scoped packages (`@a2ui/`), they require the `--access public`
 npm run publish:package
 ```
 
-*Note: This command runs the build, prepares the `dist/` directory, and then executes `npm publish dist/ --access public`.*
+_Note: This command runs the build, prepares the `dist/` directory, and then executes `npm publish dist/ --access public`._
 
 ---
 
@@ -114,6 +118,7 @@ npm run publish:package
 
 **What happens during `npm run publish:package`?**
 Before publishing, the script runs the necessary `build` command which processes the code. Then, a preparation script (usually `prepare-publish.mjs`) runs, which:
+
 1. Copies `package.json`, `README.md`, and `LICENSE` to the `dist/` folder.
 2. It scans all dependencies and peerDependencies for internal `@a2ui/` packages (those using `file:` links) and updates them to the actual current versions in the mono-repo (e.g., `^0.9.0`).
 3. Adjusts exports and paths (removing the `./dist/` prefix) so they are correct when consumed from the package root.
@@ -126,4 +131,3 @@ Only the `dist/` directory, `src/` directory (for sourcemaps), `package.json`, `
 
 **What about the License?**
 The package is automatically published under the `Apache-2.0` open-source license, as defined in `package.json`.
-
diff --git a/renderers/flutter/README.md b/renderers/flutter/README.md
index d39a11941..f918ced8e 100644
--- a/renderers/flutter/README.md
+++ b/renderers/flutter/README.md
@@ -1,8 +1,8 @@
 # Flutter Gen UI SDK
 
-The [Flutter Gen UI SDK](https://github.com/flutter/genui) is the official Flutter renderer for A2UI. 
+The [Flutter Gen UI SDK](https://github.com/flutter/genui) is the official Flutter renderer for A2UI.
 
 Key packages from the Flutter Gen UI SDK include:
 
-*   [`genui`](https://pub.dev/packages/genui): The core framework for employing Generative UI in Flutter applications.
-*   [`genui_a2ui`](https://pub.dev/packages/genui_a2ui): This package specifically allows the Flutter Gen UI SDK to act as a renderer for UIs generated by an A2UI backend agent, integrating with the A2UI protocol.
\ No newline at end of file
+- [`genui`](https://pub.dev/packages/genui): The core framework for employing Generative UI in Flutter applications.
+- [`genui_a2ui`](https://pub.dev/packages/genui_a2ui): This package specifically allows the Flutter Gen UI SDK to act as a renderer for UIs generated by an A2UI backend agent, integrating with the A2UI protocol.
diff --git a/renderers/lit/README.md b/renderers/lit/README.md
index 8bc471687..de3268174 100644
--- a/renderers/lit/README.md
+++ b/renderers/lit/README.md
@@ -23,7 +23,7 @@ use the **v0.9** protocol.
 To use the v0.9 implementation, import from the versioned path:
 
 ```typescript
-import { A2uiSurface, basicCatalog } from "@a2ui/lit/v0_9";
+import {A2uiSurface, basicCatalog} from '@a2ui/lit/v0_9';
 ```
 
 ## Quick Start
@@ -31,12 +31,12 @@ import { A2uiSurface, basicCatalog } from "@a2ui/lit/v0_9";
 The Lit renderer works alongside the `MessageProcessor` from `@a2ui/web_core`.
 
 ```typescript
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { MessageProcessor } from "@a2ui/web_core/v0_9";
-import { A2uiSurface, basicCatalog } from "@a2ui/lit/v0_9";
+import {LitElement, html} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {MessageProcessor} from '@a2ui/web_core/v0_9';
+import {A2uiSurface, basicCatalog} from '@a2ui/lit/v0_9';
 
-@customElement("my-app")
+@customElement('my-app')
 export class MyApp extends LitElement {
   private processor = new MessageProcessor([basicCatalog]);
 
@@ -47,8 +47,8 @@ export class MyApp extends LitElement {
     super.connectedCallback();
 
     // Listen for surface creation
-    this.processor.onSurfaceCreated((s) => {
-      if (s.id === "main-chat") {
+    this.processor.onSurfaceCreated(s => {
+      if (s.id === 'main-chat') {
         this.surface = s;
       }
     });
@@ -56,9 +56,9 @@ export class MyApp extends LitElement {
     // The message objects should come from your agent
     this.processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "main-chat",
+          surfaceId: 'main-chat',
           catalogId: basicCatalog.id,
         },
       },
@@ -86,11 +86,11 @@ A2UI v0.9 separates a component's API (Schema) from its implementation.
 Use Zod to define the properties.
 
 ```typescript
-import { z } from "zod";
-import { CommonSchemas } from "@a2ui/web_core/v0_9";
+import {z} from 'zod';
+import {CommonSchemas} from '@a2ui/web_core/v0_9';
 
 export const MyProfileApi = {
-  name: "Profile",
+  name: 'Profile',
   schema: z.object({
     username: CommonSchemas.DynamicString,
     bio: CommonSchemas.DynamicString,
@@ -104,12 +104,12 @@ export const MyProfileApi = {
 Extend `A2uiLitElement` and implement `createController` and `render`.
 
 ```typescript
-import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";
-import { customElement } from "lit/decorators.js";
-import { html, nothing } from "lit";
-import { MyProfileApi } from "./my-profile-api";
+import {A2uiLitElement, A2uiController} from '@a2ui/lit/v0_9';
+import {customElement} from 'lit/decorators.js';
+import {html, nothing} from 'lit';
+import {MyProfileApi} from './my-profile-api';
 
-@customElement("my-profile")
+@customElement('my-profile')
 export class MyProfileElement extends A2uiLitElement<typeof MyProfileApi> {
   protected createController() {
     return new A2uiController(this, MyProfileApi);
@@ -132,7 +132,7 @@ export class MyProfileElement extends A2uiLitElement<typeof MyProfileApi> {
 // Export the catalog entry
 export const MyProfile = {
   ...MyProfileApi,
-  tagName: "my-profile",
+  tagName: 'my-profile',
 };
 ```
 
@@ -141,13 +141,10 @@ export const MyProfile = {
 Group your custom components into a `Catalog` from `@a2ui/web_core/v0_9`.
 
 ```typescript
-import { Catalog } from "@a2ui/web_core/v0_9";
-import { MyProfile } from "./my-profile";
+import {Catalog} from '@a2ui/web_core/v0_9';
+import {MyProfile} from './my-profile';
 
-export const myCatalog = new Catalog(
-  "https://example.com/catalogs/my-catalog.json",
-  [MyProfile],
-);
+export const myCatalog = new Catalog('https://example.com/catalogs/my-catalog.json', [MyProfile]);
 ```
 
 ### 4. Use the Custom Catalog
@@ -156,9 +153,9 @@ Pass your custom catalog to the `MessageProcessor` alongside the basic catalog
 in your app setup (as seen in the Quick Start).
 
 ```typescript
-import { MessageProcessor } from "@a2ui/web_core/v0_9";
-import { basicCatalog } from "@a2ui/lit/v0_9";
-import { myCatalog } from "./my-catalog";
+import {MessageProcessor} from '@a2ui/web_core/v0_9';
+import {basicCatalog} from '@a2ui/lit/v0_9';
+import {myCatalog} from './my-catalog';
 
 // Initialize the MessageProcessor with both catalogs
 const processor = new MessageProcessor([basicCatalog, myCatalog]);
diff --git a/renderers/lit/a2ui_explorer/README.md b/renderers/lit/a2ui_explorer/README.md
index cbdaf4ffc..d0b3d0e4e 100644
--- a/renderers/lit/a2ui_explorer/README.md
+++ b/renderers/lit/a2ui_explorer/README.md
@@ -23,17 +23,20 @@ npm run build
 ```
 
 For more details on building the renderers, see:
+
 - [Web Core README](../../../../renderers/web_core/README.md)
 - [Lit Renderer README](../../../../renderers/lit/README.md)
 
 ## Getting Started
 
 1.  **Navigate to this directory**:
+
     ```bash
     cd samples/client/lit/local_gallery
     ```
 
 2.  **Install dependencies**:
+
     ```bash
     npm install
     ```
@@ -50,6 +53,6 @@ For more details on building the renderers, see:
 ## Architecture
 
 - **Agentless**: Unlike other samples, this does not require a running Python agent. It simulates agent responses locally for interactive components (like the Login Form).
-- **Dynamic Loading**: The app automatically discovers and loads *all* `.json` files present in the v0.8 minimal specification folder at build time. To add a new test case, simply drop a JSON file into that specification folder and restart the dev server.
+- **Dynamic Loading**: The app automatically discovers and loads _all_ `.json` files present in the v0.8 minimal specification folder at build time. To add a new test case, simply drop a JSON file into that specification folder and restart the dev server.
 - **Surface Isolation**: Each example is rendered into its own independent `a2ui-surface` with a unique ID derived from the filename.
 - **Mock Agent Console**: All user interactions (button clicks, form submissions) are intercepted and logged to a sidebar, demonstrating how the renderer resolves actions and contexts.
diff --git a/renderers/lit/a2ui_explorer/index.html b/renderers/lit/a2ui_explorer/index.html
index c2ddac1b1..5c752f2ed 100644
--- a/renderers/lit/a2ui_explorer/index.html
+++ b/renderers/lit/a2ui_explorer/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,26 +16,32 @@
 -->
 
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-  <title>A2UI Local Gallery (Minimal v0.9)</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1" rel="stylesheet">
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-      font-family: 'Roboto', sans-serif;
-      background: #0f172a;
-      color: #f1f5f9;
-    }
-  </style>
-</head>
-<body>
-  <local-gallery></local-gallery>
-  <script type="module" src="./src/main.ts"></script>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <title>A2UI Local Gallery (Minimal v0.9)</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: 'Roboto', sans-serif;
+        background: #0f172a;
+        color: #f1f5f9;
+      }
+    </style>
+  </head>
+  <body>
+    <local-gallery></local-gallery>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
 </html>
diff --git a/renderers/lit/a2ui_explorer/src/examples.ts b/renderers/lit/a2ui_explorer/src/examples.ts
index 0f5563fc4..d8d4a5ea9 100644
--- a/renderers/lit/a2ui_explorer/src/examples.ts
+++ b/renderers/lit/a2ui_explorer/src/examples.ts
@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { basicCatalog } from "@a2ui/lit/v0_9";
-import { A2uiMessage, CreateSurfaceMessage } from "@a2ui/web_core/v0_9";
+import {basicCatalog} from '@a2ui/lit/v0_9';
+import {A2uiMessage, CreateSurfaceMessage} from '@a2ui/web_core/v0_9';
 
 /**
  * Represents a demo item loaded from an example JSON file.
@@ -47,14 +47,10 @@ export function getDemoItems(): DemoItem[] {
 
   for (const [path, data] of sortedEntries) {
     try {
-      const filename = path.substring(path.lastIndexOf("/") + 1);
+      const filename = path.substring(path.lastIndexOf('/') + 1);
       const jsonData = data.default;
 
-      const [messages, description] = extractMessagesAndDescription(
-        jsonData,
-        filename,
-        path,
-      );
+      const [messages, description] = extractMessagesAndDescription(jsonData, filename, path);
 
       const surfaceId = ensureCreateSurfaceMessage(filename, messages);
 
@@ -71,7 +67,7 @@ export function getDemoItems(): DemoItem[] {
   }
 
   if (items.length === 0) {
-    console.warn("No demo items were found.");
+    console.warn('No demo items were found.');
   }
 
   return items;
@@ -89,16 +85,16 @@ export function getDemoItems(): DemoItem[] {
  * @returns The surfaceId for the createSurface message of this set of messages.
  */
 function ensureCreateSurfaceMessage(filename: string, messages: A2uiMessage[]): string {
-  let surfaceId = filename.replace(".json", "");
+  let surfaceId = filename.replace('.json', '');
   const createMsg = messages.find(
-    (message): message is CreateSurfaceMessage => "createSurface" in message,
+    (message): message is CreateSurfaceMessage => 'createSurface' in message,
   );
 
   if (createMsg) {
     surfaceId = createMsg.createSurface.surfaceId;
   } else {
     messages.unshift({
-      version: "v0.9",
+      version: 'v0.9',
       createSurface: {
         surfaceId,
         catalogId: basicCatalog.id,
@@ -141,13 +137,11 @@ function getSortedExampleEntries(): [string, ExampleModule][] {
   // pass it as a parameter because Vite needs to statically analyze it at build
   // time.
   const exampleModules = import.meta.glob<ExampleModule>(
-    "../../../../specification/v0_9/json/catalogs/basic/examples/*.json",
-    { eager: true },
+    '../../../../specification/v0_9/json/catalogs/basic/examples/*.json',
+    {eager: true},
   );
 
-  return Object.entries(exampleModules).sort((a, b) =>
-    a[0].localeCompare(b[0]),
-  );
+  return Object.entries(exampleModules).sort((a, b) => a[0].localeCompare(b[0]));
 }
 
 /**
@@ -195,8 +189,8 @@ function extractMessagesAndDescription(
  */
 function filenameToTitle(filename: string): string {
   return filename
-    .split("_")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ")
-    .replace(".json", "");
+    .split('_')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+    .replace('.json', '');
 }
diff --git a/renderers/lit/a2ui_explorer/src/local-gallery.css.ts b/renderers/lit/a2ui_explorer/src/local-gallery.css.ts
index 45847805a..2a038395b 100644
--- a/renderers/lit/a2ui_explorer/src/local-gallery.css.ts
+++ b/renderers/lit/a2ui_explorer/src/local-gallery.css.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { css } from "lit";
+import {css} from 'lit';
 
 /**
  * Styles for the LocalGallery component.
@@ -185,7 +185,7 @@ export const appStyles = css`
     flex: 1;
     overflow-y: auto;
     padding: 16px;
-    font-family: "JetBrains Mono", monospace;
+    font-family: 'JetBrains Mono', monospace;
     font-size: 0.8rem;
     white-space: pre-wrap;
   }
diff --git a/renderers/lit/a2ui_explorer/src/local-gallery.ts b/renderers/lit/a2ui_explorer/src/local-gallery.ts
index 4db532eed..d3781e4d0 100644
--- a/renderers/lit/a2ui_explorer/src/local-gallery.ts
+++ b/renderers/lit/a2ui_explorer/src/local-gallery.ts
@@ -14,34 +14,31 @@
  * limitations under the License.
  */
 
-import { LitElement, html, css, nothing } from "lit";
-import { provide } from "@lit/context";
-import { customElement, state } from "lit/decorators.js";
-import { MessageProcessor } from "@a2ui/web_core/v0_9";
-import { basicCatalog, Context } from "@a2ui/lit/v0_9";
-import { renderMarkdown } from "@a2ui/markdown-it";
-import { getDemoItems, DemoItem } from "./examples";
-import { appStyles } from "./local-gallery.css";
-
-@customElement("local-gallery")
+import {LitElement, html, css, nothing} from 'lit';
+import {provide} from '@lit/context';
+import {customElement, state} from 'lit/decorators.js';
+import {MessageProcessor} from '@a2ui/web_core/v0_9';
+import {basicCatalog, Context} from '@a2ui/lit/v0_9';
+import {renderMarkdown} from '@a2ui/markdown-it';
+import {getDemoItems, DemoItem} from './examples';
+import {appStyles} from './local-gallery.css';
+
+@customElement('local-gallery')
 export class LocalGallery extends LitElement {
   @state() accessor mockLogs: string[] = [];
   @state() accessor demoItems: DemoItem[] = [];
   @state() accessor activeItemIndex = 0;
   @state() accessor processedMessageCount = 0;
-  @state() accessor currentDataModelText = "{}";
+  @state() accessor currentDataModelText = '{}';
 
-  @provide({ context: Context.markdown })
+  @provide({context: Context.markdown})
   private accessor markdownRenderer = renderMarkdown;
 
-  private processor = new MessageProcessor(
-    [basicCatalog],
-    (action: any) => {
-      this.log(`Action dispatched: ${action.surfaceId}`, action);
-    },
-  );
+  private processor = new MessageProcessor([basicCatalog], (action: any) => {
+    this.log(`Action dispatched: ${action.surfaceId}`, action);
+  });
 
-  private dataModelSubscription?: { unsubscribe: () => void };
+  private dataModelSubscription?: {unsubscribe: () => void};
 
   static styles = [appStyles];
 
@@ -77,7 +74,7 @@ export class LocalGallery extends LitElement {
   resetSurface() {
     this.processedMessageCount = 0;
     this.mockLogs = [];
-    this.currentDataModelText = "{}";
+    this.currentDataModelText = '{}';
 
     // Clear old surface and subscriptions
     if (this.dataModelSubscription) {
@@ -87,9 +84,7 @@ export class LocalGallery extends LitElement {
 
     const item = this.demoItems[this.activeItemIndex];
     if (item && this.processor.model.getSurface(item.id)) {
-      this.processor.processMessages([
-        { version: "v0.9", deleteSurface: { surfaceId: item.id } },
-      ]);
+      this.processor.processMessages([{version: 'v0.9', deleteSurface: {surfaceId: item.id}}]);
     }
   }
 
@@ -110,7 +105,7 @@ export class LocalGallery extends LitElement {
     if (!this.dataModelSubscription) {
       const surface = this.processor.model.getSurface(item.id);
       if (surface) {
-        this.dataModelSubscription = surface.dataModel.subscribe("/", (val) => {
+        this.dataModelSubscription = surface.dataModel.subscribe('/', val => {
           this.currentDataModelText = JSON.stringify(val || {}, null, 2);
         });
       }
@@ -125,11 +120,8 @@ export class LocalGallery extends LitElement {
 
   render() {
     const activeItem = this.demoItems[this.activeItemIndex];
-    const surface = activeItem
-      ? this.processor.model.getSurface(activeItem.id)
-      : undefined;
-    const canAdvance =
-      activeItem && this.processedMessageCount < activeItem.messages.length;
+    const surface = activeItem ? this.processor.model.getSurface(activeItem.id) : undefined;
+    const canAdvance = activeItem && this.processedMessageCount < activeItem.messages.length;
 
     return html`
       <header>
@@ -143,7 +135,7 @@ export class LocalGallery extends LitElement {
           ${this.demoItems.map(
             (item, i) => html`
               <div
-                class="nav-item ${i === this.activeItemIndex ? "active" : ""}"
+                class="nav-item ${i === this.activeItemIndex ? 'active' : ''}"
                 @click=${() => this.selectItem(i)}
               >
                 <h3 class="nav-title">${item.title}</h3>
@@ -156,27 +148,20 @@ export class LocalGallery extends LitElement {
         <section class="gallery-pane">
           <div class="preview-header">
             <div>
-              <h2 style="margin:0">${activeItem?.title || "No selection"}</h2>
+              <h2 style="margin:0">${activeItem?.title || 'No selection'}</h2>
               <p style="margin:4px 0 0 0; font-size:0.9rem; color:#94a3b8">
                 ${activeItem?.description}
               </p>
             </div>
             <div class="stepper-controls">
               <span style="font-size:0.9rem; margin-right:8px; color:#94a3b8">
-                Messages: ${this.processedMessageCount} /
-                ${activeItem?.messages.length || 0}
+                Messages: ${this.processedMessageCount} / ${activeItem?.messages.length || 0}
               </span>
               <button @click=${() => this.resetSurface()}>Reset</button>
-              <button
-                @click=${() => this.advanceMessages(false)}
-                ?disabled=${!canAdvance}
-              >
+              <button @click=${() => this.advanceMessages(false)} ?disabled=${!canAdvance}>
                 +1 Message
               </button>
-              <button
-                @click=${() => this.advanceMessages(true)}
-                ?disabled=${!canAdvance}
-              >
+              <button @click=${() => this.advanceMessages(true)} ?disabled=${!canAdvance}>
                 All Messages
               </button>
             </div>
@@ -204,9 +189,7 @@ export class LocalGallery extends LitElement {
               ${this.mockLogs.length === 0
                 ? html`<span style="color:#475569">No actions logged...</span>`
                 : nothing}
-              ${this.mockLogs.map(
-                (log) => html`<div class="log-entry">${log}</div>`,
-              )}
+              ${this.mockLogs.map(log => html`<div class="log-entry">${log}</div>`)}
             </div>
           </div>
         </aside>
diff --git a/renderers/lit/a2ui_explorer/src/theme.ts b/renderers/lit/a2ui_explorer/src/theme.ts
index c7e91cd1d..6276ee6ce 100644
--- a/renderers/lit/a2ui_explorer/src/theme.ts
+++ b/renderers/lit/a2ui_explorer/src/theme.ts
@@ -14,137 +14,137 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
+import {v0_8} from '@a2ui/lit';
 
 /** Elements */
 
 const a = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-as-n": true,
-  "layout-dis-iflx": true,
-  "layout-al-c": true,
-  "typography-td-none": true,
-  "color-c-p40": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-as-n': true,
+  'layout-dis-iflx': true,
+  'layout-al-c': true,
+  'typography-td-none': true,
+  'color-c-p40': true,
 };
 
 const audio = {
-  "layout-w-100": true,
+  'layout-w-100': true,
 };
 
 const body = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
-  "typography-sz-bm": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
+  'typography-sz-bm': true,
+  'color-c-n10': true,
 };
 
 const button = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-pt-3": true,
-  "layout-pb-3": true,
-  "layout-pl-5": true,
-  "layout-pr-5": true,
-  "layout-mb-1": true,
-  "border-br-16": true,
-  "border-bw-0": true,
-  "border-c-n70": true,
-  "border-bs-s": true,
-  "color-bgc-s30": true,
-  "behavior-ho-80": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-pt-3': true,
+  'layout-pb-3': true,
+  'layout-pl-5': true,
+  'layout-pr-5': true,
+  'layout-mb-1': true,
+  'border-br-16': true,
+  'border-bw-0': true,
+  'border-c-n70': true,
+  'border-bs-s': true,
+  'color-bgc-s30': true,
+  'behavior-ho-80': true,
 };
 
 const heading = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
 };
 
 const iframe = {
-  "behavior-sw-n": true,
+  'behavior-sw-n': true,
 };
 
 const input = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-pl-4": true,
-  "layout-pr-4": true,
-  "layout-pt-2": true,
-  "layout-pb-2": true,
-  "border-br-6": true,
-  "border-bw-1": true,
-  "color-bc-s70": true,
-  "border-bs-s": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-pl-4': true,
+  'layout-pr-4': true,
+  'layout-pt-2': true,
+  'layout-pb-2': true,
+  'border-br-6': true,
+  'border-bw-1': true,
+  'color-bc-s70': true,
+  'border-bs-s': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const p = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const orderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const unorderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const listItem = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const pre = {
-  "typography-f-c": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "typography-sz-bm": true,
-  "typography-ws-p": true,
-  "layout-as-n": true,
+  'typography-f-c': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'typography-sz-bm': true,
+  'typography-ws-p': true,
+  'layout-as-n': true,
 };
 
 const textarea = {
   ...input,
-  "layout-r-none": true,
-  "layout-fs-c": true,
+  'layout-r-none': true,
+  'layout-fs-c': true,
 };
 
 const video = {
-  "layout-el-cv": true,
+  'layout-el-cv': true,
 };
 
 const aLight = v0_8.Styles.merge(a, {});
@@ -161,38 +161,38 @@ const listItemLight = v0_8.Styles.merge(listItem, {});
 export const theme: v0_8.Types.Theme = {
   additionalStyles: {
     Button: {
-      "--n-35": "var(--n-100)",
-      "--n-10": "var(--n-0)",
+      '--n-35': 'var(--n-100)',
+      '--n-10': 'var(--n-0)',
       background:
-        "linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)",
-      boxShadow: "0 4px 15px rgba(102, 126, 234, 0.4)",
-      padding: "12px 28px",
-      textTransform: "uppercase",
+        'linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)',
+      boxShadow: '0 4px 15px rgba(102, 126, 234, 0.4)',
+      padding: '12px 28px',
+      textTransform: 'uppercase',
     },
     Text: {
       h1: {
-        color: "transparent",
+        color: 'transparent',
         background:
-          "linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)",
-        "-webkit-background-clip": "text",
-        "background-clip": "text",
-        "-webkit-text-fill-color": "transparent",
+          'linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)',
+        '-webkit-background-clip': 'text',
+        'background-clip': 'text',
+        '-webkit-text-fill-color': 'transparent',
       },
       h2: {
-        color: "transparent",
+        color: 'transparent',
         background:
-          "linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)",
-        "-webkit-background-clip": "text",
-        "background-clip": "text",
-        "-webkit-text-fill-color": "transparent",
+          'linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)',
+        '-webkit-background-clip': 'text',
+        'background-clip': 'text',
+        '-webkit-text-fill-color': 'transparent',
       },
       h3: {
-        color: "transparent",
+        color: 'transparent',
         background:
-          "linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)",
-        "-webkit-background-clip": "text",
-        "background-clip": "text",
-        "-webkit-text-fill-color": "transparent",
+          'linear-gradient(135deg, light-dark(#818cf8, #06b6d4) 0%, light-dark(#a78bfa, #3b82f6) 100%)',
+        '-webkit-background-clip': 'text',
+        'background-clip': 'text',
+        '-webkit-text-fill-color': 'transparent',
       },
       h4: {},
       h5: {},
@@ -201,106 +201,106 @@ export const theme: v0_8.Types.Theme = {
     },
     Card: {
       background:
-        "radial-gradient(circle at top left, light-dark(transparent, rgba(6, 182, 212, 0.15)), transparent 40%), radial-gradient(circle at bottom right, light-dark(transparent, rgba(139, 92, 246, 0.15)), transparent 40%), linear-gradient(135deg, light-dark(rgba(255, 255, 255, 0.7), rgba(30, 41, 59, 0.7)), light-dark(rgba(255, 255, 255, 0.7), rgba(15, 23, 42, 0.8)))",
+        'radial-gradient(circle at top left, light-dark(transparent, rgba(6, 182, 212, 0.15)), transparent 40%), radial-gradient(circle at bottom right, light-dark(transparent, rgba(139, 92, 246, 0.15)), transparent 40%), linear-gradient(135deg, light-dark(rgba(255, 255, 255, 0.7), rgba(30, 41, 59, 0.7)), light-dark(rgba(255, 255, 255, 0.7), rgba(15, 23, 42, 0.8)))',
     },
     TextField: {
-      "--p-0": "light-dark(var(--n-0), #1e293b)",
+      '--p-0': 'light-dark(var(--n-0), #1e293b)',
     },
     Modal: {
       background:
-        "linear-gradient(135deg, light-dark(rgba(255, 255, 255, 0.9), rgba(30, 41, 59, 1)), light-dark(rgba(255, 255, 255, 0.95), rgba(15, 23, 42, 1)))",
-      boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2)",
-      borderRadius: "8px",
-      padding: "16px",
-      minWidth: "300px",
-      maxWidth: "80vw",
-      display: "flex",
-      flexDirection: "column",
+        'linear-gradient(135deg, light-dark(rgba(255, 255, 255, 0.9), rgba(30, 41, 59, 1)), light-dark(rgba(255, 255, 255, 0.95), rgba(15, 23, 42, 1)))',
+      boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2)',
+      borderRadius: '8px',
+      padding: '16px',
+      minWidth: '300px',
+      maxWidth: '80vw',
+      display: 'flex',
+      flexDirection: 'column',
     },
     MultipleChoice: {
-      "--md-sys-color-secondary-container-high": "#e8def8",
+      '--md-sys-color-secondary-container-high': '#e8def8',
     },
   },
   components: {
     AudioPlayer: {},
     Button: {
-      "layout-pt-2": true,
-      "layout-pb-2": true,
-      "layout-pl-3": true,
-      "layout-pr-3": true,
-      "border-br-12": true,
-      "border-bw-0": true,
-      "border-bs-s": true,
-      "color-bgc-p30": true,
-      "behavior-ho-70": true,
-      "typography-w-400": true,
+      'layout-pt-2': true,
+      'layout-pb-2': true,
+      'layout-pl-3': true,
+      'layout-pr-3': true,
+      'border-br-12': true,
+      'border-bw-0': true,
+      'border-bs-s': true,
+      'color-bgc-p30': true,
+      'behavior-ho-70': true,
+      'typography-w-400': true,
     },
-    Card: { "border-br-9": true, "layout-p-4": true, "color-bgc-n100": true },
+    Card: {'border-br-9': true, 'layout-p-4': true, 'color-bgc-n100': true},
     CheckBox: {
       element: {
-        "layout-m-0": true,
-        "layout-mr-2": true,
-        "layout-p-2": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'layout-m-0': true,
+        'layout-mr-2': true,
+        'layout-p-2': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
       label: {
-        "color-c-p30": true,
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-flx-1": true,
-        "typography-sz-ll": true,
+        'color-c-p30': true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-flx-1': true,
+        'typography-sz-ll': true,
       },
       container: {
-        "layout-dsp-iflex": true,
-        "layout-al-c": true,
+        'layout-dsp-iflex': true,
+        'layout-al-c': true,
       },
     },
     Column: {
-      "layout-g-2": true,
+      'layout-g-2': true,
     },
     DateTimeInput: {
       container: {
-        "typography-sz-bm": true,
-        "layout-w-100": true,
-        "layout-g-2": true,
-        "layout-dsp-flexhor": true,
-        "layout-al-c": true,
-        "typography-ws-nw": true,
+        'typography-sz-bm': true,
+        'layout-w-100': true,
+        'layout-g-2': true,
+        'layout-dsp-flexhor': true,
+        'layout-al-c': true,
+        'typography-ws-nw': true,
       },
       label: {
-        "color-c-p30": true,
-        "typography-sz-bm": true,
+        'color-c-p30': true,
+        'typography-sz-bm': true,
       },
       element: {
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-2": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-2': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
     },
     Divider: {},
     Image: {
       all: {
-        "border-br-5": true,
-        "layout-el-cv": true,
-        "layout-w-100": true,
-        "layout-h-100": true,
+        'border-br-5': true,
+        'layout-el-cv': true,
+        'layout-w-100': true,
+        'layout-h-100': true,
       },
-      avatar: { "is-avatar": true },
+      avatar: {'is-avatar': true},
       header: {},
       icon: {},
       largeFeature: {},
@@ -309,18 +309,18 @@ export const theme: v0_8.Types.Theme = {
     },
     Icon: {},
     List: {
-      "layout-g-4": true,
-      "layout-p-2": true,
+      'layout-g-4': true,
+      'layout-p-2': true,
     },
     Modal: {
-      backdrop: { "color-bbgc-p60_20": true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
-        "border-br-2": true,
-        "color-bgc-p100": true,
-        "layout-p-4": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bc-p80": true,
+        'border-br-2': true,
+        'color-bgc-p100': true,
+        'layout-p-4': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bc-p80': true,
       },
     },
     MultipleChoice: {
@@ -329,7 +329,7 @@ export const theme: v0_8.Types.Theme = {
       element: {},
     },
     Row: {
-      "layout-g-4": true,
+      'layout-g-4': true,
     },
     Slider: {
       container: {},
@@ -338,88 +338,88 @@ export const theme: v0_8.Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
       all: {
-        "layout-w-100": true,
-        "layout-g-2": true,
+        'layout-w-100': true,
+        'layout-g-2': true,
       },
       h1: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-hs": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-hs': true,
       },
       h2: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-tl': true,
       },
       h3: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-tl': true,
       },
       h4: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-bl": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-bl': true,
       },
       h5: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-bm": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-bm': true,
       },
       body: {},
       caption: {},
     },
     TextField: {
       container: {
-        "typography-sz-bm": true,
-        "layout-w-100": true,
-        "layout-g-2": true,
-        "layout-dsp-flexhor": true,
-        "layout-al-c": true,
-        "typography-ws-nw": true,
+        'typography-sz-bm': true,
+        'layout-w-100': true,
+        'layout-g-2': true,
+        'layout-dsp-flexhor': true,
+        'layout-al-c': true,
+        'typography-ws-nw': true,
       },
       label: {
-        "layout-flx-0": true,
-        "color-c-p30": true,
+        'layout-flx-0': true,
+        'color-c-p30': true,
       },
       element: {
-        "typography-sz-bm": true,
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-2": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'typography-sz-bm': true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-2': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
     },
     Video: {
-      "border-br-5": true,
-      "layout-el-cv": true,
+      'border-br-5': true,
+      'layout-el-cv': true,
     },
   },
   elements: {
diff --git a/renderers/lit/a2ui_explorer/vite.config.ts b/renderers/lit/a2ui_explorer/vite.config.ts
index f45902589..c7e1e8547 100644
--- a/renderers/lit/a2ui_explorer/vite.config.ts
+++ b/renderers/lit/a2ui_explorer/vite.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 
 export default defineConfig({
   build: {
@@ -25,7 +25,7 @@ export default defineConfig({
   },
   server: {
     fs: {
-      allow: ['../', '../../../specification']
-    }
-  }
+      allow: ['../', '../../../specification'],
+    },
+  },
 });
diff --git a/renderers/lit/src/0.8/core.ts b/renderers/lit/src/0.8/core.ts
index 546419de3..79d259619 100644
--- a/renderers/lit/src/0.8/core.ts
+++ b/renderers/lit/src/0.8/core.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-export * as Events from "./events/events.js";
-import * as Types from "@a2ui/web_core/types/types";
-import * as Guards from "@a2ui/web_core/data/guards";
-import { Schemas } from "@a2ui/web_core";
-import * as Styles from "@a2ui/web_core/styles/index";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { create as createSignalA2uiMessageProcessor } from "./data/signal-model-processor.js";
-import { Events as WebEvents } from "@a2ui/web_core";
-export { Types, Guards, Schemas, Styles, A2uiMessageProcessor, Primitives, WebEvents };
+export * as Events from './events/events.js';
+import * as Types from '@a2ui/web_core/types/types';
+import * as Guards from '@a2ui/web_core/data/guards';
+import {Schemas} from '@a2ui/web_core';
+import * as Styles from '@a2ui/web_core/styles/index';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {create as createSignalA2uiMessageProcessor} from './data/signal-model-processor.js';
+import {Events as WebEvents} from '@a2ui/web_core';
+export {Types, Guards, Schemas, Styles, A2uiMessageProcessor, Primitives, WebEvents};
 
 export const Data = {
   createSignalA2uiMessageProcessor,
diff --git a/renderers/lit/src/0.8/data/signal-model-processor.ts b/renderers/lit/src/0.8/data/signal-model-processor.ts
index dc17b2248..c9edeadbc 100644
--- a/renderers/lit/src/0.8/data/signal-model-processor.ts
+++ b/renderers/lit/src/0.8/data/signal-model-processor.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
 
-import { SignalArray } from "signal-utils/array";
-import { SignalMap } from "signal-utils/map";
-import { SignalObject } from "signal-utils/object";
-import { SignalSet } from "signal-utils/set";
+import {SignalArray} from 'signal-utils/array';
+import {SignalMap} from 'signal-utils/map';
+import {SignalObject} from 'signal-utils/object';
+import {SignalSet} from 'signal-utils/set';
 
 export function create() {
   return new A2uiMessageProcessor({
diff --git a/renderers/lit/src/0.8/events/a2ui.ts b/renderers/lit/src/0.8/events/a2ui.ts
index 01abea001..a279e3507 100644
--- a/renderers/lit/src/0.8/events/a2ui.ts
+++ b/renderers/lit/src/0.8/events/a2ui.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import * as Types from "@a2ui/web_core/types/types";
-import { BaseEventDetail } from "./base.js";
+import * as Types from '@a2ui/web_core/types/types';
+import {BaseEventDetail} from './base.js';
 
-type Namespace = "a2ui";
+type Namespace = 'a2ui';
 
 export interface A2UIAction extends BaseEventDetail<`${Namespace}.action`> {
   readonly action: Types.Action;
diff --git a/renderers/lit/src/0.8/events/events.ts b/renderers/lit/src/0.8/events/events.ts
index acdb50fd3..2e9a00068 100644
--- a/renderers/lit/src/0.8/events/events.ts
+++ b/renderers/lit/src/0.8/events/events.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import type * as A2UI from "./a2ui.js";
-import { BaseEventDetail } from "./base.js";
+import type * as A2UI from './a2ui.js';
+import {BaseEventDetail} from './base.js';
 
 const eventInit = {
   bubbles: true,
@@ -23,31 +23,30 @@ const eventInit = {
   composed: true,
 };
 
-type EnforceEventTypeMatch<T extends Record<string, BaseEventDetail<string>>> =
-  {
-    [K in keyof T]: T[K] extends BaseEventDetail<infer EventType>
-      ? EventType extends K
-        ? T[K]
-        : never
-      : never;
-  };
+type EnforceEventTypeMatch<T extends Record<string, BaseEventDetail<string>>> = {
+  [K in keyof T]: T[K] extends BaseEventDetail<infer EventType>
+    ? EventType extends K
+      ? T[K]
+      : never
+    : never;
+};
 
 export type StateEventDetailMap = EnforceEventTypeMatch<{
-  "a2ui.action": A2UI.A2UIAction;
+  'a2ui.action': A2UI.A2UIAction;
 }>;
 
-export class StateEvent<
-  T extends keyof StateEventDetailMap
-> extends CustomEvent<StateEventDetailMap[T]> {
-  static eventName = "a2uiaction";
+export class StateEvent<T extends keyof StateEventDetailMap> extends CustomEvent<
+  StateEventDetailMap[T]
+> {
+  static eventName = 'a2uiaction';
 
   constructor(readonly payload: StateEventDetailMap[T]) {
-    super(StateEvent.eventName, { detail: payload, ...eventInit });
+    super(StateEvent.eventName, {detail: payload, ...eventInit});
   }
 }
 
 declare global {
   interface HTMLElementEventMap {
-    a2uiaction: StateEvent<"a2ui.action">;
+    a2uiaction: StateEvent<'a2ui.action'>;
   }
 }
diff --git a/renderers/lit/src/0.8/index.ts b/renderers/lit/src/0.8/index.ts
index 427109b4e..9d2d26cbb 100644
--- a/renderers/lit/src/0.8/index.ts
+++ b/renderers/lit/src/0.8/index.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export * from "./core.js";
-export * as UI from "./ui/ui.js";
+export * from './core.js';
+export * as UI from './ui/ui.js';
diff --git a/renderers/lit/src/0.8/model.test.ts b/renderers/lit/src/0.8/model.test.ts
index 0ff24d928..c30fc5f03 100644
--- a/renderers/lit/src/0.8/model.test.ts
+++ b/renderers/lit/src/0.8/model.test.ts
@@ -15,26 +15,21 @@
  * limitations under the License.
  */
 
-import assert from "node:assert";
-import { describe, it, beforeEach } from "node:test";
-import * as v0_8 from "@a2ui/lit/v0_8";
-import * as Types from "@a2ui/web_core/types/types";
-import { A2uiStateError } from "@a2ui/web_core/v0_8";
+import assert from 'node:assert';
+import {describe, it, beforeEach} from 'node:test';
+import * as v0_8 from '@a2ui/lit/v0_8';
+import * as Types from '@a2ui/web_core/types/types';
+import {A2uiStateError} from '@a2ui/web_core/v0_8';
 
 // Helper function to strip reactivity for clean comparisons.
 const toPlainObject = (value: unknown): ReturnType<typeof JSON.parse> => {
   if (value instanceof Map) {
-    return Object.fromEntries(
-      Array.from(value.entries(), ([k, v]) => [k, toPlainObject(v)])
-    );
+    return Object.fromEntries(Array.from(value.entries(), ([k, v]) => [k, toPlainObject(v)]));
   }
   if (Array.isArray(value)) {
     return value.map(toPlainObject);
   }
-  if (
-    v0_8.Data.Guards.isObject(value) &&
-    value.constructor.name === "SignalObject"
-  ) {
+  if (v0_8.Data.Guards.isObject(value) && value.constructor.name === 'SignalObject') {
     const obj: Record<string, unknown> = {};
     for (const key in value) {
       if (Object.prototype.hasOwnProperty.call(value, key)) {
@@ -47,24 +42,24 @@ const toPlainObject = (value: unknown): ReturnType<typeof JSON.parse> => {
   return value;
 };
 
-describe("A2uiMessageProcessor", () => {
+describe('A2uiMessageProcessor', () => {
   let processor = new v0_8.Data.A2uiMessageProcessor();
 
   beforeEach(() => {
     processor = new v0_8.Data.A2uiMessageProcessor();
   });
 
-  describe("Basic Initialization and State", () => {
-    it("should start with no surfaces", () => {
+  describe('Basic Initialization and State', () => {
+    it('should start with no surfaces', () => {
       assert.strictEqual(processor.getSurfaces().size, 0);
     });
 
-    it("should clear surfaces when clearSurfaces is called", () => {
+    it('should clear surfaces when clearSurfaces is called', () => {
       processor.processMessages([
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ]);
@@ -74,29 +69,29 @@ describe("A2uiMessageProcessor", () => {
     });
   });
 
-  describe("Message Processing", () => {
-    it("should handle `beginRendering` by creating a default surface", () => {
+  describe('Message Processing', () => {
+    it('should handle `beginRendering` by creating a default surface', () => {
       processor.processMessages([
         {
           beginRendering: {
-            root: "comp-a",
-            styles: { primaryColor: "#0000ff" },
-            surfaceId: "@default",
+            root: 'comp-a',
+            styles: {primaryColor: '#0000ff'},
+            surfaceId: '@default',
           },
         },
       ]);
       const surfaces = processor.getSurfaces();
       assert.strictEqual(surfaces.size, 1);
 
-      const defaultSurface = surfaces.get("@default");
-      assert.ok(defaultSurface, "Default surface should exist");
-      assert.strictEqual(defaultSurface!.rootComponentId, "comp-a");
-      assert.deepStrictEqual(defaultSurface!.styles, { primaryColor: "#0000ff" });
+      const defaultSurface = surfaces.get('@default');
+      assert.ok(defaultSurface, 'Default surface should exist');
+      assert.strictEqual(defaultSurface!.rootComponentId, 'comp-a');
+      assert.deepStrictEqual(defaultSurface!.styles, {primaryColor: '#0000ff'});
     });
 
-    it("should handle `surfaceUpdate` by adding components", () => {
-      const surfaceId = "@default";
-      const rootComponentId = "comp-a";
+    it('should handle `surfaceUpdate` by adding components', () => {
+      const surfaceId = '@default';
+      const rootComponentId = 'comp-a';
       const messages = [
         {
           beginRendering: {
@@ -111,7 +106,7 @@ describe("A2uiMessageProcessor", () => {
               {
                 id: rootComponentId,
                 component: {
-                  Text: { usageHint: "body", text: { literalString: "Hi" } },
+                  Text: {usageHint: 'body', text: {literalString: 'Hi'}},
                 },
               },
             ],
@@ -121,111 +116,109 @@ describe("A2uiMessageProcessor", () => {
       processor.processMessages(messages);
       const surface = processor.getSurfaces().get(surfaceId);
       if (!surface) {
-        assert.fail("No default surface");
+        assert.fail('No default surface');
       }
       assert.strictEqual(surface!.components.size, 1);
       assert.ok(surface!.components.has(rootComponentId));
     });
 
-    it("should handle `deleteSurface`", () => {
+    it('should handle `deleteSurface`', () => {
       processor.processMessages([
         {
-          beginRendering: { root: "root", surfaceId: "to-delete" },
+          beginRendering: {root: 'root', surfaceId: 'to-delete'},
         },
-        { deleteSurface: { surfaceId: "to-delete" } },
+        {deleteSurface: {surfaceId: 'to-delete'}},
       ]);
-      assert.strictEqual(processor.getSurfaces().has("to-delete"), false);
+      assert.strictEqual(processor.getSurfaces().has('to-delete'), false);
     });
   });
 
-  describe("Data Model Updates", () => {
-    it("should update data at a specified path", () => {
+  describe('Data Model Updates', () => {
+    it('should update data at a specified path', () => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/user",
-            contents: [{ key: "name", valueString: "Alice" }],
+            surfaceId: '@default',
+            path: '/user',
+            contents: [{key: 'name', valueString: 'Alice'}],
           },
         },
       ]);
       const name = processor.getData(
-        { dataContextPath: "/" } as v0_8.Types.AnyComponentNode,
-        "/user/name"
+        {dataContextPath: '/'} as v0_8.Types.AnyComponentNode,
+        '/user/name',
       );
-      assert.strictEqual(name, "Alice");
+      assert.strictEqual(name, 'Alice');
     });
 
-    it("should replace the entire data model when path is not provided", () => {
+    it('should replace the entire data model when path is not provided', () => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
-            contents: [
-              { key: "user", valueString: JSON.stringify({ name: "Bob" }) },
-            ],
+            surfaceId: '@default',
+            path: '/',
+            contents: [{key: 'user', valueString: JSON.stringify({name: 'Bob'})}],
           },
         },
       ]);
       const user = processor.getData(
-        { dataContextPath: "/" } as v0_8.Types.AnyComponentNode,
-        "/user"
+        {dataContextPath: '/'} as v0_8.Types.AnyComponentNode,
+        '/user',
       );
-      assert.deepStrictEqual(toPlainObject(user), { name: "Bob" });
+      assert.deepStrictEqual(toPlainObject(user), {name: 'Bob'});
     });
 
-    it("should create nested structures when setting data", () => {
-      const component = { dataContextPath: "/" } as v0_8.Types.AnyComponentNode;
+    it('should create nested structures when setting data', () => {
+      const component = {dataContextPath: '/'} as v0_8.Types.AnyComponentNode;
       // Note: setData is a public method that does not use the key-value format
-      processor.setData(component, "/a/b/c", "value");
-      const data = processor.getData(component, "/a/b/c");
-      assert.strictEqual(data, "value");
+      processor.setData(component, '/a/b/c', 'value');
+      const data = processor.getData(component, '/a/b/c');
+      assert.strictEqual(data, 'value');
     });
 
-    it("should handle paths correctly", () => {
-      const path1 = processor.resolvePath("/a/b/c", "/value");
-      const path2 = processor.resolvePath("a/b/c", "/value/");
-      const path3 = processor.resolvePath("a/b/c", "/value");
+    it('should handle paths correctly', () => {
+      const path1 = processor.resolvePath('/a/b/c', '/value');
+      const path2 = processor.resolvePath('a/b/c', '/value/');
+      const path3 = processor.resolvePath('a/b/c', '/value');
 
-      assert.strictEqual(path1, "/a/b/c");
-      assert.strictEqual(path2, "/value/a/b/c");
-      assert.strictEqual(path3, "/value/a/b/c");
+      assert.strictEqual(path1, '/a/b/c');
+      assert.strictEqual(path2, '/value/a/b/c');
+      assert.strictEqual(path3, '/value/a/b/c');
     });
 
-    it.skip("should correctly parse nested valueMap structures", () => {
+    it.skip('should correctly parse nested valueMap structures', () => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/data",
+            surfaceId: '@default',
+            path: '/data',
             contents: [
               {
-                key: "users", // /data/users
+                key: 'users', // /data/users
                 valueMap: [
                   {
-                    key: "user1", // /data/users/user1
+                    key: 'user1', // /data/users/user1
                     valueMap: [
                       {
-                        key: "firstName",
-                        valueString: "Alice",
+                        key: 'firstName',
+                        valueString: 'Alice',
                       },
                       {
-                        key: "lastName",
-                        valueString: "Doe",
+                        key: 'lastName',
+                        valueString: 'Doe',
                       },
                     ],
                   },
                   {
-                    key: "user2", // /data/users/user2
+                    key: 'user2', // /data/users/user2
                     valueMap: [
                       {
-                        key: "firstName",
-                        valueString: "John",
+                        key: 'firstName',
+                        valueString: 'John',
                       },
                       {
-                        key: "lastName",
-                        valueString: "Doe",
+                        key: 'lastName',
+                        valueString: 'Doe',
                       },
                     ],
                   },
@@ -237,24 +230,24 @@ describe("A2uiMessageProcessor", () => {
       ]);
 
       const info = processor.getData(
-        { dataContextPath: "/" } as v0_8.Types.AnyComponentNode,
-        "/data/users"
+        {dataContextPath: '/'} as v0_8.Types.AnyComponentNode,
+        '/data/users',
       );
 
       // The expected result is a Map of Maps.
       const expected = new Map([
         [
-          "user1",
+          'user1',
           new Map([
-            ["firstName", "Alice"],
-            ["lastName", "Doe"],
+            ['firstName', 'Alice'],
+            ['lastName', 'Doe'],
           ]),
         ],
         [
-          "user2",
+          'user2',
           new Map([
-            ["firstName", "John"],
-            ["lastName", "Doe"],
+            ['firstName', 'John'],
+            ['lastName', 'Doe'],
           ]),
         ],
       ]);
@@ -262,13 +255,13 @@ describe("A2uiMessageProcessor", () => {
       assert.deepEqual(info, expected);
     });
 
-    it.skip("should additively update a Map using numeric-string keys (like timestamps)", () => {
+    it.skip('should additively update a Map using numeric-string keys (like timestamps)', () => {
       // 1. First, establish the /messages path as a Map.
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/messages",
+            surfaceId: '@default',
+            path: '/messages',
             contents: [
               // Sending an empty key-value array creates an empty Map at the path.
             ],
@@ -276,18 +269,18 @@ describe("A2uiMessageProcessor", () => {
         },
       ]);
 
-      const key1 = "1700000000001";
-      const message1 = "Hello";
+      const key1 = '1700000000001';
+      const message1 = 'Hello';
 
       // 2. Add the first message.
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             path: `/messages/${key1}`,
             contents: [
               {
-                key: ".",
+                key: '.',
                 valueString: message1,
               },
             ],
@@ -296,8 +289,8 @@ describe("A2uiMessageProcessor", () => {
       ]);
 
       let messagesData = processor.getData(
-        { dataContextPath: "/" } as v0_8.Types.AnyComponentNode,
-        "/messages"
+        {dataContextPath: '/'} as v0_8.Types.AnyComponentNode,
+        '/messages',
       );
 
       // Check that it's a Map and has the first item.
@@ -305,18 +298,18 @@ describe("A2uiMessageProcessor", () => {
       assert.strictEqual((messagesData as Types.DataMap).size, 1);
       assert.strictEqual((messagesData as Types.DataMap).get(key1), message1);
 
-      const key2 = "1700000000002";
-      const message2 = "World";
+      const key2 = '1700000000002';
+      const message2 = 'World';
 
       // 3. Add the second message. This is where the old logic would fail.
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             path: `/messages/${key2}`,
             contents: [
               {
-                key: ".",
+                key: '.',
                 valueString: message2,
               },
             ],
@@ -325,43 +318,39 @@ describe("A2uiMessageProcessor", () => {
       ]);
 
       messagesData = processor.getData(
-        { dataContextPath: "/" } as v0_8.Types.AnyComponentNode,
-        "/messages"
+        {dataContextPath: '/'} as v0_8.Types.AnyComponentNode,
+        '/messages',
       );
 
       // 4. Check that the Map was additively updated and now has both items.
       assertIsDataMap(messagesData);
-      assert.strictEqual((messagesData as Types.DataMap).size, 2, "Map should have 2 items total");
-      assert.strictEqual(
-        (messagesData as Types.DataMap).get(key1),
-        message1,
-        "First item correct"
-      );
+      assert.strictEqual((messagesData as Types.DataMap).size, 2, 'Map should have 2 items total');
+      assert.strictEqual((messagesData as Types.DataMap).get(key1), message1, 'First item correct');
       assert.strictEqual(
         (messagesData as Types.DataMap).get(key2),
         message2,
-        "Second item correct"
+        'Second item correct',
       );
     });
   });
 
-  describe("Component Tree Building", () => {
-    it("should build a simple parent-child tree", () => {
+  describe('Component Tree Building', () => {
+    it('should build a simple parent-child tree', () => {
       processor.processMessages([
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
               {
-                id: "root",
+                id: 'root',
                 component: {
-                  Column: { children: { explicitList: ["child"] } },
+                  Column: {children: {explicitList: ['child']}},
                 },
               },
               {
-                id: "child",
+                id: 'child',
                 component: {
-                  Text: { usageHint: "body", text: { literalString: "Hello" } },
+                  Text: {usageHint: 'body', text: {literalString: 'Hello'}},
                 },
               },
             ],
@@ -369,31 +358,31 @@ describe("A2uiMessageProcessor", () => {
         },
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ]);
 
-      const tree = processor.getSurfaces().get("@default")?.componentTree;
+      const tree = processor.getSurfaces().get('@default')?.componentTree;
       const plainTree = toPlainObject(tree);
 
-      assert.strictEqual(plainTree.id, "root");
-      assert.strictEqual(plainTree.type, "Column");
+      assert.strictEqual(plainTree.id, 'root');
+      assert.strictEqual(plainTree.type, 'Column');
       assert.strictEqual(plainTree.properties.children.length, 1);
-      assert.strictEqual(plainTree.properties.children[0].id, "child");
-      assert.strictEqual(plainTree.properties.children[0].type, "Text");
+      assert.strictEqual(plainTree.properties.children[0].id, 'child');
+      assert.strictEqual(plainTree.properties.children[0].type, 'Text');
     });
 
-    it("should throw an error on circular dependencies", () => {
+    it('should throw an error on circular dependencies', () => {
       // First, load the components
       processor.processMessages([
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
-              { id: "a", component: { Card: { child: "b" } } },
-              { id: "b", component: { Card: { child: "a" } } },
+              {id: 'a', component: {Card: {child: 'b'}}},
+              {id: 'b', component: {Card: {child: 'a'}}},
             ],
           },
         },
@@ -404,178 +393,174 @@ describe("A2uiMessageProcessor", () => {
         processor.processMessages([
           {
             beginRendering: {
-              root: "a",
-              surfaceId: "@default",
+              root: 'a',
+              surfaceId: '@default',
             },
           },
         ]);
       }, new A2uiStateError(`Circular dependency for component "a".`));
 
-      const tree = processor.getSurfaces().get("@default")?.componentTree;
-      assert.strictEqual(
-        tree,
-        null,
-        "Tree should be null due to circular dependency"
-      );
+      const tree = processor.getSurfaces().get('@default')?.componentTree;
+      assert.strictEqual(tree, null, 'Tree should be null due to circular dependency');
     });
 
-    it("should correctly expand a template with `dataBinding`", () => {
+    it('should correctly expand a template with `dataBinding`', () => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
+            surfaceId: '@default',
+            path: '/',
             contents: [
               {
-                key: "items",
-                valueString: JSON.stringify([{ name: "A" }, { name: "B" }]),
+                key: 'items',
+                valueString: JSON.stringify([{name: 'A'}, {name: 'B'}]),
               },
             ],
           },
         },
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
               {
-                id: "root",
+                id: 'root',
                 component: {
                   List: {
                     children: {
                       template: {
-                        componentId: "item-template",
-                        dataBinding: "/items",
+                        componentId: 'item-template',
+                        dataBinding: '/items',
                       },
                     },
                   },
                 },
               },
               {
-                id: "item-template",
-                component: { Text: { usageHint: "body", text: { path: "/name" } } },
+                id: 'item-template',
+                component: {Text: {usageHint: 'body', text: {path: '/name'}}},
               },
             ],
           },
         },
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ]);
 
-      const tree = processor.getSurfaces().get("@default")?.componentTree;
+      const tree = processor.getSurfaces().get('@default')?.componentTree;
       const plainTree = toPlainObject(tree);
 
       assert.strictEqual(plainTree.properties.children.length, 2);
 
       // Check first generated child.
       const child1 = plainTree.properties.children[0];
-      assert.strictEqual(child1.id, "item-template:0");
-      assert.strictEqual(child1.type, "Text");
-      assert.strictEqual(child1.dataContextPath, "/items/0");
-      assert.deepStrictEqual(child1.properties.text, { path: "name" });
+      assert.strictEqual(child1.id, 'item-template:0');
+      assert.strictEqual(child1.type, 'Text');
+      assert.strictEqual(child1.dataContextPath, '/items/0');
+      assert.deepStrictEqual(child1.properties.text, {path: 'name'});
 
       // Check second generated child.
       const child2 = plainTree.properties.children[1];
-      assert.strictEqual(child2.id, "item-template:1");
-      assert.strictEqual(child2.type, "Text");
-      assert.strictEqual(child2.dataContextPath, "/items/1");
-      assert.deepStrictEqual(child2.properties.text, { path: "name" });
+      assert.strictEqual(child2.id, 'item-template:1');
+      assert.strictEqual(child2.type, 'Text');
+      assert.strictEqual(child2.dataContextPath, '/items/1');
+      assert.deepStrictEqual(child2.properties.text, {path: 'name'});
     });
 
-    it("should rebuild the tree when data for a template arrives later", () => {
+    it('should rebuild the tree when data for a template arrives later', () => {
       processor.processMessages([
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
               {
-                id: "root",
+                id: 'root',
                 component: {
                   List: {
                     children: {
                       template: {
-                        componentId: "item-template",
-                        dataBinding: "/items",
+                        componentId: 'item-template',
+                        dataBinding: '/items',
                       },
                     },
                   },
                 },
               },
               {
-                id: "item-template",
-                component: { Text: { usageHint: "body", text: { path: "/name" } } },
+                id: 'item-template',
+                component: {Text: {usageHint: 'body', text: {path: '/name'}}},
               },
             ],
           },
         },
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ]);
 
-      let tree = processor.getSurfaces().get("@default")?.componentTree;
+      let tree = processor.getSurfaces().get('@default')?.componentTree;
       assert.strictEqual(
         toPlainObject(tree).properties.children.length,
         0,
-        "Children should be empty before data arrives"
+        'Children should be empty before data arrives',
       );
 
       // Now, the data arrives.
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
+            surfaceId: '@default',
+            path: '/',
             contents: [
               {
-                key: "items",
-                valueString: JSON.stringify([{ name: "A" }, { name: "B" }]),
+                key: 'items',
+                valueString: JSON.stringify([{name: 'A'}, {name: 'B'}]),
               },
             ],
           },
         },
       ]);
 
-      tree = processor.getSurfaces().get("@default")?.componentTree;
+      tree = processor.getSurfaces().get('@default')?.componentTree;
       assert.strictEqual(
         toPlainObject(tree).properties.children.length,
         2,
-        "Children should be populated after data arrives"
+        'Children should be populated after data arrives',
       );
     });
 
-    it("should trim relative paths within a data context (./item)", () => {
+    it('should trim relative paths within a data context (./item)', () => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
+            surfaceId: '@default',
+            path: '/',
             contents: [
               {
-                key: "items",
-                valueString: JSON.stringify([{ name: "A" }, { name: "B" }]),
+                key: 'items',
+                valueString: JSON.stringify([{name: 'A'}, {name: 'B'}]),
               },
             ],
           },
         },
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
               {
-                id: "root",
+                id: 'root',
                 component: {
                   List: {
                     children: {
                       template: {
-                        componentId: "item-template",
-                        dataBinding: "/items",
+                        componentId: 'item-template',
+                        dataBinding: '/items',
                       },
                     },
                   },
@@ -583,57 +568,57 @@ describe("A2uiMessageProcessor", () => {
               },
               // These paths would are typical when a databinding is used.
               {
-                id: "item-template",
-                component: { Text: { usageHint: "body", text: { path: "./item/name" } } },
+                id: 'item-template',
+                component: {Text: {usageHint: 'body', text: {path: './item/name'}}},
               },
             ],
           },
         },
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ]);
 
-      const tree = processor.getSurfaces().get("@default")?.componentTree;
+      const tree = processor.getSurfaces().get('@default')?.componentTree;
       const plainTree = toPlainObject(tree);
       const child1 = plainTree.properties.children[0];
       const child2 = plainTree.properties.children[1];
 
       // The processor should have trimmed `/item` and `./` from the path
       // because we are inside a data context.
-      assert.deepEqual(child1.properties.text, { path: "name" });
-      assert.deepEqual(child2.properties.text, { path: "name" });
+      assert.deepEqual(child1.properties.text, {path: 'name'});
+      assert.deepEqual(child2.properties.text, {path: 'name'});
     });
 
-    it("should trim relative paths within a data context (./name)", () => {
+    it('should trim relative paths within a data context (./name)', () => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
+            surfaceId: '@default',
+            path: '/',
             contents: [
               {
-                key: "items",
-                valueString: JSON.stringify([{ name: "A" }, { name: "B" }]),
+                key: 'items',
+                valueString: JSON.stringify([{name: 'A'}, {name: 'B'}]),
               },
             ],
           },
         },
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
               {
-                id: "root",
+                id: 'root',
                 component: {
                   List: {
                     children: {
                       template: {
-                        componentId: "item-template",
-                        dataBinding: "/items",
+                        componentId: 'item-template',
+                        dataBinding: '/items',
                       },
                     },
                   },
@@ -641,43 +626,43 @@ describe("A2uiMessageProcessor", () => {
               },
               // These paths would are typical when a databinding is used.
               {
-                id: "item-template",
-                component: { Text: { usageHint: "body", text: { path: "./name" } } },
+                id: 'item-template',
+                component: {Text: {usageHint: 'body', text: {path: './name'}}},
               },
             ],
           },
         },
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ]);
 
-      const tree = processor.getSurfaces().get("@default")?.componentTree;
+      const tree = processor.getSurfaces().get('@default')?.componentTree;
       const plainTree = toPlainObject(tree);
       const child1 = plainTree.properties.children[0];
       const child2 = plainTree.properties.children[1];
 
       // The processor should have trimmed `./` from the path
       // because we are inside a data context.
-      assert.deepEqual(child1.properties.text, { path: "name" });
-      assert.deepEqual(child2.properties.text, { path: "name" });
+      assert.deepEqual(child1.properties.text, {path: 'name'});
+      assert.deepEqual(child2.properties.text, {path: 'name'});
     });
   });
 
-  describe("Data Normalization and Parsing", () => {
-    it("should correctly handle and parse the key-value array data format at the root", () => {
+  describe('Data Normalization and Parsing', () => {
+    it('should correctly handle and parse the key-value array data format at the root', () => {
       const messages = [
         {
           dataModelUpdate: {
-            surfaceId: "test-surface",
-            path: "/",
+            surfaceId: 'test-surface',
+            path: '/',
             contents: [
-              { key: "title", valueString: "My Title" },
+              {key: 'title', valueString: 'My Title'},
               {
-                key: "items",
+                key: 'items',
                 valueString: '[{"id": 1}, {"id": 2}]',
               },
             ],
@@ -687,195 +672,195 @@ describe("A2uiMessageProcessor", () => {
 
       processor.processMessages(messages);
 
-      const component = { dataContextPath: "/" } as v0_8.Types.AnyComponentNode;
-      const title = processor.getData(component, "/title", "test-surface");
-      const items = processor.getData(component, "/items", "test-surface");
+      const component = {dataContextPath: '/'} as v0_8.Types.AnyComponentNode;
+      const title = processor.getData(component, '/title', 'test-surface');
+      const items = processor.getData(component, '/items', 'test-surface');
 
-      assert.strictEqual(title, "My Title");
-      assert.deepStrictEqual(toPlainObject(items), [{ id: 1 }, { id: 2 }]);
+      assert.strictEqual(title, 'My Title');
+      assert.deepStrictEqual(toPlainObject(items), [{id: 1}, {id: 2}]);
     });
 
-    it("should fallback to a string if stringified JSON is invalid", () => {
+    it('should fallback to a string if stringified JSON is invalid', () => {
       const invalidJSON = '[{"id": 1}, {"id": 2}'; // Missing closing bracket
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
-            contents: [{ key: "badData", valueString: invalidJSON }],
+            surfaceId: '@default',
+            path: '/',
+            contents: [{key: 'badData', valueString: invalidJSON}],
           },
         },
       ]);
 
-      const component = { dataContextPath: "/" } as v0_8.Types.AnyComponentNode;
-      const badData = processor.getData(component, "/badData");
+      const component = {dataContextPath: '/'} as v0_8.Types.AnyComponentNode;
+      const badData = processor.getData(component, '/badData');
       assert.strictEqual(badData, invalidJSON);
     });
   });
 
-  describe("Complex Template Scenarios", () => {
-    it.skip("should correctly expand a template with dataBinding to a Map (from valueMap)", () => {
+  describe('Complex Template Scenarios', () => {
+    it.skip('should correctly expand a template with dataBinding to a Map (from valueMap)', () => {
       const messages = [
         {
           beginRendering: {
-            surfaceId: "default",
-            root: "root-column",
+            surfaceId: 'default',
+            root: 'root-column',
           },
         },
         {
           surfaceUpdate: {
-            surfaceId: "default",
+            surfaceId: 'default',
             components: [
               {
-                id: "root-column",
+                id: 'root-column',
                 component: {
                   Column: {
                     children: {
-                      explicitList: ["title-heading", "item-list"],
+                      explicitList: ['title-heading', 'item-list'],
                     },
                   },
                 },
               },
               {
-                id: "title-heading",
+                id: 'title-heading',
                 component: {
                   Text: {
-                    usageHint: "body",
+                    usageHint: 'body',
                     text: {
-                      literalString: "Top Restaurants",
+                      literalString: 'Top Restaurants',
                     },
                   },
                 },
               },
               {
-                id: "item-list",
+                id: 'item-list',
                 component: {
                   List: {
-                    direction: "vertical",
+                    direction: 'vertical',
                     children: {
                       template: {
-                        componentId: "item-card-template",
-                        dataBinding: "/items",
+                        componentId: 'item-card-template',
+                        dataBinding: '/items',
                       },
                     },
                   },
                 },
               },
               {
-                id: "item-card-template",
+                id: 'item-card-template',
                 component: {
                   Card: {
-                    child: "card-layout",
+                    child: 'card-layout',
                   },
                 },
               },
               {
-                id: "card-layout",
+                id: 'card-layout',
                 component: {
                   Row: {
                     children: {
-                      explicitList: ["template-image", "card-details"],
+                      explicitList: ['template-image', 'card-details'],
                     },
                   },
                 },
               },
               {
-                id: "template-image",
+                id: 'template-image',
                 weight: 1,
                 component: {
                   Image: {
-                    usageHint: "largeFeature",
+                    usageHint: 'largeFeature',
                     url: {
-                      path: "imageUrl",
+                      path: 'imageUrl',
                     },
                   },
                 },
               },
               {
-                id: "card-details",
+                id: 'card-details',
                 weight: 2,
                 component: {
                   Column: {
                     children: {
                       explicitList: [
-                        "template-name",
-                        "template-rating",
-                        "template-detail",
-                        "template-link",
-                        "template-book-button",
+                        'template-name',
+                        'template-rating',
+                        'template-detail',
+                        'template-link',
+                        'template-book-button',
                       ],
                     },
                   },
                 },
               },
               {
-                id: "template-name",
+                id: 'template-name',
                 component: {
                   Text: {
-                    usageHint: "body",
+                    usageHint: 'body',
                     text: {
-                      path: "name",
+                      path: 'name',
                     },
                   },
                 },
               },
               {
-                id: "template-rating",
+                id: 'template-rating',
                 component: {
                   Text: {
-                    usageHint: "body",
+                    usageHint: 'body',
                     text: {
-                      path: "rating",
+                      path: 'rating',
                     },
                   },
                 },
               },
               {
-                id: "template-detail",
+                id: 'template-detail',
                 component: {
                   Text: {
-                    usageHint: "body",
+                    usageHint: 'body',
                     text: {
-                      path: "detail",
+                      path: 'detail',
                     },
                   },
                 },
               },
               {
-                id: "template-link",
+                id: 'template-link',
                 component: {
                   Text: {
-                    usageHint: "body",
+                    usageHint: 'body',
                     text: {
-                      path: "infoLink",
+                      path: 'infoLink',
                     },
                   },
                 },
               },
               {
-                id: "template-book-button",
+                id: 'template-book-button',
                 component: {
                   Button: {
-                    child: "book-now-text",
+                    child: 'book-now-text',
                     action: {
-                      name: "book_restaurant",
+                      name: 'book_restaurant',
                       context: [
                         {
-                          key: "restaurantName",
+                          key: 'restaurantName',
                           value: {
-                            path: "name",
+                            path: 'name',
                           },
                         },
                         {
-                          key: "imageUrl",
+                          key: 'imageUrl',
                           value: {
-                            path: "imageUrl",
+                            path: 'imageUrl',
                           },
                         },
                         {
-                          key: "address",
+                          key: 'address',
                           value: {
-                            path: "address",
+                            path: 'address',
                           },
                         },
                       ],
@@ -884,12 +869,12 @@ describe("A2uiMessageProcessor", () => {
                 },
               },
               {
-                id: "book-now-text",
+                id: 'book-now-text',
                 component: {
                   Text: {
-                    usageHint: "body",
+                    usageHint: 'body',
                     text: {
-                      literalString: "Book Now",
+                      literalString: 'Book Now',
                     },
                   },
                 },
@@ -899,160 +884,154 @@ describe("A2uiMessageProcessor", () => {
         },
         {
           dataModelUpdate: {
-            surfaceId: "default",
-            path: "/",
+            surfaceId: 'default',
+            path: '/',
             contents: [
               {
-                key: "items",
+                key: 'items',
                 valueMap: [
                   {
-                    key: "item1",
+                    key: 'item1',
                     valueMap: [
                       {
-                        key: "name",
-                        valueString: "Business 1",
+                        key: 'name',
+                        valueString: 'Business 1',
                       },
                       {
-                        key: "rating",
-                        valueString: "★★★★☆",
+                        key: 'rating',
+                        valueString: '★★★★☆',
                       },
                       {
-                        key: "detail",
-                        valueString: "Spicy and savory hand-pulled noodles.",
+                        key: 'detail',
+                        valueString: 'Spicy and savory hand-pulled noodles.',
                       },
                       {
-                        key: "infoLink",
-                        valueString: "[More Info](https://www.example.com/)",
+                        key: 'infoLink',
+                        valueString: '[More Info](https://www.example.com/)',
                       },
                       {
-                        key: "imageUrl",
-                        valueString:
-                          "http://www.example.com/static/shrimpchowmein.jpeg",
+                        key: 'imageUrl',
+                        valueString: 'http://www.example.com/static/shrimpchowmein.jpeg',
                       },
                       {
-                        key: "address",
-                        valueString: "Address 1",
+                        key: 'address',
+                        valueString: 'Address 1',
                       },
                     ],
                   },
                   {
-                    key: "item2",
+                    key: 'item2',
                     valueMap: [
                       {
-                        key: "name",
-                        valueString: "Business 2",
+                        key: 'name',
+                        valueString: 'Business 2',
                       },
                       {
-                        key: "rating",
-                        valueString: "★★★★☆",
+                        key: 'rating',
+                        valueString: '★★★★☆',
                       },
                       {
-                        key: "detail",
-                        valueString: "Authentic and real.",
+                        key: 'detail',
+                        valueString: 'Authentic and real.',
                       },
                       {
-                        key: "infoLink",
-                        valueString: "[More Info](https://www.example.com/)",
+                        key: 'infoLink',
+                        valueString: '[More Info](https://www.example.com/)',
                       },
                       {
-                        key: "imageUrl",
-                        valueString:
-                          "http://www.example.com/static/mapotofu.jpeg",
+                        key: 'imageUrl',
+                        valueString: 'http://www.example.com/static/mapotofu.jpeg',
                       },
                       {
-                        key: "address",
-                        valueString: "Address 2",
+                        key: 'address',
+                        valueString: 'Address 2',
                       },
                     ],
                   },
                   {
-                    key: "item3",
+                    key: 'item3',
                     valueMap: [
                       {
-                        key: "name",
-                        valueString: "Business 3",
+                        key: 'name',
+                        valueString: 'Business 3',
                       },
                       {
-                        key: "rating",
-                        valueString: "★★★★☆",
+                        key: 'rating',
+                        valueString: '★★★★☆',
                       },
                       {
-                        key: "detail",
-                        valueString:
-                          "Modern food with a farm-to-table approach.",
+                        key: 'detail',
+                        valueString: 'Modern food with a farm-to-table approach.',
                       },
                       {
-                        key: "infoLink",
-                        valueString: "[More Info](https://www.example.com/)",
+                        key: 'infoLink',
+                        valueString: '[More Info](https://www.example.com/)',
                       },
                       {
-                        key: "imageUrl",
-                        valueString:
-                          "http://www.example.com/static/beefbroccoli.jpeg",
+                        key: 'imageUrl',
+                        valueString: 'http://www.example.com/static/beefbroccoli.jpeg',
                       },
                       {
-                        key: "address",
-                        valueString: "Address 3",
+                        key: 'address',
+                        valueString: 'Address 3',
                       },
                     ],
                   },
                   {
-                    key: "item4",
+                    key: 'item4',
                     valueMap: [
                       {
-                        key: "name",
-                        valueString: "Business 4",
+                        key: 'name',
+                        valueString: 'Business 4',
                       },
                       {
-                        key: "rating",
-                        valueString: "★★★★★",
+                        key: 'rating',
+                        valueString: '★★★★★',
                       },
                       {
-                        key: "detail",
-                        valueString: "Upscale dining.",
+                        key: 'detail',
+                        valueString: 'Upscale dining.',
                       },
                       {
-                        key: "infoLink",
-                        valueString: "[More Info](https://www.example.com/)",
+                        key: 'infoLink',
+                        valueString: '[More Info](https://www.example.com/)',
                       },
                       {
-                        key: "imageUrl",
-                        valueString:
-                          "http://www.example.com/static/springrolls.jpeg",
+                        key: 'imageUrl',
+                        valueString: 'http://www.example.com/static/springrolls.jpeg',
                       },
                       {
-                        key: "address",
-                        valueString: "Address 4",
+                        key: 'address',
+                        valueString: 'Address 4',
                       },
                     ],
                   },
                   {
-                    key: "item5",
+                    key: 'item5',
                     valueMap: [
                       {
-                        key: "name",
-                        valueString: "Business 5",
+                        key: 'name',
+                        valueString: 'Business 5',
                       },
                       {
-                        key: "rating",
-                        valueString: "★★★★☆",
+                        key: 'rating',
+                        valueString: '★★★★☆',
                       },
                       {
-                        key: "detail",
-                        valueString: "Famous for its noodles.",
+                        key: 'detail',
+                        valueString: 'Famous for its noodles.',
                       },
                       {
-                        key: "infoLink",
-                        valueString: "[More Info](https://www.example.com/)",
+                        key: 'infoLink',
+                        valueString: '[More Info](https://www.example.com/)',
                       },
                       {
-                        key: "imageUrl",
-                        valueString:
-                          "http://www.example.com/static/kungpao.jpeg",
+                        key: 'imageUrl',
+                        valueString: 'http://www.example.com/static/kungpao.jpeg',
                       },
                       {
-                        key: "address",
-                        valueString: "Address 5",
+                        key: 'address',
+                        valueString: 'Address 5',
                       },
                     ],
                   },
@@ -1064,12 +1043,12 @@ describe("A2uiMessageProcessor", () => {
       ];
 
       processor.processMessages(messages);
-      const tree = processor.getSurfaces().get("default")?.componentTree;
+      const tree = processor.getSurfaces().get('default')?.componentTree;
       const plainTree = toPlainObject(tree);
 
       // 1. Find the "item-list" component (the List)
       const itemList = plainTree.properties.children[1];
-      assert.strictEqual(itemList.id, "item-list");
+      assert.strictEqual(itemList.id, 'item-list');
 
       // 2. Check that it expanded 5 children from the Map
       const templateChildren = itemList.properties.children;
@@ -1077,43 +1056,43 @@ describe("A2uiMessageProcessor", () => {
 
       // 3. Check the first generated child for correct key-based ID and data context
       const child1 = templateChildren[0];
-      assert.strictEqual(child1.id, "item-card-template:item1");
-      assert.strictEqual(child1.dataContextPath, "/items/item1");
+      assert.strictEqual(child1.id, 'item-card-template:item1');
+      assert.strictEqual(child1.dataContextPath, '/items/item1');
 
       // 4. Go deeper to check the data binding on a nested component
       // Path: Card -> Row -> Column -> Heading
       const child1NameHeading =
         child1.properties.child.properties.children[1].properties.children[0];
-      assert.strictEqual(child1NameHeading.id, "template-name:item1");
-      assert.strictEqual(child1NameHeading.dataContextPath, "/items/item1");
+      assert.strictEqual(child1NameHeading.id, 'template-name:item1');
+      assert.strictEqual(child1NameHeading.dataContextPath, '/items/item1');
       assert.deepStrictEqual(child1NameHeading.properties.text, {
-        path: "name",
+        path: 'name',
       });
 
       // 5. Check the second generated child
       const child2 = templateChildren[1];
-      assert.strictEqual(child2.id, "item-card-template:item2");
-      assert.strictEqual(child2.dataContextPath, "/items/item2");
+      assert.strictEqual(child2.id, 'item-card-template:item2');
+      assert.strictEqual(child2.dataContextPath, '/items/item2');
     });
 
-    it("should correctly expand nested templates with layered data contexts", () => {
+    it('should correctly expand nested templates with layered data contexts', () => {
       const messages = [
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
+            surfaceId: '@default',
+            path: '/',
             contents: [
               {
-                key: "days",
+                key: 'days',
                 // The correct way to send an array of objects is as a stringified JSON.
                 valueString: JSON.stringify([
                   {
-                    title: "Day 1",
-                    activities: ["Morning Walk", "Museum Visit"],
+                    title: 'Day 1',
+                    activities: ['Morning Walk', 'Museum Visit'],
                   },
                   {
-                    title: "Day 2",
-                    activities: ["Market Trip"],
+                    title: 'Day 2',
+                    activities: ['Market Trip'],
                   },
                 ]),
               },
@@ -1122,227 +1101,219 @@ describe("A2uiMessageProcessor", () => {
         },
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
               {
-                id: "root",
+                id: 'root',
                 component: {
                   List: {
                     children: {
                       template: {
-                        componentId: "day-list",
-                        dataBinding: "/days",
+                        componentId: 'day-list',
+                        dataBinding: '/days',
                       },
                     },
                   },
                 },
               },
               {
-                id: "day-list",
+                id: 'day-list',
                 component: {
                   Column: {
-                    children: { explicitList: ["day-title", "activity-list"] },
+                    children: {explicitList: ['day-title', 'activity-list']},
                   },
                 },
               },
               {
-                id: "day-title",
+                id: 'day-title',
                 component: {
-                  Text: { usageHint: "body", text: { path: "title" } },
+                  Text: {usageHint: 'body', text: {path: 'title'}},
                 },
               },
               {
-                id: "activity-list",
+                id: 'activity-list',
                 component: {
                   List: {
                     children: {
                       template: {
-                        componentId: "activity-text",
-                        dataBinding: "activities",
+                        componentId: 'activity-text',
+                        dataBinding: 'activities',
                       },
                     },
                   },
                 },
               },
               {
-                id: "activity-text",
-                component: { Text: { usageHint: "body", text: { path: "." } } },
+                id: 'activity-text',
+                component: {Text: {usageHint: 'body', text: {path: '.'}}},
               },
             ],
           },
         },
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ];
 
       processor.processMessages(messages);
-      const tree = processor.getSurfaces().get("@default")?.componentTree;
+      const tree = processor.getSurfaces().get('@default')?.componentTree;
       const plainTree = toPlainObject(tree);
 
       // Assert Day 1 structure
       const day1 = plainTree.properties.children[0];
-      assert.strictEqual(day1.dataContextPath, "/days/0");
+      assert.strictEqual(day1.dataContextPath, '/days/0');
       const day1Activities = day1.properties.children[1].properties.children;
 
       assert.strictEqual(day1Activities.length, 2);
-      assert.strictEqual(day1Activities[0].id, "activity-text:0:0");
-      assert.strictEqual(
-        day1Activities[0].dataContextPath,
-        "/days/0/activities/0"
-      );
+      assert.strictEqual(day1Activities[0].id, 'activity-text:0:0');
+      assert.strictEqual(day1Activities[0].dataContextPath, '/days/0/activities/0');
       assert.deepStrictEqual(day1.properties.children[0].properties.text, {
-        path: "title",
+        path: 'title',
       });
-      assert.deepStrictEqual(day1Activities[0].properties.text, { path: "." });
+      assert.deepStrictEqual(day1Activities[0].properties.text, {path: '.'});
 
       // Assert Day 2 structure
       const day2 = plainTree.properties.children[1];
-      assert.strictEqual(day2.dataContextPath, "/days/1");
+      assert.strictEqual(day2.dataContextPath, '/days/1');
       const day2Activities = day2.properties.children[1].properties.children;
       assert.strictEqual(day2Activities.length, 1);
-      assert.strictEqual(day2Activities[0].id, "activity-text:1:0");
-      assert.strictEqual(
-        day2Activities[0].dataContextPath,
-        "/days/1/activities/0"
-      );
+      assert.strictEqual(day2Activities[0].id, 'activity-text:1:0');
+      assert.strictEqual(day2Activities[0].dataContextPath, '/days/1/activities/0');
       assert.deepStrictEqual(day2.properties.children[0].properties.text, {
-        path: "title",
+        path: 'title',
       });
-      assert.deepStrictEqual(day2Activities[0].properties.text, { path: "." });
+      assert.deepStrictEqual(day2Activities[0].properties.text, {path: '.'});
     });
 
     it("should correctly bind to primitive values in an array using path: '.'", () => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "@default",
-            path: "/",
+            surfaceId: '@default',
+            path: '/',
             contents: [
               {
-                key: "tags",
-                valueString: JSON.stringify(["travel", "paris", "guide"]),
+                key: 'tags',
+                valueString: JSON.stringify(['travel', 'paris', 'guide']),
               },
             ],
           },
         },
         {
           surfaceUpdate: {
-            surfaceId: "@default",
+            surfaceId: '@default',
             components: [
               {
-                id: "root",
+                id: 'root',
                 component: {
                   Row: {
                     children: {
-                      template: { componentId: "tag", dataBinding: "/tags" },
+                      template: {componentId: 'tag', dataBinding: '/tags'},
                     },
                   },
                 },
               },
-              { id: "tag", component: { Text: { usageHint: "body", text: { path: "." } } } },
+              {id: 'tag', component: {Text: {usageHint: 'body', text: {path: '.'}}}},
             ],
           },
         },
         {
           beginRendering: {
-            root: "root",
-            surfaceId: "@default",
+            root: 'root',
+            surfaceId: '@default',
           },
         },
       ]);
 
-      const tree = processor.getSurfaces().get("@default")?.componentTree;
+      const tree = processor.getSurfaces().get('@default')?.componentTree;
       const plainTree = toPlainObject(tree);
       const children = plainTree.properties.children;
 
       assert.strictEqual(children.length, 3);
-      assert.strictEqual(children[0].dataContextPath, "/tags/0");
-      assert.deepEqual(children[0].properties.text, { path: "." });
-      assert.strictEqual(children[1].dataContextPath, "/tags/1");
-      assert.deepEqual(children[1].properties.text, { path: "." });
+      assert.strictEqual(children[0].dataContextPath, '/tags/0');
+      assert.deepEqual(children[0].properties.text, {path: '.'});
+      assert.strictEqual(children[1].dataContextPath, '/tags/1');
+      assert.deepEqual(children[1].properties.text, {path: '.'});
     });
   });
 
-  describe("Multi-Surface Interaction", () => {
-    it("should keep data and components for different surfaces separate", () => {
+  describe('Multi-Surface Interaction', () => {
+    it('should keep data and components for different surfaces separate', () => {
       processor.processMessages([
         // Surface A
         {
           dataModelUpdate: {
-            surfaceId: "A",
-            path: "/",
-            contents: [{ key: "name", valueString: "Surface A Data" }],
+            surfaceId: 'A',
+            path: '/',
+            contents: [{key: 'name', valueString: 'Surface A Data'}],
           },
         },
         {
           surfaceUpdate: {
-            surfaceId: "A",
+            surfaceId: 'A',
             components: [
               {
-                id: "comp-a",
-                component: { Text: { usageHint: "body", text: { path: "/name" } } },
+                id: 'comp-a',
+                component: {Text: {usageHint: 'body', text: {path: '/name'}}},
               },
             ],
           },
         },
-        { beginRendering: { root: "comp-a", surfaceId: "A" } },
+        {beginRendering: {root: 'comp-a', surfaceId: 'A'}},
         // Surface B
         {
           dataModelUpdate: {
-            surfaceId: "B",
-            path: "/",
-            contents: [{ key: "name", valueString: "Surface B Data" }],
+            surfaceId: 'B',
+            path: '/',
+            contents: [{key: 'name', valueString: 'Surface B Data'}],
           },
         },
         {
           surfaceUpdate: {
-            surfaceId: "B",
+            surfaceId: 'B',
             components: [
               {
-                id: "comp-b",
-                component: { Text: { usageHint: "body", text: { path: "/name" } } },
+                id: 'comp-b',
+                component: {Text: {usageHint: 'body', text: {path: '/name'}}},
               },
             ],
           },
         },
-        { beginRendering: { root: "comp-b", surfaceId: "B" } },
+        {beginRendering: {root: 'comp-b', surfaceId: 'B'}},
       ]);
 
       const surfaces = processor.getSurfaces();
       assert.strictEqual(surfaces.size, 2);
 
-      const surfaceA = surfaces.get("A");
-      const surfaceB = surfaces.get("B");
+      const surfaceA = surfaces.get('A');
+      const surfaceB = surfaces.get('B');
 
-      assert.ok(surfaceA && surfaceB, "Both surfaces should exist");
+      assert.ok(surfaceA && surfaceB, 'Both surfaces should exist');
 
       // Check Surface A
-      assert.ok(surfaceA, "Surface A exists.");
+      assert.ok(surfaceA, 'Surface A exists.');
       assert.strictEqual(surfaceA!.components.size, 1);
-      assert.ok(surfaceA!.components.has("comp-a"));
+      assert.ok(surfaceA!.components.has('comp-a'));
       assert.deepStrictEqual(toPlainObject(surfaceA!.dataModel), {
-        name: "Surface A Data",
+        name: 'Surface A Data',
+      });
+      assert.deepStrictEqual(toPlainObject(surfaceA!.componentTree).properties.text, {
+        path: '/name',
       });
-      assert.deepStrictEqual(
-        toPlainObject(surfaceA!.componentTree).properties.text,
-        { path: "/name" }
-      );
 
       // Check Surface B
-      assert.ok(surfaceB, "Surface B exists.");
+      assert.ok(surfaceB, 'Surface B exists.');
       assert.strictEqual(surfaceB!.components.size, 1);
-      assert.ok(surfaceB!.components.has("comp-b"));
+      assert.ok(surfaceB!.components.has('comp-b'));
       assert.deepStrictEqual(toPlainObject(surfaceB!.dataModel), {
-        name: "Surface B Data",
+        name: 'Surface B Data',
+      });
+      assert.deepStrictEqual(toPlainObject(surfaceB!.componentTree).properties.text, {
+        path: '/name',
       });
-      assert.deepStrictEqual(
-        toPlainObject(surfaceB!.componentTree).properties.text,
-        { path: "/name" }
-      );
     });
   });
 });
diff --git a/renderers/lit/src/0.8/ui/audio.ts b/renderers/lit/src/0.8/ui/audio.ts
index a835a253c..93bea0738 100644
--- a/renderers/lit/src/0.8/ui/audio.ts
+++ b/renderers/lit/src/0.8/ui/audio.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
 
-@customElement("a2ui-audioplayer")
+@customElement('a2ui-audioplayer')
 export class Audio extends Root {
   @property()
   accessor url: Primitives.StringValue | null = null;
@@ -54,12 +54,12 @@ export class Audio extends Root {
       return nothing;
     }
 
-    if (this.url && typeof this.url === "object") {
-      if ("literalString" in this.url) {
+    if (this.url && typeof this.url === 'object') {
+      if ('literalString' in this.url) {
         return html`<audio controls src=${this.url.literalString} />`;
-      } else if ("literal" in this.url) {
+      } else if ('literal' in this.url) {
         return html`<audio controls src=${this.url.literal} />`;
-      } else if (this.url && "path" in this.url && this.url.path) {
+      } else if (this.url && 'path' in this.url && this.url.path) {
         if (!this.processor || !this.component) {
           return html`(no processor)`;
         }
@@ -67,13 +67,13 @@ export class Audio extends Root {
         const audioUrl = this.processor.getData(
           this.component,
           this.url.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
         if (!audioUrl) {
           return html`Invalid audio URL`;
         }
 
-        if (typeof audioUrl !== "string") {
+        if (typeof audioUrl !== 'string') {
           return html`Invalid audio URL`;
         }
         return html`<audio controls src=${audioUrl} />`;
diff --git a/renderers/lit/src/0.8/ui/button.ts b/renderers/lit/src/0.8/ui/button.ts
index 1e06e1ac3..375870584 100644
--- a/renderers/lit/src/0.8/ui/button.ts
+++ b/renderers/lit/src/0.8/ui/button.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { StateEvent } from "../events/events.js";
-import { classMap } from "lit/directives/class-map.js";
-import * as Types from "@a2ui/web_core/types/types";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {StateEvent} from '../events/events.js';
+import {classMap} from 'lit/directives/class-map.js';
+import * as Types from '@a2ui/web_core/types/types';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
 
-@customElement("a2ui-button")
+@customElement('a2ui-button')
 export class Button extends Root {
   @property()
   accessor action: Types.Action | null = null;
@@ -52,8 +52,8 @@ export class Button extends Root {
         if (!this.action) {
           return;
         }
-        const evt = new StateEvent<"a2ui.action">({
-          eventType: "a2ui.action",
+        const evt = new StateEvent<'a2ui.action'>({
+          eventType: 'a2ui.action',
           action: this.action,
           dataContextPath: this.dataContextPath,
           sourceComponentId: this.id,
diff --git a/renderers/lit/src/0.8/ui/card.ts b/renderers/lit/src/0.8/ui/card.ts
index 5461b565c..6820c0a64 100644
--- a/renderers/lit/src/0.8/ui/card.ts
+++ b/renderers/lit/src/0.8/ui/card.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
+import {html, css, nothing} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
 
-@customElement("a2ui-card")
+@customElement('a2ui-card')
 export class Card extends Root {
   static styles = [
     structuralStyles,
diff --git a/renderers/lit/src/0.8/ui/checkbox.ts b/renderers/lit/src/0.8/ui/checkbox.ts
index 5b2f4a256..a56336b86 100644
--- a/renderers/lit/src/0.8/ui/checkbox.ts
+++ b/renderers/lit/src/0.8/ui/checkbox.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-import { extractStringValue } from "./utils/utils.js";
-
-@customElement("a2ui-checkbox")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+import {extractStringValue} from './utils/utils.js';
+
+@customElement('a2ui-checkbox')
 export class Checkbox extends Root {
   @property()
   accessor value: Primitives.BooleanValue | null = null;
@@ -63,7 +63,7 @@ export class Checkbox extends Root {
       return;
     }
 
-    if (!("path" in this.value)) {
+    if (!('path' in this.value)) {
       return;
     }
 
@@ -75,7 +75,7 @@ export class Checkbox extends Root {
       this.component,
       this.value.path,
       value,
-      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
     );
   }
 
@@ -101,23 +101,18 @@ export class Checkbox extends Root {
         .checked=${value}
       />
       <label class=${classMap(this.theme.components.CheckBox.label)} for="data"
-        >${extractStringValue(
-          this.label,
-          this.component,
-          this.processor,
-          this.surfaceId
-        )}</label
+        >${extractStringValue(this.label, this.component, this.processor, this.surfaceId)}</label
       >
     </section>`;
   }
 
   render() {
-    if (this.value && typeof this.value === "object") {
-      if ("literalBoolean" in this.value && this.value.literalBoolean) {
+    if (this.value && typeof this.value === 'object') {
+      if ('literalBoolean' in this.value && this.value.literalBoolean) {
         return this.#renderField(this.value.literalBoolean);
-      } else if ("literal" in this.value && this.value.literal !== undefined) {
+      } else if ('literal' in this.value && this.value.literal !== undefined) {
         return this.#renderField(this.value.literal);
-      } else if (this.value && "path" in this.value && this.value.path) {
+      } else if (this.value && 'path' in this.value && this.value.path) {
         if (!this.processor || !this.component) {
           return html`(no model)`;
         }
@@ -125,14 +120,14 @@ export class Checkbox extends Root {
         const textValue = this.processor.getData(
           this.component,
           this.value.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
 
         if (textValue === null) {
           return html`Invalid label`;
         }
 
-        if (typeof textValue !== "boolean") {
+        if (typeof textValue !== 'boolean') {
           return html`Invalid label`;
         }
 
diff --git a/renderers/lit/src/0.8/ui/column.ts b/renderers/lit/src/0.8/ui/column.ts
index 234a88157..603e7e84b 100644
--- a/renderers/lit/src/0.8/ui/column.ts
+++ b/renderers/lit/src/0.8/ui/column.ts
@@ -14,21 +14,21 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { classMap } from "lit/directives/class-map.js";
-import * as Types from "@a2ui/web_core/types/types";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-
-@customElement("a2ui-column")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {classMap} from 'lit/directives/class-map.js';
+import * as Types from '@a2ui/web_core/types/types';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+
+@customElement('a2ui-column')
 export class Column extends Root {
-  @property({ reflect: true, type: String })
-  accessor alignment: Types.ResolvedColumn["alignment"] = "stretch";
+  @property({reflect: true, type: String})
+  accessor alignment: Types.ResolvedColumn['alignment'] = 'stretch';
 
-  @property({ reflect: true, type: String })
-  accessor distribution: Types.ResolvedColumn["distribution"] = "start";
+  @property({reflect: true, type: String})
+  accessor distribution: Types.ResolvedColumn['distribution'] = 'start';
 
   static styles = [
     structuralStyles,
@@ -49,43 +49,43 @@ export class Column extends Root {
         height: 100%;
       }
 
-      :host([alignment="start"]) section {
+      :host([alignment='start']) section {
         align-items: start;
       }
 
-      :host([alignment="center"]) section {
+      :host([alignment='center']) section {
         align-items: center;
       }
 
-      :host([alignment="end"]) section {
+      :host([alignment='end']) section {
         align-items: end;
       }
 
-      :host([alignment="stretch"]) section {
+      :host([alignment='stretch']) section {
         align-items: stretch;
       }
 
-      :host([distribution="start"]) section {
+      :host([distribution='start']) section {
         justify-content: start;
       }
 
-      :host([distribution="center"]) section {
+      :host([distribution='center']) section {
         justify-content: center;
       }
 
-      :host([distribution="end"]) section {
+      :host([distribution='end']) section {
         justify-content: end;
       }
 
-      :host([distribution="spaceBetween"]) section {
+      :host([distribution='spaceBetween']) section {
         justify-content: space-between;
       }
 
-      :host([distribution="spaceAround"]) section {
+      :host([distribution='spaceAround']) section {
         justify-content: space-around;
       }
 
-      :host([distribution="spaceEvenly"]) section {
+      :host([distribution='spaceEvenly']) section {
         justify-content: space-evenly;
       }
     `,
diff --git a/renderers/lit/src/0.8/ui/component-registry.ts b/renderers/lit/src/0.8/ui/component-registry.ts
index cdc43163d..e738fdc79 100644
--- a/renderers/lit/src/0.8/ui/component-registry.ts
+++ b/renderers/lit/src/0.8/ui/component-registry.ts
@@ -14,23 +14,20 @@
  * limitations under the License.
  */
 
-import { CustomElementConstructorOf } from "./ui.js";
+import {CustomElementConstructorOf} from './ui.js';
 
 export class ComponentRegistry {
   private schemas: Map<string, unknown> = new Map();
-  private registry: Map<string, CustomElementConstructorOf<HTMLElement>> =
-    new Map();
+  private registry: Map<string, CustomElementConstructorOf<HTMLElement>> = new Map();
 
   register(
     typeName: string,
     constructor: CustomElementConstructorOf<HTMLElement>,
     tagName?: string,
-    schema?: unknown
+    schema?: unknown,
   ) {
     if (!/^[a-zA-Z0-9]+$/.test(typeName)) {
-      throw new Error(
-        `[Registry] Invalid typeName '${typeName}'. Must be alphanumeric.`
-      );
+      throw new Error(`[Registry] Invalid typeName '${typeName}'. Must be alphanumeric.`);
     }
 
     this.registry.set(typeName, constructor);
@@ -44,7 +41,7 @@ export class ComponentRegistry {
       // Constructor is already registered.
       if (existingName !== actualTagName) {
         throw new Error(
-          `Component ${typeName} is already registered as ${existingName}, but requested as ${actualTagName}.`
+          `Component ${typeName} is already registered as ${existingName}, but requested as ${actualTagName}.`,
         );
       }
       return;
@@ -59,12 +56,12 @@ export class ComponentRegistry {
     return this.registry.get(typeName);
   }
 
-  getInlineCatalog(): { components: { [key: string]: unknown } } {
-    const components: { [key: string]: unknown } = {};
+  getInlineCatalog(): {components: {[key: string]: unknown}} {
+    const components: {[key: string]: unknown} = {};
     for (const [key, value] of this.schemas) {
       components[key] = value;
     }
-    return { components };
+    return {components};
   }
 }
 
diff --git a/renderers/lit/src/0.8/ui/context/context.ts b/renderers/lit/src/0.8/ui/context/context.ts
index 6321419d3..6bfee79e2 100644
--- a/renderers/lit/src/0.8/ui/context/context.ts
+++ b/renderers/lit/src/0.8/ui/context/context.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export * from "./theme.js";
-export * from "./markdown.js";
+export * from './theme.js';
+export * from './markdown.js';
diff --git a/renderers/lit/src/0.8/ui/context/markdown.ts b/renderers/lit/src/0.8/ui/context/markdown.ts
index e056a0e50..d94cfacb8 100644
--- a/renderers/lit/src/0.8/ui/context/markdown.ts
+++ b/renderers/lit/src/0.8/ui/context/markdown.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { createContext } from "@lit/context";
-import * as Types from "@a2ui/web_core/types/types";
+import {createContext} from '@lit/context';
+import * as Types from '@a2ui/web_core/types/types';
 
 /**
  * The markdown renderer context.
  */
-export const markdown = createContext<Types.MarkdownRenderer | undefined>(Symbol("A2UIMarkdown"));
+export const markdown = createContext<Types.MarkdownRenderer | undefined>(Symbol('A2UIMarkdown'));
diff --git a/renderers/lit/src/0.8/ui/context/theme.ts b/renderers/lit/src/0.8/ui/context/theme.ts
index 2c21c9e97..81dc44c05 100644
--- a/renderers/lit/src/0.8/ui/context/theme.ts
+++ b/renderers/lit/src/0.8/ui/context/theme.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { createContext } from "@lit/context";
-import * as Types from "@a2ui/web_core/types/types";
+import {createContext} from '@lit/context';
+import * as Types from '@a2ui/web_core/types/types';
 
 /**
  * The theme context.
  */
-export const theme = createContext<Types.Theme | undefined>(Symbol("A2UITheme"));
+export const theme = createContext<Types.Theme | undefined>(Symbol('A2UITheme'));
 
 /**
  * An alias for the theme context, for backwards-compatibility.
diff --git a/renderers/lit/src/0.8/ui/custom-components/index.ts b/renderers/lit/src/0.8/ui/custom-components/index.ts
index f4109b746..52f4b1f65 100644
--- a/renderers/lit/src/0.8/ui/custom-components/index.ts
+++ b/renderers/lit/src/0.8/ui/custom-components/index.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ComponentRegistry } from '../component-registry.js';
+import {ComponentRegistry} from '../component-registry.js';
 
 export function registerCustomComponents() {
   // No default custom components in the core library.
diff --git a/renderers/lit/src/0.8/ui/datetime-input.ts b/renderers/lit/src/0.8/ui/datetime-input.ts
index 388a31b03..f7669d17a 100644
--- a/renderers/lit/src/0.8/ui/datetime-input.ts
+++ b/renderers/lit/src/0.8/ui/datetime-input.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-
-@customElement("a2ui-datetimeinput")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+
+@customElement('a2ui-datetimeinput')
 export class DateTimeInput extends Root {
   @property()
   accessor value: Primitives.StringValue | null = null;
@@ -31,10 +31,10 @@ export class DateTimeInput extends Root {
   @property()
   accessor label: Primitives.StringValue | null = null;
 
-  @property({ reflect: false, type: Boolean })
+  @property({reflect: false, type: Boolean})
   accessor enableDate = true;
 
-  @property({ reflect: false, type: Boolean })
+  @property({reflect: false, type: Boolean})
   accessor enableTime = true;
 
   static styles = [
@@ -66,7 +66,7 @@ export class DateTimeInput extends Root {
       return;
     }
 
-    if (!("path" in this.value)) {
+    if (!('path' in this.value)) {
       return;
     }
 
@@ -78,17 +78,13 @@ export class DateTimeInput extends Root {
       this.component,
       this.value.path,
       value,
-      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
     );
   }
 
   #renderField(value: string) {
-    return html`<section
-      class=${classMap(this.theme.components.DateTimeInput.container)}
-    >
-      <label
-        for="data"
-        class=${classMap(this.theme.components.DateTimeInput.label)}
+    return html`<section class=${classMap(this.theme.components.DateTimeInput.container)}>
+      <label for="data" class=${classMap(this.theme.components.DateTimeInput.label)}
         >${this.#getPlaceholderText()}</label
       >
       <input
@@ -115,14 +111,14 @@ export class DateTimeInput extends Root {
 
   #getInputType() {
     if (this.enableDate && this.enableTime) {
-      return "datetime-local";
+      return 'datetime-local';
     } else if (this.enableDate) {
-      return "date";
+      return 'date';
     } else if (this.enableTime) {
-      return "time";
+      return 'time';
     }
 
-    return "datetime-local";
+    return 'datetime-local';
   }
 
   #formatInputValue(value: string) {
@@ -130,7 +126,7 @@ export class DateTimeInput extends Root {
     const date = value ? new Date(value) : null;
 
     if (!date || isNaN(date.getTime())) {
-      return "";
+      return '';
     }
 
     const year = this.#padNumber(date.getFullYear());
@@ -142,9 +138,9 @@ export class DateTimeInput extends Root {
     // Browsers are picky with what format they allow for the `value` attribute of date/time inputs.
     // We need to parse it out of the provided value. Note that we don't use `toISOString`,
     // because the resulting value is relative to UTC.
-    if (inputType === "date") {
+    if (inputType === 'date') {
       return `${year}-${month}-${day}`;
-    } else if (inputType === "time") {
+    } else if (inputType === 'time') {
       return `${hours}:${minutes}`;
     }
 
@@ -152,29 +148,29 @@ export class DateTimeInput extends Root {
   }
 
   #padNumber(value: number) {
-    return value.toString().padStart(2, "0");
+    return value.toString().padStart(2, '0');
   }
 
   #getPlaceholderText() {
     // TODO: this should likely be passed from the model.
     const inputType = this.#getInputType();
 
-    if (inputType === "date") {
-      return "Date";
-    } else if (inputType === "time") {
-      return "Time";
+    if (inputType === 'date') {
+      return 'Date';
+    } else if (inputType === 'time') {
+      return 'Time';
     }
 
-    return "Date & Time";
+    return 'Date & Time';
   }
 
   render() {
-    if (this.value && typeof this.value === "object") {
-      if ("literalString" in this.value && this.value.literalString) {
+    if (this.value && typeof this.value === 'object') {
+      if ('literalString' in this.value && this.value.literalString) {
         return this.#renderField(this.value.literalString);
-      } else if ("literal" in this.value && this.value.literal !== undefined) {
+      } else if ('literal' in this.value && this.value.literal !== undefined) {
         return this.#renderField(this.value.literal);
-      } else if (this.value && "path" in this.value && this.value.path) {
+      } else if (this.value && 'path' in this.value && this.value.path) {
         if (!this.processor || !this.component) {
           return html`(no model)`;
         }
@@ -182,9 +178,9 @@ export class DateTimeInput extends Root {
         const textValue = this.processor.getData(
           this.component,
           this.value.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
-        if (typeof textValue !== "string") {
+        if (typeof textValue !== 'string') {
           return html`(invalid)`;
         }
 
diff --git a/renderers/lit/src/0.8/ui/directives/directives.ts b/renderers/lit/src/0.8/ui/directives/directives.ts
index 92713e9d7..83f6249cd 100644
--- a/renderers/lit/src/0.8/ui/directives/directives.ts
+++ b/renderers/lit/src/0.8/ui/directives/directives.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { markdown } from "./markdown.js";
+export {markdown} from './markdown.js';
diff --git a/renderers/lit/src/0.8/ui/directives/markdown.ts b/renderers/lit/src/0.8/ui/directives/markdown.ts
index 7c8e9b69d..9e764d6fb 100644
--- a/renderers/lit/src/0.8/ui/directives/markdown.ts
+++ b/renderers/lit/src/0.8/ui/directives/markdown.ts
@@ -14,16 +14,11 @@
  * limitations under the License.
  */
 
-import { html, noChange } from "lit";
-import {
-  Directive,
-  DirectiveParameters,
-  Part,
-  directive,
-} from "lit/directive.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { until } from "lit/directives/until.js";
-import * as Types from "@a2ui/web_core/types/types";
+import {html, noChange} from 'lit';
+import {Directive, DirectiveParameters, Part, directive} from 'lit/directive.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {until} from 'lit/directives/until.js';
+import * as Types from '@a2ui/web_core/types/types';
 
 class MarkdownDirective extends Directive {
   #lastValue: string | null = null;
@@ -31,10 +26,7 @@ class MarkdownDirective extends Directive {
 
   update(_part: Part, [value, markdownRenderer, markdownOptions]: DirectiveParameters<this>) {
     const jsonTagClassMap = JSON.stringify(markdownOptions?.tagClassMap);
-    if (
-      this.#lastValue === value &&
-      jsonTagClassMap === this.#lastTagClassMap
-    ) {
+    if (this.#lastValue === value && jsonTagClassMap === this.#lastTagClassMap) {
       return noChange;
     }
 
@@ -48,14 +40,18 @@ class MarkdownDirective extends Directive {
    * Renders the markdown string to HTML using the injected markdown renderer,
    * if present. Otherwise, it returns the value wrapped in a span.
    */
-  render(value: string, markdownRenderer?: Types.MarkdownRenderer, markdownOptions?: Types.MarkdownRendererOptions) {
+  render(
+    value: string,
+    markdownRenderer?: Types.MarkdownRenderer,
+    markdownOptions?: Types.MarkdownRendererOptions,
+  ) {
     if (markdownRenderer) {
-      const rendered = markdownRenderer(value, markdownOptions).then((value) => {
+      const rendered = markdownRenderer(value, markdownOptions).then(value => {
         // `value` is a plain string, which we need to convert to a template
         // with the `unsafeHTML` directive.
         // It is the responsibility of the markdown renderer to sanitize the HTML.
         return unsafeHTML(value);
-      })
+      });
       // The until directive lets us render a placeholder *until* the rendered
       // content resolves.
       return until(rendered, html`<span class="no-markdown-renderer">${value}</span>`);
@@ -64,12 +60,14 @@ class MarkdownDirective extends Directive {
     const dynamicRendererPromise = (async () => {
       try {
         // @ts-ignore - optional peer dependency
-        const { renderMarkdown } = await import('@a2ui/markdown-it');
+        const {renderMarkdown} = await import('@a2ui/markdown-it');
         const rendered = await renderMarkdown(value, markdownOptions);
         return unsafeHTML(rendered);
       } catch (e) {
         if (!MarkdownDirective.defaultMarkdownWarningLogged) {
-          console.warn("[MarkdownDirective] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback regex.");
+          console.warn(
+            '[MarkdownDirective] Failed to load optional `@a2ui/markdown-it` renderer. Using fallback regex.',
+          );
           MarkdownDirective.defaultMarkdownWarningLogged = true;
         }
         return html`<span class="no-markdown-renderer">${value}</span>`;
diff --git a/renderers/lit/src/0.8/ui/directives/sanitizer.ts b/renderers/lit/src/0.8/ui/directives/sanitizer.ts
index 453540852..8f150597c 100644
--- a/renderers/lit/src/0.8/ui/directives/sanitizer.ts
+++ b/renderers/lit/src/0.8/ui/directives/sanitizer.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { html, render } from "lit";
+import {html, render} from 'lit';
 
 /**
  * This is only safe for (and intended to be used for) text node positions. If
@@ -23,18 +23,18 @@ import { html, render } from "lit";
  * value could break out of the attribute value and e.g. add another attribute).
  */
 export function escapeNodeText(str: string | null | undefined) {
-  const frag = document.createElement("div");
+  const frag = document.createElement('div');
   render(html`${str}`, frag);
 
-  return frag.innerHTML.replaceAll(/<!--([^-]*)-->/gim, "");
+  return frag.innerHTML.replaceAll(/<!--([^-]*)-->/gim, '');
 }
 
 export function unescapeNodeText(str: string | null | undefined) {
   if (!str) {
-    return "";
+    return '';
   }
 
-  const frag = document.createElement("textarea");
+  const frag = document.createElement('textarea');
   frag.innerHTML = str;
   return frag.value;
 }
diff --git a/renderers/lit/src/0.8/ui/divider.ts b/renderers/lit/src/0.8/ui/divider.ts
index 077b0dbfa..2f7cc2b9e 100644
--- a/renderers/lit/src/0.8/ui/divider.ts
+++ b/renderers/lit/src/0.8/ui/divider.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { classMap } from "lit/directives/class-map.js";
-import { structuralStyles } from "./styles.js";
+import {html, css, nothing} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {structuralStyles} from './styles.js';
 
-@customElement("a2ui-divider")
+@customElement('a2ui-divider')
 export class Divider extends Root {
   static styles = [
     structuralStyles,
diff --git a/renderers/lit/src/0.8/ui/icon.ts b/renderers/lit/src/0.8/ui/icon.ts
index aec35da79..9fe6db199 100644
--- a/renderers/lit/src/0.8/ui/icon.ts
+++ b/renderers/lit/src/0.8/ui/icon.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
 
-@customElement("a2ui-icon")
+@customElement('a2ui-icon')
 export class Icon extends Root {
   @property()
   accessor name: Primitives.StringValue | null = null;
@@ -39,7 +39,6 @@ export class Icon extends Root {
         display: block;
         flex: var(--weight);
         min-height: 0;
-
       }
 
       .g-icon {
@@ -68,18 +67,18 @@ export class Icon extends Root {
     }
 
     const render = (url: string) => {
-      url = url.replace(/([A-Z])/gm, "_$1").toLocaleLowerCase();
+      url = url.replace(/([A-Z])/gm, '_$1').toLocaleLowerCase();
       return html`<span class="g-icon">${url}</span>`;
     };
 
-    if (this.name && typeof this.name === "object") {
-      if ("literalString" in this.name) {
-        const iconName = this.name.literalString ?? "";
+    if (this.name && typeof this.name === 'object') {
+      if ('literalString' in this.name) {
+        const iconName = this.name.literalString ?? '';
         return render(iconName);
-      } else if ("literal" in this.name) {
-        const iconName = this.name.literal ?? "";
+      } else if ('literal' in this.name) {
+        const iconName = this.name.literal ?? '';
         return render(iconName);
-      } else if (this.name && "path" in this.name && this.name.path) {
+      } else if (this.name && 'path' in this.name && this.name.path) {
         if (!this.processor || !this.component) {
           return html`(no model)`;
         }
@@ -87,13 +86,13 @@ export class Icon extends Root {
         const iconName = this.processor.getData(
           this.component,
           this.name.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
         if (!iconName) {
           return html`Invalid icon name`;
         }
 
-        if (typeof iconName !== "string") {
+        if (typeof iconName !== 'string') {
           return html`Invalid icon name`;
         }
         return render(iconName);
diff --git a/renderers/lit/src/0.8/ui/image.ts b/renderers/lit/src/0.8/ui/image.ts
index 7c3bdebb6..f271a5526 100644
--- a/renderers/lit/src/0.8/ui/image.ts
+++ b/renderers/lit/src/0.8/ui/image.ts
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import * as Types from "@a2ui/web_core/types/types";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-import { Styles } from "../index.js";
-
-@customElement("a2ui-image")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import * as Types from '@a2ui/web_core/types/types';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+import {Styles} from '../index.js';
+
+@customElement('a2ui-image')
 export class Image extends Root {
   @property()
   accessor url: Primitives.StringValue | null = null;
@@ -34,10 +34,10 @@ export class Image extends Root {
   accessor altText: Primitives.StringValue | null = null;
 
   @property()
-  accessor usageHint: Types.ResolvedImage["usageHint"] | null = null;
+  accessor usageHint: Types.ResolvedImage['usageHint'] | null = null;
 
   @property()
-  accessor fit: "contain" | "cover" | "fill" | "none" | "scale-down" | null = null;
+  accessor fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | null = null;
 
   static styles = [
     structuralStyles,
@@ -68,21 +68,21 @@ export class Image extends Root {
     }
 
     const render = (url: string) => {
-      let resolvedAlt = "";
+      let resolvedAlt = '';
       if (this.altText) {
-        if (typeof this.altText === "object") {
-          if ("literalString" in this.altText) {
-            resolvedAlt = this.altText.literalString ?? "";
-          } else if ("literal" in this.altText) {
-            resolvedAlt = this.altText.literal ?? "";
-          } else if ("path" in this.altText && this.altText.path) {
+        if (typeof this.altText === 'object') {
+          if ('literalString' in this.altText) {
+            resolvedAlt = this.altText.literalString ?? '';
+          } else if ('literal' in this.altText) {
+            resolvedAlt = this.altText.literal ?? '';
+          } else if ('path' in this.altText && this.altText.path) {
             if (this.processor && this.component) {
               const data = this.processor.getData(
                 this.component,
                 this.altText.path,
-                this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+                this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
               );
-              if (typeof data === "string") {
+              if (typeof data === 'string') {
                 resolvedAlt = data;
               }
             }
@@ -92,14 +92,14 @@ export class Image extends Root {
       return html`<img src=${url} alt=${resolvedAlt} />`;
     };
 
-    if (this.url && typeof this.url === "object") {
-      if ("literalString" in this.url) {
-        const imageUrl = this.url.literalString ?? "";
+    if (this.url && typeof this.url === 'object') {
+      if ('literalString' in this.url) {
+        const imageUrl = this.url.literalString ?? '';
         return render(imageUrl);
-      } else if ("literal" in this.url) {
-        const imageUrl = this.url.literal ?? "";
+      } else if ('literal' in this.url) {
+        const imageUrl = this.url.literal ?? '';
         return render(imageUrl);
-      } else if (this.url && "path" in this.url && this.url.path) {
+      } else if (this.url && 'path' in this.url && this.url.path) {
         if (!this.processor || !this.component) {
           return html`(no model)`;
         }
@@ -107,13 +107,13 @@ export class Image extends Root {
         const imageUrl = this.processor.getData(
           this.component,
           this.url.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
         if (!imageUrl) {
           return html`Invalid image URL`;
         }
 
-        if (typeof imageUrl !== "string") {
+        if (typeof imageUrl !== 'string') {
           return html`Invalid image URL`;
         }
         return render(imageUrl);
@@ -126,14 +126,14 @@ export class Image extends Root {
   render() {
     const classes = Styles.merge(
       this.theme.components.Image.all,
-      this.usageHint ? this.theme.components.Image[this.usageHint] : {}
+      this.usageHint ? this.theme.components.Image[this.usageHint] : {},
     );
 
     return html`<section
       class=${classMap(classes)}
       style=${styleMap({
         ...(this.theme.additionalStyles?.Image ?? {}),
-        "--object-fit": this.fit ?? "fill",
+        '--object-fit': this.fit ?? 'fill',
       })}
     >
       ${this.#renderImage()}
diff --git a/renderers/lit/src/0.8/ui/list.ts b/renderers/lit/src/0.8/ui/list.ts
index 09d5fdf8f..f6d5e1b38 100644
--- a/renderers/lit/src/0.8/ui/list.ts
+++ b/renderers/lit/src/0.8/ui/list.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
 
-@customElement("a2ui-list")
+@customElement('a2ui-list')
 export class List extends Root {
-  @property({ reflect: true, type: String })
-  accessor direction: "vertical" | "horizontal" = "vertical";
+  @property({reflect: true, type: String})
+  accessor direction: 'vertical' | 'horizontal' = 'vertical';
 
   static styles = [
     structuralStyles,
@@ -40,11 +40,11 @@ export class List extends Root {
         overflow: auto;
       }
 
-      :host([direction="vertical"]) section {
+      :host([direction='vertical']) section {
         display: grid;
       }
 
-      :host([direction="horizontal"]) section {
+      :host([direction='horizontal']) section {
         display: flex;
         max-width: 100%;
         overflow-x: scroll;
diff --git a/renderers/lit/src/0.8/ui/modal.ts b/renderers/lit/src/0.8/ui/modal.ts
index 6b6d62fcf..f1c08b893 100644
--- a/renderers/lit/src/0.8/ui/modal.ts
+++ b/renderers/lit/src/0.8/ui/modal.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, query, state } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-import { ref } from "lit/directives/ref.js";
+import {html, css, nothing} from 'lit';
+import {customElement, query, state} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+import {ref} from 'lit/directives/ref.js';
 
-@customElement("a2ui-modal")
+@customElement('a2ui-modal')
 export class Modal extends Root {
   static styles = [
     structuralStyles,
@@ -60,7 +60,7 @@ export class Modal extends Root {
   @state()
   accessor #showModal = false;
 
-  @query("dialog")
+  @query('dialog')
   accessor #modalRef: HTMLDialogElement | null = null;
 
   #closeModal() {
@@ -112,14 +112,14 @@ export class Modal extends Root {
       <section
         class=${classMap(this.theme.components.Modal.element)}
         style=${this.theme.additionalStyles?.Modal
-        ? styleMap(this.theme.additionalStyles?.Modal)
-        : nothing}
+          ? styleMap(this.theme.additionalStyles?.Modal)
+          : nothing}
       >
         <div id="controls">
           <button
             @click=${() => {
-        this.#closeModal();
-      }}
+              this.#closeModal();
+            }}
           >
             <span class="g-icon">close</span>
           </button>
diff --git a/renderers/lit/src/0.8/ui/multiple-choice.ts b/renderers/lit/src/0.8/ui/multiple-choice.ts
index ee9f823ff..d5ba16e8c 100644
--- a/renderers/lit/src/0.8/ui/multiple-choice.ts
+++ b/renderers/lit/src/0.8/ui/multiple-choice.ts
@@ -14,39 +14,38 @@
  * limitations under the License.
  */
 
-
-import { html, css, PropertyValues, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-import { extractStringValue } from "./utils/utils.js";
-
-@customElement("a2ui-multiplechoice")
+import {html, css, PropertyValues, nothing} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+import {extractStringValue} from './utils/utils.js';
+
+@customElement('a2ui-multiplechoice')
 export class MultipleChoice extends Root {
   @property()
   accessor description: string | null = null;
 
   @property()
-  accessor options: { label: Primitives.StringValue; value: string }[] = [];
+  accessor options: {label: Primitives.StringValue; value: string}[] = [];
 
   @property()
   accessor selections: Primitives.StringValue | string[] = [];
 
   @property()
-  accessor variant: "checkbox" | "chips" = "checkbox";
+  accessor variant: 'checkbox' | 'chips' = 'checkbox';
 
-  @property({ type: Boolean })
+  @property({type: Boolean})
   accessor filterable = false;
 
   @state()
   accessor isOpen = false;
 
   @state()
-  accessor filterText = "";
+  accessor filterText = '';
 
   static styles = [
     structuralStyles,
@@ -240,7 +239,7 @@ export class MultipleChoice extends Root {
       }
 
       .chip.selected:hover {
-         background: var(--md-sys-color-secondary-container-high);
+        background: var(--md-sys-color-secondary-container-high);
       }
 
       .chip-icon {
@@ -255,8 +254,14 @@ export class MultipleChoice extends Root {
       }
 
       @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(-8px); }
-        to { opacity: 1; transform: translateY(0); }
+        from {
+          opacity: 0;
+          transform: translateY(-8px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
       }
     `,
   ];
@@ -265,7 +270,7 @@ export class MultipleChoice extends Root {
     if (!this.selections || !this.processor) {
       return;
     }
-    if (!("path" in this.selections)) {
+    if (!('path' in this.selections)) {
       return;
     }
     if (!this.selections.path) {
@@ -276,7 +281,7 @@ export class MultipleChoice extends Root {
       this.component,
       this.selections.path,
       value,
-      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
     );
   }
 
@@ -292,7 +297,7 @@ export class MultipleChoice extends Root {
     const selectionValue = this.processor.getData(
       this.component,
       this.selections.path!,
-      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
     );
 
     return Array.isArray(selectionValue) ? (selectionValue as string[]) : [];
@@ -301,7 +306,7 @@ export class MultipleChoice extends Root {
   toggleSelection(value: string) {
     const current = this.getCurrentSelections();
     if (current.includes(value)) {
-      this.#setBoundValue(current.filter((v) => v !== value));
+      this.#setBoundValue(current.filter(v => v !== value));
     } else {
       this.#setBoundValue([...current, value]);
     }
@@ -311,7 +316,7 @@ export class MultipleChoice extends Root {
   #renderCheckIcon() {
     return html`
       <svg class="chip-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
+        <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" />
       </svg>
     `;
   }
@@ -325,9 +330,9 @@ export class MultipleChoice extends Root {
           placeholder="Filter options..."
           .value=${this.filterText}
           @input=${(e: Event) => {
-        const target = e.target as HTMLInputElement;
-        this.filterText = target.value;
-      }}
+            const target = e.target as HTMLInputElement;
+            this.filterText = target.value;
+          }}
           @click=${(e: Event) => e.stopPropagation()}
         />
       </div>
@@ -344,82 +349,93 @@ export class MultipleChoice extends Root {
         option.label,
         this.component,
         this.processor,
-        this.surfaceId
+        this.surfaceId,
       );
       return label.toLowerCase().includes(this.filterText.toLowerCase());
     });
 
     // Chips Layout
-    if (this.variant === "chips") {
+    if (this.variant === 'chips') {
       return html`
-          <div class="container">
-            ${this.description ? html`<div class="header-text" style="margin-bottom: 8px;">${this.description}</div>` : nothing}
-            ${this.filterable ? this.#renderFilter() : nothing}
-            <div class="chips-container">
-              ${filteredOptions.map((option) => {
-        const label = extractStringValue(
-          option.label,
-          this.component,
-          this.processor,
-          this.surfaceId
-        );
-        const isSelected = currentSelections.includes(option.value);
-        return html`
-                  <div
-                    class="chip ${isSelected ? "selected" : ""}"
-                    @click=${(e: Event) => {
-            e.stopPropagation();
-            this.toggleSelection(option.value);
-          }}
-                  >
-                    ${isSelected ? this.#renderCheckIcon() : nothing}
-                    <span>${label}</span>
-                  </div>
-                `;
-      })}
-            </div>
-             ${filteredOptions.length === 0 ? html`<div style="padding: 8px; font-style: italic; color: var(--md-sys-color-outline);">No options found</div>` : nothing}
+        <div class="container">
+          ${this.description
+            ? html`<div class="header-text" style="margin-bottom: 8px;">${this.description}</div>`
+            : nothing}
+          ${this.filterable ? this.#renderFilter() : nothing}
+          <div class="chips-container">
+            ${filteredOptions.map(option => {
+              const label = extractStringValue(
+                option.label,
+                this.component,
+                this.processor,
+                this.surfaceId,
+              );
+              const isSelected = currentSelections.includes(option.value);
+              return html`
+                <div
+                  class="chip ${isSelected ? 'selected' : ''}"
+                  @click=${(e: Event) => {
+                    e.stopPropagation();
+                    this.toggleSelection(option.value);
+                  }}
+                >
+                  ${isSelected ? this.#renderCheckIcon() : nothing}
+                  <span>${label}</span>
+                </div>
+              `;
+            })}
           </div>
-        `;
+          ${filteredOptions.length === 0
+            ? html`<div
+                style="padding: 8px; font-style: italic; color: var(--md-sys-color-outline);"
+              >
+                No options found
+              </div>`
+            : nothing}
+        </div>
+      `;
     }
 
     // Default Checkbox Dropdown Layout
     const count = currentSelections.length;
-    const headerText = count > 0 ? `${count} Selected` : (this.description ?? "Select items");
+    const headerText = count > 0 ? `${count} Selected` : (this.description ?? 'Select items');
 
     return html`
       <div class="container">
-        <div
-          class="dropdown-header"
-          @click=${() => this.isOpen = !this.isOpen}
-        >
+        <div class="dropdown-header" @click=${() => (this.isOpen = !this.isOpen)}>
           <span class="header-text">${headerText}</span>
-          <span class="chevron ${this.isOpen ? "open" : ""}">
-            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
-              <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/>
+          <span class="chevron ${this.isOpen ? 'open' : ''}">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 -960 960 960"
+              width="24"
+              fill="currentColor"
+            >
+              <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" />
             </svg>
           </span>
         </div>
 
-        <div class="dropdown-wrapper ${this.isOpen ? "open" : ""}">
+        <div class="dropdown-wrapper ${this.isOpen ? 'open' : ''}">
           ${this.filterable ? this.#renderFilter() : nothing}
           <div class="options-scroll-container">
-            ${filteredOptions.map((option) => {
+            ${filteredOptions.map(option => {
               const label = extractStringValue(
                 option.label,
                 this.component,
                 this.processor,
-                this.surfaceId
+                this.surfaceId,
               );
               const isSelected = currentSelections.includes(option.value);
 
               return html`
                 <div
-                  class="option-item ${isSelected ? "selected" : ""}"
+                  class="option-item ${isSelected ? 'selected' : ''}"
                   @click=${(e: Event) => {
-                  e.stopPropagation();
-                  this.toggleSelection(option.value);
-                }}
+                    e.stopPropagation();
+                    this.toggleSelection(option.value);
+                  }}
                 >
                   <div class="checkbox">
                     <span class="checkbox-icon">✓</span>
@@ -428,7 +444,13 @@ export class MultipleChoice extends Root {
                 </div>
               `;
             })}
-             ${filteredOptions.length === 0 ? html`<div style="padding: 16px; text-align: center; color: var(--md-sys-color-outline);">No options found</div>` : nothing}
+            ${filteredOptions.length === 0
+              ? html`<div
+                  style="padding: 16px; text-align: center; color: var(--md-sys-color-outline);"
+                >
+                  No options found
+                </div>`
+              : nothing}
           </div>
         </div>
       </div>
diff --git a/renderers/lit/src/0.8/ui/root.ts b/renderers/lit/src/0.8/ui/root.ts
index de5f357e9..77345f6e5 100644
--- a/renderers/lit/src/0.8/ui/root.ts
+++ b/renderers/lit/src/0.8/ui/root.ts
@@ -14,34 +14,23 @@
  * limitations under the License.
  */
 
-import { SignalWatcher } from "@lit-labs/signals";
-import { consume } from "@lit/context";
-import {
-  css,
-  html,
-  LitElement,
-  nothing,
-  PropertyValues,
-  render,
-  TemplateResult,
-} from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
-import { effect } from "signal-utils/subtle/microtask-effect";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import { StringValue } from "@a2ui/web_core/types/primitives";
-import { AnyComponentNode, SurfaceID, Theme } from "@a2ui/web_core/types/types";
-import { themeContext } from "./context/theme.js";
-import { structuralStyles } from "./styles.js";
-import { componentRegistry } from "./component-registry.js";
-
-type NodeOfType<T extends AnyComponentNode["type"]> = Extract<
-  AnyComponentNode,
-  { type: T }
->;
+import {SignalWatcher} from '@lit-labs/signals';
+import {consume} from '@lit/context';
+import {css, html, LitElement, nothing, PropertyValues, render, TemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {map} from 'lit/directives/map.js';
+import {effect} from 'signal-utils/subtle/microtask-effect';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import {StringValue} from '@a2ui/web_core/types/primitives';
+import {AnyComponentNode, SurfaceID, Theme} from '@a2ui/web_core/types/types';
+import {themeContext} from './context/theme.js';
+import {structuralStyles} from './styles.js';
+import {componentRegistry} from './component-registry.js';
+
+type NodeOfType<T extends AnyComponentNode['type']> = Extract<AnyComponentNode, {type: T}>;
 
 // This is the base class all the components will inherit
-@customElement("a2ui-root")
+@customElement('a2ui-root')
 export class Root extends SignalWatcher(LitElement) {
   @property()
   accessor surfaceId: SurfaceID | null = null;
@@ -49,17 +38,17 @@ export class Root extends SignalWatcher(LitElement) {
   @property()
   accessor component: AnyComponentNode | null = null;
 
-  @consume({ context: themeContext })
+  @consume({context: themeContext})
   accessor theme!: Theme;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   accessor childComponents: AnyComponentNode[] | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   accessor processor: A2uiMessageProcessor | null = null;
 
   @property()
-  accessor dataContextPath: string = "";
+  accessor dataContextPath: string = '';
 
   @property()
   accessor enableCustomElements = false;
@@ -67,7 +56,7 @@ export class Root extends SignalWatcher(LitElement) {
   @property()
   set weight(weight: string | number) {
     this.#weight = weight;
-    this.style.setProperty("--weight", `${weight}`);
+    this.style.setProperty('--weight', `${weight}`);
   }
 
   get weight() {
@@ -95,7 +84,7 @@ export class Root extends SignalWatcher(LitElement) {
   #lightDomEffectDisposer: null | (() => void) = null;
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (changedProperties.has("childComponents")) {
+    if (changedProperties.has('childComponents')) {
       if (this.#lightDomEffectDisposer) {
         this.#lightDomEffectDisposer();
       }
@@ -109,7 +98,7 @@ export class Root extends SignalWatcher(LitElement) {
         const lightDomTemplate = this.renderComponentTree(allChildren);
 
         // 3. Imperatively render that template into the component itself.
-        render(lightDomTemplate, this, { host: this });
+        render(lightDomTemplate, this, {host: this});
       });
     }
   }
@@ -129,7 +118,7 @@ export class Root extends SignalWatcher(LitElement) {
    * Turns the SignalMap into a renderable TemplateResult for Lit.
    */
   private renderComponentTree(
-    components: AnyComponentNode[] | null
+    components: AnyComponentNode[] | null,
   ): TemplateResult | typeof nothing {
     if (!components) {
       return nothing;
@@ -139,7 +128,7 @@ export class Root extends SignalWatcher(LitElement) {
       return nothing;
     }
 
-    return html` ${map(components, (component) => {
+    return html` ${map(components, component => {
       // 1. Check if there is a registered custom component or override.
       if (this.enableCustomElements) {
         const registeredCtor = componentRegistry.get(component.type);
@@ -154,10 +143,10 @@ export class Root extends SignalWatcher(LitElement) {
             el.slot = node.slotName;
           }
           el.component = node;
-          el.weight = node.weight ?? "initial";
+          el.weight = node.weight ?? 'initial';
           el.processor = this.processor;
           el.surfaceId = this.surfaceId;
-          el.dataContextPath = node.dataContextPath ?? "/";
+          el.dataContextPath = node.dataContextPath ?? '/';
 
           for (const [prop, val] of Object.entries(component.properties)) {
             // @ts-expect-error We're off the books.
@@ -169,15 +158,15 @@ export class Root extends SignalWatcher(LitElement) {
 
       // 2. Fallback to standard components.
       switch (component.type) {
-        case "List": {
-          const node = component as NodeOfType<"List">;
+        case 'List': {
+          const node = component as NodeOfType<'List'>;
           const childComponents = node.properties.children;
           return html`<a2ui-list
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
-            .direction=${node.properties.direction ?? "vertical"}
+            .weight=${node.weight ?? 'initial'}
+            .direction=${node.properties.direction ?? 'vertical'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .childComponents=${childComponents}
@@ -185,10 +174,9 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-list>`;
         }
 
-        case "Card": {
-          const node = component as NodeOfType<"Card">;
-          let childComponents: AnyComponentNode[] | null =
-            node.properties.children;
+        case 'Card': {
+          const node = component as NodeOfType<'Card'>;
+          let childComponents: AnyComponentNode[] | null = node.properties.children;
           if (!childComponents && node.properties.child) {
             childComponents = [node.properties.child];
           }
@@ -197,106 +185,106 @@ export class Root extends SignalWatcher(LitElement) {
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .childComponents=${childComponents}
-            .dataContextPath=${node.dataContextPath ?? ""}
+            .dataContextPath=${node.dataContextPath ?? ''}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-card>`;
         }
 
-        case "Column": {
-          const node = component as NodeOfType<"Column">;
+        case 'Column': {
+          const node = component as NodeOfType<'Column'>;
           return html`<a2ui-column
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .childComponents=${node.properties.children ?? null}
-            .dataContextPath=${node.dataContextPath ?? ""}
-            .alignment=${node.properties.alignment ?? "stretch"}
-            .distribution=${node.properties.distribution ?? "start"}
+            .dataContextPath=${node.dataContextPath ?? ''}
+            .alignment=${node.properties.alignment ?? 'stretch'}
+            .distribution=${node.properties.distribution ?? 'start'}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-column>`;
         }
 
-        case "Row": {
-          const node = component as NodeOfType<"Row">;
+        case 'Row': {
+          const node = component as NodeOfType<'Row'>;
           return html`<a2ui-row
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .childComponents=${node.properties.children ?? null}
-            .dataContextPath=${node.dataContextPath ?? ""}
-            .alignment=${node.properties.alignment ?? "stretch"}
-            .distribution=${node.properties.distribution ?? "start"}
+            .dataContextPath=${node.dataContextPath ?? ''}
+            .alignment=${node.properties.alignment ?? 'stretch'}
+            .distribution=${node.properties.distribution ?? 'start'}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-row>`;
         }
 
-        case "Image": {
-          const node = component as NodeOfType<"Image">;
+        case 'Image': {
+          const node = component as NodeOfType<'Image'>;
           return html`<a2ui-image
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .url=${node.properties.url ?? null}
-            .dataContextPath=${node.dataContextPath ?? ""}
+            .dataContextPath=${node.dataContextPath ?? ''}
             .usageHint=${node.properties.usageHint}
             .fit=${node.properties.fit}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-image>`;
         }
 
-        case "Icon": {
-          const node = component as NodeOfType<"Icon">;
+        case 'Icon': {
+          const node = component as NodeOfType<'Icon'>;
           return html`<a2ui-icon
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .name=${node.properties.name ?? null}
-            .dataContextPath=${node.dataContextPath ?? ""}
+            .dataContextPath=${node.dataContextPath ?? ''}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-icon>`;
         }
 
-        case "AudioPlayer": {
-          const node = component as NodeOfType<"AudioPlayer">;
+        case 'AudioPlayer': {
+          const node = component as NodeOfType<'AudioPlayer'>;
           return html`<a2ui-audioplayer
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .url=${node.properties.url ?? null}
-            .dataContextPath=${node.dataContextPath ?? ""}
+            .dataContextPath=${node.dataContextPath ?? ''}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-audioplayer>`;
         }
 
-        case "Button": {
-          const node = component as NodeOfType<"Button">;
+        case 'Button': {
+          const node = component as NodeOfType<'Button'>;
           return html`<a2ui-button
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
-            .dataContextPath=${node.dataContextPath ?? ""}
+            .dataContextPath=${node.dataContextPath ?? ''}
             .action=${node.properties.action}
             .childComponents=${[node.properties.child]}
             .primary=${node.properties.primary}
@@ -304,13 +292,13 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-button>`;
         }
 
-        case "Text": {
-          const node = component as NodeOfType<"Text">;
+        case 'Text': {
+          const node = component as NodeOfType<'Text'>;
           return html`<a2ui-text
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .model=${this.processor}
             .surfaceId=${this.surfaceId}
             .processor=${this.processor}
@@ -321,32 +309,32 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-text>`;
         }
 
-        case "CheckBox": {
-          const node = component as NodeOfType<"CheckBox">;
+        case 'CheckBox': {
+          const node = component as NodeOfType<'CheckBox'>;
           return html`<a2ui-checkbox
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
-            .dataContextPath=${node.dataContextPath ?? ""}
+            .dataContextPath=${node.dataContextPath ?? ''}
             .label=${node.properties.label}
             .value=${node.properties.value}
             .enableCustomElements=${this.enableCustomElements}
           ></a2ui-checkbox>`;
         }
 
-        case "DateTimeInput": {
-          const node = component as NodeOfType<"DateTimeInput">;
+        case 'DateTimeInput': {
+          const node = component as NodeOfType<'DateTimeInput'>;
           return html`<a2ui-datetimeinput
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
-            .dataContextPath=${node.dataContextPath ?? ""}
+            .dataContextPath=${node.dataContextPath ?? ''}
             .enableDate=${node.properties.enableDate ?? true}
             .enableTime=${node.properties.enableTime ?? true}
             .value=${node.properties.value}
@@ -354,14 +342,14 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-datetimeinput>`;
         }
 
-        case "Divider": {
+        case 'Divider': {
           // TODO: thickness, axis and color.
-          const node = component as NodeOfType<"Divider">;
+          const node = component as NodeOfType<'Divider'>;
           return html`<a2ui-divider
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .dataContextPath=${node.dataContextPath}
@@ -372,14 +360,14 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-divider>`;
         }
 
-        case "MultipleChoice": {
+        case 'MultipleChoice': {
           // TODO: maxAllowedSelections and selections.
-          const node = component as NodeOfType<"MultipleChoice">;
+          const node = component as NodeOfType<'MultipleChoice'>;
           return html`<a2ui-multiplechoice
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .dataContextPath=${node.dataContextPath}
@@ -392,13 +380,13 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-multiplechoice>`;
         }
 
-        case "Slider": {
-          const node = component as NodeOfType<"Slider">;
+        case 'Slider': {
+          const node = component as NodeOfType<'Slider'>;
           return html`<a2ui-slider
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .dataContextPath=${node.dataContextPath}
@@ -409,14 +397,14 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-slider>`;
         }
 
-        case "TextField": {
+        case 'TextField': {
           // TODO: type and validationRegexp.
-          const node = component as NodeOfType<"TextField">;
+          const node = component as NodeOfType<'TextField'>;
           return html`<a2ui-textfield
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .dataContextPath=${node.dataContextPath}
@@ -428,13 +416,13 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-textfield>`;
         }
 
-        case "Video": {
-          const node = component as NodeOfType<"Video">;
+        case 'Video': {
+          const node = component as NodeOfType<'Video'>;
           return html`<a2ui-video
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .dataContextPath=${node.dataContextPath}
@@ -443,8 +431,8 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-video>`;
         }
 
-        case "Tabs": {
-          const node = component as NodeOfType<"Tabs">;
+        case 'Tabs': {
+          const node = component as NodeOfType<'Tabs'>;
           const titles: StringValue[] = [];
           const childComponents: AnyComponentNode[] = [];
           if (node.properties.tabItems) {
@@ -458,7 +446,7 @@ export class Root extends SignalWatcher(LitElement) {
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .dataContextPath=${node.dataContextPath}
@@ -468,20 +456,20 @@ export class Root extends SignalWatcher(LitElement) {
           ></a2ui-tabs>`;
         }
 
-        case "Modal": {
-          const node = component as NodeOfType<"Modal">;
+        case 'Modal': {
+          const node = component as NodeOfType<'Modal'>;
           const childComponents: AnyComponentNode[] = [
             node.properties.entryPointChild,
             node.properties.contentChild,
           ];
 
-          node.properties.entryPointChild.slotName = "entry";
+          node.properties.entryPointChild.slotName = 'entry';
 
           return html`<a2ui-modal
             id=${node.id}
             slot=${node.slotName ? node.slotName : nothing}
             .component=${node}
-            .weight=${node.weight ?? "initial"}
+            .weight=${node.weight ?? 'initial'}
             .processor=${this.processor}
             .surfaceId=${this.surfaceId}
             .dataContextPath=${node.dataContextPath}
@@ -516,10 +504,10 @@ export class Root extends SignalWatcher(LitElement) {
       el.slot = node.slotName;
     }
     el.component = node;
-    el.weight = node.weight ?? "initial";
+    el.weight = node.weight ?? 'initial';
     el.processor = this.processor;
     el.surfaceId = this.surfaceId;
-    el.dataContextPath = node.dataContextPath ?? "/";
+    el.dataContextPath = node.dataContextPath ?? '/';
 
     for (const [prop, val] of Object.entries(component.properties)) {
       // @ts-expect-error We're off the books.
diff --git a/renderers/lit/src/0.8/ui/row.ts b/renderers/lit/src/0.8/ui/row.ts
index 6f44da66c..26a1e6d40 100644
--- a/renderers/lit/src/0.8/ui/row.ts
+++ b/renderers/lit/src/0.8/ui/row.ts
@@ -14,21 +14,21 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { classMap } from "lit/directives/class-map.js";
-import * as Types from "@a2ui/web_core/types/types";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-
-@customElement("a2ui-row")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {classMap} from 'lit/directives/class-map.js';
+import * as Types from '@a2ui/web_core/types/types';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+
+@customElement('a2ui-row')
 export class Row extends Root {
-  @property({ reflect: true, type: String })
-  accessor alignment: Types.ResolvedRow["alignment"] = "stretch";
+  @property({reflect: true, type: String})
+  accessor alignment: Types.ResolvedRow['alignment'] = 'stretch';
 
-  @property({ reflect: true, type: String })
-  accessor distribution: Types.ResolvedRow["distribution"] = "start";
+  @property({reflect: true, type: String})
+  accessor distribution: Types.ResolvedRow['distribution'] = 'start';
 
   static styles = [
     structuralStyles,
@@ -49,43 +49,43 @@ export class Row extends Root {
         min-height: 100%;
       }
 
-      :host([alignment="start"]) section {
+      :host([alignment='start']) section {
         align-items: start;
       }
 
-      :host([alignment="center"]) section {
+      :host([alignment='center']) section {
         align-items: center;
       }
 
-      :host([alignment="end"]) section {
+      :host([alignment='end']) section {
         align-items: end;
       }
 
-      :host([alignment="stretch"]) section {
+      :host([alignment='stretch']) section {
         align-items: stretch;
       }
 
-      :host([distribution="start"]) section {
+      :host([distribution='start']) section {
         justify-content: start;
       }
 
-      :host([distribution="center"]) section {
+      :host([distribution='center']) section {
         justify-content: center;
       }
 
-      :host([distribution="end"]) section {
+      :host([distribution='end']) section {
         justify-content: end;
       }
 
-      :host([distribution="spaceBetween"]) section {
+      :host([distribution='spaceBetween']) section {
         justify-content: space-between;
       }
 
-      :host([distribution="spaceAround"]) section {
+      :host([distribution='spaceAround']) section {
         justify-content: space-around;
       }
 
-      :host([distribution="spaceEvenly"]) section {
+      :host([distribution='spaceEvenly']) section {
         justify-content: space-evenly;
       }
     `,
diff --git a/renderers/lit/src/0.8/ui/slider.ts b/renderers/lit/src/0.8/ui/slider.ts
index 791279a71..05ce71e8d 100644
--- a/renderers/lit/src/0.8/ui/slider.ts
+++ b/renderers/lit/src/0.8/ui/slider.ts
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import * as Types from "@a2ui/web_core/types/types";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-import { extractNumberValue, extractStringValue } from "./utils/utils.js";
-
-@customElement("a2ui-slider")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import * as Types from '@a2ui/web_core/types/types';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+import {extractNumberValue, extractStringValue} from './utils/utils.js';
+
+@customElement('a2ui-slider')
 export class Slider extends Root {
   @property()
   accessor value: Primitives.NumberValue | null = null;
@@ -66,7 +66,7 @@ export class Slider extends Root {
       return;
     }
 
-    if (!("path" in this.value)) {
+    if (!('path' in this.value)) {
       return;
     }
 
@@ -78,22 +78,15 @@ export class Slider extends Root {
       this.component,
       this.value.path,
       value,
-      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
     );
   }
 
   #renderField(value: string | number) {
-    return html`<section
-      class=${classMap(this.theme.components.Slider.container)}
-    >
+    return html`<section class=${classMap(this.theme.components.Slider.container)}>
       ${this.label
         ? html`<label class=${classMap(this.theme.components.Slider.label)} for="data">
-            ${extractStringValue(
-              this.label,
-              this.component,
-              this.processor,
-              this.surfaceId
-            )}
+            ${extractStringValue(this.label, this.component, this.processor, this.surfaceId)}
           </label>`
         : nothing}
       <input
@@ -113,29 +106,24 @@ export class Slider extends Root {
         name="data"
         .value=${value}
         type="range"
-        min=${this.minValue ?? "0"}
-        max=${this.maxValue ?? "0"}
+        min=${this.minValue ?? '0'}
+        max=${this.maxValue ?? '0'}
       />
       <span class=${classMap(this.theme.components.Slider.label)}
         >${this.value
-          ? extractNumberValue(
-              this.value,
-              this.component,
-              this.processor,
-              this.surfaceId
-            )
-          : "0"}</span
+          ? extractNumberValue(this.value, this.component, this.processor, this.surfaceId)
+          : '0'}</span
       >
     </section>`;
   }
 
   render() {
-    if (this.value && typeof this.value === "object") {
-      if ("literalNumber" in this.value && this.value.literalNumber) {
+    if (this.value && typeof this.value === 'object') {
+      if ('literalNumber' in this.value && this.value.literalNumber) {
         return this.#renderField(this.value.literalNumber);
-      } else if ("literal" in this.value && this.value.literal !== undefined) {
+      } else if ('literal' in this.value && this.value.literal !== undefined) {
         return this.#renderField(this.value.literal);
-      } else if (this.value && "path" in this.value && this.value.path) {
+      } else if (this.value && 'path' in this.value && this.value.path) {
         if (!this.processor || !this.component) {
           return html`(no processor)`;
         }
@@ -143,14 +131,14 @@ export class Slider extends Root {
         const textValue = this.processor.getData(
           this.component,
           this.value.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
 
         if (textValue === null) {
           return html`Invalid value`;
         }
 
-        if (typeof textValue !== "string" && typeof textValue !== "number") {
+        if (typeof textValue !== 'string' && typeof textValue !== 'number') {
           return html`Invalid value`;
         }
 
diff --git a/renderers/lit/src/0.8/ui/styles.ts b/renderers/lit/src/0.8/ui/styles.ts
index 77077a665..36c87bcf7 100644
--- a/renderers/lit/src/0.8/ui/styles.ts
+++ b/renderers/lit/src/0.8/ui/styles.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import type { CSSResultGroup } from "lit";
-import * as Styles from "@a2ui/web_core/styles/index";
+import type {CSSResultGroup} from 'lit';
+import * as Styles from '@a2ui/web_core/styles/index';
 
 const buildStructuralStyles = (): CSSResultGroup => {
-  if (typeof window === "undefined") {
+  if (typeof window === 'undefined') {
     return [];
   }
 
@@ -27,7 +27,7 @@ const buildStructuralStyles = (): CSSResultGroup => {
     styleSheet.replaceSync(Styles.structuralStyles);
     return styleSheet;
   } catch (e) {
-    throw new Error("Failed to construct structural styles.", { cause: e });
+    throw new Error('Failed to construct structural styles.', {cause: e});
   }
 };
 
diff --git a/renderers/lit/src/0.8/ui/surface.ts b/renderers/lit/src/0.8/ui/surface.ts
index aa63f1eb5..d79ef0861 100644
--- a/renderers/lit/src/0.8/ui/surface.ts
+++ b/renderers/lit/src/0.8/ui/surface.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import * as Types from "@a2ui/web_core/types/types";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import { Root } from "./root.js";
-import { styleMap } from "lit/directives/style-map.js";
-
-@customElement("a2ui-surface")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import * as Types from '@a2ui/web_core/types/types';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import {Root} from './root.js';
+import {styleMap} from 'lit/directives/style-map.js';
+
+@customElement('a2ui-surface')
 export class Surface extends Root {
   @property()
   accessor surfaceId: Types.SurfaceID | null = null;
@@ -71,7 +71,6 @@ export class Surface extends Root {
   @property()
   accessor enableCustomElements = false;
 
-
   #renderSurface() {
     const styles: Record<string, string> = {};
     if (this.surface?.styles) {
@@ -87,31 +86,31 @@ export class Surface extends Root {
           // and half the range for primary color to white the mixed values have
           // to go up double the amount, i.e., a range from black to primary
           // color needs to fit in 0 -> 50 rather than 0 -> 100.
-          case "primaryColor": {
-            styles["--p-100"] = "#ffffff";
-            styles["--p-99"] = `color-mix(in srgb, ${value} 2%, white 98%)`;
-            styles["--p-98"] = `color-mix(in srgb, ${value} 4%, white 96%)`;
-            styles["--p-95"] = `color-mix(in srgb, ${value} 10%, white 90%)`;
-            styles["--p-90"] = `color-mix(in srgb, ${value} 20%, white 80%)`;
-            styles["--p-80"] = `color-mix(in srgb, ${value} 40%, white 60%)`;
-            styles["--p-70"] = `color-mix(in srgb, ${value} 60%, white 40%)`;
-            styles["--p-60"] = `color-mix(in srgb, ${value} 80%, white 20%)`;
-            styles["--p-50"] = value;
-            styles["--p-40"] = `color-mix(in srgb, ${value} 80%, black 20%)`;
-            styles["--p-35"] = `color-mix(in srgb, ${value} 70%, black 30%)`;
-            styles["--p-30"] = `color-mix(in srgb, ${value} 60%, black 40%)`;
-            styles["--p-25"] = `color-mix(in srgb, ${value} 50%, black 50%)`;
-            styles["--p-20"] = `color-mix(in srgb, ${value} 40%, black 60%)`;
-            styles["--p-15"] = `color-mix(in srgb, ${value} 30%, black 70%)`;
-            styles["--p-10"] = `color-mix(in srgb, ${value} 20%, black 80%)`;
-            styles["--p-5"] = `color-mix(in srgb, ${value} 10%, black 90%)`;
-            styles["--0"] = "#00000";
+          case 'primaryColor': {
+            styles['--p-100'] = '#ffffff';
+            styles['--p-99'] = `color-mix(in srgb, ${value} 2%, white 98%)`;
+            styles['--p-98'] = `color-mix(in srgb, ${value} 4%, white 96%)`;
+            styles['--p-95'] = `color-mix(in srgb, ${value} 10%, white 90%)`;
+            styles['--p-90'] = `color-mix(in srgb, ${value} 20%, white 80%)`;
+            styles['--p-80'] = `color-mix(in srgb, ${value} 40%, white 60%)`;
+            styles['--p-70'] = `color-mix(in srgb, ${value} 60%, white 40%)`;
+            styles['--p-60'] = `color-mix(in srgb, ${value} 80%, white 20%)`;
+            styles['--p-50'] = value;
+            styles['--p-40'] = `color-mix(in srgb, ${value} 80%, black 20%)`;
+            styles['--p-35'] = `color-mix(in srgb, ${value} 70%, black 30%)`;
+            styles['--p-30'] = `color-mix(in srgb, ${value} 60%, black 40%)`;
+            styles['--p-25'] = `color-mix(in srgb, ${value} 50%, black 50%)`;
+            styles['--p-20'] = `color-mix(in srgb, ${value} 40%, black 60%)`;
+            styles['--p-15'] = `color-mix(in srgb, ${value} 30%, black 70%)`;
+            styles['--p-10'] = `color-mix(in srgb, ${value} 20%, black 80%)`;
+            styles['--p-5'] = `color-mix(in srgb, ${value} 10%, black 90%)`;
+            styles['--0'] = '#00000';
             break;
           }
 
-          case "font": {
-            styles["--font-family"] = value;
-            styles["--font-family-flex"] = value;
+          case 'font': {
+            styles['--font-family'] = value;
+            styles['--font-family-flex'] = value;
             break;
           }
         }
@@ -122,9 +121,7 @@ export class Surface extends Root {
       style=${styleMap(styles)}
       .surfaceId=${this.surfaceId}
       .processor=${this.processor}
-      .childComponents=${this.surface?.componentTree
-        ? [this.surface.componentTree]
-        : null}
+      .childComponents=${this.surface?.componentTree ? [this.surface.componentTree] : null}
       .enableCustomElements=${this.enableCustomElements}
     ></a2ui-root>`;
   }
diff --git a/renderers/lit/src/0.8/ui/tabs.ts b/renderers/lit/src/0.8/ui/tabs.ts
index a0ea5d544..2a54e89d7 100644
--- a/renderers/lit/src/0.8/ui/tabs.ts
+++ b/renderers/lit/src/0.8/ui/tabs.ts
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { html, css, PropertyValues, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { repeat } from "lit/directives/repeat.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-import { Styles } from "../index.js";
-
-@customElement("a2ui-tabs")
+import {html, css, PropertyValues, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {repeat} from 'lit/directives/repeat.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+import {Styles} from '../index.js';
+
+@customElement('a2ui-tabs')
 export class Tabs extends Root {
   @property()
   accessor titles: Primitives.StringValue[] | null = null;
@@ -46,16 +46,16 @@ export class Tabs extends Root {
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     super.willUpdate(changedProperties);
 
-    if (changedProperties.has("selected")) {
+    if (changedProperties.has('selected')) {
       for (const child of this.children) {
-        child.removeAttribute("slot");
+        child.removeAttribute('slot');
       }
       const selectedChild = this.children[this.selected];
       if (!selectedChild) {
         return;
       }
 
-      selectedChild.slot = "current";
+      selectedChild.slot = 'current';
     }
   }
 
@@ -64,17 +64,14 @@ export class Tabs extends Root {
       return nothing;
     }
 
-    return html`<div
-      id="buttons"
-      class=${classMap(this.theme.components.Tabs.element)}
-    >
+    return html`<div id="buttons" class=${classMap(this.theme.components.Tabs.element)}>
       ${repeat(this.titles, (title, idx) => {
-        let titleString = "";
-        if ("literalString" in title && title.literalString) {
+        let titleString = '';
+        if ('literalString' in title && title.literalString) {
           titleString = title.literalString;
-        } else if ("literal" in title && title.literal !== undefined) {
+        } else if ('literal' in title && title.literal !== undefined) {
           titleString = title.literal;
-        } else if (title && "path" in title && title.path) {
+        } else if (title && 'path' in title && title.path) {
           if (!this.processor || !this.component) {
             return html`(no model)`;
           }
@@ -82,10 +79,10 @@ export class Tabs extends Root {
           const textValue = this.processor.getData(
             this.component,
             title.path,
-            this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+            this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
           );
 
-          if (typeof textValue !== "string") {
+          if (typeof textValue !== 'string') {
             return html`(invalid)`;
           }
 
@@ -96,10 +93,10 @@ export class Tabs extends Root {
         if (this.selected === idx) {
           classes = Styles.merge(
             this.theme.components.Tabs.controls.all,
-            this.theme.components.Tabs.controls.selected
+            this.theme.components.Tabs.controls.selected,
           );
         } else {
-          classes = { ...this.theme.components.Tabs.controls.all };
+          classes = {...this.theme.components.Tabs.controls.all};
         }
 
         return html`<button
diff --git a/renderers/lit/src/0.8/ui/text-field.ts b/renderers/lit/src/0.8/ui/text-field.ts
index 90caf76be..f7c1d80a4 100644
--- a/renderers/lit/src/0.8/ui/text-field.ts
+++ b/renderers/lit/src/0.8/ui/text-field.ts
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import * as Types from "@a2ui/web_core/types/types";
-import { Events } from "@a2ui/web_core";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { extractStringValue } from "./utils/utils.js";
-import { structuralStyles } from "./styles.js";
-
-@customElement("a2ui-textfield")
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import * as Types from '@a2ui/web_core/types/types';
+import {Events} from '@a2ui/web_core';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {extractStringValue} from './utils/utils.js';
+import {structuralStyles} from './styles.js';
+
+@customElement('a2ui-textfield')
 export class TextField extends Root {
   @property()
   accessor text: Primitives.StringValue | null = null;
@@ -35,7 +35,7 @@ export class TextField extends Root {
   accessor label: Primitives.StringValue | null = null;
 
   @property()
-  accessor textFieldType: Types.ResolvedTextField["textFieldType"] | null = null;
+  accessor textFieldType: Types.ResolvedTextField['textFieldType'] | null = null;
 
   @property()
   accessor validationRegexp: string | null = null;
@@ -79,7 +79,7 @@ export class TextField extends Root {
     if (!this.text || !this.processor) {
       return;
     }
-    if (!("path" in this.text)) {
+    if (!('path' in this.text)) {
       return;
     }
     if (!this.text.path) {
@@ -90,18 +90,14 @@ export class TextField extends Root {
       this.component,
       this.text.path,
       value,
-      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+      this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
     );
   }
 
   #renderField(value: string | number, label: string) {
-    return html` <section
-      class=${classMap(this.theme.components.TextField.container)}
-    >
-      ${label && label !== ""
-        ? html`<label
-            class=${classMap(this.theme.components.TextField.label)}
-            for="data"
+    return html` <section class=${classMap(this.theme.components.TextField.container)}>
+      ${label && label !== ''
+        ? html`<label class=${classMap(this.theme.components.TextField.label)} for="data"
             >${label}</label
           >`
         : nothing}
@@ -116,39 +112,29 @@ export class TextField extends Root {
             return;
           }
 
-      this.dispatchEvent(
-        new Events.A2UIValidationEvent({
-          componentId: this.id,
-          value: evt.target.value,
-          valid: evt.target.checkValidity(),
-            })
-      );
+          this.dispatchEvent(
+            new Events.A2UIValidationEvent({
+              componentId: this.id,
+              value: evt.target.value,
+              valid: evt.target.checkValidity(),
+            }),
+          );
 
           this.#setBoundValue(evt.target.value);
         }}
         name="data"
         id="data"
         .value=${value}
-        .placeholder=${"Please enter a value"}
+        .placeholder=${'Please enter a value'}
         pattern=${this.validationRegexp || nothing}
-        type=${this.textFieldType === "number" ? "number" : "text"}
+        type=${this.textFieldType === 'number' ? 'number' : 'text'}
       />
     </section>`;
   }
 
   render() {
-    const label = extractStringValue(
-      this.label,
-      this.component,
-      this.processor,
-      this.surfaceId
-    );
-    const value = extractStringValue(
-      this.text,
-      this.component,
-      this.processor,
-      this.surfaceId
-    );
+    const label = extractStringValue(this.label, this.component, this.processor, this.surfaceId);
+    const value = extractStringValue(this.text, this.component, this.processor, this.surfaceId);
 
     return this.#renderField(value, label);
   }
diff --git a/renderers/lit/src/0.8/ui/text.ts b/renderers/lit/src/0.8/ui/text.ts
index 8e2b62b68..3cb837df8 100644
--- a/renderers/lit/src/0.8/ui/text.ts
+++ b/renderers/lit/src/0.8/ui/text.ts
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { markdown } from "./directives/directives.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import * as Types from "@a2ui/web_core/types/types";
-import * as Context from "./context/context.js";
-import { consume } from "@lit/context";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
-import { Styles } from "../index.js";
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {markdown} from './directives/directives.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import * as Types from '@a2ui/web_core/types/types';
+import * as Context from './context/context.js';
+import {consume} from '@lit/context';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
+import {Styles} from '../index.js';
 
 interface HintedStyles {
   h1: Record<string, string>;
@@ -38,13 +38,13 @@ interface HintedStyles {
   caption: Record<string, string>;
 }
 
-@customElement("a2ui-text")
+@customElement('a2ui-text')
 export class Text extends Root {
   @property()
   accessor text: Primitives.StringValue | null = null;
 
-  @property({ reflect: true, attribute: "usage-hint" })
-  accessor usageHint: Types.ResolvedText["usageHint"] | null = null;
+  @property({reflect: true, attribute: 'usage-hint'})
+  accessor usageHint: Types.ResolvedText['usageHint'] | null = null;
 
   // Allow users to specify their own markdown renderer,
   // or the one provided by @a2ui/markdown-it.
@@ -73,12 +73,12 @@ export class Text extends Root {
   #renderText() {
     let textValue: string | null | undefined = null;
 
-    if (this.text && typeof this.text === "object") {
-      if ("literalString" in this.text && this.text.literalString) {
+    if (this.text && typeof this.text === 'object') {
+      if ('literalString' in this.text && this.text.literalString) {
         textValue = this.text.literalString;
-      } else if ("literal" in this.text && this.text.literal !== undefined) {
+      } else if ('literal' in this.text && this.text.literal !== undefined) {
         textValue = this.text.literal;
-      } else if (this.text && "path" in this.text && this.text.path) {
+      } else if (this.text && 'path' in this.text && this.text.path) {
         if (!this.processor || !this.component) {
           return html`(no model)`;
         }
@@ -86,7 +86,7 @@ export class Text extends Root {
         const value = this.processor.getData(
           this.component,
           this.text.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
 
         if (value !== null && value !== undefined) {
@@ -101,43 +101,40 @@ export class Text extends Root {
 
     let markdownText = textValue;
     switch (this.usageHint) {
-      case "h1":
+      case 'h1':
         markdownText = `# ${markdownText}`;
         break;
-      case "h2":
+      case 'h2':
         markdownText = `## ${markdownText}`;
         break;
-      case "h3":
+      case 'h3':
         markdownText = `### ${markdownText}`;
         break;
-      case "h4":
+      case 'h4':
         markdownText = `#### ${markdownText}`;
         break;
-      case "h5":
+      case 'h5':
         markdownText = `##### ${markdownText}`;
         break;
-      case "caption":
+      case 'caption':
         markdownText = `*${markdownText}*`;
         break;
       default:
         break; // Body.
     }
 
-    return html`${markdown(
-      markdownText,
-      this.markdownRenderer, {
-        tagClassMap: Styles.appendToAll(this.theme.markdown, ["ol", "ul", "li"], {})
-      },
-    )}`;
+    return html`${markdown(markdownText, this.markdownRenderer, {
+      tagClassMap: Styles.appendToAll(this.theme.markdown, ['ol', 'ul', 'li'], {}),
+    })}`;
   }
 
   #areHintedStyles(styles: unknown): styles is HintedStyles {
-    if (typeof styles !== "object") return false;
+    if (typeof styles !== 'object') return false;
     if (Array.isArray(styles)) return false;
     if (!styles) return false;
 
-    const expected = ["h1", "h2", "h3", "h4", "h5", "h6", "caption", "body"];
-    return expected.every((v) => v in styles);
+    const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'caption', 'body'];
+    return expected.every(v => v in styles);
   }
 
   #getAdditionalStyles() {
@@ -146,7 +143,7 @@ export class Text extends Root {
     if (!styles) return additionalStyles;
 
     if (this.#areHintedStyles(styles)) {
-      const hint = this.usageHint ?? "body";
+      const hint = this.usageHint ?? 'body';
       additionalStyles = styles[hint] as Record<string, string>;
     } else {
       additionalStyles = styles;
@@ -158,14 +155,12 @@ export class Text extends Root {
   render() {
     const classes = Styles.merge(
       this.theme.components.Text.all,
-      this.usageHint ? this.theme.components.Text[this.usageHint] : {}
+      this.usageHint ? this.theme.components.Text[this.usageHint] : {},
     );
 
     return html`<section
       class=${classMap(classes)}
-      style=${this.theme.additionalStyles?.Text
-        ? styleMap(this.#getAdditionalStyles())
-        : nothing}
+      style=${this.theme.additionalStyles?.Text ? styleMap(this.#getAdditionalStyles()) : nothing}
     >
       ${this.#renderText()}
     </section>`;
diff --git a/renderers/lit/src/0.8/ui/ui.ts b/renderers/lit/src/0.8/ui/ui.ts
index 1b50d53d7..879fc8348 100644
--- a/renderers/lit/src/0.8/ui/ui.ts
+++ b/renderers/lit/src/0.8/ui/ui.ts
@@ -22,31 +22,31 @@ export type CustomElementConstructorOf<T extends HTMLElement> = {
   new (): T;
 } & typeof HTMLElement;
 
-import { Audio } from "./audio.js";
-import { Button } from "./button.js";
-import { Card } from "./card.js";
-import { Checkbox } from "./checkbox.js";
-import { Column } from "./column.js";
-import { DateTimeInput } from "./datetime-input.js";
-import { Divider } from "./divider.js";
-import { Icon } from "./icon.js";
-import { Image } from "./image.js";
-import { List } from "./list.js";
-import { MultipleChoice } from "./multiple-choice.js";
-import { Modal } from "./modal.js";
-import { Root } from "./root.js";
-import { Row } from "./row.js";
-import { Slider } from "./slider.js";
-import { Surface } from "./surface.js";
-import { Tabs } from "./tabs.js";
-import { TextField } from "./text-field.js";
-import { Text } from "./text.js";
-import { Video } from "./video.js";
+import {Audio} from './audio.js';
+import {Button} from './button.js';
+import {Card} from './card.js';
+import {Checkbox} from './checkbox.js';
+import {Column} from './column.js';
+import {DateTimeInput} from './datetime-input.js';
+import {Divider} from './divider.js';
+import {Icon} from './icon.js';
+import {Image} from './image.js';
+import {List} from './list.js';
+import {MultipleChoice} from './multiple-choice.js';
+import {Modal} from './modal.js';
+import {Root} from './root.js';
+import {Row} from './row.js';
+import {Slider} from './slider.js';
+import {Surface} from './surface.js';
+import {Tabs} from './tabs.js';
+import {TextField} from './text-field.js';
+import {Text} from './text.js';
+import {Video} from './video.js';
 
-export * as Context from "./context/context.js";
-export * as Utils from "./utils/utils.js";
-export { ComponentRegistry, componentRegistry } from "./component-registry.js";
-export { registerCustomComponents } from "./custom-components/index.js";
+export * as Context from './context/context.js';
+export * as Utils from './utils/utils.js';
+export {ComponentRegistry, componentRegistry} from './component-registry.js';
+export {registerCustomComponents} from './custom-components/index.js';
 
 export {
   Audio,
@@ -72,26 +72,26 @@ export {
 };
 
 interface A2UITagNameMap {
-  "a2ui-audioplayer": Audio;
-  "a2ui-button": Button;
-  "a2ui-card": Card;
-  "a2ui-checkbox": Checkbox;
-  "a2ui-column": Column;
-  "a2ui-datetimeinput": DateTimeInput;
-  "a2ui-divider": Divider;
-  "a2ui-icon": Icon;
-  "a2ui-image": Image;
-  "a2ui-list": List;
-  "a2ui-modal": Modal;
-  "a2ui-multiplechoice": MultipleChoice;
-  "a2ui-root": Root;
-  "a2ui-row": Row;
-  "a2ui-slider": Slider;
-  "a2ui-surface": Surface;
-  "a2ui-tabs": Tabs;
-  "a2ui-text": Text;
-  "a2ui-textfield": TextField;
-  "a2ui-video": Video;
+  'a2ui-audioplayer': Audio;
+  'a2ui-button': Button;
+  'a2ui-card': Card;
+  'a2ui-checkbox': Checkbox;
+  'a2ui-column': Column;
+  'a2ui-datetimeinput': DateTimeInput;
+  'a2ui-divider': Divider;
+  'a2ui-icon': Icon;
+  'a2ui-image': Image;
+  'a2ui-list': List;
+  'a2ui-modal': Modal;
+  'a2ui-multiplechoice': MultipleChoice;
+  'a2ui-root': Root;
+  'a2ui-row': Row;
+  'a2ui-slider': Slider;
+  'a2ui-surface': Surface;
+  'a2ui-tabs': Tabs;
+  'a2ui-text': Text;
+  'a2ui-textfield': TextField;
+  'a2ui-video': Video;
 }
 
 declare global {
@@ -111,7 +111,7 @@ export function instanceOf<T extends keyof A2UITagNameMap>(tagName: T) {
     | CustomElementConstructorOf<A2UITagNameMap[T]>
     | undefined;
   if (!ctor) {
-    console.warn("No element definition for", tagName);
+    console.warn('No element definition for', tagName);
     return;
   }
 
diff --git a/renderers/lit/src/0.8/ui/utils/utils.ts b/renderers/lit/src/0.8/ui/utils/utils.ts
index 5c710f14a..ba10067cb 100644
--- a/renderers/lit/src/0.8/ui/utils/utils.ts
+++ b/renderers/lit/src/0.8/ui/utils/utils.ts
@@ -14,55 +14,55 @@
  * limitations under the License.
  */
 
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import * as Types from "@a2ui/web_core/types/types";
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import * as Types from '@a2ui/web_core/types/types';
 
 export function extractStringValue(
   val: Primitives.StringValue | null,
   component: Types.AnyComponentNode | null,
   processor: A2uiMessageProcessor | null,
-  surfaceId: string | null
+  surfaceId: string | null,
 ): string {
-  if (val !== null && typeof val === "object") {
-    if ("literalString" in val) {
-      return val.literalString ?? "";
-    } else if ("literal" in val && val.literal !== undefined) {
-      return val.literal ?? "";
-    } else if (val && "path" in val && val.path) {
+  if (val !== null && typeof val === 'object') {
+    if ('literalString' in val) {
+      return val.literalString ?? '';
+    } else if ('literal' in val && val.literal !== undefined) {
+      return val.literal ?? '';
+    } else if (val && 'path' in val && val.path) {
       if (!processor || !component) {
-        return "(no model)";
+        return '(no model)';
       }
 
       const textValue = processor.getData(
         component,
         val.path,
-        surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
       );
 
-      if (textValue === null || typeof textValue !== "string") {
-        return "";
+      if (textValue === null || typeof textValue !== 'string') {
+        return '';
       }
 
       return textValue;
     }
   }
 
-  return "";
+  return '';
 }
 
 export function extractNumberValue(
   val: Primitives.NumberValue | null,
   component: Types.AnyComponentNode | null,
   processor: A2uiMessageProcessor | null,
-  surfaceId: string | null
+  surfaceId: string | null,
 ): number {
-  if (val !== null && typeof val === "object") {
-    if ("literalNumber" in val) {
+  if (val !== null && typeof val === 'object') {
+    if ('literalNumber' in val) {
       return val.literalNumber ?? 0;
-    } else if ("literal" in val && val.literal !== undefined) {
+    } else if ('literal' in val && val.literal !== undefined) {
       return val.literal ?? 0;
-    } else if (val && "path" in val && val.path) {
+    } else if (val && 'path' in val && val.path) {
       if (!processor || !component) {
         return -1;
       }
@@ -70,17 +70,17 @@ export function extractNumberValue(
       let numberValue = processor.getData(
         component,
         val.path,
-        surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+        surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
       );
 
-      if (typeof numberValue === "string") {
+      if (typeof numberValue === 'string') {
         numberValue = Number.parseInt(numberValue, 10);
         if (Number.isNaN(numberValue)) {
           numberValue = null;
         }
       }
 
-      if (numberValue === null || typeof numberValue !== "number") {
+      if (numberValue === null || typeof numberValue !== 'number') {
         return -1;
       }
 
diff --git a/renderers/lit/src/0.8/ui/utils/youtube.ts b/renderers/lit/src/0.8/ui/utils/youtube.ts
index 3b59f544f..916eec2e6 100644
--- a/renderers/lit/src/0.8/ui/utils/youtube.ts
+++ b/renderers/lit/src/0.8/ui/utils/youtube.ts
@@ -50,8 +50,7 @@ export function convertShareUriToEmbedUri(uri: string) {
 }
 
 export function convertWatchOrShortsUriToEmbedUri(uri: string) {
-  const regex =
-    /^https:\/\/www\.youtube\.com\/(?:shorts\/|embed\/|watch\?v=)(.*?)(?:[&\\?]|$)/;
+  const regex = /^https:\/\/www\.youtube\.com\/(?:shorts\/|embed\/|watch\?v=)(.*?)(?:[&\\?]|$)/;
   const matches = regex.exec(uri);
   if (!matches) {
     return null;
@@ -62,8 +61,7 @@ export function convertWatchOrShortsUriToEmbedUri(uri: string) {
 }
 
 export function videoIdFromWatchOrShortsOrEmbedUri(uri: string) {
-  const regex =
-    /^https:\/\/www\.youtube\.com\/(?:shorts\/|embed\/|watch\?v=)(.*?)(?:[&\\?]|$)/;
+  const regex = /^https:\/\/www\.youtube\.com\/(?:shorts\/|embed\/|watch\?v=)(.*?)(?:[&\\?]|$)/;
   const matches = regex.exec(uri);
   if (!matches) {
     return null;
diff --git a/renderers/lit/src/0.8/ui/video.ts b/renderers/lit/src/0.8/ui/video.ts
index 5062f628f..698212cb7 100644
--- a/renderers/lit/src/0.8/ui/video.ts
+++ b/renderers/lit/src/0.8/ui/video.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { Root } from "./root.js";
-import { A2uiMessageProcessor } from "@a2ui/web_core/data/model-processor";
-import * as Primitives from "@a2ui/web_core/types/primitives";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { structuralStyles } from "./styles.js";
+import {html, css, nothing} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {Root} from './root.js';
+import {A2uiMessageProcessor} from '@a2ui/web_core/data/model-processor';
+import * as Primitives from '@a2ui/web_core/types/primitives';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {structuralStyles} from './styles.js';
 
-@customElement("a2ui-video")
+@customElement('a2ui-video')
 export class Video extends Root {
   @property()
   accessor url: Primitives.StringValue | null = null;
@@ -54,12 +54,12 @@ export class Video extends Root {
       return nothing;
     }
 
-    if (this.url && typeof this.url === "object") {
-      if ("literalString" in this.url) {
+    if (this.url && typeof this.url === 'object') {
+      if ('literalString' in this.url) {
         return html`<video controls src=${this.url.literalString} />`;
-      } else if ("literal" in this.url) {
+      } else if ('literal' in this.url) {
         return html`<video controls src=${this.url.literal} />`;
-      } else if (this.url && "path" in this.url && this.url.path) {
+      } else if (this.url && 'path' in this.url && this.url.path) {
         if (!this.processor || !this.component) {
           return html`(no processor)`;
         }
@@ -67,13 +67,13 @@ export class Video extends Root {
         const videoUrl = this.processor.getData(
           this.component,
           this.url.path,
-          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID
+          this.surfaceId ?? A2uiMessageProcessor.DEFAULT_SURFACE_ID,
         );
         if (!videoUrl) {
           return html`Invalid video URL`;
         }
 
-        if (typeof videoUrl !== "string") {
+        if (typeof videoUrl !== 'string') {
           return html`Invalid video URL`;
         }
         return html`<video controls src=${videoUrl} />`;
diff --git a/renderers/lit/src/index.ts b/renderers/lit/src/index.ts
index be38a8563..7b1102cea 100644
--- a/renderers/lit/src/index.ts
+++ b/renderers/lit/src/index.ts
@@ -18,4 +18,4 @@
  * @deprecated Import v0.8 from '@a2ui/lit/v0_8'.
  * This entrypoint is maintained for backwards compatibility.
  */
-export * as v0_8 from "./0.8/index.js";
+export * as v0_8 from './0.8/index.js';
diff --git a/renderers/lit/src/v0_9/a2ui-controller.ts b/renderers/lit/src/v0_9/a2ui-controller.ts
index f09bef147..d4aba3ccb 100644
--- a/renderers/lit/src/v0_9/a2ui-controller.ts
+++ b/renderers/lit/src/v0_9/a2ui-controller.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { ReactiveController, LitElement } from "lit";
+import {ReactiveController, LitElement} from 'lit';
 import {
   GenericBinder,
   ComponentContext,
   ComponentApi,
   ResolveA2uiProps,
   InferredComponentApiSchemaType,
-} from "@a2ui/web_core/v0_9";
-import { A2uiLitElement } from "./a2ui-lit-element.js";
+} from '@a2ui/web_core/v0_9';
+import {A2uiLitElement} from './a2ui-lit-element.js';
 
 /**
  * A Lit ReactiveController that binds an A2UI component context to its API schema.
@@ -32,15 +32,13 @@ import { A2uiLitElement } from "./a2ui-lit-element.js";
  *
  * @template Api The specific A2UI component API interface this controller is bound to.
  */
-export class A2uiController<
-  Api extends ComponentApi,
-> implements ReactiveController {
+export class A2uiController<Api extends ComponentApi> implements ReactiveController {
   /**
    * The current reactive properties of the A2UI component, matching the expected output schema.
    */
   public props: ResolveA2uiProps<InferredComponentApiSchemaType<Api>>;
   private binder: GenericBinder<InferredComponentApiSchemaType<Api>>;
-  private subscription?: { unsubscribe: () => void };
+  private subscription?: {unsubscribe: () => void};
 
   /**
    * Initializes the controller, binding it to the given Lit element and API schema.
@@ -53,9 +51,7 @@ export class A2uiController<
     api: Api,
   ) {
     this.binder = new GenericBinder(this.host.context, api.schema);
-    this.props = this.binder.snapshot as ResolveA2uiProps<
-      InferredComponentApiSchemaType<Api>
-    >;
+    this.props = this.binder.snapshot as ResolveA2uiProps<InferredComponentApiSchemaType<Api>>;
     this.host.addController(this);
     if (this.host.isConnected) {
       this.hostConnected();
@@ -69,10 +65,8 @@ export class A2uiController<
    */
   hostConnected() {
     if (!this.subscription) {
-      this.subscription = this.binder.subscribe((newProps) => {
-        this.props = newProps as ResolveA2uiProps<
-          InferredComponentApiSchemaType<Api>
-        >;
+      this.subscription = this.binder.subscribe(newProps => {
+        this.props = newProps as ResolveA2uiProps<InferredComponentApiSchemaType<Api>>;
         this.host.requestUpdate();
       });
     }
diff --git a/renderers/lit/src/v0_9/a2ui-lit-element.ts b/renderers/lit/src/v0_9/a2ui-lit-element.ts
index 7032daf7d..4491f7204 100644
--- a/renderers/lit/src/v0_9/a2ui-lit-element.ts
+++ b/renderers/lit/src/v0_9/a2ui-lit-element.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { LitElement, nothing } from "lit";
-import { property } from "lit/decorators.js";
-import { ComponentContext, ComponentApi } from "@a2ui/web_core/v0_9";
-import { renderA2uiNode } from "./surface/render-a2ui-node.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {LitElement, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import {ComponentContext, ComponentApi} from '@a2ui/web_core/v0_9';
+import {renderA2uiNode} from './surface/render-a2ui-node.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
 /**
  * Represents a reference to a child component that should be rendered.
@@ -33,7 +33,7 @@ import { A2uiController } from "@a2ui/lit/v0_9";
  *
  * (This probably should come from the binder in web_core!)
  */
-type A2uiChildRef = string | { id?: string; basePath?: string; type?: string };
+type A2uiChildRef = string | {id?: string; basePath?: string; type?: string};
 
 /**
  * A base class for A2UI Lit elements that manages the A2uiController lifecycle.
@@ -45,10 +45,8 @@ type A2uiChildRef = string | { id?: string; basePath?: string; type?: string };
  *
  * @template Api The specific A2UI component API defining the schema for this element.
  */
-export abstract class A2uiLitElement<
-  Api extends ComponentApi,
-> extends LitElement {
-  @property({ type: Object }) accessor context!: ComponentContext;
+export abstract class A2uiLitElement<Api extends ComponentApi> extends LitElement {
+  @property({type: Object}) accessor context!: ComponentContext;
   protected controller!: A2uiController<Api>;
 
   /**
@@ -76,7 +74,7 @@ export abstract class A2uiLitElement<
   protected renderNode(childRef?: A2uiChildRef, customPath?: string) {
     if (!childRef) return nothing;
     let model: any = childRef;
-    const { surface, path: parentPath } = this.context.dataContext;
+    const {surface, path: parentPath} = this.context.dataContext;
 
     // Path is resolved in the following order:
     //   customPath > childRef.basePath > parentPath
@@ -85,12 +83,7 @@ export abstract class A2uiLitElement<
     // We check !childRef.type because an inline component definition (e.g. { type: 'Button' })
     // should be passed directly to the ComponentContext. If it doesn't have a .type,
     // we treat it as a child reference object (e.g. { id: 'foo', basePath: '/bar' }).
-    if (
-      typeof childRef === "object" &&
-      childRef !== null &&
-      childRef.id &&
-      !childRef.type
-    ) {
+    if (typeof childRef === 'object' && childRef !== null && childRef.id && !childRef.type) {
       model = childRef.id;
       path = path ?? childRef.basePath;
     }
@@ -98,10 +91,7 @@ export abstract class A2uiLitElement<
     // Fallback to the current component's context.
     path = path ?? parentPath;
 
-    return renderA2uiNode(
-      new ComponentContext(surface, model, path),
-      surface.catalog,
-    );
+    return renderA2uiNode(new ComponentContext(surface, model, path), surface.catalog);
   }
 
   /**
@@ -113,7 +103,7 @@ export abstract class A2uiLitElement<
    */
   willUpdate(changedProperties: Map<string, any>) {
     super.willUpdate(changedProperties);
-    if (changedProperties.has("context") && this.context) {
+    if (changedProperties.has('context') && this.context) {
       if (this.controller) {
         this.removeController(this.controller);
         this.controller.dispose();
diff --git a/renderers/lit/src/v0_9/catalogs/basic/basic-catalog-a2ui-lit-element.ts b/renderers/lit/src/v0_9/catalogs/basic/basic-catalog-a2ui-lit-element.ts
index 2ef972e6b..2dcf47dce 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/basic-catalog-a2ui-lit-element.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/basic-catalog-a2ui-lit-element.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentApi } from "@a2ui/web_core/v0_9";
-import { A2uiLitElement } from "../../a2ui-lit-element.js";
-import { injectBasicCatalogStyles } from "@a2ui/web_core/v0_9/basic_catalog";
+import {ComponentApi} from '@a2ui/web_core/v0_9';
+import {A2uiLitElement} from '../../a2ui-lit-element.js';
+import {injectBasicCatalogStyles} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * A base class for A2UI basic catalog components.
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/AudioPlayer.ts b/renderers/lit/src/v0_9/catalogs/basic/components/AudioPlayer.ts
index 14649b3f5..3c8b9010f 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/AudioPlayer.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/AudioPlayer.ts
@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { AudioPlayerApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {AudioPlayerApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-audioplayer")
-export class A2uiAudioPlayerElement extends BasicCatalogA2uiLitElement<
-  typeof AudioPlayerApi
-> {
+@customElement('a2ui-audioplayer')
+export class A2uiAudioPlayerElement extends BasicCatalogA2uiLitElement<typeof AudioPlayerApi> {
   static styles = css`
     :host {
       display: flex;
@@ -52,5 +50,5 @@ export class A2uiAudioPlayerElement extends BasicCatalogA2uiLitElement<
 
 export const A2uiAudioPlayer = {
   ...AudioPlayerApi,
-  tagName: "a2ui-audioplayer",
+  tagName: 'a2ui-audioplayer',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Button.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Button.ts
index e43b80cbf..4bab1f66c 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Button.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Button.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ButtonApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ButtonApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
 /**
  * A button component that can be used to trigger an action.
  */
-@customElement("a2ui-basic-button")
+@customElement('a2ui-basic-button')
 export class A2uiBasicButtonElement extends BasicCatalogA2uiLitElement<typeof ButtonApi> {
   /**
    * The styles of the button can be customized by redefining the following
@@ -48,10 +48,7 @@ export class A2uiBasicButtonElement extends BasicCatalogA2uiLitElement<typeof Bu
     }
     :where(:host) {
       --_color-primary: var(--a2ui-color-primary, #17e);
-      --_button-border-radius: var(
-        --a2ui-button-border-radius,
-        var(--a2ui-spacing-s, 0.25rem)
-      );
+      --_button-border-radius: var(--a2ui-button-border-radius, var(--a2ui-spacing-s, 0.25rem));
       --_button-padding: var(
         --a2ui-button-padding,
         var(--a2ui-spacing-m, 0.5rem) var(--a2ui-spacing-l, 1rem)
@@ -105,8 +102,8 @@ export class A2uiBasicButtonElement extends BasicCatalogA2uiLitElement<typeof Bu
     const isDisabled = props.isValid === false;
 
     const classes = {
-      "a2ui-button": true,
-      ["a2ui-button-" + (props.variant || "default")]: true,
+      'a2ui-button': true,
+      ['a2ui-button-' + (props.variant || 'default')]: true,
     };
 
     return html`
@@ -123,5 +120,5 @@ export class A2uiBasicButtonElement extends BasicCatalogA2uiLitElement<typeof Bu
 
 export const A2uiButton = {
   ...ButtonApi,
-  tagName: "a2ui-basic-button",
+  tagName: 'a2ui-basic-button',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Card.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Card.ts
index 075be3553..d4a9a9da4 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Card.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Card.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { CardApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {CardApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-card")
+@customElement('a2ui-card')
 export class A2uiCardElement extends BasicCatalogA2uiLitElement<typeof CardApi> {
   /**
    * The styles of the card can be customized by redefining the following
@@ -35,12 +35,15 @@ export class A2uiCardElement extends BasicCatalogA2uiLitElement<typeof CardApi>
   static styles = css`
     :host {
       display: block;
-      border: var(--a2ui-card-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));
+      border: var(
+        --a2ui-card-border,
+        var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)
+      );
       border-radius: var(--a2ui-card-border-radius, var(--a2ui-border-radius, 8px));
       padding: var(--a2ui-card-padding, var(--a2ui-spacing-m, 16px));
       background: var(--a2ui-card-background, var(--a2ui-color-surface, #fff));
       color: var(--a2ui-color-on-surface, #333);
-      box-shadow: var(--a2ui-card-box-shadow, 0 2px 4px rgba(0,0,0,0.1));
+      box-shadow: var(--a2ui-card-box-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
       margin: var(--a2ui-card-margin, var(--a2ui-spacing-m));
     }
   `;
@@ -53,13 +56,11 @@ export class A2uiCardElement extends BasicCatalogA2uiLitElement<typeof CardApi>
     const props = this.controller.props;
     if (!props) return nothing;
 
-    return html`
-      ${props.child ? html`${this.renderNode(props.child)}` : nothing}
-    `;
+    return html` ${props.child ? html`${this.renderNode(props.child)}` : nothing} `;
   }
 }
 
 export const A2uiCard = {
   ...CardApi,
-  tagName: "a2ui-card",
+  tagName: 'a2ui-card',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/CheckBox.ts b/renderers/lit/src/v0_9/catalogs/basic/components/CheckBox.ts
index 8109a89fb..89290a51a 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/CheckBox.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/CheckBox.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { CheckBoxApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {CheckBoxApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-checkbox")
+@customElement('a2ui-checkbox')
 export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof CheckBoxApi> {
   /**
    * The styles of the checkbox can be customized by redefining the following
@@ -48,7 +48,10 @@ export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof Check
       display: inline-flex;
       align-items: center;
       gap: var(--a2ui-checkbox-gap, var(--a2ui-spacing-s, 0.5rem));
-      font-size: var(--a2ui-checkbox-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s)));
+      font-size: var(
+        --a2ui-checkbox-label-font-size,
+        var(--a2ui-label-font-size, var(--a2ui-font-size-s))
+      );
       font-weight: var(--a2ui-checkbox-label-font-weight, var(--a2ui-label-font-weight, bold));
       cursor: pointer;
     }
@@ -81,8 +84,8 @@ export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof Check
     if (!props) return nothing;
 
     const isInvalid = props.isValid === false;
-    const labelClasses = { "a2ui-checkbox": true, invalid: isInvalid };
-    const inputClasses = { invalid: isInvalid };
+    const labelClasses = {'a2ui-checkbox': true, invalid: isInvalid};
+    const inputClasses = {invalid: isInvalid};
 
     return html`
       <div class="container">
@@ -91,8 +94,7 @@ export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof Check
             type="checkbox"
             class=${classMap(inputClasses)}
             .checked=${props.value || false}
-            @change=${(e: Event) =>
-              props.setValue?.((e.target as HTMLInputElement).checked)}
+            @change=${(e: Event) => props.setValue?.((e.target as HTMLInputElement).checked)}
           />
           ${props.label}
         </label>
@@ -106,5 +108,5 @@ export class A2uiCheckBoxElement extends BasicCatalogA2uiLitElement<typeof Check
 
 export const A2uiCheckBox = {
   ...CheckBoxApi,
-  tagName: "a2ui-checkbox",
+  tagName: 'a2ui-checkbox',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/ChoicePicker.ts b/renderers/lit/src/v0_9/catalogs/basic/components/ChoicePicker.ts
index 0362936cf..7e59f581e 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/ChoicePicker.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/ChoicePicker.ts
@@ -14,17 +14,15 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ChoicePickerApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {ChoicePickerApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-choicepicker")
-export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
-  typeof ChoicePickerApi
-> {
+@customElement('a2ui-choicepicker')
+export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<typeof ChoicePickerApi> {
   /**
    * The styles of the choice picker can be customized by redefining the following
    * CSS variables:
@@ -54,7 +52,10 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
       font-size: var(--a2ui-choicepicker-label-font-size, inherit);
     }
     :host > label {
-      font-size: var(--a2ui-choicepicker-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s)));
+      font-size: var(
+        --a2ui-choicepicker-label-font-size,
+        var(--a2ui-label-font-size, var(--a2ui-font-size-s))
+      );
       font-weight: var(--a2ui-choicepicker-label-font-weight, var(--a2ui-label-font-weight, bold));
     }
     .filter-input {
@@ -62,7 +63,10 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
       color: var(--a2ui-color-on-input, #333);
       border: var(--a2ui-textfield-border, var(--a2ui-border));
       border-radius: var(--a2ui-textfield-border-radius, var(--a2ui-spacing-m));
-      padding: var(--a2ui-choicepicker-filter-padding, var(--a2ui-spacing-xs, 4px) var(--a2ui-spacing-s, 8px));
+      padding: var(
+        --a2ui-choicepicker-filter-padding,
+        var(--a2ui-spacing-xs, 4px) var(--a2ui-spacing-s, 8px)
+      );
       font-family: inherit;
     }
     .filter-input:focus {
@@ -76,7 +80,10 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
       gap: var(--a2ui-choicepicker-gap, var(--a2ui-spacing-xs, 0.25rem));
     }
     .chip {
-      padding: var(--a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, 4px) var(--a2ui-spacing-m, 8px));
+      padding: var(
+        --a2ui-choicepicker-chip-padding,
+        var(--a2ui-spacing-s, 4px) var(--a2ui-spacing-m, 8px)
+      );
       border-radius: var(--a2ui-choicepicker-chip-border-radius, 999px);
       border: 1px solid var(--a2ui-color-border, #ccc);
       background-color: var(--a2ui-color-surface, #fff);
@@ -103,8 +110,8 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
     if (!props) return nothing;
 
     const selected = Array.isArray(props.value) ? props.value : [];
-    const isMulti = props.variant === "multipleSelection";
-    const isChips = props.displayStyle === "chips";
+    const isMulti = props.variant === 'multipleSelection';
+    const isChips = props.displayStyle === 'chips';
 
     const toggle = (val: string) => {
       if (!props.setValue) return;
@@ -122,8 +129,8 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
     const options = (props.options || []).filter(
       (opt: any) =>
         !props.filterable ||
-        this.filter === "" ||
-        String(opt.label).toLowerCase().includes(this.filter.toLowerCase())
+        this.filter === '' ||
+        String(opt.label).toLowerCase().includes(this.filter.toLowerCase()),
     );
 
     return html`
@@ -140,7 +147,7 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
             />
           `
         : nothing}
-      <div class=${classMap({ options: true, chips: isChips })}>
+      <div class=${classMap({options: true, chips: isChips})}>
         ${options.map((opt: any) =>
           isChips
             ? html`
@@ -158,13 +165,13 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
             : html`
                 <label>
                   <input
-                    type=${isMulti ? "checkbox" : "radio"}
+                    type=${isMulti ? 'checkbox' : 'radio'}
                     .checked=${selected.includes(opt.value)}
                     @change=${() => toggle(opt.value)}
                   />
                   ${opt.label}
                 </label>
-              `
+              `,
         )}
       </div>
     `;
@@ -173,5 +180,5 @@ export class A2uiChoicePickerElement extends BasicCatalogA2uiLitElement<
 
 export const A2uiChoicePicker = {
   ...ChoicePickerApi,
-  tagName: "a2ui-choicepicker",
+  tagName: 'a2ui-choicepicker',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Column.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Column.ts
index 8dfd50d1f..ab0bbf00a 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Column.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Column.ts
@@ -14,31 +14,31 @@
  * limitations under the License.
  */
 
-import { html, nothing, css, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
-import { ColumnApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css, PropertyValues} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {map} from 'lit/directives/map.js';
+import {ColumnApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
 const JUSTIFY_MAP: Record<string, string> = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  spaceBetween: "space-between",
-  spaceAround: "space-around",
-  spaceEvenly: "space-evenly",
-  stretch: "stretch",
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  spaceBetween: 'space-between',
+  spaceAround: 'space-around',
+  spaceEvenly: 'space-evenly',
+  stretch: 'stretch',
 };
 
 const ALIGN_MAP: Record<string, string> = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch",
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
 };
 
-@customElement("a2ui-basic-column")
+@customElement('a2ui-basic-column')
 export class A2uiBasicColumnElement extends BasicCatalogA2uiLitElement<typeof ColumnApi> {
   /**
    * The styles of the column can be customized by redefining the following
@@ -62,8 +62,8 @@ export class A2uiBasicColumnElement extends BasicCatalogA2uiLitElement<typeof Co
     super.updated(changedProperties);
     const props = this.controller.props;
     if (props) {
-      this.style.justifyContent = JUSTIFY_MAP[props.justify ?? ""] ?? "flex-start";
-      this.style.alignItems = ALIGN_MAP[props.align ?? ""] ?? "stretch";
+      this.style.justifyContent = JUSTIFY_MAP[props.justify ?? ''] ?? 'flex-start';
+      this.style.alignItems = ALIGN_MAP[props.align ?? ''] ?? 'stretch';
     }
   }
 
@@ -73,13 +73,11 @@ export class A2uiBasicColumnElement extends BasicCatalogA2uiLitElement<typeof Co
 
     const children = Array.isArray(props.children) ? props.children : [];
 
-    return html`
-      ${map(children, (child: any) => html`${this.renderNode(child)}`)}
-    `;
+    return html` ${map(children, (child: any) => html`${this.renderNode(child)}`)} `;
   }
 }
 
 export const A2uiColumn = {
   ...ColumnApi,
-  tagName: "a2ui-basic-column",
+  tagName: 'a2ui-basic-column',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts b/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts
index 1770a4a2b..475c6c3b1 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/DateTimeInput.ts
@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { DateTimeInputApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {DateTimeInputApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-datetimeinput")
-export class A2uiDateTimeInputElement extends BasicCatalogA2uiLitElement<
-  typeof DateTimeInputApi
-> {
+@customElement('a2ui-datetimeinput')
+export class A2uiDateTimeInputElement extends BasicCatalogA2uiLitElement<typeof DateTimeInputApi> {
   /**
    * The styles of the datetime input can be customized by redefining the following
    * CSS variables:
@@ -45,7 +43,10 @@ export class A2uiDateTimeInputElement extends BasicCatalogA2uiLitElement<
       padding: var(--a2ui-datetimeinput-padding, var(--a2ui-spacing-s));
     }
     label {
-      font-size: var(--a2ui-datetimeinput-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s)));
+      font-size: var(
+        --a2ui-datetimeinput-label-font-size,
+        var(--a2ui-label-font-size, var(--a2ui-font-size-s))
+      );
       font-weight: var(--a2ui-datetimeinput-label-font-weight, var(--a2ui-label-font-weight, bold));
     }
   `;
@@ -59,18 +60,13 @@ export class A2uiDateTimeInputElement extends BasicCatalogA2uiLitElement<
     if (!props) return nothing;
 
     const type =
-      props.enableDate && props.enableTime
-        ? "datetime-local"
-        : props.enableDate
-          ? "date"
-          : "time";
+      props.enableDate && props.enableTime ? 'datetime-local' : props.enableDate ? 'date' : 'time';
     return html`
       ${props.label ? html`<label>${props.label}</label>` : nothing}
       <input
         type=${type}
-        .value=${props.value || ""}
-        @input=${(e: Event) =>
-          props.setValue?.((e.target as HTMLInputElement).value)}
+        .value=${props.value || ''}
+        @input=${(e: Event) => props.setValue?.((e.target as HTMLInputElement).value)}
       />
     `;
   }
@@ -78,5 +74,5 @@ export class A2uiDateTimeInputElement extends BasicCatalogA2uiLitElement<
 
 export const A2uiDateTimeInput = {
   ...DateTimeInputApi,
-  tagName: "a2ui-datetimeinput",
+  tagName: 'a2ui-datetimeinput',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Divider.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Divider.ts
index 132747f2a..361c564c3 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Divider.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Divider.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { DividerApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { A2uiController } from "@a2ui/lit/v0_9";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {DividerApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {A2uiController} from '@a2ui/lit/v0_9';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
 
-@customElement("a2ui-divider")
+@customElement('a2ui-divider')
 export class A2uiDividerElement extends BasicCatalogA2uiLitElement<typeof DividerApi> {
   /**
    * The styles of the divider can be customized by redefining the following
@@ -65,12 +65,12 @@ export class A2uiDividerElement extends BasicCatalogA2uiLitElement<typeof Divide
     if (!props) return nothing;
 
     const classes = {
-      "a2ui-divider": true,
-      vertical: props.axis === "vertical",
-      horizontal: props.axis !== "vertical",
+      'a2ui-divider': true,
+      vertical: props.axis === 'vertical',
+      horizontal: props.axis !== 'vertical',
     };
 
-    return props.axis === "vertical"
+    return props.axis === 'vertical'
       ? html`<div class=${classMap(classes)}></div>`
       : html`<hr class=${classMap(classes)} />`;
   }
@@ -78,5 +78,5 @@ export class A2uiDividerElement extends BasicCatalogA2uiLitElement<typeof Divide
 
 export const A2uiDivider = {
   ...DividerApi,
-  tagName: "a2ui-divider",
+  tagName: 'a2ui-divider',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Icon.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Icon.ts
index bcf4a44bc..a4f40b008 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Icon.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Icon.ts
@@ -14,27 +14,27 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { IconApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {IconApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-import { classMap } from "lit/directives/class-map.js";
+import {classMap} from 'lit/directives/class-map.js';
 
 const ICON_NAME_OVERRIDES: Record<string, string> = {
-  "play": "play_arrow",
-  "rewind": "fast_rewind",
-  "favoriteOff": "favorite_border",
-  "starOff": "star_border",
+  play: 'play_arrow',
+  rewind: 'fast_rewind',
+  favoriteOff: 'favorite_border',
+  starOff: 'star_border',
 };
 
 function toMaterialSymbol(name: string): string {
   if (ICON_NAME_OVERRIDES[name]) return ICON_NAME_OVERRIDES[name];
-  return name.replace(/[A-Z]/g, (letter) => "_" + letter.toLowerCase());
+  return name.replace(/[A-Z]/g, letter => '_' + letter.toLowerCase());
 }
 
-@customElement("a2ui-icon")
+@customElement('a2ui-icon')
 export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi> {
   /**
    * The icon component can be customized with the following CSS variables:
@@ -54,7 +54,7 @@ export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi>
       justify-content: center;
     }
     .material-symbol {
-      font-family: var(--a2ui-icon-font-family, "Material Symbols Outlined", sans-serif);
+      font-family: var(--a2ui-icon-font-family, 'Material Symbols Outlined', sans-serif);
       font-size: var(--_icon-size);
       font-weight: normal;
       font-style: normal;
@@ -62,7 +62,7 @@ export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi>
       letter-spacing: normal;
       text-transform: none;
       color: var(--a2ui-icon-color, inherit);
-      font-variation-settings: var(--a2ui-icon-font-variation-settings, "FILL" 1);
+      font-variation-settings: var(--a2ui-icon-font-variation-settings, 'FILL' 1);
     }
   `;
 
@@ -74,14 +74,13 @@ export class A2uiIconElement extends BasicCatalogA2uiLitElement<typeof IconApi>
     const props = this.controller.props;
     if (!props) return nothing;
 
-    const iconName = typeof props.name === "string"
-      ? toMaterialSymbol(props.name)
-      : (props.name as any)?.path;
+    const iconName =
+      typeof props.name === 'string' ? toMaterialSymbol(props.name) : (props.name as any)?.path;
     return html`<span class="material-symbol">${iconName}</span>`;
   }
 }
 
 export const A2uiIcon = {
   ...IconApi,
-  tagName: "a2ui-icon",
+  tagName: 'a2ui-icon',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts
index 0d1d24763..8ffe9a0df 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Image.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { html, nothing, css, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { ImageApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css, PropertyValues} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {ImageApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-image")
+@customElement('a2ui-image')
 export class A2uiImageElement extends BasicCatalogA2uiLitElement<typeof ImageApi> {
   /**
    * The styles of the image can be customized by redefining the following
@@ -76,17 +76,17 @@ export class A2uiImageElement extends BasicCatalogA2uiLitElement<typeof ImageApi
     if (!props) return nothing;
 
     const classes = {
-      "a2ui-image": true,
-      [props.variant || ""]: !!props.variant,
+      'a2ui-image': true,
+      [props.variant || '']: !!props.variant,
     };
 
     const styles = {
-      objectFit: props.fit || "fill",
+      objectFit: props.fit || 'fill',
     };
 
     return html`<img
       src=${props.url}
-      alt=${props.description || ""}
+      alt=${props.description || ''}
       class=${classMap(classes)}
       style=${styleMap(styles)}
     />`;
@@ -95,5 +95,5 @@ export class A2uiImageElement extends BasicCatalogA2uiLitElement<typeof ImageApi
 
 export const A2uiImage = {
   ...ImageApi,
-  tagName: "a2ui-image",
+  tagName: 'a2ui-image',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/List.ts b/renderers/lit/src/v0_9/catalogs/basic/components/List.ts
index 44a1277b1..3f77e7c78 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/List.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/List.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { html, nothing, css, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
-import { ListApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css, PropertyValues} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {map} from 'lit/directives/map.js';
+import {ListApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-list")
+@customElement('a2ui-list')
 export class A2uiListElement extends BasicCatalogA2uiLitElement<typeof ListApi> {
   static styles = css`
     :host {
@@ -40,7 +40,7 @@ export class A2uiListElement extends BasicCatalogA2uiLitElement<typeof ListApi>
     super.updated(changedProperties);
     const props = this.controller.props;
     if (props) {
-      this.style.flexDirection = props.direction === "horizontal" ? "row" : "column";
+      this.style.flexDirection = props.direction === 'horizontal' ? 'row' : 'column';
     }
   }
 
@@ -55,5 +55,5 @@ export class A2uiListElement extends BasicCatalogA2uiLitElement<typeof ListApi>
 
 export const A2uiList = {
   ...ListApi,
-  tagName: "a2ui-list",
+  tagName: 'a2ui-list',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Modal.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Modal.ts
index fb3229947..acb395ac6 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Modal.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Modal.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement, query } from "lit/decorators.js";
-import { ModalApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement, query} from 'lit/decorators.js';
+import {ModalApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-modal")
+@customElement('a2ui-modal')
 export class A2uiLitModal extends BasicCatalogA2uiLitElement<typeof ModalApi> {
   /**
    * The styles of the modal can be customized by redefining the following
@@ -49,7 +49,7 @@ export class A2uiLitModal extends BasicCatalogA2uiLitElement<typeof ModalApi> {
   protected createController() {
     return new A2uiController(this, ModalApi);
   }
-  @query("dialog") accessor dialog!: HTMLDialogElement;
+  @query('dialog') accessor dialog!: HTMLDialogElement;
 
   render() {
     const props = this.controller.props;
@@ -71,5 +71,5 @@ export class A2uiLitModal extends BasicCatalogA2uiLitElement<typeof ModalApi> {
 
 export const A2uiModal = {
   ...ModalApi,
-  tagName: "a2ui-modal",
+  tagName: 'a2ui-modal',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Row.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Row.ts
index 24eea3d55..c57579f10 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Row.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Row.ts
@@ -14,31 +14,31 @@
  * limitations under the License.
  */
 
-import { html, nothing, css, PropertyValues } from "lit";
-import { customElement } from "lit/decorators.js";
-import { map } from "lit/directives/map.js";
-import { RowApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css, PropertyValues} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {map} from 'lit/directives/map.js';
+import {RowApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
 const JUSTIFY_MAP: Record<string, string> = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  spaceBetween: "space-between",
-  spaceAround: "space-around",
-  spaceEvenly: "space-evenly",
-  stretch: "stretch",
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  spaceBetween: 'space-between',
+  spaceAround: 'space-around',
+  spaceEvenly: 'space-evenly',
+  stretch: 'stretch',
 };
 
 const ALIGN_MAP: Record<string, string> = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-  stretch: "stretch",
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
 };
 
-@customElement("a2ui-basic-row")
+@customElement('a2ui-basic-row')
 export class A2uiBasicRowElement extends BasicCatalogA2uiLitElement<typeof RowApi> {
   /**
    * The styles of the row can be customized by redefining the following
@@ -62,8 +62,8 @@ export class A2uiBasicRowElement extends BasicCatalogA2uiLitElement<typeof RowAp
     super.updated(changedProperties);
     const props = this.controller.props;
     if (props) {
-      this.style.justifyContent = JUSTIFY_MAP[props.justify ?? ""] ?? "flex-start";
-      this.style.alignItems = ALIGN_MAP[props.align ?? ""] ?? "stretch";
+      this.style.justifyContent = JUSTIFY_MAP[props.justify ?? ''] ?? 'flex-start';
+      this.style.alignItems = ALIGN_MAP[props.align ?? ''] ?? 'stretch';
     }
   }
 
@@ -73,13 +73,11 @@ export class A2uiBasicRowElement extends BasicCatalogA2uiLitElement<typeof RowAp
 
     const children = Array.isArray(props.children) ? props.children : [];
 
-    return html`
-      ${map(children, (child: any) => html`${this.renderNode(child)}`)}
-    `;
+    return html` ${map(children, (child: any) => html`${this.renderNode(child)}`)} `;
   }
 }
 
 export const A2uiRow = {
   ...RowApi,
-  tagName: "a2ui-basic-row",
+  tagName: 'a2ui-basic-row',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Slider.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Slider.ts
index b12ef3713..998b44960 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Slider.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Slider.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { SliderApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {SliderApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-slider")
+@customElement('a2ui-slider')
 export class A2uiSliderElement extends BasicCatalogA2uiLitElement<typeof SliderApi> {
   /**
    * The slider can be customized with the following CSS variables:
@@ -44,10 +44,13 @@ export class A2uiSliderElement extends BasicCatalogA2uiLitElement<typeof SliderA
       align-items: center;
     }
     .header label {
-      font-size: var(--a2ui-slider-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s)));
+      font-size: var(
+        --a2ui-slider-label-font-size,
+        var(--a2ui-label-font-size, var(--a2ui-font-size-s))
+      );
       font-weight: var(--a2ui-slider-label-font-weight, var(--a2ui-label-font-weight, bold));
     }
-    input[type="range"] {
+    input[type='range'] {
       width: 100%;
       accent-color: var(--a2ui-slider-thumb-color, var(--a2ui-color-primary, #007bff));
       background: var(--a2ui-slider-track-color, var(--a2ui-color-secondary, #e9ecef));
@@ -71,9 +74,8 @@ export class A2uiSliderElement extends BasicCatalogA2uiLitElement<typeof SliderA
         type="range"
         min=${props.min ?? 0}
         max=${props.max ?? 100}
-        .value=${props.value?.toString() || "0"}
-        @input=${(e: Event) =>
-          props.setValue?.(Number((e.target as HTMLInputElement).value))}
+        .value=${props.value?.toString() || '0'}
+        @input=${(e: Event) => props.setValue?.(Number((e.target as HTMLInputElement).value))}
       />
     `;
   }
@@ -81,5 +83,5 @@ export class A2uiSliderElement extends BasicCatalogA2uiLitElement<typeof SliderA
 
 export const A2uiSlider = {
   ...SliderApi,
-  tagName: "a2ui-slider",
+  tagName: 'a2ui-slider',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Tabs.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Tabs.ts
index 654ff7961..8eaa3e904 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Tabs.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Tabs.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { TabsApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {TabsApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-tabs")
+@customElement('a2ui-tabs')
 export class A2uiLitTabs extends BasicCatalogA2uiLitElement<typeof TabsApi> {
   /**
    * The styles of the tabs can be customized by redefining the following
@@ -41,7 +41,10 @@ export class A2uiLitTabs extends BasicCatalogA2uiLitElement<typeof TabsApi> {
     .a2ui-tabs-headers {
       display: flex;
       gap: var(--a2ui-spacing-xs, 0.25rem);
-      border-bottom: var(--a2ui-tabs-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));
+      border-bottom: var(
+        --a2ui-tabs-border,
+        var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)
+      );
       margin-bottom: var(--a2ui-spacing-m, 0.5rem);
     }
     .a2ui-tabs-header {
@@ -77,7 +80,7 @@ export class A2uiLitTabs extends BasicCatalogA2uiLitElement<typeof TabsApi> {
           (tab: any, i: number) => html`
             <button
               class=${classMap({
-                "a2ui-tabs-header": true,
+                'a2ui-tabs-header': true,
                 active: i === this.activeIndex,
               })}
               @click=${() => (this.activeIndex = i)}
@@ -98,5 +101,5 @@ export class A2uiLitTabs extends BasicCatalogA2uiLitElement<typeof TabsApi> {
 
 export const A2uiTabs = {
   ...TabsApi,
-  tagName: "a2ui-tabs",
+  tagName: 'a2ui-tabs',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Text.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Text.ts
index e0f3179dc..c370827a8 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Text.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Text.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { consume } from "@lit/context";
-import { TextApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController, Context } from "@a2ui/lit/v0_9";
-import * as Types from "@a2ui/web_core/types/types";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {consume} from '@lit/context';
+import {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController, Context} from '@a2ui/lit/v0_9';
+import * as Types from '@a2ui/web_core/types/types';
 
-import { markdown } from "../../../directives/directives.js";
+import {markdown} from '../../../directives/directives.js';
 
-@customElement("a2ui-basic-text")
+@customElement('a2ui-basic-text')
 export class A2uiBasicTextElement extends BasicCatalogA2uiLitElement<typeof TextApi> {
   /**
    * The styles of the text component can be customized by redefining the following
@@ -40,22 +40,55 @@ export class A2uiBasicTextElement extends BasicCatalogA2uiLitElement<typeof Text
       display: inline-block;
       color: var(--_a2ui-text-color, var(--a2ui-text-color-text, var(--a2ui-color-on-background)));
     }
-    p, h1, h2, h3, h4, h5, h6, ol, ul, li, blockquote, pre {
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    ol,
+    ul,
+    li,
+    blockquote,
+    pre {
       margin: var(--_a2ui-text-margin, 0);
     }
-    h1, h2, h3, h4, h5 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
       font-family: var(--a2ui-font-family-title, inherit);
       line-height: var(--a2ui-line-height-headings, 1.2);
     }
-    h1 { font-size: var(--a2ui-font-size-2xl); }
-    h2 { font-size: var(--a2ui-font-size-xl); }
-    h3 { font-size: var(--a2ui-font-size-l); }
-    p, h4 { font-size: var(--a2ui-font-size-m); }
-    h5 { font-size: var(--a2ui-font-size-s); }
-    p, ol, ul, li, blockquote, .a2ui-caption {
+    h1 {
+      font-size: var(--a2ui-font-size-2xl);
+    }
+    h2 {
+      font-size: var(--a2ui-font-size-xl);
+    }
+    h3 {
+      font-size: var(--a2ui-font-size-l);
+    }
+    p,
+    h4 {
+      font-size: var(--a2ui-font-size-m);
+    }
+    h5 {
+      font-size: var(--a2ui-font-size-s);
+    }
+    p,
+    ol,
+    ul,
+    li,
+    blockquote,
+    .a2ui-caption {
       line-height: var(--a2ui-line-height-body, 1.5);
     }
-    .a2ui-caption, .a2ui-caption > *, .a2ui-caption ::slotted(*) {
+    .a2ui-caption,
+    .a2ui-caption > *,
+    .a2ui-caption ::slotted(*) {
       font-size: var(--a2ui-font-size-xs);
       color: var(--a2ui-text-caption-color, light-dark(#666, #aaa));
     }
@@ -66,7 +99,7 @@ export class A2uiBasicTextElement extends BasicCatalogA2uiLitElement<typeof Text
   `;
 
   // Retrieve a MarkdownRenderer provided by the application.
-  @consume({ context: Context.markdown, subscribe: true })
+  @consume({context: Context.markdown, subscribe: true})
   accessor markdownRenderer: Types.MarkdownRenderer | undefined;
 
   protected createController() {
@@ -78,21 +111,21 @@ export class A2uiBasicTextElement extends BasicCatalogA2uiLitElement<typeof Text
     if (!props) return nothing;
 
     // Use props.variant to convert props.text to markdown
-    let markdownText = typeof props.text === "string" ? props.text : String(props.text ?? "");
+    let markdownText = typeof props.text === 'string' ? props.text : String(props.text ?? '');
     switch (props.variant) {
-      case "h1":
+      case 'h1':
         markdownText = `# ${markdownText}`;
         break;
-      case "h2":
+      case 'h2':
         markdownText = `## ${markdownText}`;
         break;
-      case "h3":
+      case 'h3':
         markdownText = `### ${markdownText}`;
         break;
-      case "h4":
+      case 'h4':
         markdownText = `#### ${markdownText}`;
         break;
-      case "h5":
+      case 'h5':
         markdownText = `##### ${markdownText}`;
         break;
       default:
@@ -102,7 +135,7 @@ export class A2uiBasicTextElement extends BasicCatalogA2uiLitElement<typeof Text
     const renderedMarkdown = markdown(markdownText, this.markdownRenderer);
     // There's not a good way to handle the caption variant in markdown, so we
     // tag it with a class so it can be tweaked via CSS.
-    if (props.variant === "caption") {
+    if (props.variant === 'caption') {
       return html`<span class="a2ui-caption">${renderedMarkdown}</span>`;
     }
     return html`${renderedMarkdown}`;
@@ -111,5 +144,5 @@ export class A2uiBasicTextElement extends BasicCatalogA2uiLitElement<typeof Text
 
 export const A2uiText = {
   ...TextApi,
-  tagName: "a2ui-basic-text",
+  tagName: 'a2ui-basic-text',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/TextField.ts b/renderers/lit/src/v0_9/catalogs/basic/components/TextField.ts
index 7899c57ce..ad10e9d77 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/TextField.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/TextField.ts
@@ -14,17 +14,15 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { TextFieldApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {TextFieldApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-basic-textfield")
-export class A2uiBasicTextFieldElement extends BasicCatalogA2uiLitElement<
-  typeof TextFieldApi
-> {
+@customElement('a2ui-basic-textfield')
+export class A2uiBasicTextFieldElement extends BasicCatalogA2uiLitElement<typeof TextFieldApi> {
   /**
    * The styles of the text field can be customized by redefining the following
    * CSS variables:
@@ -63,7 +61,10 @@ export class A2uiBasicTextFieldElement extends BasicCatalogA2uiLitElement<
       border-color: var(--a2ui-textfield-color-error, red);
     }
     label {
-      font-size: var(--a2ui-textfield-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s)));
+      font-size: var(
+        --a2ui-textfield-label-font-size,
+        var(--a2ui-label-font-size, var(--a2ui-font-size-s))
+      );
       font-weight: var(--a2ui-textfield-label-font-weight, var(--a2ui-label-font-weight, bold));
     }
     .error {
@@ -81,36 +82,35 @@ export class A2uiBasicTextFieldElement extends BasicCatalogA2uiLitElement<
     if (!props) return nothing;
 
     const isInvalid = props.isValid === false;
-    const onInput = (e: Event) =>
-      props.setValue?.((e.target as HTMLInputElement).value);
-    let type = "text";
-    if (props.variant === "number") type = "number";
-    if (props.variant === "obscured") type = "password";
+    const onInput = (e: Event) => props.setValue?.((e.target as HTMLInputElement).value);
+    let type = 'text';
+    if (props.variant === 'number') type = 'number';
+    if (props.variant === 'obscured') type = 'password';
 
-    const classes = { "a2ui-textfield": true, invalid: isInvalid };
+    const classes = {'a2ui-textfield': true, invalid: isInvalid};
 
     return html`
       ${props.label ? html`<label>${props.label}</label>` : nothing}
-        ${props.variant === "longText"
-          ? html`<textarea
-              class=${classMap(classes)}
-              .value=${props.value || ""}
-              @input=${onInput}
-            ></textarea>`
-          : html`<input
-              type=${type}
-              class=${classMap(classes)}
-              .value=${props.value || ""}
-              @input=${onInput}
-            />`}
-        ${isInvalid && props.validationErrors?.length
-          ? html`<div class="error">${props.validationErrors[0]}</div>`
-          : nothing}
+      ${props.variant === 'longText'
+        ? html`<textarea
+            class=${classMap(classes)}
+            .value=${props.value || ''}
+            @input=${onInput}
+          ></textarea>`
+        : html`<input
+            type=${type}
+            class=${classMap(classes)}
+            .value=${props.value || ''}
+            @input=${onInput}
+          />`}
+      ${isInvalid && props.validationErrors?.length
+        ? html`<div class="error">${props.validationErrors[0]}</div>`
+        : nothing}
     `;
   }
 }
 
 export const A2uiTextField = {
   ...TextFieldApi,
-  tagName: "a2ui-basic-textfield",
+  tagName: 'a2ui-basic-textfield',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/components/Video.ts b/renderers/lit/src/v0_9/catalogs/basic/components/Video.ts
index bf5dbdc36..c23a6683c 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/components/Video.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/components/Video.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { html, nothing, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { VideoApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { BasicCatalogA2uiLitElement } from "../basic-catalog-a2ui-lit-element.js";
-import { A2uiController } from "@a2ui/lit/v0_9";
+import {html, nothing, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {VideoApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import {BasicCatalogA2uiLitElement} from '../basic-catalog-a2ui-lit-element.js';
+import {A2uiController} from '@a2ui/lit/v0_9';
 
-@customElement("a2ui-video")
+@customElement('a2ui-video')
 export class A2uiVideoElement extends BasicCatalogA2uiLitElement<typeof VideoApi> {
   /**
    * The styles of the video can be customized by redefining the following
@@ -55,5 +55,5 @@ export class A2uiVideoElement extends BasicCatalogA2uiLitElement<typeof VideoApi
 
 export const A2uiVideo = {
   ...VideoApi,
-  tagName: "a2ui-video",
+  tagName: 'a2ui-video',
 };
diff --git a/renderers/lit/src/v0_9/catalogs/basic/index.ts b/renderers/lit/src/v0_9/catalogs/basic/index.ts
index f19151b95..54aa40f1a 100644
--- a/renderers/lit/src/v0_9/catalogs/basic/index.ts
+++ b/renderers/lit/src/v0_9/catalogs/basic/index.ts
@@ -14,28 +14,28 @@
  * limitations under the License.
  */
 
-import { Catalog } from "@a2ui/web_core/v0_9";
-import { BASIC_FUNCTIONS } from "@a2ui/web_core/v0_9/basic_catalog";
-import { LitComponentApi } from "@a2ui/lit/v0_9";
+import {Catalog} from '@a2ui/web_core/v0_9';
+import {BASIC_FUNCTIONS} from '@a2ui/web_core/v0_9/basic_catalog';
+import {LitComponentApi} from '@a2ui/lit/v0_9';
 
-import { A2uiText } from "./components/Text.js";
-import { A2uiButton } from "./components/Button.js";
-import { A2uiTextField } from "./components/TextField.js";
-import { A2uiRow } from "./components/Row.js";
-import { A2uiColumn } from "./components/Column.js";
-import { A2uiList } from "./components/List.js";
-import { A2uiImage } from "./components/Image.js";
-import { A2uiIcon } from "./components/Icon.js";
-import { A2uiVideo } from "./components/Video.js";
-import { A2uiAudioPlayer } from "./components/AudioPlayer.js";
-import { A2uiCard } from "./components/Card.js";
-import { A2uiDivider } from "./components/Divider.js";
-import { A2uiCheckBox } from "./components/CheckBox.js";
-import { A2uiSlider } from "./components/Slider.js";
-import { A2uiDateTimeInput } from "./components/DateTimeInput.js";
-import { A2uiChoicePicker } from "./components/ChoicePicker.js";
-import { A2uiTabs } from "./components/Tabs.js";
-import { A2uiModal } from "./components/Modal.js";
+import {A2uiText} from './components/Text.js';
+import {A2uiButton} from './components/Button.js';
+import {A2uiTextField} from './components/TextField.js';
+import {A2uiRow} from './components/Row.js';
+import {A2uiColumn} from './components/Column.js';
+import {A2uiList} from './components/List.js';
+import {A2uiImage} from './components/Image.js';
+import {A2uiIcon} from './components/Icon.js';
+import {A2uiVideo} from './components/Video.js';
+import {A2uiAudioPlayer} from './components/AudioPlayer.js';
+import {A2uiCard} from './components/Card.js';
+import {A2uiDivider} from './components/Divider.js';
+import {A2uiCheckBox} from './components/CheckBox.js';
+import {A2uiSlider} from './components/Slider.js';
+import {A2uiDateTimeInput} from './components/DateTimeInput.js';
+import {A2uiChoicePicker} from './components/ChoicePicker.js';
+import {A2uiTabs} from './components/Tabs.js';
+import {A2uiModal} from './components/Modal.js';
 
 /**
  * The basic catalog for A2UI components in Lit.
@@ -46,7 +46,7 @@ import { A2uiModal } from "./components/Modal.js";
  * from package @a2ui/web_core.
  */
 export const basicCatalog = new Catalog<LitComponentApi>(
-  "https://a2ui.org/specification/v0_9/basic_catalog.json",
+  'https://a2ui.org/specification/v0_9/basic_catalog.json',
   [
     A2uiText,
     A2uiButton,
diff --git a/renderers/lit/src/v0_9/context/context.ts b/renderers/lit/src/v0_9/context/context.ts
index d0ab62d8f..74b991a3a 100644
--- a/renderers/lit/src/v0_9/context/context.ts
+++ b/renderers/lit/src/v0_9/context/context.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { markdown } from "./markdown.js";
+import {markdown} from './markdown.js';
 
 /**
  * Contexts used to inject dependencies into the Lit renderer.
diff --git a/renderers/lit/src/v0_9/context/markdown.ts b/renderers/lit/src/v0_9/context/markdown.ts
index 0b3e152a5..de3798b70 100644
--- a/renderers/lit/src/v0_9/context/markdown.ts
+++ b/renderers/lit/src/v0_9/context/markdown.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { createContext } from "@lit/context";
-import * as Types from "@a2ui/web_core/types/types";
+import {createContext} from '@lit/context';
+import * as Types from '@a2ui/web_core/types/types';
 
 /**
  * The markdown renderer context.
  *
  * This is used by the Text widget to render markdown content.
  */
-export const markdown = createContext<Types.MarkdownRenderer | undefined>(Symbol("A2UIMarkdown"));
+export const markdown = createContext<Types.MarkdownRenderer | undefined>(Symbol('A2UIMarkdown'));
diff --git a/renderers/lit/src/v0_9/directives/directives.ts b/renderers/lit/src/v0_9/directives/directives.ts
index 92713e9d7..83f6249cd 100644
--- a/renderers/lit/src/v0_9/directives/directives.ts
+++ b/renderers/lit/src/v0_9/directives/directives.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { markdown } from "./markdown.js";
+export {markdown} from './markdown.js';
diff --git a/renderers/lit/src/v0_9/directives/markdown.ts b/renderers/lit/src/v0_9/directives/markdown.ts
index 3151ed52d..e222994ea 100644
--- a/renderers/lit/src/v0_9/directives/markdown.ts
+++ b/renderers/lit/src/v0_9/directives/markdown.ts
@@ -14,16 +14,11 @@
  * limitations under the License.
  */
 
-import { html, noChange } from "lit";
-import {
-  Directive,
-  DirectiveParameters,
-  Part,
-  directive,
-} from "lit/directive.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { until } from "lit/directives/until.js";
-import * as Types from "@a2ui/web_core/types/types";
+import {html, noChange} from 'lit';
+import {Directive, DirectiveParameters, Part, directive} from 'lit/directive.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {until} from 'lit/directives/until.js';
+import * as Types from '@a2ui/web_core/types/types';
 
 class MarkdownDirective extends Directive {
   private lastValue: string | null = null;
@@ -31,10 +26,7 @@ class MarkdownDirective extends Directive {
 
   update(_part: Part, [value, markdownRenderer, markdownOptions]: DirectiveParameters<this>) {
     const jsonTagClassMap = JSON.stringify(markdownOptions?.tagClassMap);
-    if (
-      this.lastValue === value &&
-      jsonTagClassMap === this.lastTagClassMap
-    ) {
+    if (this.lastValue === value && jsonTagClassMap === this.lastTagClassMap) {
       return noChange;
     }
 
@@ -48,23 +40,29 @@ class MarkdownDirective extends Directive {
    * Renders the markdown string to HTML using the injected markdown renderer,
    * if present. Otherwise, it returns the value wrapped in a span.
    */
-  render(value: string, markdownRenderer?: Types.MarkdownRenderer, markdownOptions?: Types.MarkdownRendererOptions) {
+  render(
+    value: string,
+    markdownRenderer?: Types.MarkdownRenderer,
+    markdownOptions?: Types.MarkdownRendererOptions,
+  ) {
     if (markdownRenderer) {
-      const rendered = markdownRenderer(value, markdownOptions).then((value) => {
+      const rendered = markdownRenderer(value, markdownOptions).then(value => {
         // `value` is a plain string, which we need to convert to a template
         // with the `unsafeHTML` directive.
         // It is the responsibility of the markdown renderer to sanitize the HTML.
         return unsafeHTML(value);
-      })
+      });
       // The until directive lets us render a placeholder *until* the rendered
       // content resolves.
       return until(rendered, html`<span class="no-markdown-renderer">${value}</span>`);
     }
 
     if (!MarkdownDirective.defaultMarkdownWarningLogged) {
-      console.warn("[MarkdownDirective]",
+      console.warn(
+        '[MarkdownDirective]',
         "can't render markdown because no markdown renderer is configured.\n",
-        "Use `@a2ui/markdown-it`, or your own markdown renderer.");
+        'Use `@a2ui/markdown-it`, or your own markdown renderer.',
+      );
       MarkdownDirective.defaultMarkdownWarningLogged = true;
     }
     return html`<span class="no-markdown-renderer">${value}</span>`;
diff --git a/renderers/lit/src/v0_9/index.ts b/renderers/lit/src/v0_9/index.ts
index 9fe390399..a6e5bb333 100644
--- a/renderers/lit/src/v0_9/index.ts
+++ b/renderers/lit/src/v0_9/index.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-export type { LitComponentApi } from "./types.js";
-export { A2uiController } from "./a2ui-controller.js";
-export { A2uiSurface } from "./surface/a2ui-surface.js";
-export { A2uiLitElement } from "./a2ui-lit-element.js";
-export { Context } from "./context/context.js";
-export { basicCatalog } from "./catalogs/basic/index.js";
+export type {LitComponentApi} from './types.js';
+export {A2uiController} from './a2ui-controller.js';
+export {A2uiSurface} from './surface/a2ui-surface.js';
+export {A2uiLitElement} from './a2ui-lit-element.js';
+export {Context} from './context/context.js';
+export {basicCatalog} from './catalogs/basic/index.js';
diff --git a/renderers/lit/src/v0_9/surface/a2ui-surface.ts b/renderers/lit/src/v0_9/surface/a2ui-surface.ts
index 7f796c88a..4d626bde8 100644
--- a/renderers/lit/src/v0_9/surface/a2ui-surface.ts
+++ b/renderers/lit/src/v0_9/surface/a2ui-surface.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { html, nothing, LitElement, PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { SurfaceModel, ComponentContext } from "@a2ui/web_core/v0_9";
-import { renderA2uiNode } from "./render-a2ui-node.js";
-import { LitComponentApi } from "@a2ui/lit/v0_9";
+import {html, nothing, LitElement, PropertyValues} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {SurfaceModel, ComponentContext} from '@a2ui/web_core/v0_9';
+import {renderA2uiNode} from './render-a2ui-node.js';
+import {LitComponentApi} from '@a2ui/lit/v0_9';
 
 /**
  * A Lit component that renders an A2UI Surface.
@@ -29,14 +29,12 @@ import { LitComponentApi } from "@a2ui/lit/v0_9";
  *
  * @element a2ui-surface
  */
-@customElement("a2ui-surface")
+@customElement('a2ui-surface')
 export class A2uiSurface extends LitElement {
   /**
    * The surface model containing the component tree and catalog.
    */
-  @property({ type: Object }) accessor surface:
-    | SurfaceModel<LitComponentApi>
-    | undefined;
+  @property({type: Object}) accessor surface: SurfaceModel<LitComponentApi> | undefined;
 
   /**
    * Internal state indicating whether the root component exists.
@@ -58,16 +56,16 @@ export class A2uiSurface extends LitElement {
    * @param changedProperties Map of changed properties.
    */
   protected willUpdate(changedProperties: PropertyValues) {
-    if (changedProperties.has("surface")) {
+    if (changedProperties.has('surface')) {
       if (this.unsubscribe) {
         this.unsubscribe();
         this.unsubscribe = undefined;
       }
-      this._hasRoot = !!this.surface?.componentsModel.get("root");
+      this._hasRoot = !!this.surface?.componentsModel.get('root');
 
       if (this.surface && !this._hasRoot) {
-        const sub = this.surface.componentsModel.onCreated.subscribe((comp) => {
-          if (comp.id === "root") {
+        const sub = this.surface.componentsModel.onCreated.subscribe(comp => {
+          if (comp.id === 'root') {
             this._hasRoot = true;
             this.requestUpdate();
             this.unsubscribe?.();
@@ -104,10 +102,10 @@ export class A2uiSurface extends LitElement {
     }
 
     try {
-      const rootContext = new ComponentContext(this.surface, "root", "/");
+      const rootContext = new ComponentContext(this.surface, 'root', '/');
       return html`${renderA2uiNode(rootContext, this.surface.catalog)}`;
     } catch (e) {
-      console.error("Error creating root context:", e);
+      console.error('Error creating root context:', e);
       return html`<div>Error rendering surface</div>`;
     }
   }
diff --git a/renderers/lit/src/v0_9/surface/render-a2ui-node.ts b/renderers/lit/src/v0_9/surface/render-a2ui-node.ts
index 2a22c8fcc..3fb4be860 100644
--- a/renderers/lit/src/v0_9/surface/render-a2ui-node.ts
+++ b/renderers/lit/src/v0_9/surface/render-a2ui-node.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { nothing } from "lit";
-import { html, unsafeStatic } from "lit/static-html.js";
-import { ComponentContext, Catalog } from "@a2ui/web_core/v0_9";
-import { LitComponentApi } from "@a2ui/lit/v0_9";
+import {nothing} from 'lit';
+import {html, unsafeStatic} from 'lit/static-html.js';
+import {ComponentContext, Catalog} from '@a2ui/web_core/v0_9';
+import {LitComponentApi} from '@a2ui/lit/v0_9';
 
 /**
  * Pure function that acts as a generic container for A2UI components.
@@ -34,10 +34,7 @@ import { LitComponentApi } from "@a2ui/lit/v0_9";
  * the `renderNode` method on the base `A2uiLitElement` class, which handles context
  * creation automatically.
  */
-export function renderA2uiNode(
-  context: ComponentContext,
-  catalog: Catalog<LitComponentApi>,
-) {
+export function renderA2uiNode(context: ComponentContext, catalog: Catalog<LitComponentApi>) {
   const type = context.componentModel.type;
   const implementation = catalog.components.get(type);
 
diff --git a/renderers/lit/src/v0_9/tests/a2ui-controller.test.ts b/renderers/lit/src/v0_9/tests/a2ui-controller.test.ts
index 0c30bf4c0..46989b60a 100644
--- a/renderers/lit/src/v0_9/tests/a2ui-controller.test.ts
+++ b/renderers/lit/src/v0_9/tests/a2ui-controller.test.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import assert from "node:assert";
-import { describe, it, beforeEach, mock, after, before } from "node:test";
-import { setupTestDom, teardownTestDom, asyncUpdate } from "./dom-setup.js";
+import assert from 'node:assert';
+import {describe, it, beforeEach, mock, after, before} from 'node:test';
+import {setupTestDom, teardownTestDom, asyncUpdate} from './dom-setup.js';
 
-import { A2uiController } from "../a2ui-controller.js";
-import { MessageProcessor, ComponentContext } from "@a2ui/web_core/v0_9";
-import { TextApi } from "@a2ui/web_core/v0_9/basic_catalog";
+import {A2uiController} from '../a2ui-controller.js';
+import {MessageProcessor, ComponentContext} from '@a2ui/web_core/v0_9';
+import {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
 
 /**
  * These tests verify:
@@ -28,7 +28,7 @@ import { TextApi } from "@a2ui/web_core/v0_9/basic_catalog";
  * - Automatically triggering `requestUpdate()` on the host element when data properties change.
  * - Safely cleaning up subscriptions when the host is disconnected or the controller is disposed.
  */
-describe("A2uiController", () => {
+describe('A2uiController', () => {
   let basicCatalog: any;
 
   /**
@@ -36,15 +36,13 @@ describe("A2uiController", () => {
    * defined in the `before()` hook below.
    */
   async function createMockHost(context: ComponentContext) {
-    const mockHost = document.createElement(
-      "test-mock-host",
-    ) as any;
+    const mockHost = document.createElement('test-mock-host') as any;
     document.body.appendChild(mockHost);
 
     // Initializing the context property triggers Lit's reactive execution cycle,
     // which in turn synchronously creates the controller instance via createController()
     // inside the custom element's update hooks.
-    await asyncUpdate(mockHost, (host) => {
+    await asyncUpdate(mockHost, host => {
       host.context = context;
     });
 
@@ -56,8 +54,8 @@ describe("A2uiController", () => {
 
     // Dynamically import component files *after* setting up JSDOM globals
     // to prevent LitElement from evaluating in an empty Node context and crashing.
-    const { A2uiLitElement } = await import("../a2ui-lit-element.js");
-    basicCatalog = (await import("../catalogs/basic/index.js")).basicCatalog;
+    const {A2uiLitElement} = await import('../a2ui-lit-element.js');
+    basicCatalog = (await import('../catalogs/basic/index.js')).basicCatalog;
 
     /**
      * A real Lit element registered as `test-mock-host` in JSDOM.
@@ -73,7 +71,7 @@ describe("A2uiController", () => {
         return this.testController;
       }
     }
-    customElements.define("test-mock-host", TestMockHost);
+    customElements.define('test-mock-host', TestMockHost);
   });
 
   after(teardownTestDom);
@@ -87,84 +85,84 @@ describe("A2uiController", () => {
     // Initialize the test surface and seed an initial text component
     processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           catalogId: basicCatalog.id,
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateComponents: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           components: [
             {
-              id: "test-comp",
-              component: "Text",
-              text: "Initial",
+              id: 'test-comp',
+              component: 'Text',
+              text: 'Initial',
             },
           ],
         },
       },
     ]);
 
-    surface = processor.model.getSurface("test-surface")!;
-    context = new ComponentContext(surface, "test-comp");
+    surface = processor.model.getSurface('test-surface')!;
+    context = new ComponentContext(surface, 'test-comp');
   });
 
-  it("should initialize with correct props and bind to context", async () => {
+  it('should initialize with correct props and bind to context', async () => {
     // For this specific test, we manually mount the DOM element without the helper
     // because we need to spy on `addController` BEFORE the context is evaluated.
-    const mockHost = document.createElement("test-mock-host") as any;
+    const mockHost = document.createElement('test-mock-host') as any;
     document.body.appendChild(mockHost);
 
-    mock.method(mockHost, "addController");
+    mock.method(mockHost, 'addController');
 
-    await asyncUpdate(mockHost, (host) => {
+    await asyncUpdate(mockHost, host => {
       host.context = context;
     });
 
     const controller = mockHost.testController;
 
     assert.ok((mockHost.addController as any).mock.calls.length >= 1);
-    assert.strictEqual(controller.props.text, "Initial");
+    assert.strictEqual(controller.props.text, 'Initial');
   });
 
-  it("should request update on host when data changes", async () => {
+  it('should request update on host when data changes', async () => {
     const mockHost = await createMockHost(context);
     const controller = mockHost.testController;
 
     // Map requestUpdate only *after* initial initialization to catch changes
-    mock.method(mockHost, "requestUpdate");
+    mock.method(mockHost, 'requestUpdate');
 
-    assert.strictEqual(controller.props.text, "Initial");
+    assert.strictEqual(controller.props.text, 'Initial');
 
     // Changing the model should trigger an update
     // We bind to a literal string so changing the literal string in component model works or we change data mode.
     // Wait, literal string doesn't get updated easily by data model.
     // Let's bind path instead.
     // Replace the text component with a path binding and populate the data model
-    await asyncUpdate(processor, (p) =>
+    await asyncUpdate(processor, p =>
       p.processMessages([
         {
-          version: "v0.9",
+          version: 'v0.9',
           updateComponents: {
-            surfaceId: "test-surface",
+            surfaceId: 'test-surface',
             components: [
               {
-                id: "test-comp-2",
-                component: "Text",
-                text: { path: "/myText" },
+                id: 'test-comp-2',
+                component: 'Text',
+                text: {path: '/myText'},
               },
             ],
           },
         },
         {
-          version: "v0.9",
+          version: 'v0.9',
           updateDataModel: {
-            surfaceId: "test-surface",
-            path: "/myText",
-            value: "Updated",
+            surfaceId: 'test-surface',
+            path: '/myText',
+            value: 'Updated',
           },
         },
       ]),
@@ -173,57 +171,57 @@ describe("A2uiController", () => {
     // Simulate what happens when a component's ID changes or it gets recycled by
     // disposing the old controller and replacing the host context instance.
     controller.dispose();
-    const context2 = new ComponentContext(surface, "test-comp-2");
+    const context2 = new ComponentContext(surface, 'test-comp-2');
 
     const mockHost2 = await createMockHost(context2);
     const controller2 = mockHost2.testController;
 
-    mock.method(mockHost2, "requestUpdate");
+    mock.method(mockHost2, 'requestUpdate');
 
-    assert.strictEqual(controller2.props.text, "Updated");
+    assert.strictEqual(controller2.props.text, 'Updated');
 
     // Trigger another reactive update by advancing the bound data model property
-    await asyncUpdate(processor, (p) =>
+    await asyncUpdate(processor, p =>
       p.processMessages([
         {
-          version: "v0.9",
+          version: 'v0.9',
           updateDataModel: {
-            surfaceId: "test-surface",
-            path: "/myText",
-            value: "Update2",
+            surfaceId: 'test-surface',
+            path: '/myText',
+            value: 'Update2',
           },
         },
       ]),
     );
 
-    assert.strictEqual(controller2.props.text, "Update2");
+    assert.strictEqual(controller2.props.text, 'Update2');
     assert.ok((mockHost2.requestUpdate as any).mock.calls.length > 0);
 
     controller2.dispose();
   });
 
-  it("should unsubscribe when host disconnected", async () => {
+  it('should unsubscribe when host disconnected', async () => {
     const mockHost = await createMockHost(context);
     const controller = mockHost.testController;
 
-    mock.method(mockHost, "requestUpdate");
+    mock.method(mockHost, 'requestUpdate');
 
     controller.hostDisconnected();
 
     const initialCalls = (mockHost.requestUpdate as any).mock.calls.length;
 
     // Attempt to trigger a component update while the host is disconnected
-    await asyncUpdate(processor, (p) =>
+    await asyncUpdate(processor, p =>
       p.processMessages([
         {
-          version: "v0.9",
+          version: 'v0.9',
           updateComponents: {
-            surfaceId: "test-surface",
+            surfaceId: 'test-surface',
             components: [
               {
-                id: "test-comp",
-                component: "Text",
-                text: "Another",
+                id: 'test-comp',
+                component: 'Text',
+                text: 'Another',
               },
             ],
           },
@@ -232,11 +230,8 @@ describe("A2uiController", () => {
     );
 
     // Props should not update
-    assert.notStrictEqual(controller.props.text, "Another");
+    assert.notStrictEqual(controller.props.text, 'Another');
     // requestUpdate shouldn't be called again
-    assert.strictEqual(
-      (mockHost.requestUpdate as any).mock.calls.length,
-      initialCalls,
-    );
+    assert.strictEqual((mockHost.requestUpdate as any).mock.calls.length, initialCalls);
   });
 });
diff --git a/renderers/lit/src/v0_9/tests/a2ui-lit-element.test.ts b/renderers/lit/src/v0_9/tests/a2ui-lit-element.test.ts
index 4fa790bff..72745e23f 100644
--- a/renderers/lit/src/v0_9/tests/a2ui-lit-element.test.ts
+++ b/renderers/lit/src/v0_9/tests/a2ui-lit-element.test.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { setupTestDom, teardownTestDom, asyncUpdate } from "./dom-setup.js";
-import assert from "node:assert";
-import { describe, it, beforeEach, after, before } from "node:test";
+import {setupTestDom, teardownTestDom, asyncUpdate} from './dom-setup.js';
+import assert from 'node:assert';
+import {describe, it, beforeEach, after, before} from 'node:test';
 
-import { ComponentContext, MessageProcessor } from "@a2ui/web_core/v0_9";
+import {ComponentContext, MessageProcessor} from '@a2ui/web_core/v0_9';
 
 let controllerCreatedCount = 0;
 let disposedCount = 0;
@@ -28,15 +28,15 @@ let disposedCount = 0;
  * - The element correctly instantiates an `A2uiController` when its ComponentContext is assigned.
  * - Changing the element's ComponentContext safely tears down the old controller and creates a new one.
  */
-describe("A2uiLitElement", () => {
+describe('A2uiLitElement', () => {
   let basicCatalog: any;
   before(async () => {
     setupTestDom();
 
     // Dynamically import component files *after* setting up JSDOM globals
     // to prevent LitElement from evaluating in an empty Node context and crashing.
-    const { A2uiLitElement } = await import("../a2ui-lit-element.js");
-    basicCatalog = (await import("../catalogs/basic/index.js")).basicCatalog;
+    const {A2uiLitElement} = await import('../a2ui-lit-element.js');
+    basicCatalog = (await import('../catalogs/basic/index.js')).basicCatalog;
 
     // Create a mock subclass to intercept and track controller lifecycle events
     class TestA2uiElement extends A2uiLitElement<any> {
@@ -50,11 +50,11 @@ describe("A2uiLitElement", () => {
       }
 
       render() {
-        return this.renderNode("child_id");
+        return this.renderNode('child_id');
       }
     }
 
-    customElements.define("test-a2ui-element", TestA2uiElement);
+    customElements.define('test-a2ui-element', TestA2uiElement);
   });
 
   after(teardownTestDom);
@@ -69,60 +69,60 @@ describe("A2uiLitElement", () => {
     // Initialize the test surface with a nested root/child component structure and bound respective data contexts
     processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           catalogId: basicCatalog.id,
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateComponents: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           components: [
             {
-              id: "root",
-              component: "Text",
-              text: "Root",
+              id: 'root',
+              component: 'Text',
+              text: 'Root',
             },
             {
-              id: "child_id",
-              component: "Text",
-              text: "Child",
+              id: 'child_id',
+              component: 'Text',
+              text: 'Child',
             },
           ],
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateDataModel: {
-          surfaceId: "test-surface",
-          path: "/",
-          value: { myData: "hello" },
+          surfaceId: 'test-surface',
+          path: '/',
+          value: {myData: 'hello'},
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateDataModel: {
-          surfaceId: "test-surface",
-          path: "/child_id",
-          value: { myData: "world" },
+          surfaceId: 'test-surface',
+          path: '/child_id',
+          value: {myData: 'world'},
         },
       },
     ]);
 
-    surface = processor.model.getSurface("test-surface")!;
+    surface = processor.model.getSurface('test-surface')!;
   });
 
-  it("should create controller when context is set", async () => {
-    const el = document.createElement("test-a2ui-element") as any;
+  it('should create controller when context is set', async () => {
+    const el = document.createElement('test-a2ui-element') as any;
     document.body.appendChild(el);
 
     // initially context is undefined so no controller is created
     assert.strictEqual(controllerCreatedCount, 0);
 
-    const context = new ComponentContext(surface, "root");
-    await asyncUpdate(el, (e) => {
+    const context = new ComponentContext(surface, 'root');
+    await asyncUpdate(el, e => {
       e.context = context;
     });
 
@@ -130,12 +130,12 @@ describe("A2uiLitElement", () => {
     document.body.removeChild(el);
   });
 
-  it("should dispose old controller and create new one when context changes", async () => {
-    const el = document.createElement("test-a2ui-element") as any;
+  it('should dispose old controller and create new one when context changes', async () => {
+    const el = document.createElement('test-a2ui-element') as any;
     document.body.appendChild(el);
 
-    const context1 = new ComponentContext(surface, "root");
-    await asyncUpdate(el, (e) => {
+    const context1 = new ComponentContext(surface, 'root');
+    await asyncUpdate(el, e => {
       e.context = context1;
     });
 
@@ -143,8 +143,8 @@ describe("A2uiLitElement", () => {
     assert.strictEqual(disposedCount, 0);
 
     // change context
-    const context2 = new ComponentContext(surface, "child_id");
-    await asyncUpdate(el, (e) => {
+    const context2 = new ComponentContext(surface, 'child_id');
+    await asyncUpdate(el, e => {
       e.context = context2;
     });
 
diff --git a/renderers/lit/src/v0_9/tests/a2ui-surface.test.ts b/renderers/lit/src/v0_9/tests/a2ui-surface.test.ts
index 009f41408..68a9dac11 100644
--- a/renderers/lit/src/v0_9/tests/a2ui-surface.test.ts
+++ b/renderers/lit/src/v0_9/tests/a2ui-surface.test.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { setupTestDom, teardownTestDom, asyncUpdate } from "./dom-setup.js";
-import assert from "node:assert";
-import { describe, it, beforeEach, after, before } from "node:test";
-import type { A2uiSurface } from "../surface/a2ui-surface.js";
-import { MessageProcessor } from "@a2ui/web_core/v0_9";
+import {setupTestDom, teardownTestDom, asyncUpdate} from './dom-setup.js';
+import assert from 'node:assert';
+import {describe, it, beforeEach, after, before} from 'node:test';
+import type {A2uiSurface} from '../surface/a2ui-surface.js';
+import {MessageProcessor} from '@a2ui/web_core/v0_9';
 
 /**
  * These tests verify that the surface element:
@@ -26,7 +26,7 @@ import { MessageProcessor } from "@a2ui/web_core/v0_9";
  * - Renders a loading state when the surface exists but the root component is missing.
  * - Renders the actual root component once it becomes available in the data model.
  */
-describe("A2uiSurface", () => {
+describe('A2uiSurface', () => {
   let basicCatalog: any;
 
   before(async () => {
@@ -34,8 +34,8 @@ describe("A2uiSurface", () => {
 
     // Dynamically import component files *after* setting up JSDOM globals
     // to prevent LitElement from evaluating in an empty Node context and crashing.
-    await import("../surface/a2ui-surface.js");
-    basicCatalog = (await import("../catalogs/basic/index.js")).basicCatalog;
+    await import('../surface/a2ui-surface.js');
+    basicCatalog = (await import('../catalogs/basic/index.js')).basicCatalog;
   });
   after(teardownTestDom);
 
@@ -47,63 +47,63 @@ describe("A2uiSurface", () => {
     // Initialize the test surface
     processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           catalogId: basicCatalog.id,
         },
       },
     ]);
 
-    surfaceModel = processor.model.getSurface("test-surface")!;
+    surfaceModel = processor.model.getSurface('test-surface')!;
   });
 
-  it("should render nothing when surface is undefined", async () => {
-    const el = document.createElement("a2ui-surface") as unknown as A2uiSurface;
-    await asyncUpdate(el, (e) => document.body.appendChild(e as any));
+  it('should render nothing when surface is undefined', async () => {
+    const el = document.createElement('a2ui-surface') as unknown as A2uiSurface;
+    await asyncUpdate(el, e => document.body.appendChild(e as any));
 
     // Without surface, it should render nothing
-    assert.strictEqual(el.shadowRoot?.innerHTML, "<!---->");
+    assert.strictEqual(el.shadowRoot?.innerHTML, '<!---->');
 
     document.body.removeChild(el);
   });
 
-  it("should render loading state when surface has no root component", async () => {
-    const el = document.createElement("a2ui-surface") as unknown as A2uiSurface;
+  it('should render loading state when surface has no root component', async () => {
+    const el = document.createElement('a2ui-surface') as unknown as A2uiSurface;
     document.body.appendChild(el);
 
-    await asyncUpdate(el, (e) => {
+    await asyncUpdate(el, e => {
       e.surface = surfaceModel;
     });
 
     const html = el.shadowRoot?.innerHTML;
-    assert.ok(html?.includes("Loading surface"), "Should contain loading text");
+    assert.ok(html?.includes('Loading surface'), 'Should contain loading text');
 
     document.body.removeChild(el);
   });
 
-  it("should render root component once it becomes available", async () => {
-    const el = document.createElement("a2ui-surface") as unknown as A2uiSurface;
+  it('should render root component once it becomes available', async () => {
+    const el = document.createElement('a2ui-surface') as unknown as A2uiSurface;
     document.body.appendChild(el);
 
-    await asyncUpdate(el, (e) => {
+    await asyncUpdate(el, e => {
       e.surface = surfaceModel;
     });
 
-    assert.ok(el.shadowRoot?.innerHTML?.includes("Loading surface"));
+    assert.ok(el.shadowRoot?.innerHTML?.includes('Loading surface'));
 
     // Add root component
     await asyncUpdate(el, () => {
       processor.processMessages([
         {
-          version: "v0.9",
+          version: 'v0.9',
           updateComponents: {
-            surfaceId: "test-surface",
+            surfaceId: 'test-surface',
             components: [
               {
-                id: "root",
-                component: "Text",
-                text: "Hello JSDOM",
+                id: 'root',
+                component: 'Text',
+                text: 'Hello JSDOM',
               },
             ],
           },
@@ -114,7 +114,7 @@ describe("A2uiSurface", () => {
     await el.updateComplete;
 
     // Wait for the child element (a2ui-text) to finish updating as well
-    const childEl = el.shadowRoot?.querySelector("a2ui-basic-text") as any;
+    const childEl = el.shadowRoot?.querySelector('a2ui-basic-text') as any;
     if (childEl && childEl.updateComplete) {
       await childEl.updateComplete;
     }
@@ -122,14 +122,8 @@ describe("A2uiSurface", () => {
     const html = el.shadowRoot?.innerHTML;
     const childHtml = childEl?.shadowRoot?.innerHTML;
 
-    assert.ok(
-      !html?.includes("Loading surface"),
-      "Loading text should be gone",
-    );
-    assert.ok(
-      childHtml?.includes("Hello JSDOM"),
-      "Actual child HTML: " + childHtml,
-    );
+    assert.ok(!html?.includes('Loading surface'), 'Loading text should be gone');
+    assert.ok(childHtml?.includes('Hello JSDOM'), 'Actual child HTML: ' + childHtml);
 
     document.body.removeChild(el);
   });
diff --git a/renderers/lit/src/v0_9/tests/basic-catalog-examples.test.ts b/renderers/lit/src/v0_9/tests/basic-catalog-examples.test.ts
index 5bbfb5168..c1a4d6cc4 100644
--- a/renderers/lit/src/v0_9/tests/basic-catalog-examples.test.ts
+++ b/renderers/lit/src/v0_9/tests/basic-catalog-examples.test.ts
@@ -14,44 +14,40 @@
  * limitations under the License.
  */
 
-import assert from "node:assert";
-import { describe, it } from "node:test";
-import {
-  MessageProcessor,
-  GenericBinder,
-  ComponentContext,
-} from "@a2ui/web_core/v0_9";
-import { basicCatalog } from "../catalogs/basic/index.js";
-import { TextApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import fs from "fs";
-import path from "path";
+import assert from 'node:assert';
+import {describe, it} from 'node:test';
+import {MessageProcessor, GenericBinder, ComponentContext} from '@a2ui/web_core/v0_9';
+import {basicCatalog} from '../catalogs/basic/index.js';
+import {TextApi} from '@a2ui/web_core/v0_9/basic_catalog';
+import fs from 'fs';
+import path from 'path';
 
 /**
  * These tests verify that:
  * - The basic catalog is correctly defined and can be used to process
  *   the examples from web_core.
  */
-describe("v0.9 Basic Catalog Examples", () => {
+describe('v0.9 Basic Catalog Examples', () => {
   const examplesDir = path.resolve(
     process.cwd(),
-    "../../specification/v0_9/json/catalogs/basic/examples",
+    '../../specification/v0_9/json/catalogs/basic/examples',
   );
 
-  const files = fs.readdirSync(examplesDir).filter((f) => f.endsWith(".json"));
+  const files = fs.readdirSync(examplesDir).filter(f => f.endsWith('.json'));
 
   for (const file of files) {
     it(`should successfully process ${file}`, async () => {
-      const content = fs.readFileSync(path.join(examplesDir, file), "utf-8");
+      const content = fs.readFileSync(path.join(examplesDir, file), 'utf-8');
       const data = JSON.parse(content);
       const messages = Array.isArray(data) ? data : data.messages || [];
 
-      let surfaceId = file.replace(".json", "");
+      let surfaceId = file.replace('.json', '');
       const createMsg = messages.find((m: any) => m.createSurface);
       if (createMsg) {
         surfaceId = createMsg.createSurface.surfaceId;
       } else {
         messages.unshift({
-          version: "v0.9",
+          version: 'v0.9',
           createSurface: {
             surfaceId,
             catalogId: basicCatalog.id,
@@ -66,26 +62,26 @@ describe("v0.9 Basic Catalog Examples", () => {
       const surface = processor.model.getSurface(surfaceId);
       assert.ok(surface, `Surface ${surfaceId} should exist`);
 
-      const rootNode = surface.componentsModel.get("root");
-      assert.ok(rootNode, "Surface should have a root component");
+      const rootNode = surface.componentsModel.get('root');
+      assert.ok(rootNode, 'Surface should have a root component');
 
-      if (file.includes("capitalized_text")) {
-        const textNode = surface.componentsModel.get("result_text");
+      if (file.includes('capitalized_text')) {
+        const textNode = surface.componentsModel.get('result_text');
         assert.ok(textNode);
 
-        const context = new ComponentContext(surface, "result_text");
+        const context = new ComponentContext(surface, 'result_text');
         const binder = new GenericBinder<any>(context, TextApi.schema);
         const sub = binder.subscribe(() => {}); // Force connection
 
         // Wait a microtask to let initial resolution finish
-        await new Promise((r) => setTimeout(r, 0));
-        assert.strictEqual(binder.snapshot.text, "");
+        await new Promise(r => setTimeout(r, 0));
+        assert.strictEqual(binder.snapshot.text, '');
 
         // Set value in data model
-        surface.dataModel.set("/inputValue", "hello world");
+        surface.dataModel.set('/inputValue', 'hello world');
 
-        await new Promise((r) => setTimeout(r, 0));
-        assert.strictEqual(binder.snapshot.text, "Hello world");
+        await new Promise(r => setTimeout(r, 0));
+        assert.strictEqual(binder.snapshot.text, 'Hello world');
 
         sub.unsubscribe();
         binder.dispose();
diff --git a/renderers/lit/src/v0_9/tests/components/CheckBox.test.ts b/renderers/lit/src/v0_9/tests/components/CheckBox.test.ts
index 0093c6368..73dc673a4 100644
--- a/renderers/lit/src/v0_9/tests/components/CheckBox.test.ts
+++ b/renderers/lit/src/v0_9/tests/components/CheckBox.test.ts
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import { setupTestDom, teardownTestDom, asyncUpdate } from "../dom-setup.js";
-import assert from "node:assert";
-import { describe, it, beforeEach, after, before } from "node:test";
-import { ComponentContext, MessageProcessor } from "@a2ui/web_core/v0_9";
+import {setupTestDom, teardownTestDom, asyncUpdate} from '../dom-setup.js';
+import assert from 'node:assert';
+import {describe, it, beforeEach, after, before} from 'node:test';
+import {ComponentContext, MessageProcessor} from '@a2ui/web_core/v0_9';
 
-describe("CheckBox Component", () => {
+describe('CheckBox Component', () => {
   let basicCatalog: any;
 
   before(async () => {
     setupTestDom();
-    basicCatalog = (await import("../../catalogs/basic/index.js")).basicCatalog;
+    basicCatalog = (await import('../../catalogs/basic/index.js')).basicCatalog;
     // Ensure component is registered
-    await import("../../catalogs/basic/components/CheckBox.js");
+    await import('../../catalogs/basic/components/CheckBox.js');
   });
 
   after(teardownTestDom);
@@ -38,44 +38,44 @@ describe("CheckBox Component", () => {
     processor = new MessageProcessor([basicCatalog]);
     processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           catalogId: basicCatalog.id,
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateComponents: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           components: [
             {
-              id: "checkbox_invalid",
-              component: "CheckBox",
-              label: "Check me",
+              id: 'checkbox_invalid',
+              component: 'CheckBox',
+              label: 'Check me',
               value: false,
               isValid: false,
-              validationErrors: ["This is required"],
+              validationErrors: ['This is required'],
             },
           ],
         },
       },
     ]);
-    surface = processor.model.getSurface("test-surface")!;
+    surface = processor.model.getSurface('test-surface')!;
   });
 
-  it("should render validation error in CheckBox", async () => {
-    const el = document.createElement("a2ui-checkbox") as any;
+  it('should render validation error in CheckBox', async () => {
+    const el = document.createElement('a2ui-checkbox') as any;
     document.body.appendChild(el);
 
-    const context = new ComponentContext(surface, "checkbox_invalid");
-    await asyncUpdate(el, (e) => {
+    const context = new ComponentContext(surface, 'checkbox_invalid');
+    await asyncUpdate(el, e => {
       e.context = context;
     });
 
-    const errorDiv = el.shadowRoot.querySelector(".error");
+    const errorDiv = el.shadowRoot.querySelector('.error');
     assert.ok(errorDiv);
-    assert.strictEqual(errorDiv.textContent.trim(), "This is required");
+    assert.strictEqual(errorDiv.textContent.trim(), 'This is required');
 
     document.body.removeChild(el);
   });
diff --git a/renderers/lit/src/v0_9/tests/components/ChoicePicker.test.ts b/renderers/lit/src/v0_9/tests/components/ChoicePicker.test.ts
index c8abf8eca..d4ec8247c 100644
--- a/renderers/lit/src/v0_9/tests/components/ChoicePicker.test.ts
+++ b/renderers/lit/src/v0_9/tests/components/ChoicePicker.test.ts
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import { setupTestDom, teardownTestDom, asyncUpdate } from "../dom-setup.js";
-import assert from "node:assert";
-import { describe, it, beforeEach, after, before } from "node:test";
-import { ComponentContext, MessageProcessor } from "@a2ui/web_core/v0_9";
+import {setupTestDom, teardownTestDom, asyncUpdate} from '../dom-setup.js';
+import assert from 'node:assert';
+import {describe, it, beforeEach, after, before} from 'node:test';
+import {ComponentContext, MessageProcessor} from '@a2ui/web_core/v0_9';
 
-describe("ChoicePicker Component", () => {
+describe('ChoicePicker Component', () => {
   let basicCatalog: any;
 
   before(async () => {
     setupTestDom();
-    basicCatalog = (await import("../../catalogs/basic/index.js")).basicCatalog;
+    basicCatalog = (await import('../../catalogs/basic/index.js')).basicCatalog;
     // Ensure component is registered
-    await import("../../catalogs/basic/components/ChoicePicker.js");
+    await import('../../catalogs/basic/components/ChoicePicker.js');
   });
 
   after(teardownTestDom);
@@ -38,35 +38,35 @@ describe("ChoicePicker Component", () => {
     processor = new MessageProcessor([basicCatalog]);
     processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           catalogId: basicCatalog.id,
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateComponents: {
-          surfaceId: "test-surface",
+          surfaceId: 'test-surface',
           components: [
             {
-              id: "choice_picker_chips",
-              component: "ChoicePicker",
-              label: "Pick chips",
+              id: 'choice_picker_chips',
+              component: 'ChoicePicker',
+              label: 'Pick chips',
               options: [
-                { label: "Apple", value: "apple" },
-                { label: "Banana", value: "banana" },
+                {label: 'Apple', value: 'apple'},
+                {label: 'Banana', value: 'banana'},
               ],
               value: [],
-              displayStyle: "chips",
+              displayStyle: 'chips',
             },
             {
-              id: "choice_picker_filterable",
-              component: "ChoicePicker",
-              label: "Filter me",
+              id: 'choice_picker_filterable',
+              component: 'ChoicePicker',
+              label: 'Filter me',
               options: [
-                { label: "Apple", value: "apple" },
-                { label: "Banana", value: "banana" },
+                {label: 'Apple', value: 'apple'},
+                {label: 'Banana', value: 'banana'},
               ],
               value: [],
               filterable: true,
@@ -75,44 +75,44 @@ describe("ChoicePicker Component", () => {
         },
       },
     ]);
-    surface = processor.model.getSurface("test-surface")!;
+    surface = processor.model.getSurface('test-surface')!;
   });
 
-  it("should render chips when displayStyle is chips", async () => {
-    const el = document.createElement("a2ui-choicepicker") as any;
+  it('should render chips when displayStyle is chips', async () => {
+    const el = document.createElement('a2ui-choicepicker') as any;
     document.body.appendChild(el);
 
-    const context = new ComponentContext(surface, "choice_picker_chips");
-    await asyncUpdate(el, (e) => {
+    const context = new ComponentContext(surface, 'choice_picker_chips');
+    await asyncUpdate(el, e => {
       e.context = context;
     });
 
-    const buttons = el.shadowRoot.querySelectorAll("button.chip");
+    const buttons = el.shadowRoot.querySelectorAll('button.chip');
     assert.strictEqual(buttons.length, 2);
-    assert.strictEqual(buttons[0].textContent.trim(), "Apple");
+    assert.strictEqual(buttons[0].textContent.trim(), 'Apple');
 
     document.body.removeChild(el);
   });
 
-  it("should filter options when filterable is true", async () => {
-    const el = document.createElement("a2ui-choicepicker") as any;
+  it('should filter options when filterable is true', async () => {
+    const el = document.createElement('a2ui-choicepicker') as any;
     document.body.appendChild(el);
 
-    const context = new ComponentContext(surface, "choice_picker_filterable");
-    await asyncUpdate(el, (e) => {
+    const context = new ComponentContext(surface, 'choice_picker_filterable');
+    await asyncUpdate(el, e => {
       e.context = context;
     });
 
     // Initially 2 options + 1 main label = 3 labels
-    assert.strictEqual(el.shadowRoot.querySelectorAll("label").length, 3);
+    assert.strictEqual(el.shadowRoot.querySelectorAll('label').length, 3);
 
     // Simulate input by setting state directly
-    await asyncUpdate(el, (e) => {
-      e.filter = "app";
+    await asyncUpdate(el, e => {
+      e.filter = 'app';
     });
 
     // Now only Apple should be visible + main label = 2 labels
-    assert.strictEqual(el.shadowRoot.querySelectorAll("label").length, 2);
+    assert.strictEqual(el.shadowRoot.querySelectorAll('label').length, 2);
 
     document.body.removeChild(el);
   });
diff --git a/renderers/lit/src/v0_9/tests/custom-catalogs.test.ts b/renderers/lit/src/v0_9/tests/custom-catalogs.test.ts
index f899d1be8..c1bf165e7 100644
--- a/renderers/lit/src/v0_9/tests/custom-catalogs.test.ts
+++ b/renderers/lit/src/v0_9/tests/custom-catalogs.test.ts
@@ -14,28 +14,26 @@
  * limitations under the License.
  */
 
-import assert from "node:assert";
-import { describe, it, before, after } from "node:test";
-import { MessageProcessor, Catalog, ComponentApi } from "@a2ui/web_core/v0_9";
-import type { LitComponentApi } from "@a2ui/lit/v0_9";
-import { setupTestDom, teardownTestDom, asyncUpdate } from "./dom-setup.js";
-import type { A2uiSurface } from "../surface/a2ui-surface.js";
+import assert from 'node:assert';
+import {describe, it, before, after} from 'node:test';
+import {MessageProcessor, Catalog, ComponentApi} from '@a2ui/web_core/v0_9';
+import type {LitComponentApi} from '@a2ui/lit/v0_9';
+import {setupTestDom, teardownTestDom, asyncUpdate} from './dom-setup.js';
+import type {A2uiSurface} from '../surface/a2ui-surface.js';
 
-import { z } from "zod";
+import {z} from 'zod';
 
 // A mock custom component API
 const CustomWidgetApi = {
-  name: "CustomWidget",
-  tagName: "a2ui-customwidget",
+  name: 'CustomWidget',
+  tagName: 'a2ui-customwidget',
   schema: z.object({
     label: z.string().optional(),
   }),
 }; // satisfies LitComponentApi
 
 // A custom catalog wrapping the component
-const customCatalog = new Catalog<LitComponentApi>("custom-catalog-v1", [
-  CustomWidgetApi,
-]);
+const customCatalog = new Catalog<LitComponentApi>('custom-catalog-v1', [CustomWidgetApi]);
 
 /**
  * Verifies that:
@@ -43,7 +41,7 @@ const customCatalog = new Catalog<LitComponentApi>("custom-catalog-v1", [
  * - The A2UI `MessageProcessor` and downstream controllers can handle multiple
  *   disparate catalogs running concurrently within the same environment across different surfaces.
  */
-describe("Custom Catalogs Integration", () => {
+describe('Custom Catalogs Integration', () => {
   let basicCatalog: any;
 
   before(async () => {
@@ -51,115 +49,105 @@ describe("Custom Catalogs Integration", () => {
 
     // Dynamically import component files *after* setting up JSDOM globals
     // to prevent LitElement from evaluating in an empty Node context.
-    await import("../surface/a2ui-surface.js");
-    basicCatalog = (await import("../catalogs/basic/index.js")).basicCatalog;
+    await import('../surface/a2ui-surface.js');
+    basicCatalog = (await import('../catalogs/basic/index.js')).basicCatalog;
   });
 
   after(teardownTestDom);
 
-  it("should allow users to define and use their own custom catalogs", async () => {
+  it('should allow users to define and use their own custom catalogs', async () => {
     // MessageProcessor instantiated exclusively with the custom catalog
     const processor = new MessageProcessor<LitComponentApi>([customCatalog]);
 
     // Initialize a surface mapped to the custom catalog and populate it with a CustomWidget
     processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "custom-surface",
+          surfaceId: 'custom-surface',
           catalogId: customCatalog.id,
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateComponents: {
-          surfaceId: "custom-surface",
+          surfaceId: 'custom-surface',
           components: [
             {
-              id: "root",
-              component: "CustomWidget",
-              label: "Hello Custom",
+              id: 'root',
+              component: 'CustomWidget',
+              label: 'Hello Custom',
             },
           ],
         },
       },
     ]);
 
-    const surface = processor.model.getSurface("custom-surface")!;
-    assert.ok(
-      surface,
-      "Surface should be created safely using the custom catalog",
-    );
+    const surface = processor.model.getSurface('custom-surface')!;
+    assert.ok(surface, 'Surface should be created safely using the custom catalog');
 
-    const rootNode = surface.componentsModel.get("root") as any;
-    assert.strictEqual(rootNode?.type, "CustomWidget");
+    const rootNode = surface.componentsModel.get('root') as any;
+    assert.strictEqual(rootNode?.type, 'CustomWidget');
   });
 
-  it("should handle multiple catalogs concurrently across different surfaces", async () => {
+  it('should handle multiple catalogs concurrently across different surfaces', async () => {
     // MessageProcessor instantiated with MULTIPLE catalogs
-    const processor = new MessageProcessor<LitComponentApi>([
-      basicCatalog,
-      customCatalog,
-    ]);
+    const processor = new MessageProcessor<LitComponentApi>([basicCatalog, customCatalog]);
 
     // Create two independent surfaces concurrently, mapping them to their respective
     // catalogs, and populate each with a component type unique to that catalog.
     processor.processMessages([
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "minimal-surface",
+          surfaceId: 'minimal-surface',
           catalogId: basicCatalog.id,
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         createSurface: {
-          surfaceId: "custom-surface",
+          surfaceId: 'custom-surface',
           catalogId: customCatalog.id,
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateComponents: {
-          surfaceId: "minimal-surface",
+          surfaceId: 'minimal-surface',
           components: [
             {
-              id: "root",
-              component: "Text",
-              text: "From Minimal",
+              id: 'root',
+              component: 'Text',
+              text: 'From Minimal',
             },
           ],
         },
       },
       {
-        version: "v0.9",
+        version: 'v0.9',
         updateComponents: {
-          surfaceId: "custom-surface",
+          surfaceId: 'custom-surface',
           components: [
             {
-              id: "root",
-              component: "CustomWidget",
-              label: "From Custom",
+              id: 'root',
+              component: 'CustomWidget',
+              label: 'From Custom',
             },
           ],
         },
       },
     ]);
 
-    const minimalSurf = processor.model.getSurface("minimal-surface")!;
-    const customSurf = processor.model.getSurface("custom-surface")!;
+    const minimalSurf = processor.model.getSurface('minimal-surface')!;
+    const customSurf = processor.model.getSurface('custom-surface')!;
 
     assert.ok(minimalSurf);
     assert.ok(customSurf);
 
     // Mount visual surfaces recursively evaluating the nodes
-    const el1 = document.createElement(
-      "a2ui-surface",
-    ) as unknown as A2uiSurface;
-    const el2 = document.createElement(
-      "a2ui-surface",
-    ) as unknown as A2uiSurface;
+    const el1 = document.createElement('a2ui-surface') as unknown as A2uiSurface;
+    const el2 = document.createElement('a2ui-surface') as unknown as A2uiSurface;
 
     await asyncUpdate(el1, (e: any) => {
       document.body.appendChild(e);
@@ -172,9 +160,9 @@ describe("Custom Catalogs Integration", () => {
     });
 
     // Validates that the minimal catalog surface spawned the classic a2ui-text node
-    assert.ok(el1.shadowRoot?.querySelector("a2ui-basic-text"));
+    assert.ok(el1.shadowRoot?.querySelector('a2ui-basic-text'));
 
     // Validates that the custom catalog surface dynamically spawned the custom node tag `<a2ui-customwidget>`
-    assert.ok(el2.shadowRoot?.querySelector("a2ui-customwidget"));
+    assert.ok(el2.shadowRoot?.querySelector('a2ui-customwidget'));
   });
 });
diff --git a/renderers/lit/src/v0_9/tests/dom-setup.ts b/renderers/lit/src/v0_9/tests/dom-setup.ts
index 1f886ef2c..d66b3de0d 100644
--- a/renderers/lit/src/v0_9/tests/dom-setup.ts
+++ b/renderers/lit/src/v0_9/tests/dom-setup.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { JSDOM } from "jsdom";
+import {JSDOM} from 'jsdom';
 
 let dom: JSDOM | null = null;
 const originalGlobals: Record<string, any> = {};
@@ -39,20 +39,20 @@ function applyGlobals(obj: Record<string, any>) {
  */
 export function setupTestDom() {
   if (!dom) {
-    dom = new JSDOM("<!DOCTYPE html><body></body>");
+    dom = new JSDOM('<!DOCTYPE html><body></body>');
 
     const names = [
-      "window",
-      "document",
-      "HTMLElement",
-      "customElements",
-      "Element",
-      "Node",
-      "Event",
-      "MutationObserver",
-      "requestAnimationFrame",
-      "cancelAnimationFrame",
-      "CSSStyleSheet",
+      'window',
+      'document',
+      'HTMLElement',
+      'customElements',
+      'Element',
+      'Node',
+      'Event',
+      'MutationObserver',
+      'requestAnimationFrame',
+      'cancelAnimationFrame',
+      'CSSStyleSheet',
     ];
 
     // Save originals once
@@ -61,7 +61,7 @@ export function setupTestDom() {
     }
   } else {
     // Reset body if already created
-    dom.window.document.body.innerHTML = "";
+    dom.window.document.body.innerHTML = '';
   }
 
   // TODO(ditman): Update jsdom to ^29.0.0, which includes CSSOM by default, and remove this.
@@ -69,14 +69,11 @@ export function setupTestDom() {
     dom.window.document.adoptedStyleSheets = [];
   }
 
-  if (
-    dom.window.CSSStyleSheet &&
-    !dom.window.CSSStyleSheet.prototype.replaceSync
-  ) {
+  if (dom.window.CSSStyleSheet && !dom.window.CSSStyleSheet.prototype.replaceSync) {
     dom.window.CSSStyleSheet.prototype.replaceSync = function (text: string) {
       let styleEl = (this as any)._styleEl;
       if (!styleEl) {
-        styleEl = dom!.window.document.createElement("style");
+        styleEl = dom!.window.document.createElement('style');
         dom!.window.document.head.appendChild(styleEl);
         (this as any)._styleEl = styleEl;
       }
@@ -107,7 +104,7 @@ export function setupTestDom() {
 export function teardownTestDom() {
   // Clear the document to prevent leaks between tests
   if (dom) {
-    dom.window.document.body.innerHTML = "";
+    dom.window.document.body.innerHTML = '';
     dom = null;
   }
 
@@ -127,6 +124,6 @@ export async function asyncUpdate<T = any>(
     await (target as any).updateComplete;
   } else {
     // Await a macro-task for mock objects that lack Lit's lifecycle
-    await new Promise((r) => setTimeout(r, 0));
+    await new Promise(r => setTimeout(r, 0));
   }
 }
diff --git a/renderers/lit/src/v0_9/tests/markdown.test.ts b/renderers/lit/src/v0_9/tests/markdown.test.ts
index 6c65992ed..5583a04a8 100644
--- a/renderers/lit/src/v0_9/tests/markdown.test.ts
+++ b/renderers/lit/src/v0_9/tests/markdown.test.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { setupTestDom, teardownTestDom, asyncUpdate } from "./dom-setup.js";
-import assert from "node:assert";
-import { describe, it, before, after } from "node:test";
-import * as Types from "@a2ui/web_core/types/types";
+import {setupTestDom, teardownTestDom, asyncUpdate} from './dom-setup.js';
+import assert from 'node:assert';
+import {describe, it, before, after} from 'node:test';
+import * as Types from '@a2ui/web_core/types/types';
 
-describe("Markdown Directive", () => {
+describe('Markdown Directive', () => {
   before(() => {
     // Set up the DOM before any lit imports in the tests
     setupTestDom();
@@ -29,63 +29,54 @@ describe("Markdown Directive", () => {
     teardownTestDom();
   });
 
-  it("should render fallback when no renderer is provided", async () => {
-    const { html, render } = await import("lit");
-    const { markdown } = await import("../directives/markdown.js");
+  it('should render fallback when no renderer is provided', async () => {
+    const {html, render} = await import('lit');
+    const {markdown} = await import('../directives/markdown.js');
 
-    const container = document.createElement("div");
+    const container = document.createElement('div');
 
     // Render the directive directly into our container
-    render(html`<div>${markdown("Hello world")}</div>`, container);
+    render(html`<div>${markdown('Hello world')}</div>`, container);
 
     const htmlContent = container.innerHTML;
+    assert.ok(htmlContent.includes('no-markdown-renderer'), 'Should render fallback span class');
     assert.ok(
-      htmlContent.includes("no-markdown-renderer"),
-      "Should render fallback span class",
-    );
-    assert.ok(
-      container.textContent?.includes("Hello world"),
-      "Should render fallback text properly",
+      container.textContent?.includes('Hello world'),
+      'Should render fallback text properly',
     );
   });
 
-  it("should render parsed markdown when renderer is provided", async () => {
-    const { html, render } = await import("lit");
-    const { markdown } = await import("../directives/markdown.js");
+  it('should render parsed markdown when renderer is provided', async () => {
+    const {html, render} = await import('lit');
+    const {markdown} = await import('../directives/markdown.js');
 
-    const container = document.createElement("div");
+    const container = document.createElement('div');
 
     let resolveRenderer: (value: string) => void;
     // Leak the `resolve` function of this promise to the `resolveRenderer`
     // variable, so we can call it later in the test.
-    const renderPromise = new Promise<string>((resolve) => {
+    const renderPromise = new Promise<string>(resolve => {
       resolveRenderer = resolve;
     });
     // Mock a markdown renderer that resolves by calling `resolveRenderer`
     const mockRenderer: Types.MarkdownRenderer = async () => renderPromise;
 
     // Render the directive with our mock renderer
-    render(
-      html`<div>${markdown("Hello markdown", mockRenderer)}</div>`,
-      container,
-    );
+    render(html`<div>${markdown('Hello markdown', mockRenderer)}</div>`, container);
 
     // Before resolution, should show the placeholder (until directive)
-    assert.ok(container.innerHTML.includes("no-markdown-renderer"));
+    assert.ok(container.innerHTML.includes('no-markdown-renderer'));
 
     // Resolve the promise via asyncUpdate so it yields to the macro-task queue
     await asyncUpdate(container, () => {
-      resolveRenderer!("<b>Rendered HTML</b>");
+      resolveRenderer!('<b>Rendered HTML</b>');
     });
 
     const htmlContent = container.innerHTML;
     assert.ok(
-      htmlContent.includes("<b>Rendered HTML</b>"),
-      "Should render the HTML from the renderer",
-    );
-    assert.ok(
-      !htmlContent.includes("no-markdown-renderer"),
-      "Placeholder should be gone",
+      htmlContent.includes('<b>Rendered HTML</b>'),
+      'Should render the HTML from the renderer',
     );
+    assert.ok(!htmlContent.includes('no-markdown-renderer'), 'Placeholder should be gone');
   });
 });
diff --git a/renderers/lit/src/v0_9/types.ts b/renderers/lit/src/v0_9/types.ts
index bb0cdd14e..9ebb7c2ba 100644
--- a/renderers/lit/src/v0_9/types.ts
+++ b/renderers/lit/src/v0_9/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ComponentApi } from "@a2ui/web_core/v0_9";
+import {ComponentApi} from '@a2ui/web_core/v0_9';
 
 /**
  * Interface representing an A2UI component implementation in Lit.
diff --git a/renderers/markdown/.prettierrc b/renderers/markdown/.prettierrc
deleted file mode 100644
index 5ac85e271..000000000
--- a/renderers/markdown/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true
-}
diff --git a/renderers/markdown/markdown-it/src/markdown.test.ts b/renderers/markdown/markdown-it/src/markdown.test.ts
index b8db19838..07c72a005 100644
--- a/renderers/markdown/markdown-it/src/markdown.test.ts
+++ b/renderers/markdown/markdown-it/src/markdown.test.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { JSDOM } from 'jsdom';
+import {JSDOM} from 'jsdom';
 
 // Provide a jsdom window for DOMPurify in the Node test environment.
 const jsdom = new JSDOM('');
 (globalThis as any).window = jsdom.window;
 (globalThis as any).document = jsdom.window.document;
 
-import { describe, it } from 'node:test';
+import {describe, it} from 'node:test';
 import assert from 'node:assert';
-import { MarkdownItRenderer } from './raw-markdown.js';
-import { renderMarkdown } from './markdown.js';
+import {MarkdownItRenderer} from './raw-markdown.js';
+import {renderMarkdown} from './markdown.js';
 
 describe('MarkdownItRenderer', () => {
   it('renders basic markdown', () => {
@@ -35,13 +35,13 @@ describe('MarkdownItRenderer', () => {
 
   it('applies tag classes via tagClassMap', () => {
     const renderer = new MarkdownItRenderer();
-    const result = renderer.render('# Hello', { h1: ['custom-class'] });
+    const result = renderer.render('# Hello', {h1: ['custom-class']});
     assert.match(result, /<h1 class="custom-class">Hello<\/h1>/);
   });
 
   it('applies multiple classes', () => {
     const renderer = new MarkdownItRenderer();
-    const result = renderer.render('para', { p: ['class1', 'class2'] });
+    const result = renderer.render('para', {p: ['class1', 'class2']});
     assert.match(result, /<p class="class1 class2">para<\/p>/);
   });
 
@@ -49,7 +49,7 @@ describe('MarkdownItRenderer', () => {
     const renderer = new MarkdownItRenderer();
 
     // First render with class
-    const result1 = renderer.render('# Hello', { h1: ['persistent?'] });
+    const result1 = renderer.render('# Hello', {h1: ['persistent?']});
     assert.match(result1, /class="persistent\?"/);
 
     // Second render without class
diff --git a/renderers/markdown/markdown-it/src/markdown.ts b/renderers/markdown/markdown-it/src/markdown.ts
index 2388a8892..e0da33153 100644
--- a/renderers/markdown/markdown-it/src/markdown.ts
+++ b/renderers/markdown/markdown-it/src/markdown.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { rawMarkdownRenderer } from './raw-markdown.js';
-import { sanitize } from './sanitizer.js';
+import {rawMarkdownRenderer} from './raw-markdown.js';
+import {sanitize} from './sanitizer.js';
 import * as Types from '@a2ui/web_core';
 
 /**
diff --git a/renderers/markdown/markdown-it/src/raw-markdown.ts b/renderers/markdown/markdown-it/src/raw-markdown.ts
index db21ea01b..d0442f9c2 100644
--- a/renderers/markdown/markdown-it/src/raw-markdown.ts
+++ b/renderers/markdown/markdown-it/src/raw-markdown.ts
@@ -79,7 +79,7 @@ export class MarkdownItRenderer {
    * This method does not perform any sanitization of the outgoing HTML.
    */
   render(value: string, tagClassMap?: Types.MarkdownRendererTagClassMap) {
-    return this.markdownIt.render(value, { tagClassMap });
+    return this.markdownIt.render(value, {tagClassMap});
   }
 }
 
diff --git a/renderers/react/.prettierrc b/renderers/react/.prettierrc
deleted file mode 100644
index e3f98b825..000000000
--- a/renderers/react/.prettierrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "printWidth": 100,
-  "bracketSpacing": false,
-  "jsxSingleQuote": false
-}
diff --git a/renderers/react/README.md b/renderers/react/README.md
index 1b9fa2f48..ba18d2bfb 100644
--- a/renderers/react/README.md
+++ b/renderers/react/README.md
@@ -24,7 +24,7 @@ A2UI supports multiple protocol versions to ensure backward compatibility. For n
 To use the v0.9 implementation, import from the versioned path:
 
 ```typescript
-import { A2uiSurface, basicCatalog } from '@a2ui/react/v0_9';
+import {A2uiSurface, basicCatalog} from '@a2ui/react/v0_9';
 ```
 
 ## Quick Start
@@ -38,9 +38,9 @@ The React renderer works alongside the `MessageProcessor` from `@a2ui/web_core`.
 The example below creates a processor with the built-in `basicCatalog`, feeds it a sequence of hardcoded messages, and renders the resulting surface.
 
 ```tsx
-import { useState, useEffect } from 'react';
-import { MessageProcessor } from '@a2ui/web_core/v0_9';
-import { A2uiSurface, basicCatalog } from '@a2ui/react/v0_9';
+import {useState, useEffect} from 'react';
+import {MessageProcessor} from '@a2ui/web_core/v0_9';
+import {A2uiSurface, basicCatalog} from '@a2ui/react/v0_9';
 
 export default function App() {
   // 1. Create the processor and feed it messages.
@@ -51,12 +51,9 @@ export default function App() {
   });
 
   // 2. Set up listeners to keep the UI up to date as messages arrive.
-  const [surfaces, setSurfaces] = useState(() =>
-    Array.from(processor.model.surfacesMap.values())
-  );
+  const [surfaces, setSurfaces] = useState(() => Array.from(processor.model.surfacesMap.values()));
   useEffect(() => {
-    const sync = () =>
-      setSurfaces(Array.from(processor.model.surfacesMap.values()));
+    const sync = () => setSurfaces(Array.from(processor.model.surfacesMap.values()));
 
     const createdSub = processor.onSurfaceCreated(sync);
     const deletedSub = processor.onSurfaceDeleted(sync);
@@ -80,30 +77,34 @@ export default function App() {
 
 // In a real app, these messages would come from an agent via WebSocket, SSE, etc.
 // Here we hardcode them to show the message format.
-const sampleAgentMessages = [{
-  version: 'v0.9' as const,
-  createSurface: { surfaceId: 'main-chat', catalogId: basicCatalog.id }
-}, {
-  version: 'v0.9' as const,
-  updateComponents: {
-    surfaceId: 'main-chat',
-    components: [
-      { id: 'root', component: 'Column', children: ['greeting', 'description'] },
-      { id: 'greeting', component: 'Text', text: { path: '/title' } },
-      { id: 'description', component: 'Text', text: { path: '/body' } },
-    ],
-  }
-}, {
-  version: 'v0.9' as const,
-  updateDataModel: {
-    surfaceId: 'main-chat',
-    path: '/',
-    value: {
-      title: 'Hello from A2UI!',
-      body: 'Replace these messages with real agent responses to build interactive UIs.',
+const sampleAgentMessages = [
+  {
+    version: 'v0.9' as const,
+    createSurface: {surfaceId: 'main-chat', catalogId: basicCatalog.id},
+  },
+  {
+    version: 'v0.9' as const,
+    updateComponents: {
+      surfaceId: 'main-chat',
+      components: [
+        {id: 'root', component: 'Column', children: ['greeting', 'description']},
+        {id: 'greeting', component: 'Text', text: {path: '/title'}},
+        {id: 'description', component: 'Text', text: {path: '/body'}},
+      ],
+    },
+  },
+  {
+    version: 'v0.9' as const,
+    updateDataModel: {
+      surfaceId: 'main-chat',
+      path: '/',
+      value: {
+        title: 'Hello from A2UI!',
+        body: 'Replace these messages with real agent responses to build interactive UIs.',
+      },
     },
-  }
-}];
+  },
+];
 ```
 
 Running this example should display "Hello from A2UI!". The example demonstrates three message types:
@@ -117,19 +118,20 @@ Running this example should display "Hello from A2UI!". The example demonstrates
 A2UI v0.9 strictly separates a component's API (Schema) from its implementation.
 
 ### 1. Define the Component API
+
 Use Zod to define the properties. Using `CommonSchemas` from `web_core` enables automatic binding for A2UI primitives.
 
 ```typescript
-import { z } from 'zod';
-import { CommonSchemas } from '@a2ui/web_core/v0_9';
+import {z} from 'zod';
+import {CommonSchemas} from '@a2ui/web_core/v0_9';
 
 export const MyProfileApi = {
   name: 'Profile',
   schema: z.object({
-    username: CommonSchemas.DynamicString,  // Can be literal "Alice" or {path: "/user/name"}
+    username: CommonSchemas.DynamicString, // Can be literal "Alice" or {path: "/user/name"}
     bio: CommonSchemas.DynamicString,
     avatarUrl: CommonSchemas.DynamicString,
-    onEdit: CommonSchemas.Action,           // Resolves to a clickable () => void
+    onEdit: CommonSchemas.Action, // Resolves to a clickable () => void
     isEditable: CommonSchemas.DynamicBoolean,
     // Add 'checks' if you want validation support (standard in v0.9 interactive components)
     checks: CommonSchemas.Checkable.shape.checks,
@@ -138,38 +140,38 @@ export const MyProfileApi = {
 ```
 
 ### 2. Create the React Implementation
+
 The `createComponentImplementation` factory uses a **Generic Binder** to resolve all dynamic values before your component renders.
 
 ```tsx
-import { createComponentImplementation } from '@a2ui/react/v0_9';
-
-export const MyProfile = createComponentImplementation(
-  MyProfileApi, 
-  ({ props, buildChild }) => {
-    // 'props' is strictly inferred from the Zod schema:
-    // props.username is 'string' (resolved from DynamicString)
-    // props.onEdit is '() => void' (resolved from Action)
-    
-    return (
-      <div className="profile-widget">
-        <img src={props.avatarUrl ?? ''} alt={props.username} />
-        <h2>{props.username}</h2>
-        <p>{props.bio}</p>
-        
-        {props.isEditable && (
-          <button onClick={props.onEdit} disabled={props.isValid === false}>
-            Edit Profile
-          </button>
-        )}
-        
-        {/* Render validation errors if any check fails */}
-        {props.validationErrors?.map((err, i) => (
-          <div key={i} className="error-hint" style={{color: 'red'}}>{err}</div>
-        ))}
-      </div>
-    );
-  }
-);
+import {createComponentImplementation} from '@a2ui/react/v0_9';
+
+export const MyProfile = createComponentImplementation(MyProfileApi, ({props, buildChild}) => {
+  // 'props' is strictly inferred from the Zod schema:
+  // props.username is 'string' (resolved from DynamicString)
+  // props.onEdit is '() => void' (resolved from Action)
+
+  return (
+    <div className="profile-widget">
+      <img src={props.avatarUrl ?? ''} alt={props.username} />
+      <h2>{props.username}</h2>
+      <p>{props.bio}</p>
+
+      {props.isEditable && (
+        <button onClick={props.onEdit} disabled={props.isValid === false}>
+          Edit Profile
+        </button>
+      )}
+
+      {/* Render validation errors if any check fails */}
+      {props.validationErrors?.map((err, i) => (
+        <div key={i} className="error-hint" style={{color: 'red'}}>
+          {err}
+        </div>
+      ))}
+    </div>
+  );
+});
 ```
 
 ## Generic Binder Features
@@ -186,23 +188,20 @@ The Generic Binder is a framework-agnostic engine that transforms raw JSON paylo
 For advanced use cases where you need direct access to the `ComponentContext` or want to manage reactivity manually (e.g., for performance-critical animations), use `createBinderlessComponentImplementation`.
 
 ```tsx
-import { createBinderlessComponentImplementation } from '@a2ui/react/v0_9';
-
-export const RawInspector = createBinderlessComponentImplementation(
-  InspectorApi, 
-  ({ context }) => {
-    // Access the raw, unresolved component model and the data model directly
-    const rawData = context.componentModel.properties;
-    const componentId = context.componentModel.id;
-    
-    return (
-      <details>
-        <summary>Raw Component State (ID: {componentId})</summary>
-        <pre>{JSON.stringify(rawData, null, 2)}</pre>
-      </details>
-    );
-  }
-);
+import {createBinderlessComponentImplementation} from '@a2ui/react/v0_9';
+
+export const RawInspector = createBinderlessComponentImplementation(InspectorApi, ({context}) => {
+  // Access the raw, unresolved component model and the data model directly
+  const rawData = context.componentModel.properties;
+  const componentId = context.componentModel.id;
+
+  return (
+    <details>
+      <summary>Raw Component State (ID: {componentId})</summary>
+      <pre>{JSON.stringify(rawData, null, 2)}</pre>
+    </details>
+  );
+});
 ```
 
 ## Defining Catalogs and Functions
@@ -210,24 +209,24 @@ export const RawInspector = createBinderlessComponentImplementation(
 Group your components and logic functions into a `Catalog` to be used by the `MessageProcessor`.
 
 ```typescript
-import { Catalog, createFunctionImplementation } from '@a2ui/web_core/v0_9';
-import { z } from 'zod';
+import {Catalog, createFunctionImplementation} from '@a2ui/web_core/v0_9';
+import {z} from 'zod';
 
 // 1. Implement a custom logic function
 const myCheckFunc = createFunctionImplementation(
-  { 
-    name: 'is_admin', 
-    returnType: 'boolean', 
-    schema: z.object({ role: z.string() }) 
+  {
+    name: 'is_admin',
+    returnType: 'boolean',
+    schema: z.object({role: z.string()}),
   },
-  (args) => args.role === 'admin'
+  args => args.role === 'admin',
 );
 
 // 2. Compose the catalog
 export const myCatalog = new Catalog(
   'https://example.com/catalogs/v1.json',
   [MyProfile, RawInspector], // List of ReactComponentImplementation
-  [myCheckFunc]               // List of FunctionImplementation
+  [myCheckFunc], // List of FunctionImplementation
 );
 ```
 
@@ -247,7 +246,6 @@ Some components in this package (like `Text`) use **CSS Modules** for style enca
 
 You can also use CSS Modules for styling your custom components or extending the basic catalog:
 
-
 ```css
 /* MyComponent.module.css */
 .myComponent {
@@ -264,12 +262,8 @@ You can also use CSS Modules for styling your custom components or extending the
 ```tsx
 import styles from './MyComponent.module.css';
 
-export const MyComponent = createComponentImplementation(MyComponentApi, ({ props }) => {
-  return (
-    <div className={styles.myComponent}>
-      {/* ... */}
-    </div>
-  );
+export const MyComponent = createComponentImplementation(MyComponentApi, ({props}) => {
+  return <div className={styles.myComponent}>{/* ... */}</div>;
 });
 ```
 
@@ -284,13 +278,13 @@ A2UI v0.8 is maintained for backward compatibility. While it remains the default
 To use the v0.8 renderer, you use the `A2UIProvider` and `A2UIRenderer` components:
 
 ```tsx
-import { A2UIProvider, A2UIRenderer, injectStyles } from '@a2ui/react/v0_8';
+import {A2UIProvider, A2UIRenderer, injectStyles} from '@a2ui/react/v0_8';
 
 // Inject v0.8 styles
 injectStyles();
 
 function LegacyApp() {
-  const handleAction = (msg) => console.log('Action:', msg);
+  const handleAction = msg => console.log('Action:', msg);
 
   return (
     <A2UIProvider onAction={handleAction}>
@@ -303,21 +297,21 @@ function LegacyApp() {
 
 ### Key Differences (v0.8 vs v0.9)
 
-| Feature | v0.8 (Legacy) | v0.9 (Current) |
-| :--- | :--- | :--- |
-| **Protocol** | Uses `BeginRendering`, `SurfaceUpdate`. | Uses `createSurface`, `updateComponents`, `updateDataModel`. |
-| **Data Flow** | Unidirectional surface updates. | Bidirectional synchronization (`sendDataModel`). |
-| **Type Safety** | Props accessed via `node.properties`. | Strongly typed `props` inferred from Zod schemas. |
-| **Logic** | Limited client-side logic. | Extensible `Function` system (e.g., `formatString`, `required`). |
-| **Reactivity** | Hooks-based (`useA2UIComponent`). | Automatic via the **Generic Binder** middleware. |
-| **Binding** | Manual resolution in component body. | Declarative two-way binding with injected setters. |
+| Feature         | v0.8 (Legacy)                           | v0.9 (Current)                                                   |
+| :-------------- | :-------------------------------------- | :--------------------------------------------------------------- |
+| **Protocol**    | Uses `BeginRendering`, `SurfaceUpdate`. | Uses `createSurface`, `updateComponents`, `updateDataModel`.     |
+| **Data Flow**   | Unidirectional surface updates.         | Bidirectional synchronization (`sendDataModel`).                 |
+| **Type Safety** | Props accessed via `node.properties`.   | Strongly typed `props` inferred from Zod schemas.                |
+| **Logic**       | Limited client-side logic.              | Extensible `Function` system (e.g., `formatString`, `required`). |
+| **Reactivity**  | Hooks-based (`useA2UIComponent`).       | Automatic via the **Generic Binder** middleware.                 |
+| **Binding**     | Manual resolution in component body.    | Declarative two-way binding with injected setters.               |
 
 In v0.8, components are responsible for resolving their own dynamic values using hooks:
 
 ```tsx
 // v0.8 Manual Resolution
-function TextField({ node, surfaceId }) {
-  const { resolveString, setValue } = useA2UIComponent(node, surfaceId);
+function TextField({node, surfaceId}) {
+  const {resolveString, setValue} = useA2UIComponent(node, surfaceId);
   const label = resolveString(node.properties.label);
   // ...
 }
@@ -333,4 +327,3 @@ In v0.9, this is handled by the **Generic Binder** before the component even ren
 All operational data received from an external agent—including its messages and UI definitions—should be handled as untrusted input. Malicious agents could attempt to spoof legitimate interfaces to deceive users (phishing), inject malicious scripts via property values (XSS), or generate excessive layout complexity to degrade client performance (DoS). If your application supports optional embedded content (such as iframes or web views), additional care must be taken to prevent exposure to malicious external sites.
 
 **Developer Responsibility**: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), and secure credential handling—to protect their systems and users.
-
diff --git a/renderers/react/a2ui_explorer/README.md b/renderers/react/a2ui_explorer/README.md
index 2b04a3e15..489f7d479 100644
--- a/renderers/react/a2ui_explorer/README.md
+++ b/renderers/react/a2ui_explorer/README.md
@@ -5,6 +5,7 @@ This is the reference Gallery Application for the A2UI React renderer. It allows
 ## Prerequisites
 
 This application depends on the following local libraries in this repository:
+
 1. `@a2ui/web_core` (located in `renderers/web_core`)
 2. `@a2ui/react` (located in `renderers/react`)
 
@@ -21,7 +22,7 @@ npm install
 npm run build
 ```
 
-*Note: Ensure `@a2ui/web_core` is also built if you have made changes to the core logic.*
+_Note: Ensure `@a2ui/web_core` is also built if you have made changes to the core logic._
 
 ## Setup and Development
 
diff --git a/renderers/react/a2ui_explorer/eslint.config.js b/renderers/react/a2ui_explorer/eslint.config.js
index dcc74559c..c9d1e1bc1 100644
--- a/renderers/react/a2ui_explorer/eslint.config.js
+++ b/renderers/react/a2ui_explorer/eslint.config.js
@@ -26,15 +26,17 @@ export default tseslint.config(
   ...gts.map(config => ({
     ...config,
     // Override the project for a2ui_explorer since it has its own tsconfig
-    ...(config.languageOptions?.parserOptions?.project ? {
-      languageOptions: {
-        ...config.languageOptions,
-        parserOptions: {
-          ...config.languageOptions.parserOptions,
-          project: ['./tsconfig.app.json', './tsconfig.node.json']
+    ...(config.languageOptions?.parserOptions?.project
+      ? {
+          languageOptions: {
+            ...config.languageOptions,
+            parserOptions: {
+              ...config.languageOptions.parserOptions,
+              project: ['./tsconfig.app.json', './tsconfig.node.json'],
+            },
+          },
         }
-      }
-    } : {})
+      : {}),
   })),
 
   {
@@ -59,10 +61,7 @@ export default tseslint.config(
       ...reactHooksPlugin.configs.recommended.rules,
 
       // React Refresh rules
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
 
       // TypeScript rules
       '@typescript-eslint/no-unused-vars': [
@@ -82,7 +81,7 @@ export default tseslint.config(
       ],
 
       // General rules
-      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-console': ['warn', {allow: ['warn', 'error']}],
       'prefer-arrow-callback': 'off',
     },
   },
@@ -101,5 +100,5 @@ export default tseslint.config(
 
   {
     ignores: ['dist/**', 'node_modules/**', '**/*.d.ts'],
-  }
+  },
 );
diff --git a/renderers/react/a2ui_explorer/index.html b/renderers/react/a2ui_explorer/index.html
index 77fa01208..f1f2264ec 100644
--- a/renderers/react/a2ui_explorer/index.html
+++ b/renderers/react/a2ui_explorer/index.html
@@ -20,7 +20,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
     <title>react</title>
   </head>
   <body>
diff --git a/renderers/react/a2ui_explorer/src/App-smoke.test.tsx b/renderers/react/a2ui_explorer/src/App-smoke.test.tsx
index 64588e129..c22cd0a4c 100644
--- a/renderers/react/a2ui_explorer/src/App-smoke.test.tsx
+++ b/renderers/react/a2ui_explorer/src/App-smoke.test.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
 import App from './App';
 
 describe('App Smoke Test', () => {
diff --git a/renderers/react/a2ui_explorer/src/App.tsx b/renderers/react/a2ui_explorer/src/App.tsx
index b6f972746..a30816157 100644
--- a/renderers/react/a2ui_explorer/src/App.tsx
+++ b/renderers/react/a2ui_explorer/src/App.tsx
@@ -16,7 +16,12 @@
 
 import {useState, useEffect, useSyncExternalStore, useCallback} from 'react';
 import {MessageProcessor, SurfaceModel} from '@a2ui/web_core/v0_9';
-import {basicCatalog, A2uiSurface, MarkdownContext, type ReactComponentImplementation} from '@a2ui/react/v0_9';
+import {
+  basicCatalog,
+  A2uiSurface,
+  MarkdownContext,
+  type ReactComponentImplementation,
+} from '@a2ui/react/v0_9';
 import {exampleFiles, getMessages} from './examples';
 import {renderMarkdown} from '@a2ui/markdown-it';
 import styles from './App.module.css';
@@ -27,7 +32,7 @@ const DataModelViewer = ({surface}: {surface: SurfaceModel<any>}) => {
       const bound = surface.dataModel.subscribe('/', callback);
       return () => bound.unsubscribe();
     },
-    [surface]
+    [surface],
   );
 
   const getSnapshot = useCallback(() => {
@@ -46,23 +51,28 @@ const DataModelViewer = ({surface}: {surface: SurfaceModel<any>}) => {
 
 export default function App() {
   const [selectedExampleKey, setSelectedExampleKey] = useState(exampleFiles[0].key);
-  const selectedExample = exampleFiles.find((e) => e.key === selectedExampleKey)?.data as any;
+  const selectedExample = exampleFiles.find(e => e.key === selectedExampleKey)?.data as any;
 
   const [logs, setLogs] = useState<any[]>([]);
-  const [processor, setProcessor] = useState<MessageProcessor<ReactComponentImplementation> | null>(null);
+  const [processor, setProcessor] = useState<MessageProcessor<ReactComponentImplementation> | null>(
+    null,
+  );
   const [surfaces, setSurfaces] = useState<string[]>([]);
   const [currentMessageIndex, setCurrentMessageIndex] = useState(-1);
 
   // Initialize or reset processor
   const resetProcessor = useCallback(
     (advanceToEnd: boolean = false) => {
-      setProcessor((prevProcessor) => {
+      setProcessor(prevProcessor => {
         if (prevProcessor) {
           prevProcessor.model.dispose();
         }
-        const newProcessor = new MessageProcessor<ReactComponentImplementation>([basicCatalog], async (action: any) => {
-          setLogs((l) => [...l, {time: new Date().toISOString(), action}]);
-        });
+        const newProcessor = new MessageProcessor<ReactComponentImplementation>(
+          [basicCatalog],
+          async (action: any) => {
+            setLogs(l => [...l, {time: new Date().toISOString(), action}]);
+          },
+        );
 
         const msgs = getMessages(selectedExample);
         if (advanceToEnd && msgs) {
@@ -81,7 +91,7 @@ export default function App() {
         setCurrentMessageIndex(-1);
       }
     },
-    [selectedExample]
+    [selectedExample],
   );
 
   // Effect to handle example selection change
@@ -89,7 +99,7 @@ export default function App() {
     resetProcessor(true);
     // Cleanup on unmount or when changing examples
     return () => {
-      setProcessor((prev) => {
+      setProcessor(prev => {
         if (prev) prev.model.dispose();
         return null;
       });
@@ -144,11 +154,10 @@ export default function App() {
           <p className={styles.subtitle}>Preview and interact with React components</p>
         </div>
         <div className={styles.stepperControls}>
-          <span>Message {currentMessageIndex + 1} of {messages.length}</span>
-          <button 
-            className={styles.button} 
-            onClick={handleReset}
-          >
+          <span>
+            Message {currentMessageIndex + 1} of {messages.length}
+          </span>
+          <button className={styles.button} onClick={handleReset}>
             Reset
           </button>
         </div>
@@ -157,7 +166,7 @@ export default function App() {
       <main className={styles.main}>
         {/* Left Column: Sample List */}
         <div className={styles.navPane}>
-          {exampleFiles.map((ex) => {
+          {exampleFiles.map(ex => {
             const isActive = selectedExampleKey === ex.key;
             return (
               <button
@@ -177,9 +186,11 @@ export default function App() {
           <div className={styles.previewContent}>
             <div className={styles.surfaceContainer}>
               {surfaces.length === 0 && (
-                <p style={{color: '#888', textAlign: 'center'}}>No surfaces loaded. Advance the stepper to create one.</p>
+                <p style={{color: '#888', textAlign: 'center'}}>
+                  No surfaces loaded. Advance the stepper to create one.
+                </p>
               )}
-              {surfaces.map((surfaceId) => {
+              {surfaces.map(surfaceId => {
                 const surface = processor?.model.getSurface(surfaceId);
                 if (!surface) return null;
                 return (
@@ -221,7 +232,11 @@ export default function App() {
                     }}
                   >
                     <div
-                      style={{display: 'flex', justifyContent: 'space-between', marginBottom: '8px'}}
+                      style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        marginBottom: '8px',
+                      }}
                     >
                       <strong>Message {i + 1}</strong>
                       {!isActive && (
@@ -261,7 +276,7 @@ export default function App() {
               {surfaces.length === 0 ? (
                 <p style={{color: '#888', fontSize: '12px'}}>Empty Data Model</p>
               ) : null}
-              {surfaces.map((surfaceId) => {
+              {surfaces.map(surfaceId => {
                 const surface = processor?.model.getSurface(surfaceId);
                 if (!surface) return null;
                 return <DataModelViewer key={surfaceId} surface={surface} />;
@@ -279,7 +294,13 @@ export default function App() {
                 {logs.map((log, i) => (
                   <div key={i} className={styles.logEntry}>
                     <strong style={{display: 'block', color: '#38bdf8'}}>{log.time}</strong>
-                    <pre style={{margin: '4px 0 0 0', whiteSpace: 'pre-wrap', wordBreak: 'break-all'}}>
+                    <pre
+                      style={{
+                        margin: '4px 0 0 0',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-all',
+                      }}
+                    >
                       {JSON.stringify(log.action, null, 2)}
                     </pre>
                   </div>
diff --git a/renderers/react/a2ui_explorer/src/examples.ts b/renderers/react/a2ui_explorer/src/examples.ts
index 5d8b41eee..736fac236 100644
--- a/renderers/react/a2ui_explorer/src/examples.ts
+++ b/renderers/react/a2ui_explorer/src/examples.ts
@@ -19,7 +19,7 @@ import {type A2uiMessage} from '@a2ui/web_core/v0_9';
 // Dynamically import all examples from the specification folder
 const exampleModules = import.meta.glob(
   '../../../../specification/v0_9/json/catalogs/basic/examples/*.json',
-  {eager: true}
+  {eager: true},
 );
 
 export interface ExampleFile {
@@ -31,7 +31,9 @@ export interface ExampleFile {
 export function processExampleModules(modules: Record<string, unknown>): ExampleFile[] {
   return Object.entries(modules)
     .map(([path, data]) => {
-      const match = path.match(/catalogs\/(?<catalogFolderName>[^/]+)\/examples\/(?<filename>[^/]+)$/);
+      const match = path.match(
+        /catalogs\/(?<catalogFolderName>[^/]+)\/examples\/(?<filename>[^/]+)$/,
+      );
       // The glob pattern ensures this match will succeed, so non-null assertions are safe here.
       if (!match?.groups) {
         throw new Error(`Failed to parse path: ${path}`);
diff --git a/renderers/react/a2ui_explorer/src/index.css b/renderers/react/a2ui_explorer/src/index.css
index 4c40a3631..5ca86cc2d 100644
--- a/renderers/react/a2ui_explorer/src/index.css
+++ b/renderers/react/a2ui_explorer/src/index.css
@@ -15,7 +15,10 @@
  */
 
 :root {
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
diff --git a/renderers/react/a2ui_explorer/src/main.tsx b/renderers/react/a2ui_explorer/src/main.tsx
index e4ce6a0d6..c481b9b93 100644
--- a/renderers/react/a2ui_explorer/src/main.tsx
+++ b/renderers/react/a2ui_explorer/src/main.tsx
@@ -22,5 +22,5 @@ import App from './App.tsx';
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/renderers/react/a2ui_explorer/tsconfig.json b/renderers/react/a2ui_explorer/tsconfig.json
index 1ffef600d..2340846f6 100644
--- a/renderers/react/a2ui_explorer/tsconfig.json
+++ b/renderers/react/a2ui_explorer/tsconfig.json
@@ -1,7 +1,4 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{"path": "./tsconfig.app.json"}, {"path": "./tsconfig.node.json"}]
 }
diff --git a/renderers/react/a2ui_explorer/vite.config.ts b/renderers/react/a2ui_explorer/vite.config.ts
index a5d03e385..3330910fb 100644
--- a/renderers/react/a2ui_explorer/vite.config.ts
+++ b/renderers/react/a2ui_explorer/vite.config.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
 
-import { resolve } from 'path'
+import {resolve} from 'path';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -25,8 +25,8 @@ export default defineConfig({
   server: {
     fs: {
       // Allow serving files from the root of the repo (where specifications are)
-      allow: ['../../../../']
-    }
+      allow: ['../../../../'],
+    },
   },
   resolve: {
     alias: {
@@ -34,12 +34,12 @@ export default defineConfig({
       '@a2ui/react/v0_8': resolve(__dirname, '../src/v0_8/index.ts'),
       '@a2ui/react/styles': resolve(__dirname, '../src/styles/index.ts'),
       '@a2ui/react': resolve(__dirname, '../src/index.ts'),
-      '@a2ui/markdown-it': resolve(__dirname, '../../markdown/markdown-it/dist/src/markdown.js')
-    }
+      '@a2ui/markdown-it': resolve(__dirname, '../../markdown/markdown-it/dist/src/markdown.js'),
+    },
   },
   test: {
     environment: 'jsdom',
     globals: true,
-    setupFiles: ['./src/setupTests.ts']
-  }
-} as any)
+    setupFiles: ['./src/setupTests.ts'],
+  },
+} as any);
diff --git a/renderers/react/eslint.config.js b/renderers/react/eslint.config.js
index 88d2293a3..24a400f11 100644
--- a/renderers/react/eslint.config.js
+++ b/renderers/react/eslint.config.js
@@ -75,7 +75,7 @@ export default tseslint.config(
       ],
 
       // General rules
-      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-console': ['warn', {allow: ['warn', 'error']}],
       'prefer-arrow-callback': 'off',
     },
   },
@@ -95,5 +95,5 @@ export default tseslint.config(
   // Ignored paths
   {
     ignores: ['dist/**', 'node_modules/**', 'visual-parity/**', '**/*.d.ts'],
-  }
+  },
 );
diff --git a/renderers/react/scripts/postbuild.mjs b/renderers/react/scripts/postbuild.mjs
index b8836344f..b8e1df013 100644
--- a/renderers/react/scripts/postbuild.mjs
+++ b/renderers/react/scripts/postbuild.mjs
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { copyFileSync, mkdirSync, existsSync } from 'node:fs';
-import { join } from 'node:path';
+import {copyFileSync, mkdirSync, existsSync} from 'node:fs';
+import {join} from 'node:path';
 
 const root = process.cwd();
 const dist = join(root, 'dist');
 const src = join(root, 'src');
 
 if (!existsSync(dist)) {
-  mkdirSync(dist, { recursive: true });
+  mkdirSync(dist, {recursive: true});
 }
 
 // Function to copy a file to both .d.ts and .d.cts
@@ -32,7 +32,7 @@ function copyDts(source, destinationDir) {
   const targetDcts = join(destinationDir, 'index.d.cts');
 
   if (!existsSync(destinationDir)) {
-    mkdirSync(destinationDir, { recursive: true });
+    mkdirSync(destinationDir, {recursive: true});
   }
 
   copyFileSync(dts, targetDts);
@@ -43,7 +43,7 @@ function copyDts(source, destinationDir) {
 copyDts(join(src, 'styles', 'index.d.ts'), join(dist, 'styles'));
 
 // Create v0_8 styles directory in dist
-mkdirSync(join(dist, 'v0_8', 'styles'), { recursive: true });
+mkdirSync(join(dist, 'v0_8', 'styles'), {recursive: true});
 
 // Copy v0_8 styles declaration
 copyDts(join(src, 'v0_8', 'styles', 'index.d.ts'), join(dist, 'v0_8', 'styles'));
diff --git a/renderers/react/src/v0_8/components/content/Image.tsx b/renderers/react/src/v0_8/components/content/Image.tsx
index 77f78a37f..fa97ee3eb 100644
--- a/renderers/react/src/v0_8/components/content/Image.tsx
+++ b/renderers/react/src/v0_8/components/content/Image.tsx
@@ -35,7 +35,7 @@ export const Image = memo(function Image({node, surfaceId}: A2UIComponentProps<T
 
   const url = resolveString(props.url);
   const altText = resolveString(
-    (props as Record<string, unknown>).altText as Types.StringValue | undefined
+    (props as Record<string, unknown>).altText as Types.StringValue | undefined,
   );
   const usageHint = props.usageHint as UsageHint | undefined;
   const fit = (props.fit as FitMode) ?? 'fill';
@@ -43,7 +43,7 @@ export const Image = memo(function Image({node, surfaceId}: A2UIComponentProps<T
   // Get merged classes for section (matches Lit's Styles.merge)
   const classes = mergeClassMaps(
     theme.components.Image.all,
-    usageHint ? theme.components.Image[usageHint] : {}
+    usageHint ? theme.components.Image[usageHint] : {},
   );
 
   // Build style object with object-fit as CSS variable (matches Lit)
diff --git a/renderers/react/src/v0_8/components/content/Text.tsx b/renderers/react/src/v0_8/components/content/Text.tsx
index dc5da434c..276a08637 100644
--- a/renderers/react/src/v0_8/components/content/Text.tsx
+++ b/renderers/react/src/v0_8/components/content/Text.tsx
@@ -36,7 +36,7 @@ interface HintedStyles {
 function isHintedStyles(styles: unknown): styles is HintedStyles {
   if (typeof styles !== 'object' || !styles || Array.isArray(styles)) return false;
   const expected = ['h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body'];
-  return expected.some((v) => v in styles);
+  return expected.some(v => v in styles);
 }
 
 /**
@@ -154,7 +154,7 @@ export const Text = memo(function Text({node, surfaceId}: A2UIComponentProps<Typ
   // Get merged classes (matches Lit's Styles.merge)
   const classes = mergeClassMaps(
     theme.components.Text.all,
-    usageHint ? theme.components.Text[usageHint] : {}
+    usageHint ? theme.components.Text[usageHint] : {},
   );
 
   // Get additional styles based on usage hint
diff --git a/renderers/react/src/v0_8/components/interactive/CheckBox.tsx b/renderers/react/src/v0_8/components/interactive/CheckBox.tsx
index 26ec15f24..062a79727 100644
--- a/renderers/react/src/v0_8/components/interactive/CheckBox.tsx
+++ b/renderers/react/src/v0_8/components/interactive/CheckBox.tsx
@@ -31,7 +31,7 @@ export const CheckBox = memo(function CheckBox({
 }: A2UIComponentProps<Types.CheckboxNode>) {
   const {theme, resolveString, resolveBoolean, setValue, getValue} = useA2UIComponent(
     node,
-    surfaceId
+    surfaceId,
   );
   const props = node.properties;
   const id = useId();
@@ -69,7 +69,7 @@ export const CheckBox = memo(function CheckBox({
         setValue(valuePath, newValue);
       }
     },
-    [valuePath, setValue]
+    [valuePath, setValue],
   );
 
   // Structure mirrors Lit's CheckBox component:
diff --git a/renderers/react/src/v0_8/components/interactive/DateTimeInput.tsx b/renderers/react/src/v0_8/components/interactive/DateTimeInput.tsx
index 7b25aa2d7..b58de631f 100644
--- a/renderers/react/src/v0_8/components/interactive/DateTimeInput.tsx
+++ b/renderers/react/src/v0_8/components/interactive/DateTimeInput.tsx
@@ -60,7 +60,7 @@ export const DateTimeInput = memo(function DateTimeInput({
         setValue(valuePath, newValue);
       }
     },
-    [valuePath, setValue]
+    [valuePath, setValue],
   );
 
   // Determine input type based on enableDate and enableTime
diff --git a/renderers/react/src/v0_8/components/interactive/MultipleChoice.tsx b/renderers/react/src/v0_8/components/interactive/MultipleChoice.tsx
index 86a7006c9..5f8077099 100644
--- a/renderers/react/src/v0_8/components/interactive/MultipleChoice.tsx
+++ b/renderers/react/src/v0_8/components/interactive/MultipleChoice.tsx
@@ -49,7 +49,7 @@ export const MultipleChoice = memo(function MultipleChoice({
         setValue(selectionsPath, [e.target.value]);
       }
     },
-    [selectionsPath, setValue]
+    [selectionsPath, setValue],
   );
 
   // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
@@ -76,7 +76,7 @@ export const MultipleChoice = memo(function MultipleChoice({
           style={stylesToObject(theme.additionalStyles?.MultipleChoice)}
           onChange={handleChange}
         >
-          {options.map((option) => {
+          {options.map(option => {
             const label = resolveString(option.label);
             return (
               <option key={option.value} value={option.value}>
diff --git a/renderers/react/src/v0_8/components/interactive/Slider.tsx b/renderers/react/src/v0_8/components/interactive/Slider.tsx
index 03cc67817..1efe5afc2 100644
--- a/renderers/react/src/v0_8/components/interactive/Slider.tsx
+++ b/renderers/react/src/v0_8/components/interactive/Slider.tsx
@@ -31,7 +31,7 @@ export const Slider = memo(function Slider({
 }: A2UIComponentProps<Types.SliderNode>) {
   const {theme, resolveNumber, resolveString, setValue, getValue} = useA2UIComponent(
     node,
-    surfaceId
+    surfaceId,
   );
   const props = node.properties;
   const id = useId();
@@ -71,7 +71,7 @@ export const Slider = memo(function Slider({
         setValue(valuePath, newValue);
       }
     },
-    [valuePath, setValue]
+    [valuePath, setValue],
   );
 
   // Access label from props if it exists (Lit component supports it but type doesn't define it)
diff --git a/renderers/react/src/v0_8/components/interactive/TextField.tsx b/renderers/react/src/v0_8/components/interactive/TextField.tsx
index 8542c8597..de31d17cb 100644
--- a/renderers/react/src/v0_8/components/interactive/TextField.tsx
+++ b/renderers/react/src/v0_8/components/interactive/TextField.tsx
@@ -71,7 +71,7 @@ export const TextField = memo(function TextField({
         setValue(textPath, newValue);
       }
     },
-    [validationRegexp, textPath, setValue]
+    [validationRegexp, textPath, setValue],
   );
 
   const inputType = fieldType === 'number' ? 'number' : fieldType === 'date' ? 'date' : 'text';
diff --git a/renderers/react/src/v0_8/components/layout/Modal.tsx b/renderers/react/src/v0_8/components/layout/Modal.tsx
index b20b2e6ce..096ab192c 100644
--- a/renderers/react/src/v0_8/components/layout/Modal.tsx
+++ b/renderers/react/src/v0_8/components/layout/Modal.tsx
@@ -70,7 +70,7 @@ export const Modal = memo(function Modal({node, surfaceId}: A2UIComponentProps<T
         closeModal();
       }
     },
-    [closeModal]
+    [closeModal],
   );
 
   // Handle Escape key (for jsdom test compatibility - real browsers use native dialog behavior)
@@ -80,7 +80,7 @@ export const Modal = memo(function Modal({node, surfaceId}: A2UIComponentProps<T
         closeModal();
       }
     },
-    [closeModal]
+    [closeModal],
   );
 
   // Apply --weight CSS variable on root div (:host equivalent) for flex layouts
diff --git a/renderers/react/src/v0_8/components/layout/Tabs.tsx b/renderers/react/src/v0_8/components/layout/Tabs.tsx
index e4067ef20..bc2560ddf 100644
--- a/renderers/react/src/v0_8/components/layout/Tabs.tsx
+++ b/renderers/react/src/v0_8/components/layout/Tabs.tsx
@@ -52,7 +52,7 @@ export const Tabs = memo(function Tabs({node, surfaceId}: A2UIComponentProps<Typ
             const classes = isSelected
               ? mergeClassMaps(
                   theme.components.Tabs.controls.all,
-                  theme.components.Tabs.controls.selected
+                  theme.components.Tabs.controls.selected,
                 )
               : theme.components.Tabs.controls.all;
 
diff --git a/renderers/react/src/v0_8/core/A2UIProvider.tsx b/renderers/react/src/v0_8/core/A2UIProvider.tsx
index 5a0f2b397..06c33d247 100644
--- a/renderers/react/src/v0_8/core/A2UIProvider.tsx
+++ b/renderers/react/src/v0_8/core/A2UIProvider.tsx
@@ -106,17 +106,17 @@ export function A2UIProvider({onAction, theme, children}: A2UIProviderProps) {
     actionsRef.current = {
       processMessages: (messages: Types.ServerToClientMessage[]) => {
         processor.processMessages(messages);
-        setVersion((v) => v + 1);
+        setVersion(v => v + 1);
       },
 
       setData: (
         node: Types.AnyComponentNode | null,
         path: string,
         value: Types.DataValue,
-        surfaceId: string
+        surfaceId: string,
       ) => {
         processor.setData(node, path, value, surfaceId);
-        setVersion((v) => v + 1);
+        setVersion(v => v + 1);
       },
 
       dispatch: (message: Types.A2UIClientEventMessage) => {
@@ -127,7 +127,7 @@ export function A2UIProvider({onAction, theme, children}: A2UIProviderProps) {
 
       clearSurfaces: () => {
         processor.clearSurfaces();
-        setVersion((v) => v + 1);
+        setVersion(v => v + 1);
       },
 
       getSurface: (surfaceId: string) => {
@@ -211,6 +211,6 @@ export function useA2UIContext(): A2UIContextValue {
       version: state.version,
       onAction: null, // Use dispatch instead
     }),
-    [actions, state.version]
+    [actions, state.version],
   );
 }
diff --git a/renderers/react/src/v0_8/core/ComponentNode.tsx b/renderers/react/src/v0_8/core/ComponentNode.tsx
index acb2cf4af..c58796398 100644
--- a/renderers/react/src/v0_8/core/ComponentNode.tsx
+++ b/renderers/react/src/v0_8/core/ComponentNode.tsx
@@ -61,7 +61,7 @@ export const ComponentNode = memo(function ComponentNode({
 
   const Component = useMemo(
     () => (nodeType ? actualRegistry.get(nodeType) : null),
-    [actualRegistry, nodeType]
+    [actualRegistry, nodeType],
   );
 
   // Handle null/undefined/invalid nodes gracefully
diff --git a/renderers/react/src/v0_8/core/store.ts b/renderers/react/src/v0_8/core/store.ts
index b568b2c8b..e25f1f678 100644
--- a/renderers/react/src/v0_8/core/store.ts
+++ b/renderers/react/src/v0_8/core/store.ts
@@ -30,7 +30,7 @@ export interface A2UIActions {
     node: Types.AnyComponentNode | null,
     path: string,
     value: Types.DataValue,
-    surfaceId: string
+    surfaceId: string,
   ) => void;
 
   /** Dispatch a user action to the server */
@@ -49,7 +49,7 @@ export interface A2UIActions {
   getData: (
     node: Types.AnyComponentNode,
     path: string,
-    surfaceId: string
+    surfaceId: string,
   ) => Types.DataValue | null;
 
   /** Resolve a relative path to an absolute path */
diff --git a/renderers/react/src/v0_8/hooks/useA2UIComponent.ts b/renderers/react/src/v0_8/hooks/useA2UIComponent.ts
index 03fbb2bb4..f0839b24e 100644
--- a/renderers/react/src/v0_8/hooks/useA2UIComponent.ts
+++ b/renderers/react/src/v0_8/hooks/useA2UIComponent.ts
@@ -79,7 +79,7 @@ export interface UseA2UIComponentResult {
  */
 export function useA2UIComponent<T extends Types.AnyComponentNode>(
   node: T,
-  surfaceId: string
+  surfaceId: string,
 ): UseA2UIComponentResult {
   // Use stable actions - won't cause re-renders when version changes
   const actions = useA2UIActions();
@@ -113,7 +113,7 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
       }
       return null;
     },
-    [actions, node, surfaceId]
+    [actions, node, surfaceId],
   );
 
   /**
@@ -136,7 +136,7 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
       }
       return null;
     },
-    [actions, node, surfaceId]
+    [actions, node, surfaceId],
   );
 
   /**
@@ -159,7 +159,7 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
       }
       return null;
     },
-    [actions, node, surfaceId]
+    [actions, node, surfaceId],
   );
 
   /**
@@ -169,7 +169,7 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
     (path: string, value: Types.DataValue) => {
       actions.setData(node, path, value, surfaceId);
     },
-    [actions, node, surfaceId]
+    [actions, node, surfaceId],
   );
 
   /**
@@ -179,7 +179,7 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
     (path: string): Types.DataValue | null => {
       return actions.getData(node, path, surfaceId);
     },
-    [actions, node, surfaceId]
+    [actions, node, surfaceId],
   );
 
   /**
@@ -215,7 +215,7 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
         },
       });
     },
-    [actions, node, surfaceId]
+    [actions, node, surfaceId],
   );
 
   /**
@@ -226,7 +226,7 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
     (prefix: string) => {
       return `${prefix}${baseId}`;
     },
-    [baseId]
+    [baseId],
   );
 
   return useMemo(
@@ -249,6 +249,6 @@ export function useA2UIComponent<T extends Types.AnyComponentNode>(
       getValue,
       sendAction,
       getUniqueId,
-    ]
+    ],
   );
 }
diff --git a/renderers/react/src/v0_8/registry/ComponentRegistry.ts b/renderers/react/src/v0_8/registry/ComponentRegistry.ts
index d1223c2eb..c0badb1c0 100644
--- a/renderers/react/src/v0_8/registry/ComponentRegistry.ts
+++ b/renderers/react/src/v0_8/registry/ComponentRegistry.ts
@@ -71,7 +71,7 @@ export class ComponentRegistry {
    */
   register<T extends Types.AnyComponentNode>(
     type: string,
-    registration: ComponentRegistration<T>
+    registration: ComponentRegistration<T>,
   ): void {
     this.registry.set(type, registration as unknown as ComponentRegistration);
   }
diff --git a/renderers/react/src/v0_8/styles/README.md b/renderers/react/src/v0_8/styles/README.md
index 1b6551f5e..62bb0e977 100644
--- a/renderers/react/src/v0_8/styles/README.md
+++ b/renderers/react/src/v0_8/styles/README.md
@@ -14,7 +14,9 @@ element in the document head via `injectStyles()`.
 
 ```css
 @layer a2ui-reset {
-  :where(.a2ui-surface) :where(*) { all: revert; }
+  :where(.a2ui-surface) :where(*) {
+    all: revert;
+  }
 }
 ```
 
@@ -39,14 +41,14 @@ Transform:     :host { ... }  →  .a2ui-surface { ... }
 
 Utility classes shared between all renderers, generated from `web_core`:
 
-| Prefix          | Source file       | Examples                          |
-|-----------------|-------------------|-----------------------------------|
-| `layout-*`      | `styles/layout.ts`    | `layout-p-2`, `layout-m-0`, `layout-w-100` |
-| `typography-*`  | `styles/type.ts`      | `typography-f-sf`, `typography-sz-tl`       |
-| `color-*`       | `styles/colors.ts`    | `color-c-n100`, `color-bgc-p30`            |
-| `border-*`      | `styles/border.ts`    | `border-br-12`, `border-bw-1`              |
-| `behavior-*`    | `styles/behavior.ts`  | `behavior-ho-70`                           |
-| `opacity-*`     | `styles/opacity.ts`   | `opacity-50`                               |
+| Prefix         | Source file          | Examples                                   |
+| -------------- | -------------------- | ------------------------------------------ |
+| `layout-*`     | `styles/layout.ts`   | `layout-p-2`, `layout-m-0`, `layout-w-100` |
+| `typography-*` | `styles/type.ts`     | `typography-f-sf`, `typography-sz-tl`      |
+| `color-*`      | `styles/colors.ts`   | `color-c-n100`, `color-bgc-p30`            |
+| `border-*`     | `styles/border.ts`   | `border-br-12`, `border-bw-1`              |
+| `behavior-*`   | `styles/behavior.ts` | `behavior-ho-70`                           |
+| `opacity-*`    | `styles/opacity.ts`  | `opacity-50`                               |
 
 **Specificity:** Single class selector — `(0,1,0)`.
 
@@ -62,13 +64,21 @@ Covers host-level layout (`display`, `flex`) and element-level defaults.
 **Two specificity tiers:**
 
 - **Host styles** — `.a2ui-surface .a2ui-{component}` — specificity `(0,2,0)`
+
   ```css
-  .a2ui-surface .a2ui-card { display: block; flex: var(--weight); }
+  .a2ui-surface .a2ui-card {
+    display: block;
+    flex: var(--weight);
+  }
   ```
 
 - **Element styles** — `:where(.a2ui-surface .a2ui-{component}) element` — specificity `(0,0,1)`
+
   ```css
-  :where(.a2ui-surface .a2ui-image) img { display: block; width: 100%; }
+  :where(.a2ui-surface .a2ui-image) img {
+    display: block;
+    width: 100%;
+  }
   ```
 
   `:where()` zeroes the wrapper specificity so that theme utility classes
@@ -85,6 +95,7 @@ Button: { 'color-bgc-p30': true, 'color-c-n100': true, ... }
 ```
 
 Components merge these with `classMapToString()` and apply as `className`:
+
 ```tsx
 <button className={classMapToString(theme.components.Button)}>
 ```
@@ -164,7 +175,7 @@ is no conflict in practice.
 
 ## File Overview
 
-| File        | Purpose                                              |
-|-------------|------------------------------------------------------|
-| `reset.ts`  | `all: revert` in `@layer` — restores browser defaults |
-| `index.ts`  | Structural utilities, component CSS, injection logic |
+| File       | Purpose                                               |
+| ---------- | ----------------------------------------------------- |
+| `reset.ts` | `all: revert` in `@layer` — restores browser defaults |
+| `index.ts` | Structural utilities, component CSS, injection logic  |
diff --git a/renderers/react/src/v0_8/styles/index.ts b/renderers/react/src/v0_8/styles/index.ts
index f7f41ac44..537a1ff70 100644
--- a/renderers/react/src/v0_8/styles/index.ts
+++ b/renderers/react/src/v0_8/styles/index.ts
@@ -24,7 +24,7 @@ import {resetStyles} from './reset';
  */
 export const structuralStyles: string = Styles.structuralStyles.replace(
   /:host\s*\{/g,
-  '.a2ui-surface {'
+  '.a2ui-surface {',
 );
 
 /**
diff --git a/renderers/react/src/v0_8/theme/utils.ts b/renderers/react/src/v0_8/theme/utils.ts
index 9de8c5d4e..5ceab8ec5 100644
--- a/renderers/react/src/v0_8/theme/utils.ts
+++ b/renderers/react/src/v0_8/theme/utils.ts
@@ -43,7 +43,7 @@ export function classMapToString(classMap: Record<string, boolean> | undefined):
  * // Returns: { backgroundColor: 'red', fontSize: '16px', '--custom-var': 'blue' }
  */
 export function stylesToObject(
-  styles: Record<string, string> | undefined
+  styles: Record<string, string> | undefined,
 ): React.CSSProperties | undefined {
   if (!styles || Object.keys(styles).length === 0) return undefined;
 
diff --git a/renderers/react/src/v0_9/A2uiSurface.tsx b/renderers/react/src/v0_9/A2uiSurface.tsx
index 125593371..e3015671d 100644
--- a/renderers/react/src/v0_9/A2uiSurface.tsx
+++ b/renderers/react/src/v0_9/A2uiSurface.tsx
@@ -39,7 +39,7 @@ const ResolvedChild = memo(
       () => new ComponentContext(surface, id, basePath),
       // componentModel is used as a trigger for recreation even if not in the body
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [surface, id, basePath, componentModel]
+      [surface, id, basePath, componentModel],
     );
 
     const buildChild = useCallback(
@@ -54,11 +54,11 @@ const ResolvedChild = memo(
           />
         );
       },
-      [surface, context.dataContext.path]
+      [surface, context.dataContext.path],
     );
 
     return <ComponentToRender context={context} buildChild={buildChild} />;
-  }
+  },
 );
 ResolvedChild.displayName = 'ResolvedChild';
 
@@ -72,13 +72,13 @@ export const DeferredChild: React.FC<{
     let version = 0;
     return {
       subscribe: (cb: () => void) => {
-        const unsub1 = surface.componentsModel.onCreated.subscribe((comp) => {
+        const unsub1 = surface.componentsModel.onCreated.subscribe(comp => {
           if (comp.id === id) {
             version++;
             cb();
           }
         });
-        const unsub2 = surface.componentsModel.onDeleted.subscribe((delId) => {
+        const unsub2 = surface.componentsModel.onDeleted.subscribe(delId => {
           if (delId === id) {
             version++;
             cb();
diff --git a/renderers/react/src/v0_9/adapter.tsx b/renderers/react/src/v0_9/adapter.tsx
index f27fff9e5..bd38a081f 100644
--- a/renderers/react/src/v0_9/adapter.tsx
+++ b/renderers/react/src/v0_9/adapter.tsx
@@ -45,7 +45,7 @@ export function createComponentImplementation<Api extends ComponentApi>(
   api: Api,
   RenderComponent: React.FC<
     ReactA2uiComponentProps<ResolveA2uiProps<InferredComponentApiSchemaType<Api>>>
-  >
+  >,
 ): ReactComponentImplementation {
   type Props = ResolveA2uiProps<InferredComponentApiSchemaType<Api>>;
 
@@ -78,7 +78,7 @@ export function createComponentImplementation<Api extends ComponentApi>(
         const sub = binding.subscribe(callback);
         return () => sub.unsubscribe();
       },
-      [binding]
+      [binding],
     );
 
     const getSnapshot = useCallback(() => binding.snapshot, [binding]);
@@ -109,7 +109,7 @@ export function createBinderlessComponentImplementation(
   RenderComponent: React.FC<{
     context: ComponentContext;
     buildChild: (id: string, basePath?: string) => React.ReactNode;
-  }>
+  }>,
 ): ReactComponentImplementation {
   return {
     name: api.name,
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Button.module.css b/renderers/react/src/v0_9/catalog/basic/components/Button.module.css
index d53e8b6c9..e8444f80b 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/Button.module.css
+++ b/renderers/react/src/v0_9/catalog/basic/components/Button.module.css
@@ -22,7 +22,10 @@
   box-shadow: var(--a2ui-button-box-shadow, none);
   font-weight: var(--a2ui-button-font-weight, normal);
   color: var(--a2ui-color-on-secondary, #333);
-  border: var(--a2ui-button-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));
+  border: var(
+    --a2ui-button-border,
+    var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)
+  );
   border-radius: var(--a2ui-button-border-radius, var(--a2ui-border-radius, 8px));
   cursor: pointer;
   display: inline-flex;
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.module.css b/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.module.css
index 2cdcd3878..e3d803b2a 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.module.css
+++ b/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.module.css
@@ -21,7 +21,10 @@
 }
 
 .label {
-  font-size: var(--a2ui-choicepicker-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s)));
+  font-size: var(
+    --a2ui-choicepicker-label-font-size,
+    var(--a2ui-label-font-size, var(--a2ui-font-size-s))
+  );
   font-weight: var(--a2ui-choicepicker-label-font-weight, var(--a2ui-label-font-weight, bold));
   color: var(--a2ui-choicepicker-label-color, inherit);
 }
@@ -29,9 +32,15 @@
 .filterInput {
   background-color: var(--a2ui-color-input, #fff);
   color: var(--a2ui-color-on-input, #333);
-  border: var(--a2ui-textfield-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));
+  border: var(
+    --a2ui-textfield-border,
+    var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)
+  );
   border-radius: var(--a2ui-textfield-border-radius, var(--a2ui-spacing-m, 8px));
-  padding: var(--a2ui-choicepicker-filter-padding, var(--a2ui-spacing-xs, 4px) var(--a2ui-spacing-s, 8px));
+  padding: var(
+    --a2ui-choicepicker-filter-padding,
+    var(--a2ui-spacing-xs, 4px) var(--a2ui-spacing-s, 8px)
+  );
   font-family: inherit;
   transition: border-color 0.2s;
 }
@@ -57,7 +66,10 @@
 }
 
 .chip {
-  padding: var(--a2ui-choicepicker-chip-padding, var(--a2ui-spacing-s, 4px) var(--a2ui-spacing-m, 8px));
+  padding: var(
+    --a2ui-choicepicker-chip-padding,
+    var(--a2ui-spacing-s, 4px) var(--a2ui-spacing-m, 8px)
+  );
   border-radius: var(--a2ui-choicepicker-chip-border-radius, 999px);
   border: 1px solid var(--a2ui-color-border, #ccc);
   background-color: var(--a2ui-color-surface, #fff);
@@ -65,7 +77,9 @@
   cursor: pointer;
   font-size: var(--a2ui-font-size-xs, 0.75rem);
   font-family: inherit;
-  transition: background-color 0.2s, border-color 0.2s;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s;
 }
 
 .chip.selected {
diff --git a/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx b/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
index d7bf64f60..0b23bd64a 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/ChoicePicker.tsx
@@ -47,7 +47,7 @@ export const ChoicePicker = createComponentImplementation(ChoicePickerApi, ({pro
     (opt: _Option) =>
       !props.filterable ||
       filter === '' ||
-      String(opt.label).toLowerCase().includes(filter.toLowerCase())
+      String(opt.label).toLowerCase().includes(filter.toLowerCase()),
   );
 
   const listClasses = `${styles.options} ${props.displayStyle === 'chips' ? styles.chips : ''}`;
@@ -60,7 +60,7 @@ export const ChoicePicker = createComponentImplementation(ChoicePickerApi, ({pro
           type="text"
           placeholder="Filter options..."
           value={filter}
-          onChange={(e) => setFilter(e.target.value)}
+          onChange={e => setFilter(e.target.value)}
           className={styles.filterInput}
         />
       )}
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx b/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx
index 7f4776dfd..4dafef380 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/Icon.tsx
@@ -31,7 +31,7 @@ const ICON_NAME_OVERRIDES: Record<string, string> = {
  * e.g., "shoppingCart" -> "shopping_cart", "skipPrevious" -> "skip_previous"
  */
 function toMaterialSymbol(str: string): string {
-  return ICON_NAME_OVERRIDES[str] ?? str.replace(/[A-Z]/g, (letter) => '_' + letter.toLowerCase());
+  return ICON_NAME_OVERRIDES[str] ?? str.replace(/[A-Z]/g, letter => '_' + letter.toLowerCase());
 }
 
 export const Icon = createComponentImplementation(IconApi, ({props}) => {
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Modal.tsx b/renderers/react/src/v0_9/catalog/basic/components/Modal.tsx
index 413cf3ba3..97b269540 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/Modal.tsx
+++ b/renderers/react/src/v0_9/catalog/basic/components/Modal.tsx
@@ -56,7 +56,7 @@ export const Modal = createComponentImplementation(ModalApi, ({props, buildChild
               flexDirection: 'column',
               color: 'var(--a2ui-color-on-surface, inherit)',
             }}
-            onClick={(e) => e.stopPropagation()}
+            onClick={e => e.stopPropagation()}
           >
             <div style={{display: 'flex', justifyContent: 'flex-end'}}>
               <button
diff --git a/renderers/react/src/v0_9/catalog/basic/components/Text.module.css b/renderers/react/src/v0_9/catalog/basic/components/Text.module.css
index 3d487afeb..b66b09f60 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/Text.module.css
+++ b/renderers/react/src/v0_9/catalog/basic/components/Text.module.css
@@ -29,40 +29,51 @@
 }
 
 /* We use :global to target elements generated by the Markdown renderer */
-.a2uiText :global(p), 
-.a2uiText :global(h1), 
-.a2uiText :global(h2), 
-.a2uiText :global(h3), 
-.a2uiText :global(h4), 
-.a2uiText :global(h5), 
-.a2uiText :global(h6), 
-.a2uiText :global(ol), 
-.a2uiText :global(ul), 
-.a2uiText :global(li), 
-.a2uiText :global(blockquote), 
+.a2uiText :global(p),
+.a2uiText :global(h1),
+.a2uiText :global(h2),
+.a2uiText :global(h3),
+.a2uiText :global(h4),
+.a2uiText :global(h5),
+.a2uiText :global(h6),
+.a2uiText :global(ol),
+.a2uiText :global(ul),
+.a2uiText :global(li),
+.a2uiText :global(blockquote),
 .a2uiText :global(pre) {
   margin: var(--_a2ui-text-margin, 0);
 }
 
-.a2uiText :global(h1), 
-.a2uiText :global(h2), 
-.a2uiText :global(h3), 
-.a2uiText :global(h4), 
+.a2uiText :global(h1),
+.a2uiText :global(h2),
+.a2uiText :global(h3),
+.a2uiText :global(h4),
 .a2uiText :global(h5) {
   font-family: var(--a2ui-font-family-title, inherit);
   line-height: var(--a2ui-line-height-headings, 1.2);
 }
 
-.a2uiText :global(h1) { font-size: var(--a2ui-font-size-2xl); }
-.a2uiText :global(h2) { font-size: var(--a2ui-font-size-xl); }
-.a2uiText :global(h3) { font-size: var(--a2ui-font-size-l); }
-.a2uiText :global(p), .a2uiText :global(h4) { font-size: var(--a2ui-font-size-m); }
-.a2uiText :global(h5) { font-size: var(--a2ui-font-size-s); }
+.a2uiText :global(h1) {
+  font-size: var(--a2ui-font-size-2xl);
+}
+.a2uiText :global(h2) {
+  font-size: var(--a2ui-font-size-xl);
+}
+.a2uiText :global(h3) {
+  font-size: var(--a2ui-font-size-l);
+}
+.a2uiText :global(p),
+.a2uiText :global(h4) {
+  font-size: var(--a2ui-font-size-m);
+}
+.a2uiText :global(h5) {
+  font-size: var(--a2ui-font-size-s);
+}
 
-.a2uiText :global(p), 
-.a2uiText :global(ol), 
-.a2uiText :global(ul), 
-.a2uiText :global(li), 
+.a2uiText :global(p),
+.a2uiText :global(ol),
+.a2uiText :global(ul),
+.a2uiText :global(li),
 .a2uiText :global(blockquote) {
   line-height: var(--a2ui-line-height-body, 1.5);
 }
diff --git a/renderers/react/src/v0_9/catalog/basic/components/TextField.module.css b/renderers/react/src/v0_9/catalog/basic/components/TextField.module.css
index 60367bc94..344a3ff9c 100644
--- a/renderers/react/src/v0_9/catalog/basic/components/TextField.module.css
+++ b/renderers/react/src/v0_9/catalog/basic/components/TextField.module.css
@@ -21,14 +21,20 @@
 }
 
 .label {
-  font-size: var(--a2ui-textfield-label-font-size, var(--a2ui-label-font-size, var(--a2ui-font-size-s)));
+  font-size: var(
+    --a2ui-textfield-label-font-size,
+    var(--a2ui-label-font-size, var(--a2ui-font-size-s))
+  );
   font-weight: var(--a2ui-textfield-label-font-weight, var(--a2ui-label-font-weight, bold));
 }
 
 .input {
   background-color: var(--a2ui-color-input, #fff);
   color: var(--a2ui-color-on-input, #333);
-  border: var(--a2ui-textfield-border, var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc));
+  border: var(
+    --a2ui-textfield-border,
+    var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)
+  );
   border-radius: var(--a2ui-textfield-border-radius, var(--a2ui-spacing-m, 8px));
   padding: var(--a2ui-textfield-padding, var(--a2ui-spacing-m, 0.5rem));
   font-family: inherit;
diff --git a/renderers/react/src/v0_9/catalog/basic/hooks/useMarkdown.ts b/renderers/react/src/v0_9/catalog/basic/hooks/useMarkdown.ts
index b9a2c031b..bbd2da913 100644
--- a/renderers/react/src/v0_9/catalog/basic/hooks/useMarkdown.ts
+++ b/renderers/react/src/v0_9/catalog/basic/hooks/useMarkdown.ts
@@ -32,7 +32,7 @@ export function useMarkdown(text: string, options?: MarkdownRendererOptions) {
         console.warn(
           '[useMarkdown]',
           "can't render markdown because no markdown renderer is configured.\n",
-          'Use `@a2ui/markdown-it`, or your own markdown renderer.'
+          'Use `@a2ui/markdown-it`, or your own markdown renderer.',
         );
         warningLogged = true;
       }
@@ -44,12 +44,12 @@ export function useMarkdown(text: string, options?: MarkdownRendererOptions) {
     const parsedOptions = optionsKey ? JSON.parse(optionsKey) : undefined;
 
     renderer(text, parsedOptions)
-      .then((result) => {
+      .then(result => {
         if (active) {
           setHtml(result);
         }
       })
-      .catch((err) => {
+      .catch(err => {
         console.error('[useMarkdown] Render failed:', err);
       });
 
diff --git a/renderers/react/src/v0_9/catalog/basic/index.ts b/renderers/react/src/v0_9/catalog/basic/index.ts
index 1e36ba1ee..1b2090110 100644
--- a/renderers/react/src/v0_9/catalog/basic/index.ts
+++ b/renderers/react/src/v0_9/catalog/basic/index.ts
@@ -63,7 +63,7 @@ const basicComponents: ReactComponentImplementation[] = [
 export const basicCatalog = new Catalog<ReactComponentImplementation>(
   'https://a2ui.org/specification/v0_9/basic_catalog.json',
   basicComponents,
-  BASIC_FUNCTIONS
+  BASIC_FUNCTIONS,
 );
 
 export {
diff --git a/renderers/react/tests/a2ui_explorer/examples.test.tsx b/renderers/react/tests/a2ui_explorer/examples.test.tsx
index b08b2768a..d4d2b148a 100644
--- a/renderers/react/tests/a2ui_explorer/examples.test.tsx
+++ b/renderers/react/tests/a2ui_explorer/examples.test.tsx
@@ -14,62 +14,66 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { processExampleModules, getMessages } from '../../a2ui_explorer/src/examples';
+import {describe, it, expect} from 'vitest';
+import {processExampleModules, getMessages} from '../../a2ui_explorer/src/examples';
 
 describe('examples.ts (Sample Loading Logic)', () => {
   describe('processExampleModules', () => {
     it('should correctly parse and sort modules', () => {
       const mockModules = {
-        '../../../../specification/v0_9/json/catalogs/minimal/examples/1_simple.json': { name: 'Simple' },
-        '../../../../specification/v0_9/json/catalogs/basic/examples/01_card.json': { default: { name: 'Card' } },
-        '../../../../specification/v0_9/json/catalogs/minimal/examples/2_row.json': { name: 'Row' },
+        '../../../../specification/v0_9/json/catalogs/minimal/examples/1_simple.json': {
+          name: 'Simple',
+        },
+        '../../../../specification/v0_9/json/catalogs/basic/examples/01_card.json': {
+          default: {name: 'Card'},
+        },
+        '../../../../specification/v0_9/json/catalogs/minimal/examples/2_row.json': {name: 'Row'},
       };
 
       const result = processExampleModules(mockModules);
 
       expect(result).toHaveLength(3);
-      
+
       // Sorted by catalog (Basic first), then by key
       expect(result[0]!.catalog).toBe('Basic');
       expect(result[0]!.key).toBe('basic_01_card');
-      expect(result[0]!.data).toEqual({ name: 'Card' });
+      expect(result[0]!.data).toEqual({name: 'Card'});
 
       expect(result[1]!.catalog).toBe('Minimal');
       expect(result[1]!.key).toBe('minimal_1_simple');
-      expect(result[1]!.data).toEqual({ name: 'Simple' });
+      expect(result[1]!.data).toEqual({name: 'Simple'});
 
       expect(result[2]!.catalog).toBe('Minimal');
       expect(result[2]!.key).toBe('minimal_2_row');
-      expect(result[2]!.data).toEqual({ name: 'Row' });
+      expect(result[2]!.data).toEqual({name: 'Row'});
     });
 
     it('should handle modules with default export', () => {
       const mockModules = {
-        'catalogs/basic/examples/01_test.json': { default: { foo: 'bar' } },
+        'catalogs/basic/examples/01_test.json': {default: {foo: 'bar'}},
       };
       const result = processExampleModules(mockModules);
-      expect(result[0]!.data).toEqual({ foo: 'bar' });
+      expect(result[0]!.data).toEqual({foo: 'bar'});
     });
 
     it('should handle modules without default export', () => {
       const mockModules = {
-        'catalogs/basic/examples/01_test.json': { foo: 'bar' },
+        'catalogs/basic/examples/01_test.json': {foo: 'bar'},
       };
       const result = processExampleModules(mockModules);
-      expect(result[0]!.data).toEqual({ foo: 'bar' });
+      expect(result[0]!.data).toEqual({foo: 'bar'});
     });
   });
 
   describe('getMessages', () => {
     it('should return array if input is array', () => {
-      const msgs = [{ type: 'v0_9/a2ui/surface/create', surfaceId: 's1' }] as any;
+      const msgs = [{type: 'v0_9/a2ui/surface/create', surfaceId: 's1'}] as any;
       expect(getMessages(msgs)).toBe(msgs);
     });
 
     it('should return messages property if input has it', () => {
-      const msgs = [{ type: 'v0_9/a2ui/surface/create', surfaceId: 's1' }] as any;
-      expect(getMessages({ messages: msgs } as any)).toBe(msgs);
+      const msgs = [{type: 'v0_9/a2ui/surface/create', surfaceId: 's1'}] as any;
+      expect(getMessages({messages: msgs} as any)).toBe(msgs);
     });
 
     it('should return undefined for empty or invalid input', () => {
diff --git a/renderers/react/tests/setup.ts b/renderers/react/tests/setup.ts
index 9098c3aba..fe73eabfc 100644
--- a/renderers/react/tests/setup.ts
+++ b/renderers/react/tests/setup.ts
@@ -15,8 +15,8 @@
  */
 
 import '@testing-library/jest-dom/vitest';
-import { beforeAll } from 'vitest';
-import { initializeDefaultCatalog } from '../src';
+import {beforeAll} from 'vitest';
+import {initializeDefaultCatalog} from '../src';
 
 // Initialize the default catalog before all tests
 beforeAll(() => {
diff --git a/renderers/react/tests/utils.tsx b/renderers/react/tests/utils.tsx
index 292e31c37..6bd80e28f 100644
--- a/renderers/react/tests/utils.tsx
+++ b/renderers/react/tests/utils.tsx
@@ -15,11 +15,11 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
-import { vi } from 'vitest';
-import { SurfaceModel, ComponentModel, Catalog, ComponentContext } from '@a2ui/web_core/v0_9';
-import { BASIC_FUNCTIONS } from '@a2ui/web_core/v0_9/basic_catalog';
-import type { ReactComponentImplementation } from '../src/v0_9/adapter';
+import {render} from '@testing-library/react';
+import {vi} from 'vitest';
+import {SurfaceModel, ComponentModel, Catalog, ComponentContext} from '@a2ui/web_core/v0_9';
+import {BASIC_FUNCTIONS} from '@a2ui/web_core/v0_9/basic_catalog';
+import type {ReactComponentImplementation} from '../src/v0_9/adapter';
 
 export interface RenderA2uiOptions {
   initialData?: Record<string, any>;
@@ -39,20 +39,20 @@ export function renderA2uiComponent(
   impl: ReactComponentImplementation,
   componentId: string,
   initialProperties: Record<string, any>,
-  options: RenderA2uiOptions = {}
+  options: RenderA2uiOptions = {},
 ) {
-  const { 
-    initialData = {}, 
-    additionalImpls = [], 
+  const {
+    initialData = {},
+    additionalImpls = [],
     additionalComponents = [],
-    functions = BASIC_FUNCTIONS
+    functions = BASIC_FUNCTIONS,
   } = options;
 
   // Combine all implementations into the catalog
   const allImpls = [impl, ...additionalImpls];
   const catalog = new Catalog('test-catalog', allImpls, functions);
   const surface = new SurfaceModel<ReactComponentImplementation>('test-surface', catalog);
-  
+
   // Setup data model
   surface.dataModel.set('/', initialData);
 
@@ -72,14 +72,14 @@ export function renderA2uiComponent(
   // 2. Otherwise, render a placeholder div that tests can query.
   const buildChild = vi.fn((id: string, basePath?: string) => {
     const compModel = surface.componentsModel.get(id);
-    
+
     if (!compModel) {
       return <div key={`${id}-${basePath}`} data-testid={`child-${id}`} data-basepath={basePath} />;
     }
 
     const compImpl = surface.catalog.components.get(compModel.type);
     if (!compImpl) {
-       return <div key={`${id}-${basePath}`} data-testid={`error-unknown-type-${compModel.type}`} />;
+      return <div key={`${id}-${basePath}`} data-testid={`error-unknown-type-${compModel.type}`} />;
     }
 
     const ctx = new ComponentContext(surface, id, basePath || '/');
@@ -90,14 +90,12 @@ export function renderA2uiComponent(
 
   const ComponentToRender = impl.render;
 
-  const view = render(
-    <ComponentToRender context={mainContext} buildChild={buildChild} />
-  );
+  const view = render(<ComponentToRender context={mainContext} buildChild={buildChild} />);
 
-  return { 
-    view, 
-    surface, 
-    buildChild, 
+  return {
+    view,
+    surface,
+    buildChild,
     mainModel,
     context: mainContext,
     // Helper to trigger data model updates and wait for re-render
@@ -105,6 +103,6 @@ export function renderA2uiComponent(
       surface.dataModel.set(path, value);
       // Wait for React to process the useSyncExternalStore update
       await new Promise(resolve => setTimeout(resolve, 0));
-    }
+    },
   };
 }
diff --git a/renderers/react/tests/v0_8/integration/ThemeContext.test.tsx b/renderers/react/tests/v0_8/integration/ThemeContext.test.tsx
index c24b296b5..498831bb6 100644
--- a/renderers/react/tests/v0_8/integration/ThemeContext.test.tsx
+++ b/renderers/react/tests/v0_8/integration/ThemeContext.test.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering } from '../utils';
+import {TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering} from '../utils';
 import type * as Types from '@a2ui/web_core/types/types';
-import { litTheme } from '../../../src/v0_8/theme/litTheme';
+import {litTheme} from '../../../src/v0_8/theme/litTheme';
 
 /**
  * Theme Context tests - verify components respect the theme from context.
@@ -37,11 +37,11 @@ function createMockTheme(): Types.Theme {
   return {
     components: {
       // Content
-      AudioPlayer: { 'test-audioplayer': true },
-      Divider: { 'test-divider': true },
-      Icon: { 'test-icon': true },
+      AudioPlayer: {'test-audioplayer': true},
+      Divider: {'test-divider': true},
+      Icon: {'test-icon': true},
       Image: {
-        all: { 'test-image-all': true },
+        all: {'test-image-all': true},
         avatar: {},
         header: {},
         icon: {},
@@ -50,56 +50,56 @@ function createMockTheme(): Types.Theme {
         smallFeature: {},
       },
       Text: {
-        all: { 'test-text-all': true },
-        h1: { 'test-text-h1': true },
-        h2: { 'test-text-h2': true },
+        all: {'test-text-all': true},
+        h1: {'test-text-h1': true},
+        h2: {'test-text-h2': true},
         h3: {},
         h4: {},
         h5: {},
         body: {},
         caption: {},
       },
-      Video: { 'test-video': true },
+      Video: {'test-video': true},
 
       // Layout
-      Card: { 'test-card': true },
-      Column: { 'test-column': true },
-      List: { 'test-list': true },
+      Card: {'test-card': true},
+      Column: {'test-column': true},
+      List: {'test-list': true},
       Modal: {
         backdrop: {},
-        element: { 'test-modal-element': true },
+        element: {'test-modal-element': true},
       },
-      Row: { 'test-row': true },
+      Row: {'test-row': true},
       Tabs: {
-        container: { 'test-tabs-container': true },
-        controls: { all: { 'test-tabs-control': true }, selected: { 'test-tabs-selected': true } },
-        element: { 'test-tabs-element': true },
+        container: {'test-tabs-container': true},
+        controls: {all: {'test-tabs-control': true}, selected: {'test-tabs-selected': true}},
+        element: {'test-tabs-element': true},
       },
 
       // Interactive
-      Button: { 'test-button': true },
+      Button: {'test-button': true},
       CheckBox: {
-        container: { 'test-checkbox-container': true },
+        container: {'test-checkbox-container': true},
         element: {},
         label: {},
       },
       DateTimeInput: {
-        container: { 'test-datetime-container': true },
+        container: {'test-datetime-container': true},
         label: {},
         element: {},
       },
       MultipleChoice: {
-        container: { 'test-multiplechoice-container': true },
+        container: {'test-multiplechoice-container': true},
         label: {},
         element: {},
       },
       Slider: {
-        container: { 'test-slider-container': true },
+        container: {'test-slider-container': true},
         label: {},
         element: {},
       },
       TextField: {
-        container: { 'test-textfield-container': true },
+        container: {'test-textfield-container': true},
         label: {},
         element: {},
       },
@@ -143,16 +143,19 @@ describe('ThemeContext', () => {
     it('should apply litTheme classes by default', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Click' } , usageHint: 'body' } } },
-          { id: 'btn-1', component: { Button: { child: 'text-1', action: { name: 'test' } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Click'}, usageHint: 'body'}},
+          },
+          {id: 'btn-1', component: {Button: {child: 'text-1', action: {name: 'test'}}}},
         ]),
         createBeginRendering('btn-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const button = container.querySelector('.a2ui-button button');
@@ -163,7 +166,7 @@ describe('ThemeContext', () => {
       expect(litButtonClasses.length).toBeGreaterThan(0);
 
       // Verify at least one litTheme class is present
-      const hasLitClass = litButtonClasses.some((cls) => button?.classList.contains(cls));
+      const hasLitClass = litButtonClasses.some(cls => button?.classList.contains(cls));
       expect(hasLitClass).toBe(true);
 
       // Should NOT have mock theme classes
@@ -174,16 +177,19 @@ describe('ThemeContext', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Click' } , usageHint: 'body' } } },
-          { id: 'btn-1', component: { Button: { child: 'text-1', action: { name: 'test' } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Click'}, usageHint: 'body'}},
+          },
+          {id: 'btn-1', component: {Button: {child: 'text-1', action: {name: 'test'}}}},
         ]),
         createBeginRendering('btn-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const button = container.querySelector('.a2ui-button button');
@@ -194,7 +200,7 @@ describe('ThemeContext', () => {
 
       // Should NOT have litTheme classes
       const litButtonClasses = Object.keys(litTheme.components.Button);
-      const hasLitClass = litButtonClasses.some((cls) => button?.classList.contains(cls));
+      const hasLitClass = litButtonClasses.some(cls => button?.classList.contains(cls));
       expect(hasLitClass).toBe(false);
     });
 
@@ -202,16 +208,19 @@ describe('ThemeContext', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-          { id: 'card-1', component: { Card: { child: 'text-1' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+          },
+          {id: 'card-1', component: {Card: {child: 'text-1'}}},
         ]),
         createBeginRendering('card-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-card > section');
@@ -223,15 +232,18 @@ describe('ThemeContext', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Hello' } , usageHint: 'body' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Hello'}, usageHint: 'body'}},
+          },
         ]),
         createBeginRendering('text-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-text > section');
@@ -243,16 +255,19 @@ describe('ThemeContext', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-column > section');
@@ -264,16 +279,19 @@ describe('ThemeContext', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-row > section');
@@ -289,8 +307,8 @@ describe('ThemeContext', () => {
             id: 'tf-1',
             component: {
               TextField: {
-                value: { path: 'test.value' },
-                label: { literalString: 'Name' },
+                value: {path: 'test.value'},
+                label: {literalString: 'Name'},
               },
             },
           },
@@ -298,10 +316,10 @@ describe('ThemeContext', () => {
         createBeginRendering('tf-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-textfield > section');
@@ -317,8 +335,8 @@ describe('ThemeContext', () => {
             id: 'cb-1',
             component: {
               CheckBox: {
-                value: { path: 'test.checked' },
-                label: { literalString: 'Accept' },
+                value: {path: 'test.checked'},
+                label: {literalString: 'Accept'},
               },
             },
           },
@@ -326,10 +344,10 @@ describe('ThemeContext', () => {
         createBeginRendering('cb-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-checkbox > section');
@@ -344,15 +362,21 @@ describe('ThemeContext', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'tab-content-1', component: { Text: { text: { literalString: 'Tab 1 Content' } , usageHint: 'body' } } },
-          { id: 'tab-content-2', component: { Text: { text: { literalString: 'Tab 2 Content' } , usageHint: 'body' } } },
+          {
+            id: 'tab-content-1',
+            component: {Text: {text: {literalString: 'Tab 1 Content'}, usageHint: 'body'}},
+          },
+          {
+            id: 'tab-content-2',
+            component: {Text: {text: {literalString: 'Tab 2 Content'}, usageHint: 'body'}},
+          },
           {
             id: 'tabs-1',
             component: {
               Tabs: {
                 tabItems: [
-                  { title: { literalString: 'Tab 1' }, child: 'tab-content-1' },
-                  { title: { literalString: 'Tab 2' }, child: 'tab-content-2' },
+                  {title: {literalString: 'Tab 1'}, child: 'tab-content-1'},
+                  {title: {literalString: 'Tab 2'}, child: 'tab-content-2'},
                 ],
               },
             },
@@ -361,10 +385,10 @@ describe('ThemeContext', () => {
         createBeginRendering('tabs-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-tabs > section');
@@ -375,16 +399,14 @@ describe('ThemeContext', () => {
     it('should apply custom theme to Divider component', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
-        createSurfaceUpdate([
-          { id: 'div-1', component: { Divider: {} } },
-        ]),
+        createSurfaceUpdate([{id: 'div-1', component: {Divider: {}}}]),
         createBeginRendering('div-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const hr = container.querySelector('.a2ui-divider hr');
@@ -395,16 +417,14 @@ describe('ThemeContext', () => {
     it('should apply custom theme to Icon component', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
-        createSurfaceUpdate([
-          { id: 'icon-1', component: { Icon: { name: { literalString: 'home' } } } },
-        ]),
+        createSurfaceUpdate([{id: 'icon-1', component: {Icon: {name: {literalString: 'home'}}}}]),
         createBeginRendering('icon-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-icon > section');
@@ -420,9 +440,9 @@ describe('ThemeContext', () => {
             id: 'slider-1',
             component: {
               Slider: {
-                value: { path: 'test.slider' },
-                min: { literalNumber: 0 },
-                max: { literalNumber: 100 },
+                value: {path: 'test.slider'},
+                min: {literalNumber: 0},
+                max: {literalNumber: 100},
               },
             },
           },
@@ -430,10 +450,10 @@ describe('ThemeContext', () => {
         createBeginRendering('slider-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-slider > section');
@@ -449,10 +469,10 @@ describe('ThemeContext', () => {
             id: 'mc-1',
             component: {
               MultipleChoice: {
-                selections: { literalArray: [] },
+                selections: {literalArray: []},
                 options: [
-                  { label: { literalString: 'Option A' }, value: 'a' },
-                  { label: { literalString: 'Option B' }, value: 'b' },
+                  {label: {literalString: 'Option A'}, value: 'a'},
+                  {label: {literalString: 'Option B'}, value: 'b'},
                 ],
               },
             },
@@ -461,10 +481,10 @@ describe('ThemeContext', () => {
         createBeginRendering('mc-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-multiplechoice > section');
@@ -478,17 +498,20 @@ describe('ThemeContext', () => {
       const mockTheme = createMockTheme();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Click' } , usageHint: 'body' } } },
-          { id: 'btn-1', component: { Button: { child: 'text-1', action: { name: 'test' } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Click'}, usageHint: 'body'}},
+          },
+          {id: 'btn-1', component: {Button: {child: 'text-1', action: {name: 'test'}}}},
         ]),
         createBeginRendering('btn-1'),
       ];
 
       // Render with mock theme
-      const { container: mockContainer, unmount: unmountMock } = render(
+      const {container: mockContainer, unmount: unmountMock} = render(
         <TestWrapper theme={mockTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const mockButton = mockContainer.querySelector('.a2ui-button button');
@@ -497,10 +520,10 @@ describe('ThemeContext', () => {
       unmountMock();
 
       // Render with default theme
-      const { container: defaultContainer } = render(
+      const {container: defaultContainer} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const defaultButton = defaultContainer.querySelector('.a2ui-button button');
@@ -508,7 +531,7 @@ describe('ThemeContext', () => {
 
       // Should have litTheme classes
       const litButtonClasses = Object.keys(litTheme.components.Button);
-      const hasLitClass = litButtonClasses.some((cls) => defaultButton?.classList.contains(cls));
+      const hasLitClass = litButtonClasses.some(cls => defaultButton?.classList.contains(cls));
       expect(hasLitClass).toBe(true);
     });
   });
diff --git a/renderers/react/tests/v0_8/integration/actions.test.tsx b/renderers/react/tests/v0_8/integration/actions.test.tsx
index 8087ccad9..6d584e867 100644
--- a/renderers/react/tests/v0_8/integration/actions.test.tsx
+++ b/renderers/react/tests/v0_8/integration/actions.test.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
 import React from 'react';
 import type * as Types from '@a2ui/web_core/types/types';
 import {
@@ -37,8 +37,11 @@ describe('Action Dispatch', () => {
     const mockOnAction = vi.fn();
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'btn-text', component: { Text: { text: { literalString: 'Submit' } , usageHint: 'body' } } },
-        { id: 'btn-1', component: { Button: { child: 'btn-text', action: { name: 'submit' } } } },
+        {
+          id: 'btn-text',
+          component: {Text: {text: {literalString: 'Submit'}, usageHint: 'body'}},
+        },
+        {id: 'btn-1', component: {Button: {child: 'btn-text', action: {name: 'submit'}}}},
       ]),
       createBeginRendering('btn-1'),
     ];
@@ -46,7 +49,7 @@ describe('Action Dispatch', () => {
     render(
       <TestWrapper onAction={mockOnAction}>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     fireEvent.click(screen.getByRole('button'));
@@ -61,7 +64,10 @@ describe('Action Dispatch', () => {
     const mockOnAction = vi.fn();
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'btn-text', component: { Text: { text: { literalString: 'Delete' } , usageHint: 'body' } } },
+        {
+          id: 'btn-text',
+          component: {Text: {text: {literalString: 'Delete'}, usageHint: 'body'}},
+        },
         {
           id: 'btn-1',
           component: {
@@ -70,8 +76,8 @@ describe('Action Dispatch', () => {
               action: {
                 name: 'delete',
                 context: [
-                  { key: 'itemId', value: { literalString: 'item-123' } },
-                  { key: 'confirmed', value: { literalBoolean: true } },
+                  {key: 'itemId', value: {literalString: 'item-123'}},
+                  {key: 'confirmed', value: {literalBoolean: true}},
                 ],
               },
             },
@@ -84,7 +90,7 @@ describe('Action Dispatch', () => {
     render(
       <TestWrapper onAction={mockOnAction}>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     fireEvent.click(screen.getByRole('button'));
@@ -99,8 +105,11 @@ describe('Action Dispatch', () => {
   it('should not call onAction if not provided', () => {
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'btn-text', component: { Text: { text: { literalString: 'Click' } , usageHint: 'body' } } },
-        { id: 'btn-1', component: { Button: { child: 'btn-text', action: { name: 'test' } } } },
+        {
+          id: 'btn-text',
+          component: {Text: {text: {literalString: 'Click'}, usageHint: 'body'}},
+        },
+        {id: 'btn-1', component: {Button: {child: 'btn-text', action: {name: 'test'}}}},
       ]),
       createBeginRendering('btn-1'),
     ];
@@ -108,7 +117,7 @@ describe('Action Dispatch', () => {
     render(
       <TestWrapper>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     expect(() => {
@@ -120,11 +129,17 @@ describe('Action Dispatch', () => {
     const mockOnAction = vi.fn();
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'btn1-text', component: { Text: { text: { literalString: 'Action 1' } , usageHint: 'body' } } },
-        { id: 'btn1', component: { Button: { child: 'btn1-text', action: { name: 'action-1' } } } },
-        { id: 'btn2-text', component: { Text: { text: { literalString: 'Action 2' } , usageHint: 'body' } } },
-        { id: 'btn2', component: { Button: { child: 'btn2-text', action: { name: 'action-2' } } } },
-        { id: 'col', component: { Column: { children: { explicitList: ['btn1', 'btn2'] } } } },
+        {
+          id: 'btn1-text',
+          component: {Text: {text: {literalString: 'Action 1'}, usageHint: 'body'}},
+        },
+        {id: 'btn1', component: {Button: {child: 'btn1-text', action: {name: 'action-1'}}}},
+        {
+          id: 'btn2-text',
+          component: {Text: {text: {literalString: 'Action 2'}, usageHint: 'body'}},
+        },
+        {id: 'btn2', component: {Button: {child: 'btn2-text', action: {name: 'action-2'}}}},
+        {id: 'col', component: {Column: {children: {explicitList: ['btn1', 'btn2']}}}},
       ]),
       createBeginRendering('col'),
     ];
@@ -132,16 +147,16 @@ describe('Action Dispatch', () => {
     render(
       <TestWrapper onAction={mockOnAction}>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Action 1' }));
+    fireEvent.click(screen.getByRole('button', {name: 'Action 1'}));
     expect(mockOnAction).toHaveBeenCalledTimes(1);
     const event1 = getMockCallArg<Types.A2UIClientEventMessage>(mockOnAction, 0);
     expect(event1.userAction).toBeDefined();
     expect(event1.userAction?.name).toBe('action-1');
 
-    fireEvent.click(screen.getByRole('button', { name: 'Action 2' }));
+    fireEvent.click(screen.getByRole('button', {name: 'Action 2'}));
     expect(mockOnAction).toHaveBeenCalledTimes(2);
     const event2 = getMockCallArg<Types.A2UIClientEventMessage>(mockOnAction, 1);
     expect(event2.userAction).toBeDefined();
@@ -156,12 +171,15 @@ describe('Action Dispatch', () => {
           id: 'tf-1',
           component: {
             TextField: {
-              text: { path: 'form.username' },
-              label: { literalString: 'Username' },
+              text: {path: 'form.username'},
+              label: {literalString: 'Username'},
             },
           },
         },
-        { id: 'btn-text', component: { Text: { text: { literalString: 'Submit' } , usageHint: 'body' } } },
+        {
+          id: 'btn-text',
+          component: {Text: {text: {literalString: 'Submit'}, usageHint: 'body'}},
+        },
         {
           id: 'btn-1',
           component: {
@@ -169,37 +187,35 @@ describe('Action Dispatch', () => {
               child: 'btn-text',
               action: {
                 name: 'submit-form',
-                context: [
-                  { key: 'username', value: { path: 'form.username' } },
-                ],
+                context: [{key: 'username', value: {path: 'form.username'}}],
               },
             },
           },
         },
-        { id: 'col', component: { Column: { children: { explicitList: ['tf-1', 'btn-1'] } } } },
+        {id: 'col', component: {Column: {children: {explicitList: ['tf-1', 'btn-1']}}}},
       ]),
       createBeginRendering('col'),
     ];
 
-    const { container } = render(
+    const {container} = render(
       <TestWrapper onAction={mockOnAction}>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // User types in the TextField, updating the data model via path binding
     const input = container.querySelector('input') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'alice123' } });
+    fireEvent.change(input, {target: {value: 'alice123'}});
 
     // User clicks the Submit button
-    fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    fireEvent.click(screen.getByRole('button', {name: 'Submit'}));
 
     // Verify the action context contains the resolved value from the data model
     expect(mockOnAction).toHaveBeenCalledTimes(1);
     const event = getMockCallArg<Types.A2UIClientEventMessage>(mockOnAction, 0);
     expect(event.userAction).toBeDefined();
     expect(event.userAction?.name).toBe('submit-form');
-    expect(event.userAction?.context).toEqual({ username: 'alice123' });
+    expect(event.userAction?.context).toEqual({username: 'alice123'});
   });
 
   it('should resolve mixed literal and path context parameters', () => {
@@ -210,8 +226,8 @@ describe('Action Dispatch', () => {
           id: 'tf-name',
           component: {
             TextField: {
-              text: { path: 'form.name' },
-              label: { literalString: 'Name' },
+              text: {path: 'form.name'},
+              label: {literalString: 'Name'},
             },
           },
         },
@@ -219,12 +235,15 @@ describe('Action Dispatch', () => {
           id: 'cb-agree',
           component: {
             CheckBox: {
-              value: { path: 'form.agreed' },
-              label: { literalString: 'I agree' },
+              value: {path: 'form.agreed'},
+              label: {literalString: 'I agree'},
             },
           },
         },
-        { id: 'btn-text', component: { Text: { text: { literalString: 'Submit' } , usageHint: 'body' } } },
+        {
+          id: 'btn-text',
+          component: {Text: {text: {literalString: 'Submit'}, usageHint: 'body'}},
+        },
         {
           id: 'btn-1',
           component: {
@@ -233,35 +252,38 @@ describe('Action Dispatch', () => {
               action: {
                 name: 'submit-form',
                 context: [
-                  { key: 'formId', value: { literalString: 'registration-form' } },
-                  { key: 'version', value: { literalNumber: 2 } },
-                  { key: 'name', value: { path: 'form.name' } },
-                  { key: 'agreed', value: { path: 'form.agreed' } },
+                  {key: 'formId', value: {literalString: 'registration-form'}},
+                  {key: 'version', value: {literalNumber: 2}},
+                  {key: 'name', value: {path: 'form.name'}},
+                  {key: 'agreed', value: {path: 'form.agreed'}},
                 ],
               },
             },
           },
         },
-        { id: 'col', component: { Column: { children: { explicitList: ['tf-name', 'cb-agree', 'btn-1'] } } } },
+        {
+          id: 'col',
+          component: {Column: {children: {explicitList: ['tf-name', 'cb-agree', 'btn-1']}}},
+        },
       ]),
       createBeginRendering('col'),
     ];
 
-    const { container } = render(
+    const {container} = render(
       <TestWrapper onAction={mockOnAction}>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // User fills the form
     const input = container.querySelector('input[type="text"]') as HTMLInputElement;
-    fireEvent.change(input, { target: { value: 'John Doe' } });
+    fireEvent.change(input, {target: {value: 'John Doe'}});
 
     const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
     fireEvent.click(checkbox);
 
     // User clicks Submit
-    fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    fireEvent.click(screen.getByRole('button', {name: 'Submit'}));
 
     // Verify mixed context: literals + resolved paths
     expect(mockOnAction).toHaveBeenCalledTimes(1);
diff --git a/renderers/react/tests/v0_8/integration/components.test.tsx b/renderers/react/tests/v0_8/integration/components.test.tsx
index f6d2a2d46..d0b4ff9a2 100644
--- a/renderers/react/tests/v0_8/integration/components.test.tsx
+++ b/renderers/react/tests/v0_8/integration/components.test.tsx
@@ -14,17 +14,12 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import React, { useEffect } from 'react';
-import { A2UIProvider, A2UIRenderer, useA2UI } from '../../../src/v0_8';
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, waitFor} from '@testing-library/react';
+import React, {useEffect} from 'react';
+import {A2UIProvider, A2UIRenderer, useA2UI} from '../../../src/v0_8';
 import type * as Types from '@a2ui/web_core/types/types';
-import {
-  TestWrapper,
-  TestRenderer,
-  createSurfaceUpdate,
-  createBeginRendering,
-} from '../utils';
+import {TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering} from '../utils';
 
 /**
  * Component Integration Tests
@@ -35,7 +30,7 @@ import {
 describe('Component Updates', () => {
   it('should update already-rendered surface with surfaceUpdate alone (no new beginRendering)', async () => {
     function UpdateWithoutBeginRenderingRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
       const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
       useEffect(() => {
@@ -43,7 +38,12 @@ describe('Component Updates', () => {
           // Initial render: surfaceUpdate + beginRendering
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'Original text' } , usageHint: 'body' } } },
+              {
+                id: 'text-1',
+                component: {
+                  Text: {text: {literalString: 'Original text'}, usageHint: 'body'},
+                },
+              },
             ]),
             createBeginRendering('text-1'),
           ]);
@@ -52,7 +52,10 @@ describe('Component Updates', () => {
           // Update: only surfaceUpdate, NO beginRendering
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'Updated text' } , usageHint: 'body' } } },
+              {
+                id: 'text-1',
+                component: {Text: {text: {literalString: 'Updated text'}, usageHint: 'body'}},
+              },
             ]),
             // Note: no createBeginRendering here
           ]);
@@ -70,7 +73,7 @@ describe('Component Updates', () => {
     render(
       <A2UIProvider>
         <UpdateWithoutBeginRenderingRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     // Initial content should be visible
@@ -86,12 +89,15 @@ describe('Component Updates', () => {
 
   it('should update component props when new message received', () => {
     function UpdateRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
           createSurfaceUpdate([
-            { id: 'text-1', component: { Text: { text: { literalString: 'Before' } , usageHint: 'body' } } },
+            {
+              id: 'text-1',
+              component: {Text: {text: {literalString: 'Before'}, usageHint: 'body'}},
+            },
           ]),
           createBeginRendering('text-1'),
         ]);
@@ -99,7 +105,10 @@ describe('Component Updates', () => {
         setTimeout(() => {
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'After' } , usageHint: 'body' } } },
+              {
+                id: 'text-1',
+                component: {Text: {text: {literalString: 'After'}, usageHint: 'body'}},
+              },
             ]),
             createBeginRendering('text-1'),
           ]);
@@ -112,7 +121,7 @@ describe('Component Updates', () => {
     render(
       <A2UIProvider>
         <UpdateRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Before')).toBeInTheDocument();
@@ -124,12 +133,15 @@ describe('Component Updates', () => {
 
   it('should handle component type change', () => {
     function TypeChangeRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
           createSurfaceUpdate([
-            { id: 'comp-1', component: { Text: { text: { literalString: 'I am text' } , usageHint: 'body' } } },
+            {
+              id: 'comp-1',
+              component: {Text: {text: {literalString: 'I am text'}, usageHint: 'body'}},
+            },
           ]),
           createBeginRendering('comp-1'),
         ]);
@@ -137,8 +149,14 @@ describe('Component Updates', () => {
         setTimeout(() => {
           processMessages([
             createSurfaceUpdate([
-              { id: 'btn-text', component: { Text: { text: { literalString: 'Click me' } , usageHint: 'body' } } },
-              { id: 'comp-1', component: { Button: { child: 'btn-text', action: { name: 'test' } } } },
+              {
+                id: 'btn-text',
+                component: {Text: {text: {literalString: 'Click me'}, usageHint: 'body'}},
+              },
+              {
+                id: 'comp-1',
+                component: {Button: {child: 'btn-text', action: {name: 'test'}}},
+              },
             ]),
             createBeginRendering('comp-1'),
           ]);
@@ -151,24 +169,27 @@ describe('Component Updates', () => {
     render(
       <A2UIProvider>
         <TypeChangeRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('I am text')).toBeInTheDocument();
 
     return waitFor(() => {
-      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Click me'})).toBeInTheDocument();
     });
   });
 
   it('should add new components to existing surface', () => {
     function AddComponentRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
           createSurfaceUpdate([
-            { id: 'text-1', component: { Text: { text: { literalString: 'First' } , usageHint: 'body' } } },
+            {
+              id: 'text-1',
+              component: {Text: {text: {literalString: 'First'}, usageHint: 'body'}},
+            },
           ]),
           createBeginRendering('text-1'),
         ]);
@@ -176,9 +197,18 @@ describe('Component Updates', () => {
         setTimeout(() => {
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'First' } , usageHint: 'body' } } },
-              { id: 'text-2', component: { Text: { text: { literalString: 'Second' } , usageHint: 'body' } } },
-              { id: 'col-1', component: { Column: { children: { explicitList: ['text-1', 'text-2'] } } } },
+              {
+                id: 'text-1',
+                component: {Text: {text: {literalString: 'First'}, usageHint: 'body'}},
+              },
+              {
+                id: 'text-2',
+                component: {Text: {text: {literalString: 'Second'}, usageHint: 'body'}},
+              },
+              {
+                id: 'col-1',
+                component: {Column: {children: {explicitList: ['text-1', 'text-2']}}},
+              },
             ]),
             createBeginRendering('col-1'),
           ]);
@@ -191,7 +221,7 @@ describe('Component Updates', () => {
     render(
       <A2UIProvider>
         <AddComponentRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     return waitFor(() => {
@@ -202,7 +232,7 @@ describe('Component Updates', () => {
 
   it('should remove elements from a list via surfaceUpdate', async () => {
     function RemoveElementsRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
       const [stage, setStage] = React.useState<'initial' | 'removed'>('initial');
 
       useEffect(() => {
@@ -210,10 +240,22 @@ describe('Component Updates', () => {
           // Initial: list with 3 items
           processMessages([
             createSurfaceUpdate([
-              { id: 'item-1', component: { Text: { text: { literalString: 'Item 1' } , usageHint: 'body' } } },
-              { id: 'item-2', component: { Text: { text: { literalString: 'Item 2' } , usageHint: 'body' } } },
-              { id: 'item-3', component: { Text: { text: { literalString: 'Item 3' } , usageHint: 'body' } } },
-              { id: 'list-1', component: { List: { children: { explicitList: ['item-1', 'item-2', 'item-3'] } } } },
+              {
+                id: 'item-1',
+                component: {Text: {text: {literalString: 'Item 1'}, usageHint: 'body'}},
+              },
+              {
+                id: 'item-2',
+                component: {Text: {text: {literalString: 'Item 2'}, usageHint: 'body'}},
+              },
+              {
+                id: 'item-3',
+                component: {Text: {text: {literalString: 'Item 3'}, usageHint: 'body'}},
+              },
+              {
+                id: 'list-1',
+                component: {List: {children: {explicitList: ['item-1', 'item-2', 'item-3']}}},
+              },
             ]),
             createBeginRendering('list-1'),
           ]);
@@ -222,9 +264,18 @@ describe('Component Updates', () => {
           // Update: remove middle item (only surfaceUpdate, no beginRendering)
           processMessages([
             createSurfaceUpdate([
-              { id: 'item-1', component: { Text: { text: { literalString: 'Item 1' } , usageHint: 'body' } } },
-              { id: 'item-3', component: { Text: { text: { literalString: 'Item 3' } , usageHint: 'body' } } },
-              { id: 'list-1', component: { List: { children: { explicitList: ['item-1', 'item-3'] } } } },
+              {
+                id: 'item-1',
+                component: {Text: {text: {literalString: 'Item 1'}, usageHint: 'body'}},
+              },
+              {
+                id: 'item-3',
+                component: {Text: {text: {literalString: 'Item 3'}, usageHint: 'body'}},
+              },
+              {
+                id: 'list-1',
+                component: {List: {children: {explicitList: ['item-1', 'item-3']}}},
+              },
             ]),
           ]);
         }
@@ -241,7 +292,7 @@ describe('Component Updates', () => {
     render(
       <A2UIProvider>
         <RemoveElementsRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     // All 3 items should be visible initially
@@ -260,7 +311,7 @@ describe('Component Updates', () => {
 
   it('should reorder elements via surfaceUpdate', async () => {
     function ReorderElementsRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
       const [stage, setStage] = React.useState<'initial' | 'reordered'>('initial');
 
       useEffect(() => {
@@ -268,10 +319,24 @@ describe('Component Updates', () => {
           // Initial order: A, B, C
           processMessages([
             createSurfaceUpdate([
-              { id: 'item-a', component: { Text: { text: { literalString: 'A' } , usageHint: 'body' } } },
-              { id: 'item-b', component: { Text: { text: { literalString: 'B' } , usageHint: 'body' } } },
-              { id: 'item-c', component: { Text: { text: { literalString: 'C' } , usageHint: 'body' } } },
-              { id: 'col-1', component: { Column: { children: { explicitList: ['item-a', 'item-b', 'item-c'] } } } },
+              {
+                id: 'item-a',
+                component: {Text: {text: {literalString: 'A'}, usageHint: 'body'}},
+              },
+              {
+                id: 'item-b',
+                component: {Text: {text: {literalString: 'B'}, usageHint: 'body'}},
+              },
+              {
+                id: 'item-c',
+                component: {Text: {text: {literalString: 'C'}, usageHint: 'body'}},
+              },
+              {
+                id: 'col-1',
+                component: {
+                  Column: {children: {explicitList: ['item-a', 'item-b', 'item-c']}},
+                },
+              },
             ]),
             createBeginRendering('col-1'),
           ]);
@@ -280,10 +345,24 @@ describe('Component Updates', () => {
           // Reorder: C, A, B (only surfaceUpdate, no beginRendering)
           processMessages([
             createSurfaceUpdate([
-              { id: 'item-a', component: { Text: { text: { literalString: 'A' } , usageHint: 'body' } } },
-              { id: 'item-b', component: { Text: { text: { literalString: 'B' } , usageHint: 'body' } } },
-              { id: 'item-c', component: { Text: { text: { literalString: 'C' } , usageHint: 'body' } } },
-              { id: 'col-1', component: { Column: { children: { explicitList: ['item-c', 'item-a', 'item-b'] } } } },
+              {
+                id: 'item-a',
+                component: {Text: {text: {literalString: 'A'}, usageHint: 'body'}},
+              },
+              {
+                id: 'item-b',
+                component: {Text: {text: {literalString: 'B'}, usageHint: 'body'}},
+              },
+              {
+                id: 'item-c',
+                component: {Text: {text: {literalString: 'C'}, usageHint: 'body'}},
+              },
+              {
+                id: 'col-1',
+                component: {
+                  Column: {children: {explicitList: ['item-c', 'item-a', 'item-b']}},
+                },
+              },
             ]),
           ]);
         }
@@ -297,10 +376,10 @@ describe('Component Updates', () => {
       );
     }
 
-    const { container } = render(
+    const {container} = render(
       <A2UIProvider>
         <ReorderElementsRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     // Wait for reorder to complete
@@ -321,15 +400,20 @@ describe('Component Updates', () => {
     // This test verifies that a rejected message does not affect the existing surface.
     // To truly clear a surface, use deleteSurface message instead.
     function EmptySurfaceRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
       const [stage, setStage] = React.useState<'initial' | 'attempted'>('initial');
 
       useEffect(() => {
         if (stage === 'initial') {
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'Persistent content' }, usageHint: 'body' } } },
-              { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+              {
+                id: 'text-1',
+                component: {
+                  Text: {text: {literalString: 'Persistent content'}, usageHint: 'body'},
+                },
+              },
+              {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
             ]),
             createBeginRendering('col-1'),
           ]);
@@ -339,7 +423,9 @@ describe('Component Updates', () => {
           // but the existing surface should be unaffected.
           try {
             processMessages([
-              { surfaceUpdate: { surfaceId: '@default', components: [] } } as unknown as Types.ServerToClientMessage,
+              {
+                surfaceUpdate: {surfaceId: '@default', components: []},
+              } as unknown as Types.ServerToClientMessage,
             ]);
           } catch {
             // Expected: Zod validation rejects empty components array
@@ -349,7 +435,10 @@ describe('Component Updates', () => {
 
       return (
         <>
-          <A2UIRenderer surfaceId="@default" fallback={<span data-testid="empty-fallback">Empty</span>} />
+          <A2UIRenderer
+            surfaceId="@default"
+            fallback={<span data-testid="empty-fallback">Empty</span>}
+          />
           <span data-testid="stage">{stage}</span>
         </>
       );
@@ -358,7 +447,7 @@ describe('Component Updates', () => {
     render(
       <A2UIProvider>
         <EmptySurfaceRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Persistent content')).toBeInTheDocument();
@@ -376,19 +465,22 @@ describe('Nested Components', () => {
   it('should render deeply nested component structures', () => {
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'inner-text', component: { Text: { text: { literalString: 'Deep content' } , usageHint: 'body' } } },
-        { id: 'inner-card', component: { Card: { child: 'inner-text' } } },
-        { id: 'inner-col', component: { Column: { children: { explicitList: ['inner-card'] } } } },
-        { id: 'outer-card', component: { Card: { child: 'inner-col' } } },
-        { id: 'outer-col', component: { Column: { children: { explicitList: ['outer-card'] } } } },
+        {
+          id: 'inner-text',
+          component: {Text: {text: {literalString: 'Deep content'}, usageHint: 'body'}},
+        },
+        {id: 'inner-card', component: {Card: {child: 'inner-text'}}},
+        {id: 'inner-col', component: {Column: {children: {explicitList: ['inner-card']}}}},
+        {id: 'outer-card', component: {Card: {child: 'inner-col'}}},
+        {id: 'outer-col', component: {Column: {children: {explicitList: ['outer-card']}}}},
       ]),
       createBeginRendering('outer-col'),
     ];
 
-    const { container } = render(
+    const {container} = render(
       <TestWrapper>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     expect(screen.getByText('Deep content')).toBeInTheDocument();
@@ -400,13 +492,22 @@ describe('Nested Components', () => {
   it('should handle List with multiple items', () => {
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'item-1', component: { Text: { text: { literalString: 'Item 1' } , usageHint: 'body' } } },
-        { id: 'item-2', component: { Text: { text: { literalString: 'Item 2' } , usageHint: 'body' } } },
-        { id: 'item-3', component: { Text: { text: { literalString: 'Item 3' } , usageHint: 'body' } } },
+        {
+          id: 'item-1',
+          component: {Text: {text: {literalString: 'Item 1'}, usageHint: 'body'}},
+        },
+        {
+          id: 'item-2',
+          component: {Text: {text: {literalString: 'Item 2'}, usageHint: 'body'}},
+        },
+        {
+          id: 'item-3',
+          component: {Text: {text: {literalString: 'Item 3'}, usageHint: 'body'}},
+        },
         {
           id: 'list-1',
           component: {
-            List: { children: { explicitList: ['item-1', 'item-2', 'item-3'] } },
+            List: {children: {explicitList: ['item-1', 'item-2', 'item-3']}},
           },
         },
       ]),
@@ -416,7 +517,7 @@ describe('Nested Components', () => {
     render(
       <TestWrapper>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     expect(screen.getByText('Item 1')).toBeInTheDocument();
@@ -427,28 +528,34 @@ describe('Nested Components', () => {
   it('should handle Row with mixed children', () => {
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'text-1', component: { Text: { text: { literalString: 'Label' } , usageHint: 'body' } } },
-        { id: 'btn-text', component: { Text: { text: { literalString: 'Action' } , usageHint: 'body' } } },
-        { id: 'btn-1', component: { Button: { child: 'btn-text', action: { name: 'act' } } } },
-        { id: 'icon-1', component: { Icon: { name: { literalString: 'home' } } } },
+        {
+          id: 'text-1',
+          component: {Text: {text: {literalString: 'Label'}, usageHint: 'body'}},
+        },
+        {
+          id: 'btn-text',
+          component: {Text: {text: {literalString: 'Action'}, usageHint: 'body'}},
+        },
+        {id: 'btn-1', component: {Button: {child: 'btn-text', action: {name: 'act'}}}},
+        {id: 'icon-1', component: {Icon: {name: {literalString: 'home'}}}},
         {
           id: 'row-1',
           component: {
-            Row: { children: { explicitList: ['text-1', 'btn-1', 'icon-1'] } },
+            Row: {children: {explicitList: ['text-1', 'btn-1', 'icon-1']}},
           },
         },
       ]),
       createBeginRendering('row-1'),
     ];
 
-    const { container } = render(
+    const {container} = render(
       <TestWrapper>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     expect(screen.getByText('Label')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Action'})).toBeInTheDocument();
     expect(container.querySelector('.a2ui-icon')).toBeInTheDocument();
   });
 });
@@ -459,7 +566,7 @@ describe('Error Handling', () => {
 
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'btn-1', component: { Button: { child: 'non-existent', action: { name: 'test' } } } },
+        {id: 'btn-1', component: {Button: {child: 'non-existent', action: {name: 'test'}}}},
       ]),
       createBeginRendering('btn-1'),
     ];
@@ -468,7 +575,7 @@ describe('Error Handling', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
     }).toThrow();
 
@@ -478,7 +585,10 @@ describe('Error Handling', () => {
   it('should render valid content without issues', () => {
     const messages: Types.ServerToClientMessage[] = [
       createSurfaceUpdate([
-        { id: 'text-1', component: { Text: { text: { literalString: 'Safe content' } , usageHint: 'body' } } },
+        {
+          id: 'text-1',
+          component: {Text: {text: {literalString: 'Safe content'}, usageHint: 'body'}},
+        },
       ]),
       createBeginRendering('text-1'),
     ];
@@ -486,7 +596,7 @@ describe('Error Handling', () => {
     render(
       <TestWrapper>
         <TestRenderer messages={messages} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     expect(screen.getByText('Safe content')).toBeInTheDocument();
diff --git a/renderers/react/tests/v0_8/integration/data-binding.test.tsx b/renderers/react/tests/v0_8/integration/data-binding.test.tsx
index c1ff2bff4..84b9f2890 100644
--- a/renderers/react/tests/v0_8/integration/data-binding.test.tsx
+++ b/renderers/react/tests/v0_8/integration/data-binding.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import React, { useEffect } from 'react';
-import { A2UIProvider, A2UIRenderer, useA2UI } from '../../../src/v0_8';
+import {describe, it, expect} from 'vitest';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import React, {useEffect} from 'react';
+import {A2UIProvider, A2UIRenderer, useA2UI} from '../../../src/v0_8';
 import type * as Types from '@a2ui/web_core/types/types';
 import {
   TestWrapper,
@@ -37,18 +37,16 @@ describe('Data Binding', () => {
   describe('dataModelUpdate Messages', () => {
     it('should initialize data model via dataModelUpdate before rendering', () => {
       function DataModelRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
 
         useEffect(() => {
           processMessages([
-            createDataModelUpdate([
-              { key: 'greeting', valueString: 'Hello from data model'},
-            ]),
+            createDataModelUpdate([{key: 'greeting', valueString: 'Hello from data model'}]),
             createSurfaceUpdate([
               {
                 id: 'text-1',
                 component: {
-                  Text: { text: { path: 'greeting' }, usageHint: 'body' },
+                  Text: {text: {path: 'greeting'}, usageHint: 'body'},
                 },
               },
             ]),
@@ -62,7 +60,7 @@ describe('Data Binding', () => {
       render(
         <A2UIProvider>
           <DataModelRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Hello from data model')).toBeInTheDocument();
@@ -70,24 +68,25 @@ describe('Data Binding', () => {
 
     it('should update existing data model values', async () => {
       function DataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [step, setStep] = React.useState(0);
 
         useEffect(() => {
           if (step === 0) {
             processMessages([
-              createDataModelUpdate([{ key: 'counter', valueString: 'Count: 0'}]),
+              createDataModelUpdate([{key: 'counter', valueString: 'Count: 0'}]),
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { path: 'counter' } , usageHint: 'body' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {path: 'counter'}, usageHint: 'body'}},
+                },
               ]),
               createBeginRendering('text-1'),
             ]);
             setStep(1);
           } else if (step === 1) {
             setTimeout(() => {
-              processMessages([
-                createDataModelUpdate([{ key: 'counter', valueString: 'Count: 1'}]),
-              ]);
+              processMessages([createDataModelUpdate([{key: 'counter', valueString: 'Count: 1'}])]);
             }, 10);
           }
         }, [processMessages, step]);
@@ -98,7 +97,7 @@ describe('Data Binding', () => {
       render(
         <A2UIProvider>
           <DataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       await waitFor(() => {
@@ -110,7 +109,7 @@ describe('Data Binding', () => {
   describe('Path Bindings', () => {
     it('should propagate data changes across components sharing the same path', async () => {
       function SharedDataRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
 
         useEffect(() => {
           processMessages([
@@ -119,21 +118,21 @@ describe('Data Binding', () => {
                 id: 'tf-1',
                 component: {
                   TextField: {
-                    text: { path: 'shared.name' },
-                    label: { literalString: 'Name' },
+                    text: {path: 'shared.name'},
+                    label: {literalString: 'Name'},
                   },
                 },
               },
               {
                 id: 'text-1',
                 component: {
-                  Text: { text: { path: 'shared.name' }, usageHint: 'body' },
+                  Text: {text: {path: 'shared.name'}, usageHint: 'body'},
                 },
               },
               {
                 id: 'col-1',
                 component: {
-                  Column: { children: { explicitList: ['tf-1', 'text-1'] } },
+                  Column: {children: {explicitList: ['tf-1', 'text-1']}},
                 },
               },
             ]),
@@ -144,16 +143,16 @@ describe('Data Binding', () => {
         return <A2UIRenderer surfaceId="@default" />;
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <SharedDataRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       const input = container.querySelector('input');
       expect(input).toBeInTheDocument();
 
-      fireEvent.change(input!, { target: { value: 'Alice' } });
+      fireEvent.change(input!, {target: {value: 'Alice'}});
 
       await waitFor(() => {
         expect(screen.getByText('Alice')).toBeInTheDocument();
@@ -167,8 +166,8 @@ describe('Data Binding', () => {
             id: 'tf-1',
             component: {
               TextField: {
-                value: { path: 'form.username' },
-                label: { literalString: 'Username' },
+                value: {path: 'form.username'},
+                label: {literalString: 'Username'},
               },
             },
           },
@@ -176,16 +175,16 @@ describe('Data Binding', () => {
         createBeginRendering('tf-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
       expect(input).toBeInTheDocument();
 
-      fireEvent.change(input!, { target: { value: 'testuser' } });
+      fireEvent.change(input!, {target: {value: 'testuser'}});
       expect(input).toHaveValue('testuser');
     });
 
@@ -196,8 +195,8 @@ describe('Data Binding', () => {
             id: 'cb-1',
             component: {
               CheckBox: {
-                value: { path: 'form.agree' },
-                label: { literalString: 'I agree' },
+                value: {path: 'form.agree'},
+                label: {literalString: 'I agree'},
               },
             },
           },
@@ -205,10 +204,10 @@ describe('Data Binding', () => {
         createBeginRendering('cb-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
@@ -223,20 +222,20 @@ describe('Data Binding', () => {
   describe('Server-Driven Data Model Updates', () => {
     it('should update TextField when dataModelUpdate changes bound path value', async () => {
       function TextFieldDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'user.name', valueString: 'Alice'}]),
+              createDataModelUpdate([{key: 'user.name', valueString: 'Alice'}]),
               createSurfaceUpdate([
                 {
                   id: 'tf-1',
                   component: {
                     TextField: {
-                      text: { path: 'user.name' },
-                      label: { literalString: 'Name' },
+                      text: {path: 'user.name'},
+                      label: {literalString: 'Name'},
                     },
                   },
                 },
@@ -245,9 +244,7 @@ describe('Data Binding', () => {
             ]);
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
-            processMessages([
-              createDataModelUpdate([{ key: 'user.name', valueString: 'Bob'}]),
-            ]);
+            processMessages([createDataModelUpdate([{key: 'user.name', valueString: 'Bob'}])]);
           }
         }, [processMessages, stage]);
 
@@ -259,10 +256,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <TextFieldDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
@@ -276,20 +273,20 @@ describe('Data Binding', () => {
 
     it('should update CheckBox when dataModelUpdate changes bound path value', async () => {
       function CheckBoxDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'settings.enabled', valueBoolean: false}]),
+              createDataModelUpdate([{key: 'settings.enabled', valueBoolean: false}]),
               createSurfaceUpdate([
                 {
                   id: 'cb-1',
                   component: {
                     CheckBox: {
-                      value: { path: 'settings.enabled' },
-                      label: { literalString: 'Enable feature' },
+                      value: {path: 'settings.enabled'},
+                      label: {literalString: 'Enable feature'},
                     },
                   },
                 },
@@ -299,7 +296,7 @@ describe('Data Binding', () => {
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
             processMessages([
-              createDataModelUpdate([{ key: 'settings.enabled', valueBoolean: true}]),
+              createDataModelUpdate([{key: 'settings.enabled', valueBoolean: true}]),
             ]);
           }
         }, [processMessages, stage]);
@@ -315,7 +312,7 @@ describe('Data Binding', () => {
       render(
         <A2UIProvider>
           <CheckBoxDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByRole('checkbox')).not.toBeChecked();
@@ -328,19 +325,19 @@ describe('Data Binding', () => {
 
     it('should update Slider when dataModelUpdate changes bound path value', async () => {
       function SliderDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'volume', valueNumber: 30}]),
+              createDataModelUpdate([{key: 'volume', valueNumber: 30}]),
               createSurfaceUpdate([
                 {
                   id: 'slider-1',
                   component: {
                     Slider: {
-                      value: { path: 'volume' },
+                      value: {path: 'volume'},
                       minValue: 0,
                       maxValue: 100,
                     },
@@ -351,9 +348,7 @@ describe('Data Binding', () => {
             ]);
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
-            processMessages([
-              createDataModelUpdate([{ key: 'volume', valueNumber: 80}]),
-            ]);
+            processMessages([createDataModelUpdate([{key: 'volume', valueNumber: 80}])]);
           }
         }, [processMessages, stage]);
 
@@ -368,7 +363,7 @@ describe('Data Binding', () => {
       render(
         <A2UIProvider>
           <SliderDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByRole('slider')).toHaveValue('30');
@@ -381,30 +376,30 @@ describe('Data Binding', () => {
 
     it('should update multiple components bound to the same path simultaneously', async () => {
       function MultiComponentDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'shared.value', valueString: 'Initial'}]),
+              createDataModelUpdate([{key: 'shared.value', valueString: 'Initial'}]),
               createSurfaceUpdate([
                 {
                   id: 'text-1',
-                  component: { Text: { text: { path: 'shared.value' } , usageHint: 'body' } },
+                  component: {Text: {text: {path: 'shared.value'}, usageHint: 'body'}},
                 },
                 {
                   id: 'tf-1',
                   component: {
                     TextField: {
-                      text: { path: 'shared.value' },
-                      label: { literalString: 'Input' },
+                      text: {path: 'shared.value'},
+                      label: {literalString: 'Input'},
                     },
                   },
                 },
                 {
                   id: 'col-1',
-                  component: { Column: { children: { explicitList: ['text-1', 'tf-1'] } } },
+                  component: {Column: {children: {explicitList: ['text-1', 'tf-1']}}},
                 },
               ]),
               createBeginRendering('col-1'),
@@ -412,7 +407,7 @@ describe('Data Binding', () => {
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
             processMessages([
-              createDataModelUpdate([{ key: 'shared.value', valueString: 'Updated'}]),
+              createDataModelUpdate([{key: 'shared.value', valueString: 'Updated'}]),
             ]);
           }
         }, [processMessages, stage]);
@@ -425,10 +420,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <MultiComponentDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Initial')).toBeInTheDocument();
@@ -444,22 +439,28 @@ describe('Data Binding', () => {
 
     it('should handle dataModelUpdate with multiple key/value pairs at once', async () => {
       function MultiKeyDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createDataModelUpdate([
-                { key: 'form.firstName', valueString: 'John'},
-                { key: 'form.lastName', valueString: 'Doe'},
+                {key: 'form.firstName', valueString: 'John'},
+                {key: 'form.lastName', valueString: 'Doe'},
               ]),
               createSurfaceUpdate([
-                { id: 'text-first', component: { Text: { text: { path: 'form.firstName' } , usageHint: 'body' } } },
-                { id: 'text-last', component: { Text: { text: { path: 'form.lastName' } , usageHint: 'body' } } },
+                {
+                  id: 'text-first',
+                  component: {Text: {text: {path: 'form.firstName'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'text-last',
+                  component: {Text: {text: {path: 'form.lastName'}, usageHint: 'body'}},
+                },
                 {
                   id: 'row-1',
-                  component: { Row: { children: { explicitList: ['text-first', 'text-last'] } } },
+                  component: {Row: {children: {explicitList: ['text-first', 'text-last']}}},
                 },
               ]),
               createBeginRendering('row-1'),
@@ -468,8 +469,8 @@ describe('Data Binding', () => {
           } else if (stage === 'updated') {
             processMessages([
               createDataModelUpdate([
-                { key: 'form.firstName', valueString: 'Jane'},
-                { key: 'form.lastName', valueString: 'Smith'},
+                {key: 'form.firstName', valueString: 'Jane'},
+                {key: 'form.lastName', valueString: 'Smith'},
               ]),
             ]);
           }
@@ -486,7 +487,7 @@ describe('Data Binding', () => {
       render(
         <A2UIProvider>
           <MultiKeyDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('John')).toBeInTheDocument();
@@ -503,19 +504,19 @@ describe('Data Binding', () => {
 
     it('should handle deeply nested path values in dataModelUpdate', async () => {
       function NestedPathRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([
-                { key: 'user.profile.address.city', valueString: 'New York'},
-              ]),
+              createDataModelUpdate([{key: 'user.profile.address.city', valueString: 'New York'}]),
               createSurfaceUpdate([
                 {
                   id: 'text-1',
-                  component: { Text: { text: { path: 'user.profile.address.city' } , usageHint: 'body' } },
+                  component: {
+                    Text: {text: {path: 'user.profile.address.city'}, usageHint: 'body'},
+                  },
                 },
               ]),
               createBeginRendering('text-1'),
@@ -524,7 +525,7 @@ describe('Data Binding', () => {
           } else if (stage === 'updated') {
             processMessages([
               createDataModelUpdate([
-                { key: 'user.profile.address.city', valueString: 'Los Angeles'},
+                {key: 'user.profile.address.city', valueString: 'Los Angeles'},
               ]),
             ]);
           }
@@ -541,7 +542,7 @@ describe('Data Binding', () => {
       render(
         <A2UIProvider>
           <NestedPathRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('New York')).toBeInTheDocument();
@@ -555,19 +556,19 @@ describe('Data Binding', () => {
 
     it('should update DateTimeInput when dataModelUpdate changes bound path value', async () => {
       function DateTimeInputDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'appointment.date', valueString: '2024-01-15'}]),
+              createDataModelUpdate([{key: 'appointment.date', valueString: '2024-01-15'}]),
               createSurfaceUpdate([
                 {
                   id: 'dt-1',
                   component: {
                     DateTimeInput: {
-                      value: { path: 'appointment.date' },
+                      value: {path: 'appointment.date'},
                       enableDate: true,
                       enableTime: false,
                     },
@@ -579,7 +580,7 @@ describe('Data Binding', () => {
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
             processMessages([
-              createDataModelUpdate([{ key: 'appointment.date', valueString: '2024-06-20'}]),
+              createDataModelUpdate([{key: 'appointment.date', valueString: '2024-06-20'}]),
             ]);
           }
         }, [processMessages, stage]);
@@ -592,10 +593,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <DateTimeInputDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       const dateInput = container.querySelector('input[type="date"]') as HTMLInputElement;
@@ -609,7 +610,7 @@ describe('Data Binding', () => {
 
     it('should update MultipleChoice when dataModelUpdate changes bound path value', async () => {
       function MultipleChoiceDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
@@ -620,11 +621,11 @@ describe('Data Binding', () => {
                   id: 'mc-1',
                   component: {
                     MultipleChoice: {
-                      selections: { path: 'survey.answers' },
+                      selections: {path: 'survey.answers'},
                       options: [
-                        { label: { literalString: 'Option 1' }, value: 'option1' },
-                        { label: { literalString: 'Option 2' }, value: 'option2' },
-                        { label: { literalString: 'Option 3' }, value: 'option3' },
+                        {label: {literalString: 'Option 1'}, value: 'option1'},
+                        {label: {literalString: 'Option 2'}, value: 'option2'},
+                        {label: {literalString: 'Option 3'}, value: 'option3'},
                       ],
                     },
                   },
@@ -644,10 +645,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <MultipleChoiceDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       // Should render a select dropdown with 3 options
@@ -662,18 +663,20 @@ describe('Data Binding', () => {
 
     it('should update Image when dataModelUpdate changes bound path value', async () => {
       function ImageDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'product.imageUrl', valueString: 'https://example.com/old-product.jpg'}]),
+              createDataModelUpdate([
+                {key: 'product.imageUrl', valueString: 'https://example.com/old-product.jpg'},
+              ]),
               createSurfaceUpdate([
                 {
                   id: 'img-1',
                   component: {
-                    Image: { url: { path: 'product.imageUrl' }, usageHint: 'mediumFeature' },
+                    Image: {url: {path: 'product.imageUrl'}, usageHint: 'mediumFeature'},
                   },
                 },
               ]),
@@ -682,7 +685,9 @@ describe('Data Binding', () => {
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
             processMessages([
-              createDataModelUpdate([{ key: 'product.imageUrl', valueString: 'https://example.com/new-product.jpg'}]),
+              createDataModelUpdate([
+                {key: 'product.imageUrl', valueString: 'https://example.com/new-product.jpg'},
+              ]),
             ]);
           }
         }, [processMessages, stage]);
@@ -695,10 +700,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <ImageDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       const img = container.querySelector('img') as HTMLImageElement;
@@ -712,18 +717,18 @@ describe('Data Binding', () => {
 
     it('should update Icon when dataModelUpdate changes bound path value', async () => {
       function IconDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'ui.statusIcon', valueString: 'check'}]),
+              createDataModelUpdate([{key: 'ui.statusIcon', valueString: 'check'}]),
               createSurfaceUpdate([
                 {
                   id: 'icon-1',
                   component: {
-                    Icon: { name: { path: 'ui.statusIcon' } },
+                    Icon: {name: {path: 'ui.statusIcon'}},
                   },
                 },
               ]),
@@ -732,7 +737,7 @@ describe('Data Binding', () => {
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
             processMessages([
-              createDataModelUpdate([{ key: 'ui.statusIcon', valueString: 'error'}]),
+              createDataModelUpdate([{key: 'ui.statusIcon', valueString: 'error'}]),
             ]);
           }
         }, [processMessages, stage]);
@@ -745,10 +750,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <IconDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(container.querySelector('.g-icon')).toHaveTextContent('check');
@@ -761,18 +766,20 @@ describe('Data Binding', () => {
 
     it('should update Video when dataModelUpdate changes bound path value', async () => {
       function VideoDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'media.videoUrl', valueString: 'https://example.com/old-video.mp4'}]),
+              createDataModelUpdate([
+                {key: 'media.videoUrl', valueString: 'https://example.com/old-video.mp4'},
+              ]),
               createSurfaceUpdate([
                 {
                   id: 'video-1',
                   component: {
-                    Video: { url: { path: 'media.videoUrl' } },
+                    Video: {url: {path: 'media.videoUrl'}},
                   },
                 },
               ]),
@@ -781,7 +788,9 @@ describe('Data Binding', () => {
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
             processMessages([
-              createDataModelUpdate([{ key: 'media.videoUrl', valueString: 'https://example.com/new-video.mp4'}]),
+              createDataModelUpdate([
+                {key: 'media.videoUrl', valueString: 'https://example.com/new-video.mp4'},
+              ]),
             ]);
           }
         }, [processMessages, stage]);
@@ -794,10 +803,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <VideoDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       const video = container.querySelector('video') as HTMLVideoElement;
@@ -811,20 +820,22 @@ describe('Data Binding', () => {
 
     it('should update AudioPlayer when dataModelUpdate changes bound path value', async () => {
       function AudioPlayerDataUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
-              createDataModelUpdate([{ key: 'media.audioUrl', valueString: 'https://example.com/old-audio.mp3'}]),
+              createDataModelUpdate([
+                {key: 'media.audioUrl', valueString: 'https://example.com/old-audio.mp3'},
+              ]),
               createSurfaceUpdate([
                 {
                   id: 'audio-1',
                   component: {
                     AudioPlayer: {
-                      url: { path: 'media.audioUrl' },
-                      description: { literalString: 'Audio track' },
+                      url: {path: 'media.audioUrl'},
+                      description: {literalString: 'Audio track'},
                     },
                   },
                 },
@@ -834,7 +845,9 @@ describe('Data Binding', () => {
             setTimeout(() => setStage('updated'), 10);
           } else if (stage === 'updated') {
             processMessages([
-              createDataModelUpdate([{ key: 'media.audioUrl', valueString: 'https://example.com/new-audio.mp3'}]),
+              createDataModelUpdate([
+                {key: 'media.audioUrl', valueString: 'https://example.com/new-audio.mp3'},
+              ]),
             ]);
           }
         }, [processMessages, stage]);
@@ -847,10 +860,10 @@ describe('Data Binding', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <AudioPlayerDataUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       const audio = container.querySelector('audio') as HTMLAudioElement;
diff --git a/renderers/react/tests/v0_8/integration/hooks.test.tsx b/renderers/react/tests/v0_8/integration/hooks.test.tsx
index e41e9757d..9103089a9 100644
--- a/renderers/react/tests/v0_8/integration/hooks.test.tsx
+++ b/renderers/react/tests/v0_8/integration/hooks.test.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from 'vitest';
-import { render } from '@testing-library/react';
+import {describe, it, expect, vi} from 'vitest';
+import {render} from '@testing-library/react';
 import React from 'react';
-import { A2UIProvider, useA2UI } from '../../../src/v0_8';
-import { getElement } from '../utils';
+import {A2UIProvider, useA2UI} from '../../../src/v0_8';
+import {getElement} from '../utils';
 
 /**
  * Context Hooks Integration Tests
@@ -49,21 +49,19 @@ describe('Context Hooks', () => {
       const api = useA2UI();
       actionRefs.push(api);
 
-      return (
-        <button onClick={() => api.processMessages([])}>Trigger</button>
-      );
+      return <button onClick={() => api.processMessages([])}>Trigger</button>;
     }
 
-    const { rerender } = render(
+    const {rerender} = render(
       <A2UIProvider>
         <ActionTracker />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     rerender(
       <A2UIProvider>
         <ActionTracker />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     const ref0 = getElement(actionRefs, 0);
diff --git a/renderers/react/tests/v0_8/integration/messages.test.tsx b/renderers/react/tests/v0_8/integration/messages.test.tsx
index 0cb5dbfdd..df97f9b78 100644
--- a/renderers/react/tests/v0_8/integration/messages.test.tsx
+++ b/renderers/react/tests/v0_8/integration/messages.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import React, { useEffect } from 'react';
-import { A2UIProvider, A2UIRenderer, useA2UI } from '../../../src/v0_8';
+import {describe, it, expect} from 'vitest';
+import {render, screen, waitFor} from '@testing-library/react';
+import React, {useEffect} from 'react';
+import {A2UIProvider, A2UIRenderer, useA2UI} from '../../../src/v0_8';
 import type * as Types from '@a2ui/web_core/types/types';
 import {
   TestWrapper,
@@ -38,7 +38,7 @@ describe('Message Processing', () => {
   describe('Basic Processing', () => {
     it('should not render surface until beginRendering is received', () => {
       function StagedRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated' | 'rendering'>('initial');
 
         useEffect(() => {
@@ -46,7 +46,12 @@ describe('Message Processing', () => {
             // Step 1: Only send surfaceUpdate (no beginRendering)
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Should not appear yet' } , usageHint: 'body' } } },
+                {
+                  id: 'text-1',
+                  component: {
+                    Text: {text: {literalString: 'Should not appear yet'}, usageHint: 'body'},
+                  },
+                },
               ]),
             ]);
             setStage('updated');
@@ -70,7 +75,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <StagedRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       // After surfaceUpdate only, content should NOT be visible
@@ -87,7 +92,10 @@ describe('Message Processing', () => {
     it('should process surfaceUpdate and beginRendering messages', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Hello World' } , usageHint: 'body' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Hello World'}, usageHint: 'body'}},
+          },
         ]),
         createBeginRendering('text-1'),
       ];
@@ -95,7 +103,7 @@ describe('Message Processing', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByText('Hello World')).toBeInTheDocument();
@@ -103,19 +111,25 @@ describe('Message Processing', () => {
 
     it('should process multiple messages in sequence', () => {
       function SequentialRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
 
         useEffect(() => {
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'Initial' } , usageHint: 'body' } } },
+              {
+                id: 'text-1',
+                component: {Text: {text: {literalString: 'Initial'}, usageHint: 'body'}},
+              },
             ]),
             createBeginRendering('text-1'),
           ]);
 
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'Updated' } , usageHint: 'body' } } },
+              {
+                id: 'text-1',
+                component: {Text: {text: {literalString: 'Updated'}, usageHint: 'body'}},
+              },
             ]),
             createBeginRendering('text-1'),
           ]);
@@ -127,7 +141,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <SequentialRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Updated')).toBeInTheDocument();
@@ -136,13 +150,16 @@ describe('Message Processing', () => {
 
     it('should handle empty message arrays gracefully', () => {
       function EmptyMessagesRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
 
         useEffect(() => {
           processMessages([]);
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'After empty' } , usageHint: 'body' } } },
+              {
+                id: 'text-1',
+                component: {Text: {text: {literalString: 'After empty'}, usageHint: 'body'}},
+              },
             ]),
             createBeginRendering('text-1'),
           ]);
@@ -154,7 +171,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <EmptyMessagesRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('After empty')).toBeInTheDocument();
@@ -164,18 +181,32 @@ describe('Message Processing', () => {
   describe('Multiple Surfaces', () => {
     it('should render different content on different surfaces', () => {
       function MultiSurfaceRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
 
         useEffect(() => {
           processMessages([
             createSurfaceUpdate(
-              [{ id: 'text-a', component: { Text: { text: { literalString: 'Surface A Content' } , usageHint: 'body' } } }],
-              'surface-a'
+              [
+                {
+                  id: 'text-a',
+                  component: {
+                    Text: {text: {literalString: 'Surface A Content'}, usageHint: 'body'},
+                  },
+                },
+              ],
+              'surface-a',
             ),
             createBeginRendering('text-a', 'surface-a'),
             createSurfaceUpdate(
-              [{ id: 'text-b', component: { Text: { text: { literalString: 'Surface B Content' } , usageHint: 'body' } } }],
-              'surface-b'
+              [
+                {
+                  id: 'text-b',
+                  component: {
+                    Text: {text: {literalString: 'Surface B Content'}, usageHint: 'body'},
+                  },
+                },
+              ],
+              'surface-b',
             ),
             createBeginRendering('text-b', 'surface-b'),
           ]);
@@ -196,7 +227,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <MultiSurfaceRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Surface A Content')).toBeInTheDocument();
@@ -210,20 +241,34 @@ describe('Message Processing', () => {
 
     it('should update surfaces independently', () => {
       function IndependentSurfaceRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [step, setStep] = React.useState(0);
 
         useEffect(() => {
           if (step === 0) {
             processMessages([
               createSurfaceUpdate(
-                [{ id: 'text-a', component: { Text: { text: { literalString: 'A: Initial' } , usageHint: 'body' } } }],
-                'surface-a'
+                [
+                  {
+                    id: 'text-a',
+                    component: {
+                      Text: {text: {literalString: 'A: Initial'}, usageHint: 'body'},
+                    },
+                  },
+                ],
+                'surface-a',
               ),
               createBeginRendering('text-a', 'surface-a'),
               createSurfaceUpdate(
-                [{ id: 'text-b', component: { Text: { text: { literalString: 'B: Initial' } , usageHint: 'body' } } }],
-                'surface-b'
+                [
+                  {
+                    id: 'text-b',
+                    component: {
+                      Text: {text: {literalString: 'B: Initial'}, usageHint: 'body'},
+                    },
+                  },
+                ],
+                'surface-b',
               ),
               createBeginRendering('text-b', 'surface-b'),
             ]);
@@ -231,8 +276,15 @@ describe('Message Processing', () => {
           } else if (step === 1) {
             processMessages([
               createSurfaceUpdate(
-                [{ id: 'text-a', component: { Text: { text: { literalString: 'A: Updated' } , usageHint: 'body' } } }],
-                'surface-a'
+                [
+                  {
+                    id: 'text-a',
+                    component: {
+                      Text: {text: {literalString: 'A: Updated'}, usageHint: 'body'},
+                    },
+                  },
+                ],
+                'surface-a',
               ),
               createBeginRendering('text-a', 'surface-a'),
             ]);
@@ -250,7 +302,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <IndependentSurfaceRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('A: Updated')).toBeInTheDocument();
@@ -261,7 +313,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <A2UIRenderer surfaceId="does-not-exist" />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
       // Should render without error but with no content
     });
@@ -270,14 +322,21 @@ describe('Message Processing', () => {
   describe('Delete Surface', () => {
     it('should remove surface content when deleteSurface is received', async () => {
       function DeleteSurfaceRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [deleted, setDeleted] = React.useState(false);
 
         useEffect(() => {
           processMessages([
             createSurfaceUpdate(
-              [{ id: 'text-1', component: { Text: { text: { literalString: 'Surface content' } , usageHint: 'body' } } }],
-              'deletable-surface'
+              [
+                {
+                  id: 'text-1',
+                  component: {
+                    Text: {text: {literalString: 'Surface content'}, usageHint: 'body'},
+                  },
+                },
+              ],
+              'deletable-surface',
             ),
             createBeginRendering('text-1', 'deletable-surface'),
           ]);
@@ -299,7 +358,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <DeleteSurfaceRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Surface content')).toBeInTheDocument();
@@ -312,7 +371,7 @@ describe('Message Processing', () => {
 
     it('should handle deleting a non-existent surface gracefully', () => {
       function DeleteNonExistentRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [attempted, setAttempted] = React.useState(false);
 
         useEffect(() => {
@@ -328,7 +387,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <DeleteNonExistentRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByTestId('status')).toHaveTextContent('completed');
@@ -336,20 +395,34 @@ describe('Message Processing', () => {
 
     it('should only delete the specified surface, leaving others intact', async () => {
       function MultiSurfaceDeleteRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [deleted, setDeleted] = React.useState(false);
 
         useEffect(() => {
           // Create two surfaces
           processMessages([
             createSurfaceUpdate(
-              [{ id: 'text-a', component: { Text: { text: { literalString: 'Surface A content' } , usageHint: 'body' } } }],
-              'surface-a'
+              [
+                {
+                  id: 'text-a',
+                  component: {
+                    Text: {text: {literalString: 'Surface A content'}, usageHint: 'body'},
+                  },
+                },
+              ],
+              'surface-a',
             ),
             createBeginRendering('text-a', 'surface-a'),
             createSurfaceUpdate(
-              [{ id: 'text-b', component: { Text: { text: { literalString: 'Surface B content' } , usageHint: 'body' } } }],
-              'surface-b'
+              [
+                {
+                  id: 'text-b',
+                  component: {
+                    Text: {text: {literalString: 'Surface B content'}, usageHint: 'body'},
+                  },
+                },
+              ],
+              'surface-b',
             ),
             createBeginRendering('text-b', 'surface-b'),
           ]);
@@ -373,7 +446,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <MultiSurfaceDeleteRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       // Both surfaces should be visible initially
@@ -390,7 +463,7 @@ describe('Message Processing', () => {
 
     it('should allow re-creating a surface after deletion with the same ID', async () => {
       function RecreateAfterDeleteRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'deleted' | 'recreated'>('initial');
 
         useEffect(() => {
@@ -398,8 +471,15 @@ describe('Message Processing', () => {
             // Create surface
             processMessages([
               createSurfaceUpdate(
-                [{ id: 'text-1', component: { Text: { text: { literalString: 'Original content' } , usageHint: 'body' } } }],
-                'recyclable-surface'
+                [
+                  {
+                    id: 'text-1',
+                    component: {
+                      Text: {text: {literalString: 'Original content'}, usageHint: 'body'},
+                    },
+                  },
+                ],
+                'recyclable-surface',
               ),
               createBeginRendering('text-1', 'recyclable-surface'),
             ]);
@@ -412,8 +492,18 @@ describe('Message Processing', () => {
             // Re-create surface with same ID but different content
             processMessages([
               createSurfaceUpdate(
-                [{ id: 'text-2', component: { Text: { text: { literalString: 'New content after recreation' } , usageHint: 'body' } } }],
-                'recyclable-surface'
+                [
+                  {
+                    id: 'text-2',
+                    component: {
+                      Text: {
+                        text: {literalString: 'New content after recreation'},
+                        usageHint: 'body',
+                      },
+                    },
+                  },
+                ],
+                'recyclable-surface',
               ),
               createBeginRendering('text-2', 'recyclable-surface'),
             ]);
@@ -431,7 +521,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <RecreateAfterDeleteRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       // Initial content should be visible
@@ -449,13 +539,18 @@ describe('Message Processing', () => {
   describe('Clear Surfaces', () => {
     it('should clear all surfaces when clearSurfaces is called', () => {
       function ClearRenderer() {
-        const { processMessages, clearSurfaces } = useA2UI();
+        const {processMessages, clearSurfaces} = useA2UI();
         const [cleared, setCleared] = React.useState(false);
 
         useEffect(() => {
           processMessages([
             createSurfaceUpdate([
-              { id: 'text-1', component: { Text: { text: { literalString: 'Will be cleared' } , usageHint: 'body' } } },
+              {
+                id: 'text-1',
+                component: {
+                  Text: {text: {literalString: 'Will be cleared'}, usageHint: 'body'},
+                },
+              },
             ]),
             createBeginRendering('text-1'),
           ]);
@@ -477,7 +572,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <ClearRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Will be cleared')).toBeInTheDocument();
@@ -490,14 +585,17 @@ describe('Message Processing', () => {
 
     it('should allow new content after clearing', () => {
       function ClearAndRefillRenderer() {
-        const { processMessages, clearSurfaces } = useA2UI();
+        const {processMessages, clearSurfaces} = useA2UI();
         const [step, setStep] = React.useState(0);
 
         useEffect(() => {
           if (step === 0) {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Original' } , usageHint: 'body' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Original'}, usageHint: 'body'}},
+                },
               ]),
               createBeginRendering('text-1'),
             ]);
@@ -508,7 +606,12 @@ describe('Message Processing', () => {
           } else if (step === 2) {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-2', component: { Text: { text: { literalString: 'New Content' } , usageHint: 'body' } } },
+                {
+                  id: 'text-2',
+                  component: {
+                    Text: {text: {literalString: 'New Content'}, usageHint: 'body'},
+                  },
+                },
               ]),
               createBeginRendering('text-2'),
             ]);
@@ -521,7 +624,7 @@ describe('Message Processing', () => {
       render(
         <A2UIProvider>
           <ClearAndRefillRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       return waitFor(() => {
diff --git a/renderers/react/tests/v0_8/integration/property-updates.test.tsx b/renderers/react/tests/v0_8/integration/property-updates.test.tsx
index 27b33ac59..25ab8a40e 100644
--- a/renderers/react/tests/v0_8/integration/property-updates.test.tsx
+++ b/renderers/react/tests/v0_8/integration/property-updates.test.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import React, { useEffect } from 'react';
-import { A2UIProvider, A2UIRenderer, useA2UI } from '../../../src/v0_8';
-import { createSurfaceUpdate, createBeginRendering } from '../utils';
+import {describe, it, expect} from 'vitest';
+import {render, screen, waitFor} from '@testing-library/react';
+import React, {useEffect} from 'react';
+import {A2UIProvider, A2UIRenderer, useA2UI} from '../../../src/v0_8';
+import {createSurfaceUpdate, createBeginRendering} from '../utils';
 
 /**
  * Property Updates Integration Tests
@@ -32,14 +32,19 @@ describe('Property Updates via surfaceUpdate', () => {
   describe('Content Components', () => {
     it('should update Text content', async () => {
       function TextUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Original text' } , usageHint: 'body' } } },
+                {
+                  id: 'text-1',
+                  component: {
+                    Text: {text: {literalString: 'Original text'}, usageHint: 'body'},
+                  },
+                },
               ]),
               createBeginRendering('text-1'),
             ]);
@@ -47,7 +52,12 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Updated text' } , usageHint: 'body' } } },
+                {
+                  id: 'text-1',
+                  component: {
+                    Text: {text: {literalString: 'Updated text'}, usageHint: 'body'},
+                  },
+                },
               ]),
             ]);
           }
@@ -64,7 +74,7 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <TextUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Original text')).toBeInTheDocument();
@@ -78,14 +88,17 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update Text usageHint', async () => {
       function TextUsageRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Heading' }, usageHint: 'h1' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Heading'}, usageHint: 'h1'}},
+                },
               ]),
               createBeginRendering('text-1'),
             ]);
@@ -93,7 +106,10 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Heading' }, usageHint: 'caption' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Heading'}, usageHint: 'caption'}},
+                },
               ]),
             ]);
           }
@@ -107,10 +123,10 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <TextUsageRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       // usageHint affects CSS classes, not the element tag
@@ -126,14 +142,22 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update Image url', async () => {
       function ImageUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'img-1', component: { Image: { url: { literalString: 'https://example.com/old.jpg' }, usageHint: 'mediumFeature' } } },
+                {
+                  id: 'img-1',
+                  component: {
+                    Image: {
+                      url: {literalString: 'https://example.com/old.jpg'},
+                      usageHint: 'mediumFeature',
+                    },
+                  },
+                },
               ]),
               createBeginRendering('img-1'),
             ]);
@@ -141,7 +165,15 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'img-1', component: { Image: { url: { literalString: 'https://example.com/new.jpg' }, usageHint: 'mediumFeature' } } },
+                {
+                  id: 'img-1',
+                  component: {
+                    Image: {
+                      url: {literalString: 'https://example.com/new.jpg'},
+                      usageHint: 'mediumFeature',
+                    },
+                  },
+                },
               ]),
             ]);
           }
@@ -155,30 +187,41 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <ImageUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(container.querySelector('img')).toHaveAttribute('src', 'https://example.com/old.jpg');
 
       await waitFor(() => {
         expect(screen.getByTestId('stage')).toHaveTextContent('updated');
-        expect(container.querySelector('img')).toHaveAttribute('src', 'https://example.com/new.jpg');
+        expect(container.querySelector('img')).toHaveAttribute(
+          'src',
+          'https://example.com/new.jpg',
+        );
       });
     });
 
     it('should update Image usageHint', async () => {
       function ImageUsageRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'img-1', component: { Image: { url: { literalString: 'https://example.com/img.jpg' }, usageHint: 'icon' } } },
+                {
+                  id: 'img-1',
+                  component: {
+                    Image: {
+                      url: {literalString: 'https://example.com/img.jpg'},
+                      usageHint: 'icon',
+                    },
+                  },
+                },
               ]),
               createBeginRendering('img-1'),
             ]);
@@ -186,7 +229,15 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'img-1', component: { Image: { url: { literalString: 'https://example.com/img.jpg' }, usageHint: 'avatar' } } },
+                {
+                  id: 'img-1',
+                  component: {
+                    Image: {
+                      url: {literalString: 'https://example.com/img.jpg'},
+                      usageHint: 'avatar',
+                    },
+                  },
+                },
               ]),
             ]);
           }
@@ -200,10 +251,10 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <ImageUsageRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       // usageHint affects CSS classes via theme, not a data attribute
@@ -219,14 +270,14 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update Icon name', async () => {
       function IconUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'icon-1', component: { Icon: { name: { literalString: 'home' } } } },
+                {id: 'icon-1', component: {Icon: {name: {literalString: 'home'}}}},
               ]),
               createBeginRendering('icon-1'),
             ]);
@@ -234,7 +285,7 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'icon-1', component: { Icon: { name: { literalString: 'settings' } } } },
+                {id: 'icon-1', component: {Icon: {name: {literalString: 'settings'}}}},
               ]),
             ]);
           }
@@ -248,10 +299,10 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <IconUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(container.querySelector('.g-icon')).toHaveTextContent('home');
@@ -266,15 +317,21 @@ describe('Property Updates via surfaceUpdate', () => {
   describe('Interactive Components', () => {
     it('should update Button child text', async () => {
       function ButtonUpdateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'btn-text', component: { Text: { text: { literalString: 'Click me' } , usageHint: 'body' } } },
-                { id: 'btn-1', component: { Button: { child: 'btn-text', action: { name: 'submit' } } } },
+                {
+                  id: 'btn-text',
+                  component: {Text: {text: {literalString: 'Click me'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'btn-1',
+                  component: {Button: {child: 'btn-text', action: {name: 'submit'}}},
+                },
               ]),
               createBeginRendering('btn-1'),
             ]);
@@ -282,8 +339,14 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'btn-text', component: { Text: { text: { literalString: 'Submit now' } , usageHint: 'body' } } },
-                { id: 'btn-1', component: { Button: { child: 'btn-text', action: { name: 'submit' } } } },
+                {
+                  id: 'btn-text',
+                  component: {Text: {text: {literalString: 'Submit now'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'btn-1',
+                  component: {Button: {child: 'btn-text', action: {name: 'submit'}}},
+                },
               ]),
             ]);
           }
@@ -300,28 +363,31 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <ButtonUpdateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
-      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Click me'})).toBeInTheDocument();
 
       await waitFor(() => {
         expect(screen.getByTestId('stage')).toHaveTextContent('updated');
-        expect(screen.getByRole('button', { name: 'Submit now' })).toBeInTheDocument();
-        expect(screen.queryByRole('button', { name: 'Click me' })).not.toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Submit now'})).toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Click me'})).not.toBeInTheDocument();
       });
     });
 
     it('should update TextField label', async () => {
       function TextFieldLabelRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'field-1', component: { TextField: { label: { literalString: 'Username' } } } },
+                {
+                  id: 'field-1',
+                  component: {TextField: {label: {literalString: 'Username'}}},
+                },
               ]),
               createBeginRendering('field-1'),
             ]);
@@ -329,7 +395,10 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'field-1', component: { TextField: { label: { literalString: 'Email address' } } } },
+                {
+                  id: 'field-1',
+                  component: {TextField: {label: {literalString: 'Email address'}}},
+                },
               ]),
             ]);
           }
@@ -346,7 +415,7 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <TextFieldLabelRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Username')).toBeInTheDocument();
@@ -360,14 +429,22 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update CheckBox label', async () => {
       function CheckBoxLabelRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'cb-1', component: { CheckBox: { label: { literalString: 'Accept terms' }, value: { literalBoolean: false } } } },
+                {
+                  id: 'cb-1',
+                  component: {
+                    CheckBox: {
+                      label: {literalString: 'Accept terms'},
+                      value: {literalBoolean: false},
+                    },
+                  },
+                },
               ]),
               createBeginRendering('cb-1'),
             ]);
@@ -375,7 +452,15 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'cb-1', component: { CheckBox: { label: { literalString: 'I agree to the terms and conditions' }, value: { literalBoolean: false } } } },
+                {
+                  id: 'cb-1',
+                  component: {
+                    CheckBox: {
+                      label: {literalString: 'I agree to the terms and conditions'},
+                      value: {literalBoolean: false},
+                    },
+                  },
+                },
               ]),
             ]);
           }
@@ -392,7 +477,7 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <CheckBoxLabelRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByText('Accept terms')).toBeInTheDocument();
@@ -406,14 +491,22 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update CheckBox checked state', async () => {
       function CheckBoxStateRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'cb-1', component: { CheckBox: { label: { literalString: 'Option' }, value: { literalBoolean: false } } } },
+                {
+                  id: 'cb-1',
+                  component: {
+                    CheckBox: {
+                      label: {literalString: 'Option'},
+                      value: {literalBoolean: false},
+                    },
+                  },
+                },
               ]),
               createBeginRendering('cb-1'),
             ]);
@@ -421,7 +514,15 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'cb-1', component: { CheckBox: { label: { literalString: 'Option' }, value: { literalBoolean: true } } } },
+                {
+                  id: 'cb-1',
+                  component: {
+                    CheckBox: {
+                      label: {literalString: 'Option'},
+                      value: {literalBoolean: true},
+                    },
+                  },
+                },
               ]),
             ]);
           }
@@ -438,7 +539,7 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <CheckBoxStateRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByRole('checkbox')).not.toBeChecked();
@@ -451,7 +552,7 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update Slider value', async () => {
       function SliderValueRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
@@ -462,7 +563,7 @@ describe('Property Updates via surfaceUpdate', () => {
                   id: 'slider-1',
                   component: {
                     Slider: {
-                      value: { literalNumber: 25 },
+                      value: {literalNumber: 25},
                       minValue: 0,
                       maxValue: 100,
                     },
@@ -479,7 +580,7 @@ describe('Property Updates via surfaceUpdate', () => {
                   id: 'slider-1',
                   component: {
                     Slider: {
-                      value: { literalNumber: 75 },
+                      value: {literalNumber: 75},
                       minValue: 0,
                       maxValue: 100,
                     },
@@ -501,7 +602,7 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <SliderValueRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(screen.getByRole('slider')).toHaveValue('25');
@@ -514,7 +615,7 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update Slider min and max values', async () => {
       function SliderRangeRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
@@ -525,7 +626,7 @@ describe('Property Updates via surfaceUpdate', () => {
                   id: 'slider-1',
                   component: {
                     Slider: {
-                      value: { literalNumber: 50 },
+                      value: {literalNumber: 50},
                       minValue: 0,
                       maxValue: 100,
                     },
@@ -542,7 +643,7 @@ describe('Property Updates via surfaceUpdate', () => {
                   id: 'slider-1',
                   component: {
                     Slider: {
-                      value: { literalNumber: 50 },
+                      value: {literalNumber: 50},
                       minValue: 10,
                       maxValue: 200,
                     },
@@ -564,7 +665,7 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <SliderRangeRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       const slider = screen.getByRole('slider');
@@ -582,15 +683,23 @@ describe('Property Updates via surfaceUpdate', () => {
   describe('Layout Components', () => {
     it('should update Column alignment', async () => {
       function ColumnAlignmentRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-                { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] }, alignment: 'start' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'col-1',
+                  component: {
+                    Column: {children: {explicitList: ['text-1']}, alignment: 'start'},
+                  },
+                },
               ]),
               createBeginRendering('col-1'),
             ]);
@@ -598,8 +707,16 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-                { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] }, alignment: 'center' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'col-1',
+                  component: {
+                    Column: {children: {explicitList: ['text-1']}, alignment: 'center'},
+                  },
+                },
               ]),
             ]);
           }
@@ -613,10 +730,10 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <ColumnAlignmentRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(container.querySelector('.a2ui-column')).toHaveAttribute('data-alignment', 'start');
@@ -629,15 +746,23 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update Column distribution', async () => {
       function ColumnDistributionRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-                { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] }, distribution: 'start' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'col-1',
+                  component: {
+                    Column: {children: {explicitList: ['text-1']}, distribution: 'start'},
+                  },
+                },
               ]),
               createBeginRendering('col-1'),
             ]);
@@ -645,8 +770,19 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-                { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] }, distribution: 'spaceBetween' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'col-1',
+                  component: {
+                    Column: {
+                      children: {explicitList: ['text-1']},
+                      distribution: 'spaceBetween',
+                    },
+                  },
+                },
               ]),
             ]);
           }
@@ -660,31 +796,42 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <ColumnDistributionRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(container.querySelector('.a2ui-column')).toHaveAttribute('data-distribution', 'start');
 
       await waitFor(() => {
         expect(screen.getByTestId('stage')).toHaveTextContent('updated');
-        expect(container.querySelector('.a2ui-column')).toHaveAttribute('data-distribution', 'spaceBetween');
+        expect(container.querySelector('.a2ui-column')).toHaveAttribute(
+          'data-distribution',
+          'spaceBetween',
+        );
       });
     });
 
     it('should update Row alignment', async () => {
       function RowAlignmentRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-                { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, alignment: 'start' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'row-1',
+                  component: {
+                    Row: {children: {explicitList: ['text-1']}, alignment: 'start'},
+                  },
+                },
               ]),
               createBeginRendering('row-1'),
             ]);
@@ -692,8 +839,14 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-                { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, alignment: 'end' } } },
+                {
+                  id: 'text-1',
+                  component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'row-1',
+                  component: {Row: {children: {explicitList: ['text-1']}, alignment: 'end'}},
+                },
               ]),
             ]);
           }
@@ -707,10 +860,10 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <RowAlignmentRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(container.querySelector('.a2ui-row')).toHaveAttribute('data-alignment', 'start');
@@ -723,15 +876,23 @@ describe('Property Updates via surfaceUpdate', () => {
 
     it('should update List direction', async () => {
       function ListDirectionRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'item-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-                { id: 'list-1', component: { List: { children: { explicitList: ['item-1'] }, direction: 'vertical' } } },
+                {
+                  id: 'item-1',
+                  component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'list-1',
+                  component: {
+                    List: {children: {explicitList: ['item-1']}, direction: 'vertical'},
+                  },
+                },
               ]),
               createBeginRendering('list-1'),
             ]);
@@ -739,8 +900,16 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'item-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-                { id: 'list-1', component: { List: { children: { explicitList: ['item-1'] }, direction: 'horizontal' } } },
+                {
+                  id: 'item-1',
+                  component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'list-1',
+                  component: {
+                    List: {children: {explicitList: ['item-1']}, direction: 'horizontal'},
+                  },
+                },
               ]),
             ]);
           }
@@ -754,17 +923,20 @@ describe('Property Updates via surfaceUpdate', () => {
         );
       }
 
-      const { container } = render(
+      const {container} = render(
         <A2UIProvider>
           <ListDirectionRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
       expect(container.querySelector('.a2ui-list')).toHaveAttribute('data-direction', 'vertical');
 
       await waitFor(() => {
         expect(screen.getByTestId('stage')).toHaveTextContent('updated');
-        expect(container.querySelector('.a2ui-list')).toHaveAttribute('data-direction', 'horizontal');
+        expect(container.querySelector('.a2ui-list')).toHaveAttribute(
+          'data-direction',
+          'horizontal',
+        );
       });
     });
   });
@@ -772,19 +944,24 @@ describe('Property Updates via surfaceUpdate', () => {
   describe('Complex Components', () => {
     it('should update Tabs titles', async () => {
       function TabsTitleRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'content-1', component: { Text: { text: { literalString: 'Tab content' } , usageHint: 'body' } } },
+                {
+                  id: 'content-1',
+                  component: {
+                    Text: {text: {literalString: 'Tab content'}, usageHint: 'body'},
+                  },
+                },
                 {
                   id: 'tabs-1',
                   component: {
                     Tabs: {
-                      tabItems: [{ title: { literalString: 'Tab A' }, child: 'content-1' }],
+                      tabItems: [{title: {literalString: 'Tab A'}, child: 'content-1'}],
                     },
                   },
                 },
@@ -795,12 +972,17 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'content-1', component: { Text: { text: { literalString: 'Tab content' } , usageHint: 'body' } } },
+                {
+                  id: 'content-1',
+                  component: {
+                    Text: {text: {literalString: 'Tab content'}, usageHint: 'body'},
+                  },
+                },
                 {
                   id: 'tabs-1',
                   component: {
                     Tabs: {
-                      tabItems: [{ title: { literalString: 'Renamed Tab' }, child: 'content-1' }],
+                      tabItems: [{title: {literalString: 'Renamed Tab'}, child: 'content-1'}],
                     },
                   },
                 },
@@ -820,33 +1002,36 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <TabsTitleRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
-      expect(screen.getByRole('button', { name: 'Tab A' })).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Tab A'})).toBeInTheDocument();
 
       await waitFor(() => {
         expect(screen.getByTestId('stage')).toHaveTextContent('updated');
-        expect(screen.getByRole('button', { name: 'Renamed Tab' })).toBeInTheDocument();
-        expect(screen.queryByRole('button', { name: 'Tab A' })).not.toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Renamed Tab'})).toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Tab A'})).not.toBeInTheDocument();
       });
     });
 
     it('should add new tabs via surfaceUpdate', async () => {
       function TabsAddRenderer() {
-        const { processMessages } = useA2UI();
+        const {processMessages} = useA2UI();
         const [stage, setStage] = React.useState<'initial' | 'updated'>('initial');
 
         useEffect(() => {
           if (stage === 'initial') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'content-1', component: { Text: { text: { literalString: 'Content 1' } , usageHint: 'body' } } },
+                {
+                  id: 'content-1',
+                  component: {Text: {text: {literalString: 'Content 1'}, usageHint: 'body'}},
+                },
                 {
                   id: 'tabs-1',
                   component: {
                     Tabs: {
-                      tabItems: [{ title: { literalString: 'Tab 1' }, child: 'content-1' }],
+                      tabItems: [{title: {literalString: 'Tab 1'}, child: 'content-1'}],
                     },
                   },
                 },
@@ -857,15 +1042,21 @@ describe('Property Updates via surfaceUpdate', () => {
           } else if (stage === 'updated') {
             processMessages([
               createSurfaceUpdate([
-                { id: 'content-1', component: { Text: { text: { literalString: 'Content 1' } , usageHint: 'body' } } },
-                { id: 'content-2', component: { Text: { text: { literalString: 'Content 2' } , usageHint: 'body' } } },
+                {
+                  id: 'content-1',
+                  component: {Text: {text: {literalString: 'Content 1'}, usageHint: 'body'}},
+                },
+                {
+                  id: 'content-2',
+                  component: {Text: {text: {literalString: 'Content 2'}, usageHint: 'body'}},
+                },
                 {
                   id: 'tabs-1',
                   component: {
                     Tabs: {
                       tabItems: [
-                        { title: { literalString: 'Tab 1' }, child: 'content-1' },
-                        { title: { literalString: 'Tab 2' }, child: 'content-2' },
+                        {title: {literalString: 'Tab 1'}, child: 'content-1'},
+                        {title: {literalString: 'Tab 2'}, child: 'content-2'},
                       ],
                     },
                   },
@@ -886,16 +1077,16 @@ describe('Property Updates via surfaceUpdate', () => {
       render(
         <A2UIProvider>
           <TabsAddRenderer />
-        </A2UIProvider>
+        </A2UIProvider>,
       );
 
-      expect(screen.getByRole('button', { name: 'Tab 1' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'Tab 2' })).not.toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Tab 1'})).toBeInTheDocument();
+      expect(screen.queryByRole('button', {name: 'Tab 2'})).not.toBeInTheDocument();
 
       await waitFor(() => {
         expect(screen.getByTestId('stage')).toHaveTextContent('updated');
-        expect(screen.getByRole('button', { name: 'Tab 1' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Tab 2' })).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Tab 1'})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Tab 2'})).toBeInTheDocument();
       });
     });
   });
diff --git a/renderers/react/tests/v0_8/integration/templates.test.tsx b/renderers/react/tests/v0_8/integration/templates.test.tsx
index f85b92fa9..c738b7275 100644
--- a/renderers/react/tests/v0_8/integration/templates.test.tsx
+++ b/renderers/react/tests/v0_8/integration/templates.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import React, { useEffect } from 'react';
-import { A2UIProvider, A2UIRenderer, useA2UI } from '../../../src/v0_8';
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import React, {useEffect} from 'react';
+import {A2UIProvider, A2UIRenderer, useA2UI} from '../../../src/v0_8';
 import type * as Types from '@a2ui/web_core/types/types';
 import {
   createSurfaceUpdate,
@@ -37,18 +37,14 @@ import {
 describe('Template Integration', () => {
   it('should expand template with dataBinding to array', () => {
     function TemplateRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
           createDataModelUpdateSpec([
             {
               key: 'items',
-              valueString: JSON.stringify([
-                { name: 'Item A' },
-                { name: 'Item B' },
-                { name: 'Item C' },
-              ]),
+              valueString: JSON.stringify([{name: 'Item A'}, {name: 'Item B'}, {name: 'Item C'}]),
             },
           ]),
           createSurfaceUpdate([
@@ -68,7 +64,7 @@ describe('Template Integration', () => {
             {
               id: 'item-template',
               component: {
-                Text: { text: { path: 'name' }, usageHint: 'body' },
+                Text: {text: {path: 'name'}, usageHint: 'body'},
               },
             },
           ]),
@@ -82,7 +78,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider>
         <TemplateRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Item A')).toBeInTheDocument();
@@ -92,7 +88,7 @@ describe('Template Integration', () => {
 
   it('should handle template with primitive array values using path "."', () => {
     function PrimitiveTemplateRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
@@ -119,7 +115,7 @@ describe('Template Integration', () => {
             {
               id: 'tag-template',
               component: {
-                Text: { text: { path: '.' }, usageHint: 'body' },
+                Text: {text: {path: '.'}, usageHint: 'body'},
               },
             },
           ]),
@@ -133,7 +129,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider>
         <PrimitiveTemplateRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('travel')).toBeInTheDocument();
@@ -143,7 +139,7 @@ describe('Template Integration', () => {
 
   it('should expand nested templates with layered data contexts', () => {
     function NestedTemplateRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
@@ -151,8 +147,8 @@ describe('Template Integration', () => {
             {
               key: 'days',
               valueString: JSON.stringify([
-                { title: 'Day 1', activities: ['Morning Walk', 'Museum Visit'] },
-                { title: 'Day 2', activities: ['Market Trip'] },
+                {title: 'Day 1', activities: ['Morning Walk', 'Museum Visit']},
+                {title: 'Day 2', activities: ['Market Trip']},
               ]),
             },
           ]),
@@ -174,14 +170,14 @@ describe('Template Integration', () => {
               id: 'day-template',
               component: {
                 Column: {
-                  children: { explicitList: ['day-title', 'activity-list'] },
+                  children: {explicitList: ['day-title', 'activity-list']},
                 },
               },
             },
             {
               id: 'day-title',
               component: {
-                Text: { text: { path: 'title' }, usageHint: 'body' },
+                Text: {text: {path: 'title'}, usageHint: 'body'},
               },
             },
             {
@@ -200,7 +196,7 @@ describe('Template Integration', () => {
             {
               id: 'activity-template',
               component: {
-                Text: { text: { path: '.' }, usageHint: 'body' },
+                Text: {text: {path: '.'}, usageHint: 'body'},
               },
             },
           ]),
@@ -214,7 +210,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider>
         <NestedTemplateRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Day 1')).toBeInTheDocument();
@@ -226,7 +222,7 @@ describe('Template Integration', () => {
 
   it('should rebuild template when data arrives after components', async () => {
     function LateDataRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
       const [step, setStep] = React.useState(0);
 
       useEffect(() => {
@@ -249,7 +245,7 @@ describe('Template Integration', () => {
               {
                 id: 'item-template',
                 component: {
-                  Text: { text: { path: 'name' }, usageHint: 'body' },
+                  Text: {text: {path: 'name'}, usageHint: 'body'},
                 },
               },
             ]),
@@ -262,10 +258,7 @@ describe('Template Integration', () => {
               createDataModelUpdateSpec([
                 {
                   key: 'items',
-                  valueString: JSON.stringify([
-                    { name: 'Late Item 1' },
-                    { name: 'Late Item 2' },
-                  ]),
+                  valueString: JSON.stringify([{name: 'Late Item 1'}, {name: 'Late Item 2'}]),
                 },
               ]),
             ]);
@@ -279,7 +272,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider>
         <LateDataRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     await waitFor(() => {
@@ -294,7 +287,7 @@ describe('Template Integration', () => {
     // Use a top-level valueMap with flat string values that the processor converts to a Map,
     // combined with a JSON-encoded array for the iterable data.
     function MapTemplateRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
@@ -302,8 +295,8 @@ describe('Template Integration', () => {
             {
               key: 'users',
               valueString: JSON.stringify([
-                { name: 'Alice', role: 'Admin' },
-                { name: 'Bob', role: 'User' },
+                {name: 'Alice', role: 'Admin'},
+                {name: 'Bob', role: 'User'},
               ]),
             },
           ]),
@@ -324,27 +317,27 @@ describe('Template Integration', () => {
             {
               id: 'user-card',
               component: {
-                Card: { child: 'user-info' },
+                Card: {child: 'user-info'},
               },
             },
             {
               id: 'user-info',
               component: {
                 Column: {
-                  children: { explicitList: ['user-name', 'user-role'] },
+                  children: {explicitList: ['user-name', 'user-role']},
                 },
               },
             },
             {
               id: 'user-name',
               component: {
-                Text: { text: { path: 'name' }, usageHint: 'body' },
+                Text: {text: {path: 'name'}, usageHint: 'body'},
               },
             },
             {
               id: 'user-role',
               component: {
-                Text: { text: { path: 'role' }, usageHint: 'body' },
+                Text: {text: {path: 'role'}, usageHint: 'body'},
               },
             },
           ]),
@@ -358,7 +351,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider>
         <MapTemplateRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Alice')).toBeInTheDocument();
@@ -371,7 +364,7 @@ describe('Template Integration', () => {
     const mockOnAction = vi.fn();
 
     function ComplexTemplateRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
@@ -379,8 +372,8 @@ describe('Template Integration', () => {
             {
               key: 'products',
               valueString: JSON.stringify([
-                { id: 'prod-1', name: 'Widget', price: '$10' },
-                { id: 'prod-2', name: 'Gadget', price: '$20' },
+                {id: 'prod-1', name: 'Widget', price: '$10'},
+                {id: 'prod-2', name: 'Gadget', price: '$20'},
               ]),
             },
           ]),
@@ -402,20 +395,20 @@ describe('Template Integration', () => {
               id: 'product-row',
               component: {
                 Row: {
-                  children: { explicitList: ['product-name', 'product-price', 'buy-button'] },
+                  children: {explicitList: ['product-name', 'product-price', 'buy-button']},
                 },
               },
             },
             {
               id: 'product-name',
               component: {
-                Text: { text: { path: 'name' }, usageHint: 'body' },
+                Text: {text: {path: 'name'}, usageHint: 'body'},
               },
             },
             {
               id: 'product-price',
               component: {
-                Text: { text: { path: 'price' }, usageHint: 'body' },
+                Text: {text: {path: 'price'}, usageHint: 'body'},
               },
             },
             {
@@ -425,9 +418,7 @@ describe('Template Integration', () => {
                   child: 'buy-text',
                   action: {
                     name: 'buy',
-                    context: [
-                      { key: 'productId', value: { path: 'id' } },
-                    ],
+                    context: [{key: 'productId', value: {path: 'id'}}],
                   },
                 },
               },
@@ -435,7 +426,7 @@ describe('Template Integration', () => {
             {
               id: 'buy-text',
               component: {
-                Text: { text: { literalString: 'Buy' }, usageHint: 'body' },
+                Text: {text: {literalString: 'Buy'}, usageHint: 'body'},
               },
             },
           ]),
@@ -449,7 +440,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider onAction={mockOnAction}>
         <ComplexTemplateRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Widget')).toBeInTheDocument();
@@ -457,7 +448,7 @@ describe('Template Integration', () => {
     expect(screen.getByText('Gadget')).toBeInTheDocument();
     expect(screen.getByText('$20')).toBeInTheDocument();
 
-    const buyButtons = screen.getAllByRole('button', { name: 'Buy' });
+    const buyButtons = screen.getAllByRole('button', {name: 'Buy'});
     expect(buyButtons).toHaveLength(2);
 
     fireEvent.click(getElement(buyButtons, 0));
@@ -469,7 +460,7 @@ describe('Template Integration', () => {
 
   it('should handle empty data array gracefully', () => {
     function EmptyDataRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
 
       useEffect(() => {
         processMessages([
@@ -484,14 +475,14 @@ describe('Template Integration', () => {
               id: 'root',
               component: {
                 Column: {
-                  children: { explicitList: ['header', 'item-list'] },
+                  children: {explicitList: ['header', 'item-list']},
                 },
               },
             },
             {
               id: 'header',
               component: {
-                Text: { text: { literalString: 'Items:' }, usageHint: 'body' },
+                Text: {text: {literalString: 'Items:'}, usageHint: 'body'},
               },
             },
             {
@@ -510,7 +501,7 @@ describe('Template Integration', () => {
             {
               id: 'item-template',
               component: {
-                Text: { text: { path: 'name' }, usageHint: 'body' },
+                Text: {text: {path: 'name'}, usageHint: 'body'},
               },
             },
           ]),
@@ -524,7 +515,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider>
         <EmptyDataRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Items:')).toBeInTheDocument();
@@ -532,7 +523,7 @@ describe('Template Integration', () => {
 
   it('should update template when data changes', async () => {
     function DataChangeRenderer() {
-      const { processMessages } = useA2UI();
+      const {processMessages} = useA2UI();
       const [step, setStep] = React.useState(0);
 
       useEffect(() => {
@@ -541,7 +532,7 @@ describe('Template Integration', () => {
             createDataModelUpdateSpec([
               {
                 key: 'items',
-                valueString: JSON.stringify([{ name: 'Original' }]),
+                valueString: JSON.stringify([{name: 'Original'}]),
               },
             ]),
             createSurfaceUpdate([
@@ -561,7 +552,7 @@ describe('Template Integration', () => {
               {
                 id: 'item-template',
                 component: {
-                  Text: { text: { path: 'name' }, usageHint: 'body' },
+                  Text: {text: {path: 'name'}, usageHint: 'body'},
                 },
               },
             ]),
@@ -574,10 +565,7 @@ describe('Template Integration', () => {
               createDataModelUpdateSpec([
                 {
                   key: 'items',
-                  valueString: JSON.stringify([
-                    { name: 'Updated 1' },
-                    { name: 'Updated 2' },
-                  ]),
+                  valueString: JSON.stringify([{name: 'Updated 1'}, {name: 'Updated 2'}]),
                 },
               ]),
             ]);
@@ -591,7 +579,7 @@ describe('Template Integration', () => {
     render(
       <A2UIProvider>
         <DataChangeRenderer />
-      </A2UIProvider>
+      </A2UIProvider>,
     );
 
     expect(screen.getByText('Original')).toBeInTheDocument();
diff --git a/renderers/react/tests/v0_8/unit/components/Button.test.tsx b/renderers/react/tests/v0_8/unit/components/Button.test.tsx
index 0edda1d28..af376cb45 100644
--- a/renderers/react/tests/v0_8/unit/components/Button.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Button.test.tsx
@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering, getMockCallArg } from '../../utils';
+import {
+  TestWrapper,
+  TestRenderer,
+  createSurfaceUpdate,
+  createBeginRendering,
+  getMockCallArg,
+} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -37,11 +43,19 @@ function createButtonMessages(
   id: string,
   props: {
     actionName: string;
-    actionContext?: Array<{ key: string; value: { literalString?: string; literalNumber?: number; literalBoolean?: boolean; path?: string } }>;
+    actionContext?: Array<{
+      key: string;
+      value: {
+        literalString?: string;
+        literalNumber?: number;
+        literalBoolean?: boolean;
+        path?: string;
+      };
+    }>;
     childText?: string;
     primary?: boolean;
   },
-  surfaceId = '@default'
+  surfaceId = '@default',
 ): Types.ServerToClientMessage[] {
   const textId = `${id}-text`;
 
@@ -53,8 +67,8 @@ function createButtonMessages(
           id: textId,
           component: {
             Text: {
-              text: { literalString: props.childText ?? 'Click me' },
-            usageHint: 'body',
+              text: {literalString: props.childText ?? 'Click me'},
+              usageHint: 'body',
             },
           },
         },
@@ -73,7 +87,7 @@ function createButtonMessages(
           },
         },
       ],
-      surfaceId
+      surfaceId,
     ),
     createBeginRendering(id, surfaceId),
   ];
@@ -82,12 +96,12 @@ function createButtonMessages(
 describe('Button Component', () => {
   describe('Basic Rendering', () => {
     it('should render a button element', () => {
-      const messages = createButtonMessages('btn-1', { actionName: 'submit' });
+      const messages = createButtonMessages('btn-1', {actionName: 'submit'});
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const button = container.querySelector('button');
@@ -96,12 +110,12 @@ describe('Button Component', () => {
     });
 
     it('should render with wrapper div having correct class', () => {
-      const messages = createButtonMessages('btn-1', { actionName: 'submit' });
+      const messages = createButtonMessages('btn-1', {actionName: 'submit'});
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-button');
@@ -115,10 +129,10 @@ describe('Button Component', () => {
         childText: 'Submit Form',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const button = container.querySelector('button');
@@ -137,22 +151,22 @@ describe('Button Component', () => {
         childText: 'Cancel',
       });
 
-      const { container: container1 } = render(
+      const {container: container1} = render(
         <TestWrapper>
           <TestRenderer messages={messages1} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(container1.querySelector('button')?.textContent).toContain('Save');
       expect(container2.querySelector('button')?.textContent).toContain('Cancel');
       // Verify they're different
       expect(container1.querySelector('button')?.textContent).not.toBe(
-        container2.querySelector('button')?.textContent
+        container2.querySelector('button')?.textContent,
       );
     });
   });
@@ -160,12 +174,12 @@ describe('Button Component', () => {
   describe('Action Handling', () => {
     it('should call onAction with correct action name when clicked', () => {
       const mockOnAction = vi.fn();
-      const messages = createButtonMessages('btn-1', { actionName: 'submit-form' });
+      const messages = createButtonMessages('btn-1', {actionName: 'submit-form'});
 
       render(
         <TestWrapper onAction={mockOnAction}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const button = screen.getByRole('button');
@@ -186,15 +200,15 @@ describe('Button Component', () => {
       const messages = createButtonMessages('btn-1', {
         actionName: 'delete-item',
         actionContext: [
-          { key: 'itemId', value: { literalString: '123' } },
-          { key: 'confirmed', value: { literalBoolean: true } },
+          {key: 'itemId', value: {literalString: '123'}},
+          {key: 'confirmed', value: {literalBoolean: true}},
         ],
       });
 
       render(
         <TestWrapper onAction={mockOnAction}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByRole('button'));
@@ -211,12 +225,12 @@ describe('Button Component', () => {
 
     it('should not call onAction before click', () => {
       const mockOnAction = vi.fn();
-      const messages = createButtonMessages('btn-1', { actionName: 'test' });
+      const messages = createButtonMessages('btn-1', {actionName: 'test'});
 
       render(
         <TestWrapper onAction={mockOnAction}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // No click - should not have been called
@@ -225,12 +239,12 @@ describe('Button Component', () => {
 
     it('should call onAction multiple times for multiple clicks', () => {
       const mockOnAction = vi.fn();
-      const messages = createButtonMessages('btn-1', { actionName: 'increment' });
+      const messages = createButtonMessages('btn-1', {actionName: 'increment'});
 
       render(
         <TestWrapper onAction={mockOnAction}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const button = screen.getByRole('button');
@@ -244,12 +258,12 @@ describe('Button Component', () => {
 
   describe('Accessibility', () => {
     it('should be focusable', () => {
-      const messages = createButtonMessages('btn-1', { actionName: 'action' });
+      const messages = createButtonMessages('btn-1', {actionName: 'action'});
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const button = screen.getByRole('button');
@@ -259,12 +273,12 @@ describe('Button Component', () => {
 
     it('should be clickable via role', () => {
       const mockOnAction = vi.fn();
-      const messages = createButtonMessages('btn-1', { actionName: 'action' });
+      const messages = createButtonMessages('btn-1', {actionName: 'action'});
 
       render(
         <TestWrapper onAction={mockOnAction}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Using getByRole ensures the button has proper ARIA role
diff --git a/renderers/react/tests/v0_8/unit/components/Card.test.tsx b/renderers/react/tests/v0_8/unit/components/Card.test.tsx
index d62f05e53..a29e390a3 100644
--- a/renderers/react/tests/v0_8/unit/components/Card.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Card.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering } from '../../utils';
+import {TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -29,16 +29,19 @@ describe('Card Component', () => {
     it('should render a section element', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Card content' } , usageHint: 'body' } } },
-          { id: 'card-1', component: { Card: { child: 'text-1' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Card content'}, usageHint: 'body'}},
+          },
+          {id: 'card-1', component: {Card: {child: 'text-1'}}},
         ]),
         createBeginRendering('card-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -48,16 +51,19 @@ describe('Card Component', () => {
     it('should render with wrapper div', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-          { id: 'card-1', component: { Card: { child: 'text-1' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+          },
+          {id: 'card-1', component: {Card: {child: 'text-1'}}},
         ]),
         createBeginRendering('card-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-card');
@@ -69,8 +75,11 @@ describe('Card Component', () => {
     it('should render child Text component', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Card content' } , usageHint: 'body' } } },
-          { id: 'card-1', component: { Card: { child: 'text-1' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Card content'}, usageHint: 'body'}},
+          },
+          {id: 'card-1', component: {Card: {child: 'text-1'}}},
         ]),
         createBeginRendering('card-1'),
       ];
@@ -78,7 +87,7 @@ describe('Card Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByText('Card content')).toBeInTheDocument();
@@ -87,9 +96,12 @@ describe('Card Component', () => {
     it('should render nested Button in Card', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'btn-text', component: { Text: { text: { literalString: 'Click me' } , usageHint: 'body' } } },
-          { id: 'btn-1', component: { Button: { child: 'btn-text', action: { name: 'click' } } } },
-          { id: 'card-1', component: { Card: { child: 'btn-1' } } },
+          {
+            id: 'btn-text',
+            component: {Text: {text: {literalString: 'Click me'}, usageHint: 'body'}},
+          },
+          {id: 'btn-1', component: {Button: {child: 'btn-text', action: {name: 'click'}}}},
+          {id: 'card-1', component: {Card: {child: 'btn-1'}}},
         ]),
         createBeginRendering('card-1'),
       ];
@@ -97,7 +109,7 @@ describe('Card Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByRole('button')).toBeInTheDocument();
@@ -109,16 +121,19 @@ describe('Card Component', () => {
     it('should apply theme classes to section', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-          { id: 'card-1', component: { Card: { child: 'text-1' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+          },
+          {id: 'card-1', component: {Card: {child: 'text-1'}}},
         ]),
         createBeginRendering('card-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -133,16 +148,19 @@ describe('Card Component', () => {
     it('should have correct DOM structure', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Content' } , usageHint: 'body' } } },
-          { id: 'card-1', component: { Card: { child: 'text-1' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Content'}, usageHint: 'body'}},
+          },
+          {id: 'card-1', component: {Card: {child: 'text-1'}}},
         ]),
         createBeginRendering('card-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-card');
diff --git a/renderers/react/tests/v0_8/unit/components/CheckBox.test.tsx b/renderers/react/tests/v0_8/unit/components/CheckBox.test.tsx
index 42a91f129..55edc7d21 100644
--- a/renderers/react/tests/v0_8/unit/components/CheckBox.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/CheckBox.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
 
 /**
  * CheckBox tests following A2UI specification.
@@ -27,14 +27,14 @@ describe('CheckBox Component', () => {
   describe('Basic Rendering', () => {
     it('should render a checkbox input', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Accept terms' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Accept terms'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const checkbox = container.querySelector('input[type="checkbox"]');
@@ -43,14 +43,14 @@ describe('CheckBox Component', () => {
 
     it('should render with wrapper div', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Subscribe' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Subscribe'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-checkbox');
@@ -59,14 +59,14 @@ describe('CheckBox Component', () => {
 
     it('should render unchecked when value is false', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Option' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Option'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
@@ -75,14 +75,14 @@ describe('CheckBox Component', () => {
 
     it('should render checked when value is true', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Option' },
-        value: { literalBoolean: true },
+        label: {literalString: 'Option'},
+        value: {literalBoolean: true},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
@@ -91,27 +91,31 @@ describe('CheckBox Component', () => {
 
     it('should render different states for different value inputs', () => {
       const messagesTrue = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Checked option' },
-        value: { literalBoolean: true },
+        label: {literalString: 'Checked option'},
+        value: {literalBoolean: true},
       });
       const messagesFalse = createSimpleMessages('cb-2', 'CheckBox', {
-        label: { literalString: 'Unchecked option' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Unchecked option'},
+        value: {literalBoolean: false},
       });
 
-      const { container: containerTrue } = render(
+      const {container: containerTrue} = render(
         <TestWrapper>
           <TestRenderer messages={messagesTrue} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: containerFalse } = render(
+      const {container: containerFalse} = render(
         <TestWrapper>
           <TestRenderer messages={messagesFalse} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
-      const checkboxTrue = containerTrue.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      const checkboxFalse = containerFalse.querySelector('input[type="checkbox"]') as HTMLInputElement;
+      const checkboxTrue = containerTrue.querySelector(
+        'input[type="checkbox"]',
+      ) as HTMLInputElement;
+      const checkboxFalse = containerFalse.querySelector(
+        'input[type="checkbox"]',
+      ) as HTMLInputElement;
 
       expect(checkboxTrue.checked).toBe(true);
       expect(checkboxFalse.checked).toBe(false);
@@ -121,23 +125,23 @@ describe('CheckBox Component', () => {
 
     it('should render different labels for different inputs', () => {
       const messages1 = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'First Option' },
-        value: { literalBoolean: false },
+        label: {literalString: 'First Option'},
+        value: {literalBoolean: false},
       });
       const messages2 = createSimpleMessages('cb-2', 'CheckBox', {
-        label: { literalString: 'Second Option' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Second Option'},
+        value: {literalBoolean: false},
       });
 
-      const { container: container1 } = render(
+      const {container: container1} = render(
         <TestWrapper>
           <TestRenderer messages={messages1} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label1 = container1.querySelector('label');
@@ -152,14 +156,14 @@ describe('CheckBox Component', () => {
   describe('Label Rendering', () => {
     it('should render label (required field)', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Accept terms and conditions' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Accept terms and conditions'},
+        value: {literalBoolean: false},
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByText('Accept terms and conditions')).toBeInTheDocument();
@@ -167,14 +171,14 @@ describe('CheckBox Component', () => {
 
     it('should associate label with checkbox via htmlFor', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Remember me' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Remember me'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -186,14 +190,14 @@ describe('CheckBox Component', () => {
   describe('User Interaction', () => {
     it('should toggle checked state on click', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Toggle me' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Toggle me'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
@@ -208,18 +212,18 @@ describe('CheckBox Component', () => {
 
     it('should toggle via change event', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Option' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Option'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
-      fireEvent.change(checkbox, { target: { checked: true } });
+      fireEvent.change(checkbox, {target: {checked: true}});
 
       expect(checkbox.checked).toBe(true);
     });
@@ -228,14 +232,14 @@ describe('CheckBox Component', () => {
   describe('Theme Support', () => {
     it('should render within section container', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Option' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Option'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -247,14 +251,14 @@ describe('CheckBox Component', () => {
   describe('Structure', () => {
     it('should render checkbox before label (Lit structure)', () => {
       const messages = createSimpleMessages('cb-1', 'CheckBox', {
-        label: { literalString: 'Option label' },
-        value: { literalBoolean: false },
+        label: {literalString: 'Option label'},
+        value: {literalBoolean: false},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
diff --git a/renderers/react/tests/v0_8/unit/components/Column.test.tsx b/renderers/react/tests/v0_8/unit/components/Column.test.tsx
index 92f6cc1fb..8b1d41018 100644
--- a/renderers/react/tests/v0_8/unit/components/Column.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Column.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering } from '../../utils';
+import {TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -33,16 +33,19 @@ describe('Column Component', () => {
     it('should render a section element', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -52,16 +55,19 @@ describe('Column Component', () => {
     it('should render with wrapper div', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-column');
@@ -73,9 +79,18 @@ describe('Column Component', () => {
     it('should render child Text components', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Row 1' } , usageHint: 'body' } } },
-          { id: 'text-2', component: { Text: { text: { literalString: 'Row 2' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1', 'text-2'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Row 1'}, usageHint: 'body'}},
+          },
+          {
+            id: 'text-2',
+            component: {Text: {text: {literalString: 'Row 2'}, usageHint: 'body'}},
+          },
+          {
+            id: 'col-1',
+            component: {Column: {children: {explicitList: ['text-1', 'text-2']}}},
+          },
         ]),
         createBeginRendering('col-1'),
       ];
@@ -83,7 +98,7 @@ describe('Column Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByText('Row 1')).toBeInTheDocument();
@@ -92,16 +107,14 @@ describe('Column Component', () => {
 
     it('should render empty column with empty explicitList', () => {
       const messages: Types.ServerToClientMessage[] = [
-        createSurfaceUpdate([
-          { id: 'col-1', component: { Column: { children: { explicitList: [] } } } },
-        ]),
+        createSurfaceUpdate([{id: 'col-1', component: {Column: {children: {explicitList: []}}}}]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const col = container.querySelector('.a2ui-column');
@@ -113,16 +126,19 @@ describe('Column Component', () => {
     it('should default to stretch alignment', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-column');
@@ -131,20 +147,26 @@ describe('Column Component', () => {
 
     const alignments = ['start', 'center', 'end', 'stretch'] as const;
 
-    alignments.forEach((alignment) => {
+    alignments.forEach(alignment => {
       it(`should set data-alignment="${alignment}"`, () => {
         const messages: Types.ServerToClientMessage[] = [
           createSurfaceUpdate([
-            { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-            { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] }, alignment } } },
+            {
+              id: 'text-1',
+              component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+            },
+            {
+              id: 'col-1',
+              component: {Column: {children: {explicitList: ['text-1']}, alignment}},
+            },
           ]),
           createBeginRendering('col-1'),
         ];
 
-        const { container } = render(
+        const {container} = render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         const wrapper = container.querySelector('.a2ui-column');
@@ -157,38 +179,54 @@ describe('Column Component', () => {
     it('should default to start distribution', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-column');
       expect(wrapper?.getAttribute('data-distribution')).toBe('start');
     });
 
-    const distributions = ['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly'] as const;
+    const distributions = [
+      'start',
+      'center',
+      'end',
+      'spaceBetween',
+      'spaceAround',
+      'spaceEvenly',
+    ] as const;
 
-    distributions.forEach((distribution) => {
+    distributions.forEach(distribution => {
       it(`should set data-distribution="${distribution}"`, () => {
         const messages: Types.ServerToClientMessage[] = [
           createSurfaceUpdate([
-            { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-            { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] }, distribution } } },
+            {
+              id: 'text-1',
+              component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+            },
+            {
+              id: 'col-1',
+              component: {Column: {children: {explicitList: ['text-1']}, distribution}},
+            },
           ]),
           createBeginRendering('col-1'),
         ];
 
-        const { container } = render(
+        const {container} = render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         const wrapper = container.querySelector('.a2ui-column');
@@ -201,17 +239,20 @@ describe('Column Component', () => {
     it('should render Row inside Column', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Nested text' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['row-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Nested text'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
+          {id: 'col-1', component: {Column: {children: {explicitList: ['row-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(container.querySelector('.a2ui-column')).toBeInTheDocument();
@@ -224,16 +265,19 @@ describe('Column Component', () => {
     it('should apply theme classes to section', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -245,16 +289,19 @@ describe('Column Component', () => {
     it('should have correct DOM structure', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'col-1', component: {Column: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-column');
diff --git a/renderers/react/tests/v0_8/unit/components/DateTimeInput.test.tsx b/renderers/react/tests/v0_8/unit/components/DateTimeInput.test.tsx
index 93ca9850d..b3a1430ad 100644
--- a/renderers/react/tests/v0_8/unit/components/DateTimeInput.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/DateTimeInput.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, fireEvent} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
 
 /**
  * DateTimeInput tests following A2UI specification.
@@ -28,13 +28,13 @@ describe('DateTimeInput Component', () => {
   describe('Basic Rendering', () => {
     it('should render an input element', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -43,13 +43,13 @@ describe('DateTimeInput Component', () => {
 
     it('should render with wrapper div', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-datetime-input');
@@ -58,13 +58,13 @@ describe('DateTimeInput Component', () => {
 
     it('should render with initial value', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-06-20' },
+        value: {literalString: '2024-06-20'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
@@ -73,21 +73,21 @@ describe('DateTimeInput Component', () => {
 
     it('should render different values for different inputs', () => {
       const messages1 = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-01' },
+        value: {literalString: '2024-01-01'},
       });
       const messages2 = createSimpleMessages('dt-2', 'DateTimeInput', {
-        value: { literalString: '2024-12-31' },
+        value: {literalString: '2024-12-31'},
       });
 
-      const { container: container1 } = render(
+      const {container: container1} = render(
         <TestWrapper>
           <TestRenderer messages={messages1} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input1 = container1.querySelector('input') as HTMLInputElement;
@@ -102,13 +102,13 @@ describe('DateTimeInput Component', () => {
   describe('Input Type', () => {
     it('should render date input by default (enableDate=true, enableTime=false)', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -119,15 +119,15 @@ describe('DateTimeInput Component', () => {
 
     it('should render date input when enableDate=true', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
         enableDate: true,
         enableTime: false,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -136,15 +136,15 @@ describe('DateTimeInput Component', () => {
 
     it('should render time input when enableTime=true and enableDate=false', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '14:30' },
+        value: {literalString: '14:30'},
         enableDate: false,
         enableTime: true,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -154,15 +154,15 @@ describe('DateTimeInput Component', () => {
 
     it('should render datetime-local input when both enableDate and enableTime are true', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15T14:30' },
+        value: {literalString: '2024-01-15T14:30'},
         enableDate: true,
         enableTime: true,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -173,25 +173,25 @@ describe('DateTimeInput Component', () => {
 
     it('should render different input types for different configurations', () => {
       const messagesDate = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
         enableDate: true,
         enableTime: false,
       });
       const messagesTime = createSimpleMessages('dt-2', 'DateTimeInput', {
-        value: { literalString: '14:30' },
+        value: {literalString: '14:30'},
         enableDate: false,
         enableTime: true,
       });
 
-      const { container: containerDate } = render(
+      const {container: containerDate} = render(
         <TestWrapper>
           <TestRenderer messages={messagesDate} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: containerTime } = render(
+      const {container: containerTime} = render(
         <TestWrapper>
           <TestRenderer messages={messagesTime} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const inputDate = containerDate.querySelector('input');
@@ -206,15 +206,15 @@ describe('DateTimeInput Component', () => {
   describe('Label', () => {
     it('should render "Date" label for date input', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
         enableDate: true,
         enableTime: false,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -223,15 +223,15 @@ describe('DateTimeInput Component', () => {
 
     it('should render "Time" label for time input', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '14:30' },
+        value: {literalString: '14:30'},
         enableDate: false,
         enableTime: true,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -240,15 +240,15 @@ describe('DateTimeInput Component', () => {
 
     it('should render "Date & Time" label for datetime input', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15T14:30' },
+        value: {literalString: '2024-01-15T14:30'},
         enableDate: true,
         enableTime: true,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -257,13 +257,13 @@ describe('DateTimeInput Component', () => {
 
     it('should associate label with input via htmlFor', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -275,19 +275,19 @@ describe('DateTimeInput Component', () => {
   describe('User Interaction', () => {
     it('should update value on change', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
       expect(input.value).toBe('2024-01-15');
 
-      fireEvent.change(input, { target: { value: '2024-06-20' } });
+      fireEvent.change(input, {target: {value: '2024-06-20'}});
 
       expect(input.value).toBe('2024-06-20');
       expect(input.value).not.toBe('2024-01-15');
@@ -295,21 +295,21 @@ describe('DateTimeInput Component', () => {
 
     it('should update time value on change', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '10:00' },
+        value: {literalString: '10:00'},
         enableDate: false,
         enableTime: true,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
       expect(input.value).toBe('10:00');
 
-      fireEvent.change(input, { target: { value: '18:30' } });
+      fireEvent.change(input, {target: {value: '18:30'}});
 
       expect(input.value).toBe('18:30');
       expect(input.value).not.toBe('10:00');
@@ -319,13 +319,13 @@ describe('DateTimeInput Component', () => {
   describe('Structure', () => {
     it('should have correct DOM structure: div > section > label + input', () => {
       const messages = createSimpleMessages('dt-1', 'DateTimeInput', {
-        value: { literalString: '2024-01-15' },
+        value: {literalString: '2024-01-15'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-datetime-input');
diff --git a/renderers/react/tests/v0_8/unit/components/Divider.test.tsx b/renderers/react/tests/v0_8/unit/components/Divider.test.tsx
index 58900b01b..29b956015 100644
--- a/renderers/react/tests/v0_8/unit/components/Divider.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Divider.test.tsx
@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages, createSurfaceUpdate, createBeginRendering } from '../../utils';
+import {
+  TestWrapper,
+  TestRenderer,
+  createSimpleMessages,
+  createSurfaceUpdate,
+  createBeginRendering,
+} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -30,10 +36,10 @@ describe('Divider Component', () => {
     it('should render an hr element', () => {
       const messages = createSimpleMessages('div-1', 'Divider', {});
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const hr = container.querySelector('hr');
@@ -43,10 +49,10 @@ describe('Divider Component', () => {
     it('should render with wrapper div', () => {
       const messages = createSimpleMessages('div-1', 'Divider', {});
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-divider');
@@ -56,10 +62,10 @@ describe('Divider Component', () => {
     it('should render as self-closing element', () => {
       const messages = createSimpleMessages('div-1', 'Divider', {});
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const hr = container.querySelector('hr');
@@ -73,10 +79,10 @@ describe('Divider Component', () => {
         axis: 'horizontal',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const hr = container.querySelector('hr');
@@ -88,10 +94,10 @@ describe('Divider Component', () => {
         axis: 'vertical',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const hr = container.querySelector('hr');
@@ -103,10 +109,10 @@ describe('Divider Component', () => {
     it('should render hr element with theme classes applied', () => {
       const messages = createSimpleMessages('div-1', 'Divider', {});
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const hr = container.querySelector('hr');
@@ -119,10 +125,10 @@ describe('Divider Component', () => {
     it('should have correct DOM structure', () => {
       const messages = createSimpleMessages('div-1', 'Divider', {});
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-divider');
@@ -135,18 +141,21 @@ describe('Divider Component', () => {
     it('should render multiple dividers in a column', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'div-1', component: { Divider: {} } },
-          { id: 'div-2', component: { Divider: {} } },
-          { id: 'div-3', component: { Divider: {} } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['div-1', 'div-2', 'div-3'] } } } },
+          {id: 'div-1', component: {Divider: {}}},
+          {id: 'div-2', component: {Divider: {}}},
+          {id: 'div-3', component: {Divider: {}}},
+          {
+            id: 'col-1',
+            component: {Column: {children: {explicitList: ['div-1', 'div-2', 'div-3']}}},
+          },
         ]),
         createBeginRendering('col-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const dividers = container.querySelectorAll('.a2ui-divider');
diff --git a/renderers/react/tests/v0_8/unit/components/Icon.test.tsx b/renderers/react/tests/v0_8/unit/components/Icon.test.tsx
index 7b77918ae..0e7b20adc 100644
--- a/renderers/react/tests/v0_8/unit/components/Icon.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Icon.test.tsx
@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import {describe, it, expect, beforeEach} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
-import { litTheme, defaultTheme } from '../../../../src/v0_8';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
+import {litTheme, defaultTheme} from '../../../../src/v0_8';
 
 describe('Icon Component', () => {
   describe('Basic Rendering', () => {
     it('should render an icon with literal name', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'home' },
+        name: {literalString: 'home'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Should render something (Material Symbols span)
@@ -41,13 +41,13 @@ describe('Icon Component', () => {
 
     it('should render icon with empty string name gracefully', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: '' },
+        name: {literalString: ''},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Should have the surface - empty name returns null (no icon rendered)
@@ -57,13 +57,13 @@ describe('Icon Component', () => {
 
     it('should render with search icon', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'search' },
+        name: {literalString: 'search'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Check that content was rendered
@@ -72,13 +72,13 @@ describe('Icon Component', () => {
 
     it('should render with settings icon', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'settings' },
+        name: {literalString: 'settings'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(container.querySelector('.a2ui-surface')).toBeInTheDocument();
@@ -88,28 +88,28 @@ describe('Icon Component', () => {
   describe('Icon Name Mapping', () => {
     // A2UI names are converted to snake_case for Material Symbols
     const iconMappings = [
-      { a2ui: 'home', expected: 'home' },
-      { a2ui: 'search', expected: 'search' },
-      { a2ui: 'settings', expected: 'settings' },
-      { a2ui: 'favorite', expected: 'favorite' },
-      { a2ui: 'delete', expected: 'delete' },
-      { a2ui: 'shoppingCart', expected: 'shopping_cart' },
-      { a2ui: 'accountCircle', expected: 'account_circle' },
-      { a2ui: 'notifications', expected: 'notifications' },
-      { a2ui: 'mail', expected: 'mail' },
-      { a2ui: 'lock', expected: 'lock' },
+      {a2ui: 'home', expected: 'home'},
+      {a2ui: 'search', expected: 'search'},
+      {a2ui: 'settings', expected: 'settings'},
+      {a2ui: 'favorite', expected: 'favorite'},
+      {a2ui: 'delete', expected: 'delete'},
+      {a2ui: 'shoppingCart', expected: 'shopping_cart'},
+      {a2ui: 'accountCircle', expected: 'account_circle'},
+      {a2ui: 'notifications', expected: 'notifications'},
+      {a2ui: 'mail', expected: 'mail'},
+      {a2ui: 'lock', expected: 'lock'},
     ];
 
-    iconMappings.forEach(({ a2ui, expected }) => {
+    iconMappings.forEach(({a2ui, expected}) => {
       it(`should render "${a2ui}" icon as "${expected}"`, () => {
         const messages = createSimpleMessages('icon-1', 'Icon', {
-          name: { literalString: a2ui },
+          name: {literalString: a2ui},
         });
 
-        const { container } = render(
+        const {container} = render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         // Should render with snake_case name for Material Symbols
@@ -123,13 +123,13 @@ describe('Icon Component', () => {
   describe('Theme Support', () => {
     it('should apply default theme classes', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'home' },
+        name: {literalString: 'home'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={defaultTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Default theme (litTheme) has empty Icon classes, so check section is rendered
@@ -141,13 +141,13 @@ describe('Icon Component', () => {
 
     it('should apply lit theme classes with container/element structure', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'home' },
+        name: {literalString: 'home'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={litTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Lit theme uses layout/typography classes for icon styling
@@ -159,13 +159,13 @@ describe('Icon Component', () => {
   describe('Material Symbols Integration', () => {
     it('should render icon using Material Symbols font', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'home' },
+        name: {literalString: 'home'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Material Symbols uses a span with g-icon class
@@ -176,13 +176,13 @@ describe('Icon Component', () => {
 
     it('should convert camelCase icon names to snake_case', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'shoppingCart' },
+        name: {literalString: 'shoppingCart'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // camelCase should be converted to snake_case for Material Symbols
@@ -195,13 +195,13 @@ describe('Icon Component', () => {
   describe('Unknown Icons', () => {
     it('should render unknown icon names as-is for Material Symbols', () => {
       const messages = createSimpleMessages('icon-1', 'Icon', {
-        name: { literalString: 'unknownIconName12345' },
+        name: {literalString: 'unknownIconName12345'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Material Symbols renders the icon name as text (font handles display)
diff --git a/renderers/react/tests/v0_8/unit/components/Image.test.tsx b/renderers/react/tests/v0_8/unit/components/Image.test.tsx
index bfa520918..fee86fa3b 100644
--- a/renderers/react/tests/v0_8/unit/components/Image.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Image.test.tsx
@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
 
 describe('Image Component', () => {
   describe('Basic Rendering', () => {
     it('should render an img element', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const img = container.querySelector('img');
@@ -39,14 +39,14 @@ describe('Image Component', () => {
 
     it('should render with wrapper div', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-image');
@@ -55,14 +55,14 @@ describe('Image Component', () => {
 
     it('should set src attribute from url', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/photo.png' },
+        url: {literalString: 'https://example.com/photo.png'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const img = container.querySelector('img');
@@ -71,14 +71,14 @@ describe('Image Component', () => {
 
     it('should have empty alt attribute', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const img = container.querySelector('img');
@@ -87,23 +87,23 @@ describe('Image Component', () => {
 
     it('should render different src for different url inputs', () => {
       const messages1 = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/first.jpg' },
+        url: {literalString: 'https://example.com/first.jpg'},
         usageHint: 'mediumFeature',
       });
       const messages2 = createSimpleMessages('img-2', 'Image', {
-        url: { literalString: 'https://example.com/second.jpg' },
+        url: {literalString: 'https://example.com/second.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container: container1 } = render(
+      const {container: container1} = render(
         <TestWrapper>
           <TestRenderer messages={messages1} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const img1 = container1.querySelector('img');
@@ -116,14 +116,14 @@ describe('Image Component', () => {
 
     it('should return null for empty url', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: '' },
+        url: {literalString: ''},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const img = container.querySelector('img');
@@ -132,19 +132,26 @@ describe('Image Component', () => {
   });
 
   describe('Usage Hints', () => {
-    const usageHints = ['icon', 'avatar', 'smallFeature', 'mediumFeature', 'largeFeature', 'header'];
-
-    usageHints.forEach((hint) => {
+    const usageHints = [
+      'icon',
+      'avatar',
+      'smallFeature',
+      'mediumFeature',
+      'largeFeature',
+      'header',
+    ];
+
+    usageHints.forEach(hint => {
       it(`should render with usageHint="${hint}"`, () => {
         const messages = createSimpleMessages('img-1', 'Image', {
-          url: { literalString: 'https://example.com/image.jpg' },
+          url: {literalString: 'https://example.com/image.jpg'},
           usageHint: hint,
         });
 
-        const { container } = render(
+        const {container} = render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         const img = container.querySelector('img');
@@ -155,23 +162,23 @@ describe('Image Component', () => {
     it('should apply different theme classes for different usageHints', () => {
       // usageHint affects which theme classes are merged onto the section element
       const messagesNoHint = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
       const messagesWithHint = createSimpleMessages('img-2', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'avatar',
       });
 
-      const { container: containerNoHint } = render(
+      const {container: containerNoHint} = render(
         <TestWrapper>
           <TestRenderer messages={messagesNoHint} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: containerWithHint } = render(
+      const {container: containerWithHint} = render(
         <TestWrapper>
           <TestRenderer messages={messagesWithHint} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const sectionNoHint = containerNoHint.querySelector('section');
@@ -191,14 +198,14 @@ describe('Image Component', () => {
   describe('Fit Mode', () => {
     it('should default to fill fit mode', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -207,18 +214,18 @@ describe('Image Component', () => {
 
     const fitModes = ['contain', 'cover', 'fill', 'none', 'scale-down'];
 
-    fitModes.forEach((fit) => {
+    fitModes.forEach(fit => {
       it(`should set --object-fit CSS variable for fit="${fit}"`, () => {
         const messages = createSimpleMessages('img-1', 'Image', {
-          url: { literalString: 'https://example.com/image.jpg' },
+          url: {literalString: 'https://example.com/image.jpg'},
           usageHint: 'mediumFeature',
           fit,
         });
 
-        const { container } = render(
+        const {container} = render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         const section = container.querySelector('section');
@@ -228,25 +235,25 @@ describe('Image Component', () => {
 
     it('should set different --object-fit for different fit inputs', () => {
       const messagesCover = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
         fit: 'cover',
       });
       const messagesContain = createSimpleMessages('img-2', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
         fit: 'contain',
       });
 
-      const { container: containerCover } = render(
+      const {container: containerCover} = render(
         <TestWrapper>
           <TestRenderer messages={messagesCover} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: containerContain } = render(
+      const {container: containerContain} = render(
         <TestWrapper>
           <TestRenderer messages={messagesContain} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const sectionCover = containerCover.querySelector('section');
@@ -255,7 +262,7 @@ describe('Image Component', () => {
       expect(sectionCover?.style.getPropertyValue('--object-fit')).toBe('cover');
       expect(sectionContain?.style.getPropertyValue('--object-fit')).toBe('contain');
       expect(sectionCover?.style.getPropertyValue('--object-fit')).not.toBe(
-        sectionContain?.style.getPropertyValue('--object-fit')
+        sectionContain?.style.getPropertyValue('--object-fit'),
       );
     });
   });
@@ -263,14 +270,14 @@ describe('Image Component', () => {
   describe('Theme Support', () => {
     it('should render within section container', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -280,14 +287,14 @@ describe('Image Component', () => {
 
     it('should apply theme classes to section', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -302,14 +309,14 @@ describe('Image Component', () => {
   describe('Structure', () => {
     it('should have correct DOM structure', () => {
       const messages = createSimpleMessages('img-1', 'Image', {
-        url: { literalString: 'https://example.com/image.jpg' },
+        url: {literalString: 'https://example.com/image.jpg'},
         usageHint: 'mediumFeature',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-image');
diff --git a/renderers/react/tests/v0_8/unit/components/List.test.tsx b/renderers/react/tests/v0_8/unit/components/List.test.tsx
index 4f04896b2..af91753fa 100644
--- a/renderers/react/tests/v0_8/unit/components/List.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/List.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering } from '../../utils';
+import {TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -37,13 +37,13 @@ function createListMessages(
     direction?: 'vertical' | 'horizontal';
     alignment?: 'start' | 'center' | 'end' | 'stretch';
   },
-  surfaceId = '@default'
+  surfaceId = '@default',
 ): Types.ServerToClientMessage[] {
   const children = props.childIds.map((childId, index) => ({
     id: childId,
     component: {
       Text: {
-        text: { literalString: props.childTexts?.[index] ?? `Item ${index + 1}` },
+        text: {literalString: props.childTexts?.[index] ?? `Item ${index + 1}`},
         usageHint: 'body',
       },
     },
@@ -57,14 +57,14 @@ function createListMessages(
           id,
           component: {
             List: {
-              children: { explicitList: props.childIds },
+              children: {explicitList: props.childIds},
               direction: props.direction,
               alignment: props.alignment,
             },
           },
         },
       ],
-      surfaceId
+      surfaceId,
     ),
     createBeginRendering(id, surfaceId),
   ];
@@ -77,10 +77,10 @@ describe('List Component', () => {
         childIds: ['item-1', 'item-2'],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const list = container.querySelector('.a2ui-list');
@@ -92,10 +92,10 @@ describe('List Component', () => {
         childIds: ['item-1', 'item-2'],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-list section');
@@ -108,10 +108,10 @@ describe('List Component', () => {
         childTexts: ['First', 'Second', 'Third'],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(container.textContent).toContain('First');
@@ -124,10 +124,10 @@ describe('List Component', () => {
         childIds: ['item-1', 'item-2', 'item-3', 'item-4'],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Each Text component is wrapped in a2ui-text div
@@ -143,15 +143,15 @@ describe('List Component', () => {
         childIds: ['item-1', 'item-2', 'item-3', 'item-4'],
       });
 
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: container4 } = render(
+      const {container: container4} = render(
         <TestWrapper>
           <TestRenderer messages={messages4} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const items2 = container2.querySelectorAll('.a2ui-text');
@@ -169,10 +169,10 @@ describe('List Component', () => {
         childIds: ['item-1'],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const list = container.querySelector('.a2ui-list');
@@ -185,10 +185,10 @@ describe('List Component', () => {
         direction: 'horizontal',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const list = container.querySelector('.a2ui-list');
@@ -202,10 +202,10 @@ describe('List Component', () => {
         direction: 'vertical',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const list = container.querySelector('.a2ui-list');
@@ -222,15 +222,15 @@ describe('List Component', () => {
         direction: 'vertical',
       });
 
-      const { container: containerH } = render(
+      const {container: containerH} = render(
         <TestWrapper>
           <TestRenderer messages={messagesH} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: containerV } = render(
+      const {container: containerV} = render(
         <TestWrapper>
           <TestRenderer messages={messagesV} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const listH = containerH.querySelector('.a2ui-list');
@@ -250,7 +250,7 @@ describe('List Component', () => {
             id: 'list-1',
             component: {
               List: {
-                children: { explicitList: [] },
+                children: {explicitList: []},
               },
             },
           },
@@ -258,10 +258,10 @@ describe('List Component', () => {
         createBeginRendering('list-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const list = container.querySelector('.a2ui-list');
@@ -277,10 +277,10 @@ describe('List Component', () => {
         childIds: ['item-1', 'item-2'],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const list = container.querySelector('.a2ui-list');
diff --git a/renderers/react/tests/v0_8/unit/components/Modal.test.tsx b/renderers/react/tests/v0_8/unit/components/Modal.test.tsx
index ee876ec54..d4d84bc44 100644
--- a/renderers/react/tests/v0_8/unit/components/Modal.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Modal.test.tsx
@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering, getMockCallArg } from '../../utils';
+import {
+  TestWrapper,
+  TestRenderer,
+  createSurfaceUpdate,
+  createBeginRendering,
+  getMockCallArg,
+} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -37,7 +43,7 @@ function createModalMessages(
     triggerText: string;
     contentText: string;
   },
-  surfaceId = '@default'
+  surfaceId = '@default',
 ): Types.ServerToClientMessage[] {
   const triggerId = `${id}-trigger`;
   const contentId = `${id}-content`;
@@ -49,14 +55,14 @@ function createModalMessages(
         {
           id: triggerId,
           component: {
-            Text: { text: { literalString: props.triggerText }, usageHint: 'body' },
+            Text: {text: {literalString: props.triggerText}, usageHint: 'body'},
           },
         },
         // Content component
         {
           id: contentId,
           component: {
-            Text: { text: { literalString: props.contentText }, usageHint: 'body' },
+            Text: {text: {literalString: props.contentText}, usageHint: 'body'},
           },
         },
         // Modal component
@@ -70,7 +76,7 @@ function createModalMessages(
           },
         },
       ],
-      surfaceId
+      surfaceId,
     ),
     createBeginRendering(id, surfaceId),
   ];
@@ -98,10 +104,10 @@ describe('Modal Component', () => {
         contentText: 'Modal Content',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-modal');
@@ -118,7 +124,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByText('Click to Open')).toBeInTheDocument();
@@ -133,7 +139,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Modal content should not be visible initially
@@ -150,17 +156,17 @@ describe('Modal Component', () => {
         contentText: 'Content B',
       });
 
-      const { container: container1 } = render(
+      const {container: container1} = render(
         <TestWrapper>
           <TestRenderer messages={messages1} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { unmount } = { unmount: () => {} };
+      const {unmount} = {unmount: () => {}};
 
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(container1.textContent).toContain('Trigger A');
@@ -179,7 +185,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Click the trigger
@@ -200,7 +206,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByText('Open Modal'));
@@ -220,7 +226,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByText('Open Modal'));
@@ -236,10 +242,10 @@ describe('Modal Component', () => {
         contentText: 'Modal Content',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByText('Open Modal'));
@@ -266,13 +272,13 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByText('Open Modal'));
 
       await waitFor(() => {
-        const closeButton = screen.getByRole('button', { name: /close/i });
+        const closeButton = screen.getByRole('button', {name: /close/i});
         expect(closeButton).toBeInTheDocument();
       });
     });
@@ -286,7 +292,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Open modal
@@ -297,7 +303,7 @@ describe('Modal Component', () => {
       });
 
       // Click close button
-      const closeButton = screen.getByRole('button', { name: /close/i });
+      const closeButton = screen.getByRole('button', {name: /close/i});
       fireEvent.click(closeButton);
 
       // Modal content should be removed
@@ -315,7 +321,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Open modal
@@ -348,7 +354,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Open modal
@@ -374,7 +380,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Open modal
@@ -387,7 +393,7 @@ describe('Modal Component', () => {
       // Press Escape
       const dialog = document.querySelector('dialog');
       if (dialog) {
-        fireEvent.keyDown(dialog, { key: 'Escape' });
+        fireEvent.keyDown(dialog, {key: 'Escape'});
       }
 
       // Modal should close
@@ -402,12 +408,27 @@ describe('Modal Component', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
           // Trigger
-          { id: 'trigger-text', component: { Text: { text: { literalString: 'Open' } , usageHint: 'body' } } },
+          {
+            id: 'trigger-text',
+            component: {Text: {text: {literalString: 'Open'}, usageHint: 'body'}},
+          },
           // Modal content: Column with button
-          { id: 'modal-title', component: { Text: { text: { literalString: 'Modal Title' }, usageHint: 'h2' } } },
-          { id: 'btn-text', component: { Text: { text: { literalString: 'Submit' } , usageHint: 'body' } } },
-          { id: 'modal-btn', component: { Button: { child: 'btn-text', action: { name: 'submit' } } } },
-          { id: 'modal-content', component: { Column: { children: { explicitList: ['modal-title', 'modal-btn'] } } } },
+          {
+            id: 'modal-title',
+            component: {Text: {text: {literalString: 'Modal Title'}, usageHint: 'h2'}},
+          },
+          {
+            id: 'btn-text',
+            component: {Text: {text: {literalString: 'Submit'}, usageHint: 'body'}},
+          },
+          {
+            id: 'modal-btn',
+            component: {Button: {child: 'btn-text', action: {name: 'submit'}}},
+          },
+          {
+            id: 'modal-content',
+            component: {Column: {children: {explicitList: ['modal-title', 'modal-btn']}}},
+          },
           // Modal
           {
             id: 'modal-1',
@@ -425,7 +446,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Open modal
@@ -433,7 +454,7 @@ describe('Modal Component', () => {
 
       await waitFor(() => {
         expect(screen.getByText('Modal Title')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Submit'})).toBeInTheDocument();
       });
     });
 
@@ -441,9 +462,18 @@ describe('Modal Component', () => {
       const mockOnAction = vi.fn();
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'trigger-text', component: { Text: { text: { literalString: 'Open' } , usageHint: 'body' } } },
-          { id: 'btn-text', component: { Text: { text: { literalString: 'Action Button' } , usageHint: 'body' } } },
-          { id: 'modal-btn', component: { Button: { child: 'btn-text', action: { name: 'modal-action' } } } },
+          {
+            id: 'trigger-text',
+            component: {Text: {text: {literalString: 'Open'}, usageHint: 'body'}},
+          },
+          {
+            id: 'btn-text',
+            component: {Text: {text: {literalString: 'Action Button'}, usageHint: 'body'}},
+          },
+          {
+            id: 'modal-btn',
+            component: {Button: {child: 'btn-text', action: {name: 'modal-action'}}},
+          },
           {
             id: 'modal-1',
             component: {
@@ -460,18 +490,18 @@ describe('Modal Component', () => {
       render(
         <TestWrapper onAction={mockOnAction}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Open modal
       fireEvent.click(screen.getByText('Open'));
 
       await waitFor(() => {
-        expect(screen.getByRole('button', { name: 'Action Button' })).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Action Button'})).toBeInTheDocument();
       });
 
       // Click the action button inside modal
-      fireEvent.click(screen.getByRole('button', { name: 'Action Button' }));
+      fireEvent.click(screen.getByRole('button', {name: 'Action Button'}));
 
       expect(mockOnAction).toHaveBeenCalled();
       const event = getMockCallArg<Types.A2UIClientEventMessage>(mockOnAction, 0);
@@ -487,15 +517,15 @@ describe('Modal Component', () => {
         contentText: 'Modal Content',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // cursor: pointer is on the section inside the wrapper (entry point)
       const section = container.querySelector('.a2ui-modal > section');
-      expect(section).toHaveStyle({ cursor: 'pointer' });
+      expect(section).toHaveStyle({cursor: 'pointer'});
     });
   });
 
@@ -509,7 +539,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByText('Open Modal'));
@@ -529,7 +559,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByText('Open Modal'));
@@ -549,10 +579,10 @@ describe('Modal Component', () => {
         contentText: 'Modal Content',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Entry point wrapper
@@ -576,7 +606,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       fireEvent.click(screen.getByText('Open Modal'));
@@ -610,7 +640,7 @@ describe('Modal Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Open modal
@@ -620,7 +650,7 @@ describe('Modal Component', () => {
       });
 
       // Close modal
-      const closeButton = screen.getByRole('button', { name: /close/i });
+      const closeButton = screen.getByRole('button', {name: /close/i});
       fireEvent.click(closeButton);
       await waitFor(() => {
         expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
diff --git a/renderers/react/tests/v0_8/unit/components/MultipleChoice.test.tsx b/renderers/react/tests/v0_8/unit/components/MultipleChoice.test.tsx
index 6daa845da..b48373b85 100644
--- a/renderers/react/tests/v0_8/unit/components/MultipleChoice.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/MultipleChoice.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, fireEvent} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
 
 /**
  * MultipleChoice tests following A2UI specification.
@@ -30,17 +30,17 @@ describe('MultipleChoice Component', () => {
   describe('Basic Rendering', () => {
     it('should render a select element', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-          { label: { literalString: 'Option B' }, value: 'b' },
+          {label: {literalString: 'Option A'}, value: 'a'},
+          {label: {literalString: 'Option B'}, value: 'b'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const select = container.querySelector('select');
@@ -50,16 +50,14 @@ describe('MultipleChoice Component', () => {
 
     it('should render with wrapper div having correct class', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
-        options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-        ],
+        selections: {path: '/mcSelections'},
+        options: [{label: {literalString: 'Option A'}, value: 'a'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-multiplechoice');
@@ -69,18 +67,18 @@ describe('MultipleChoice Component', () => {
 
     it('should render all option labels', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'First Option' }, value: 'first' },
-          { label: { literalString: 'Second Option' }, value: 'second' },
-          { label: { literalString: 'Third Option' }, value: 'third' },
+          {label: {literalString: 'First Option'}, value: 'first'},
+          {label: {literalString: 'Second Option'}, value: 'second'},
+          {label: {literalString: 'Third Option'}, value: 'third'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const options = container.querySelectorAll('option');
@@ -92,18 +90,18 @@ describe('MultipleChoice Component', () => {
 
     it('should render correct number of options', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'A' }, value: 'a' },
-          { label: { literalString: 'B' }, value: 'b' },
-          { label: { literalString: 'C' }, value: 'c' },
+          {label: {literalString: 'A'}, value: 'a'},
+          {label: {literalString: 'B'}, value: 'b'},
+          {label: {literalString: 'C'}, value: 'c'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const options = container.querySelectorAll('option');
@@ -112,28 +110,26 @@ describe('MultipleChoice Component', () => {
 
     it('should render different options for different inputs', () => {
       const messages1 = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections1' },
-        options: [
-          { label: { literalString: 'Alpha' }, value: 'alpha' },
-        ],
+        selections: {path: '/mcSelections1'},
+        options: [{label: {literalString: 'Alpha'}, value: 'alpha'}],
       });
       const messages2 = createSimpleMessages('mc-2', 'MultipleChoice', {
-        selections: { path: '/mcSelections2' },
+        selections: {path: '/mcSelections2'},
         options: [
-          { label: { literalString: 'Beta' }, value: 'beta' },
-          { label: { literalString: 'Gamma' }, value: 'gamma' },
+          {label: {literalString: 'Beta'}, value: 'beta'},
+          {label: {literalString: 'Gamma'}, value: 'gamma'},
         ],
       });
 
-      const { container: container1 } = render(
+      const {container: container1} = render(
         <TestWrapper>
           <TestRenderer messages={messages1} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(container1.textContent).toContain('Alpha');
@@ -147,16 +143,14 @@ describe('MultipleChoice Component', () => {
   describe('Description Label', () => {
     it('should render default description when not provided', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
-        options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-        ],
+        selections: {path: '/mcSelections'},
+        options: [{label: {literalString: 'Option A'}, value: 'a'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -166,16 +160,14 @@ describe('MultipleChoice Component', () => {
 
     it('should associate label with select via htmlFor', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
-        options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-        ],
+        selections: {path: '/mcSelections'},
+        options: [{label: {literalString: 'Option A'}, value: 'a'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -187,18 +179,18 @@ describe('MultipleChoice Component', () => {
   describe('Option Values', () => {
     it('should set correct value attributes on options', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'Small' }, value: 'sm' },
-          { label: { literalString: 'Medium' }, value: 'md' },
-          { label: { literalString: 'Large' }, value: 'lg' },
+          {label: {literalString: 'Small'}, value: 'sm'},
+          {label: {literalString: 'Medium'}, value: 'md'},
+          {label: {literalString: 'Large'}, value: 'lg'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const options = container.querySelectorAll('option');
@@ -211,51 +203,51 @@ describe('MultipleChoice Component', () => {
   describe('User Interaction', () => {
     it('should update select value on change', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-          { label: { literalString: 'Option B' }, value: 'b' },
-          { label: { literalString: 'Option C' }, value: 'c' },
+          {label: {literalString: 'Option A'}, value: 'a'},
+          {label: {literalString: 'Option B'}, value: 'b'},
+          {label: {literalString: 'Option C'}, value: 'c'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const select = container.querySelector('select') as HTMLSelectElement;
-      fireEvent.change(select, { target: { value: 'b' } });
+      fireEvent.change(select, {target: {value: 'b'}});
 
       expect(select.value).toBe('b');
     });
 
     it('should handle multiple sequential changes', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-          { label: { literalString: 'Option B' }, value: 'b' },
-          { label: { literalString: 'Option C' }, value: 'c' },
+          {label: {literalString: 'Option A'}, value: 'a'},
+          {label: {literalString: 'Option B'}, value: 'b'},
+          {label: {literalString: 'Option C'}, value: 'c'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const select = container.querySelector('select') as HTMLSelectElement;
 
-      fireEvent.change(select, { target: { value: 'a' } });
+      fireEvent.change(select, {target: {value: 'a'}});
       expect(select.value).toBe('a');
 
-      fireEvent.change(select, { target: { value: 'c' } });
+      fireEvent.change(select, {target: {value: 'c'}});
       expect(select.value).toBe('c');
 
-      fireEvent.change(select, { target: { value: 'b' } });
+      fireEvent.change(select, {target: {value: 'b'}});
       expect(select.value).toBe('b');
     });
   });
@@ -263,17 +255,17 @@ describe('MultipleChoice Component', () => {
   describe('Structure', () => {
     it('should have correct DOM structure: div > section > label + select', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-          { label: { literalString: 'Option B' }, value: 'b' },
+          {label: {literalString: 'Option A'}, value: 'a'},
+          {label: {literalString: 'Option B'}, value: 'b'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-multiplechoice');
@@ -290,16 +282,14 @@ describe('MultipleChoice Component', () => {
 
     it('should have select inside section container', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
-        options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-        ],
+        selections: {path: '/mcSelections'},
+        options: [{label: {literalString: 'Option A'}, value: 'a'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -309,17 +299,17 @@ describe('MultipleChoice Component', () => {
 
     it('should have options inside select', () => {
       const messages = createSimpleMessages('mc-1', 'MultipleChoice', {
-        selections: { path: '/mcSelections' },
+        selections: {path: '/mcSelections'},
         options: [
-          { label: { literalString: 'Option A' }, value: 'a' },
-          { label: { literalString: 'Option B' }, value: 'b' },
+          {label: {literalString: 'Option A'}, value: 'a'},
+          {label: {literalString: 'Option B'}, value: 'b'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const select = container.querySelector('select');
diff --git a/renderers/react/tests/v0_8/unit/components/Row.test.tsx b/renderers/react/tests/v0_8/unit/components/Row.test.tsx
index 4a5152f9d..3e6029cb6 100644
--- a/renderers/react/tests/v0_8/unit/components/Row.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Row.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering } from '../../utils';
+import {TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -33,16 +33,19 @@ describe('Row Component', () => {
     it('should render a section element', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -52,16 +55,19 @@ describe('Row Component', () => {
     it('should render with wrapper div', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-row');
@@ -73,9 +79,15 @@ describe('Row Component', () => {
     it('should render child Text components', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item 1' } , usageHint: 'body' } } },
-          { id: 'text-2', component: { Text: { text: { literalString: 'Item 2' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1', 'text-2'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item 1'}, usageHint: 'body'}},
+          },
+          {
+            id: 'text-2',
+            component: {Text: {text: {literalString: 'Item 2'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1', 'text-2']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
@@ -83,7 +95,7 @@ describe('Row Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByText('Item 1')).toBeInTheDocument();
@@ -92,16 +104,14 @@ describe('Row Component', () => {
 
     it('should render empty row with empty explicitList', () => {
       const messages: Types.ServerToClientMessage[] = [
-        createSurfaceUpdate([
-          { id: 'row-1', component: { Row: { children: { explicitList: [] } } } },
-        ]),
+        createSurfaceUpdate([{id: 'row-1', component: {Row: {children: {explicitList: []}}}}]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const row = container.querySelector('.a2ui-row');
@@ -113,16 +123,19 @@ describe('Row Component', () => {
     it('should default to stretch alignment', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-row');
@@ -131,20 +144,26 @@ describe('Row Component', () => {
 
     const alignments = ['start', 'center', 'end', 'stretch'] as const;
 
-    alignments.forEach((alignment) => {
+    alignments.forEach(alignment => {
       it(`should set data-alignment="${alignment}"`, () => {
         const messages: Types.ServerToClientMessage[] = [
           createSurfaceUpdate([
-            { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-            { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, alignment } } },
+            {
+              id: 'text-1',
+              component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+            },
+            {
+              id: 'row-1',
+              component: {Row: {children: {explicitList: ['text-1']}, alignment}},
+            },
           ]),
           createBeginRendering('row-1'),
         ];
 
-        const { container } = render(
+        const {container} = render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         const wrapper = container.querySelector('.a2ui-row');
@@ -157,38 +176,54 @@ describe('Row Component', () => {
     it('should default to start distribution', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-row');
       expect(wrapper?.getAttribute('data-distribution')).toBe('start');
     });
 
-    const distributions = ['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly'] as const;
+    const distributions = [
+      'start',
+      'center',
+      'end',
+      'spaceBetween',
+      'spaceAround',
+      'spaceEvenly',
+    ] as const;
 
-    distributions.forEach((distribution) => {
+    distributions.forEach(distribution => {
       it(`should set data-distribution="${distribution}"`, () => {
         const messages: Types.ServerToClientMessage[] = [
           createSurfaceUpdate([
-            { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-            { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, distribution } } },
+            {
+              id: 'text-1',
+              component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+            },
+            {
+              id: 'row-1',
+              component: {Row: {children: {explicitList: ['text-1']}, distribution}},
+            },
           ]),
           createBeginRendering('row-1'),
         ];
 
-        const { container } = render(
+        const {container} = render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         const wrapper = container.querySelector('.a2ui-row');
@@ -201,11 +236,23 @@ describe('Row Component', () => {
     it('should render multiple Buttons in Row', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'btn1-text', component: { Text: { text: { literalString: 'Button 1' } , usageHint: 'body' } } },
-          { id: 'btn2-text', component: { Text: { text: { literalString: 'Button 2' } , usageHint: 'body' } } },
-          { id: 'btn-1', component: { Button: { child: 'btn1-text', action: { name: 'action1' } } } },
-          { id: 'btn-2', component: { Button: { child: 'btn2-text', action: { name: 'action2' } } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['btn-1', 'btn-2'] } } } },
+          {
+            id: 'btn1-text',
+            component: {Text: {text: {literalString: 'Button 1'}, usageHint: 'body'}},
+          },
+          {
+            id: 'btn2-text',
+            component: {Text: {text: {literalString: 'Button 2'}, usageHint: 'body'}},
+          },
+          {
+            id: 'btn-1',
+            component: {Button: {child: 'btn1-text', action: {name: 'action1'}}},
+          },
+          {
+            id: 'btn-2',
+            component: {Button: {child: 'btn2-text', action: {name: 'action2'}}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['btn-1', 'btn-2']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
@@ -213,7 +260,7 @@ describe('Row Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const buttons = screen.getAllByRole('button');
@@ -227,16 +274,19 @@ describe('Row Component', () => {
     it('should apply theme classes to section', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -251,28 +301,40 @@ describe('Row Component', () => {
     it('should render different alignment for different alignment inputs', () => {
       const messagesStart: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, alignment: 'start' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {
+            id: 'row-1',
+            component: {Row: {children: {explicitList: ['text-1']}, alignment: 'start'}},
+          },
         ]),
         createBeginRendering('row-1'),
       ];
       const messagesEnd: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, alignment: 'end' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {
+            id: 'row-1',
+            component: {Row: {children: {explicitList: ['text-1']}, alignment: 'end'}},
+          },
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container: containerStart } = render(
+      const {container: containerStart} = render(
         <TestWrapper>
           <TestRenderer messages={messagesStart} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: containerEnd } = render(
+      const {container: containerEnd} = render(
         <TestWrapper>
           <TestRenderer messages={messagesEnd} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const rowStart = containerStart.querySelector('.a2ui-row');
@@ -280,34 +342,50 @@ describe('Row Component', () => {
 
       expect(rowStart?.getAttribute('data-alignment')).toBe('start');
       expect(rowEnd?.getAttribute('data-alignment')).toBe('end');
-      expect(rowStart?.getAttribute('data-alignment')).not.toBe(rowEnd?.getAttribute('data-alignment'));
+      expect(rowStart?.getAttribute('data-alignment')).not.toBe(
+        rowEnd?.getAttribute('data-alignment'),
+      );
     });
 
     it('should render different distribution for different distribution inputs', () => {
       const messagesCenter: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, distribution: 'center' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {
+            id: 'row-1',
+            component: {Row: {children: {explicitList: ['text-1']}, distribution: 'center'}},
+          },
         ]),
         createBeginRendering('row-1'),
       ];
       const messagesSpaceBetween: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] }, distribution: 'spaceBetween' } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {
+            id: 'row-1',
+            component: {
+              Row: {children: {explicitList: ['text-1']}, distribution: 'spaceBetween'},
+            },
+          },
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container: containerCenter } = render(
+      const {container: containerCenter} = render(
         <TestWrapper>
           <TestRenderer messages={messagesCenter} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: containerSpaceBetween } = render(
+      const {container: containerSpaceBetween} = render(
         <TestWrapper>
           <TestRenderer messages={messagesSpaceBetween} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const rowCenter = containerCenter.querySelector('.a2ui-row');
@@ -315,7 +393,9 @@ describe('Row Component', () => {
 
       expect(rowCenter?.getAttribute('data-distribution')).toBe('center');
       expect(rowSpaceBetween?.getAttribute('data-distribution')).toBe('spaceBetween');
-      expect(rowCenter?.getAttribute('data-distribution')).not.toBe(rowSpaceBetween?.getAttribute('data-distribution'));
+      expect(rowCenter?.getAttribute('data-distribution')).not.toBe(
+        rowSpaceBetween?.getAttribute('data-distribution'),
+      );
     });
   });
 
@@ -323,16 +403,19 @@ describe('Row Component', () => {
     it('should have correct DOM structure', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
-          { id: 'text-1', component: { Text: { text: { literalString: 'Item' } , usageHint: 'body' } } },
-          { id: 'row-1', component: { Row: { children: { explicitList: ['text-1'] } } } },
+          {
+            id: 'text-1',
+            component: {Text: {text: {literalString: 'Item'}, usageHint: 'body'}},
+          },
+          {id: 'row-1', component: {Row: {children: {explicitList: ['text-1']}}}},
         ]),
         createBeginRendering('row-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-row');
diff --git a/renderers/react/tests/v0_8/unit/components/Slider.test.tsx b/renderers/react/tests/v0_8/unit/components/Slider.test.tsx
index 6b388a72b..be20ffa39 100644
--- a/renderers/react/tests/v0_8/unit/components/Slider.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Slider.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, fireEvent} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
 
 /**
  * Slider tests following A2UI specification.
@@ -28,13 +28,13 @@ describe('Slider Component', () => {
   describe('Basic Rendering', () => {
     it('should render a range input', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]');
@@ -45,13 +45,13 @@ describe('Slider Component', () => {
 
     it('should render with wrapper div having correct class', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-slider');
@@ -61,15 +61,15 @@ describe('Slider Component', () => {
 
     it('should render with exact initial value', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 75 },
+        value: {literalNumber: 75},
         minValue: 0,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
@@ -81,15 +81,15 @@ describe('Slider Component', () => {
 
     it('should display current value in span matching input value', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 42 },
+        value: {literalNumber: 42},
         minValue: 0,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
@@ -102,25 +102,25 @@ describe('Slider Component', () => {
 
     it('should render different values for different inputs', () => {
       const messages1 = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 25 },
+        value: {literalNumber: 25},
         minValue: 0,
         maxValue: 100,
       });
       const messages2 = createSimpleMessages('sl-2', 'Slider', {
-        value: { literalNumber: 75 },
+        value: {literalNumber: 75},
         minValue: 0,
         maxValue: 100,
       });
 
-      const { container: container1 } = render(
+      const {container: container1} = render(
         <TestWrapper>
           <TestRenderer messages={messages1} />
-        </TestWrapper>
+        </TestWrapper>,
       );
-      const { container: container2 } = render(
+      const {container: container2} = render(
         <TestWrapper>
           <TestRenderer messages={messages2} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input1 = container1.querySelector('input[type="range"]') as HTMLInputElement;
@@ -135,15 +135,15 @@ describe('Slider Component', () => {
   describe('Min/Max Values', () => {
     it('should set exact min attribute value', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
         minValue: 10,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
@@ -153,15 +153,15 @@ describe('Slider Component', () => {
 
     it('should set exact max attribute value', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
         minValue: 0,
         maxValue: 200,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
@@ -171,13 +171,13 @@ describe('Slider Component', () => {
 
     it('should default min/max to 0 when not provided', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 0 },
+        value: {literalNumber: 0},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
@@ -187,15 +187,15 @@ describe('Slider Component', () => {
 
     it('should handle negative min values', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 0 },
+        value: {literalNumber: 0},
         minValue: -100,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
@@ -206,21 +206,21 @@ describe('Slider Component', () => {
   describe('User Interaction', () => {
     it('should update input value on change', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
         minValue: 0,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
       expect(input.value).toBe('50'); // Initial value
 
-      fireEvent.change(input, { target: { value: '80' } });
+      fireEvent.change(input, {target: {value: '80'}});
 
       expect(input.value).toBe('80'); // New value
       expect(input.value).not.toBe('50'); // Not old value
@@ -228,15 +228,15 @@ describe('Slider Component', () => {
 
     it('should update displayed span value in sync with input', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
         minValue: 0,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
@@ -244,7 +244,7 @@ describe('Slider Component', () => {
 
       expect(span?.textContent).toBe('50'); // Initial
 
-      fireEvent.change(input, { target: { value: '25' } });
+      fireEvent.change(input, {target: {value: '25'}});
 
       // Both should update together
       expect(input.value).toBe('25');
@@ -253,29 +253,29 @@ describe('Slider Component', () => {
 
     it('should handle multiple sequential value changes', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
         minValue: 0,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input[type="range"]') as HTMLInputElement;
       const span = container.querySelector('section span');
 
-      fireEvent.change(input, { target: { value: '10' } });
+      fireEvent.change(input, {target: {value: '10'}});
       expect(input.value).toBe('10');
       expect(span?.textContent).toBe('10');
 
-      fireEvent.change(input, { target: { value: '90' } });
+      fireEvent.change(input, {target: {value: '90'}});
       expect(input.value).toBe('90');
       expect(span?.textContent).toBe('90');
 
-      fireEvent.change(input, { target: { value: '50' } });
+      fireEvent.change(input, {target: {value: '50'}});
       expect(input.value).toBe('50');
       expect(span?.textContent).toBe('50');
     });
@@ -284,16 +284,16 @@ describe('Slider Component', () => {
   describe('Structure', () => {
     it('should have correct DOM structure: label, input, span in order', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
-        label: { literalString: 'Volume' },
+        value: {literalNumber: 50},
+        label: {literalString: 'Volume'},
         minValue: 0,
         maxValue: 100,
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -308,13 +308,13 @@ describe('Slider Component', () => {
 
     it('should omit label from DOM structure when not provided', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
@@ -328,13 +328,13 @@ describe('Slider Component', () => {
 
     it('should have input inside section container', () => {
       const messages = createSimpleMessages('sl-1', 'Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
diff --git a/renderers/react/tests/v0_8/unit/components/Tabs.test.tsx b/renderers/react/tests/v0_8/unit/components/Tabs.test.tsx
index e5e49d2b8..647f3e856 100644
--- a/renderers/react/tests/v0_8/unit/components/Tabs.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Tabs.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering } from '../../utils';
+import {TestWrapper, TestRenderer, createSurfaceUpdate, createBeginRendering} from '../../utils';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -35,11 +35,11 @@ import type * as Types from '@a2ui/web_core/types/types';
 function createTabsMessages(
   id: string,
   props: {
-    tabs: Array<{ title: string; contentText: string }>;
+    tabs: Array<{title: string; contentText: string}>;
   },
-  surfaceId = '@default'
+  surfaceId = '@default',
 ): Types.ServerToClientMessage[] {
-  const components: Array<{ id: string; component: Record<string, unknown> }> = [];
+  const components: Array<{id: string; component: Record<string, unknown>}> = [];
 
   // Create content components for each tab
   const tabItems = props.tabs.map((tab, index) => {
@@ -47,11 +47,11 @@ function createTabsMessages(
     components.push({
       id: contentId,
       component: {
-        Text: { text: { literalString: tab.contentText }, usageHint: 'body' },
+        Text: {text: {literalString: tab.contentText}, usageHint: 'body'},
       },
     });
     return {
-      title: { literalString: tab.title },
+      title: {literalString: tab.title},
       child: contentId,
     };
   });
@@ -60,14 +60,11 @@ function createTabsMessages(
   components.push({
     id,
     component: {
-      Tabs: { tabItems },
+      Tabs: {tabItems},
     },
   });
 
-  return [
-    createSurfaceUpdate(components, surfaceId),
-    createBeginRendering(id, surfaceId),
-  ];
+  return [createSurfaceUpdate(components, surfaceId), createBeginRendering(id, surfaceId)];
 }
 
 describe('Tabs Component', () => {
@@ -75,15 +72,15 @@ describe('Tabs Component', () => {
     it('should render a tabs container with correct class', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content 1' },
-          { title: 'Tab 2', contentText: 'Content 2' },
+          {title: 'Tab 1', contentText: 'Content 1'},
+          {title: 'Tab 2', contentText: 'Content 2'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-tabs');
@@ -93,13 +90,13 @@ describe('Tabs Component', () => {
 
     it('should render section element inside wrapper', () => {
       const messages = createTabsMessages('tabs-1', {
-        tabs: [{ title: 'Tab 1', contentText: 'Content 1' }],
+        tabs: [{title: 'Tab 1', contentText: 'Content 1'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-tabs > section');
@@ -109,15 +106,15 @@ describe('Tabs Component', () => {
     it('should render buttons container with id="buttons"', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content 1' },
-          { title: 'Tab 2', contentText: 'Content 2' },
+          {title: 'Tab 1', contentText: 'Content 1'},
+          {title: 'Tab 2', contentText: 'Content 2'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const buttonsContainer = container.querySelector('#buttons');
@@ -130,16 +127,16 @@ describe('Tabs Component', () => {
     it('should render a button for each tab', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'First', contentText: 'Content 1' },
-          { title: 'Second', contentText: 'Content 2' },
-          { title: 'Third', contentText: 'Content 3' },
+          {title: 'First', contentText: 'Content 1'},
+          {title: 'Second', contentText: 'Content 2'},
+          {title: 'Third', contentText: 'Content 3'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const buttons = container.querySelectorAll('#buttons button');
@@ -149,37 +146,37 @@ describe('Tabs Component', () => {
     it('should display tab titles in buttons', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Overview', contentText: 'Content 1' },
-          { title: 'Details', contentText: 'Content 2' },
+          {title: 'Overview', contentText: 'Content 1'},
+          {title: 'Details', contentText: 'Content 2'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
-      expect(screen.getByRole('button', { name: 'Overview' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Details' })).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Overview'})).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Details'})).toBeInTheDocument();
     });
 
     it('should disable the currently selected tab button', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content 1' },
-          { title: 'Tab 2', contentText: 'Content 2' },
+          {title: 'Tab 1', contentText: 'Content 1'},
+          {title: 'Tab 2', contentText: 'Content 2'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
-      const tab1Button = screen.getByRole('button', { name: 'Tab 1' });
-      const tab2Button = screen.getByRole('button', { name: 'Tab 2' });
+      const tab1Button = screen.getByRole('button', {name: 'Tab 1'});
+      const tab2Button = screen.getByRole('button', {name: 'Tab 2'});
 
       // First tab selected by default - should be disabled
       expect(tab1Button).toBeDisabled();
@@ -189,19 +186,19 @@ describe('Tabs Component', () => {
     it('should have different disabled states for different tabs', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab A', contentText: 'Content A' },
-          { title: 'Tab B', contentText: 'Content B' },
+          {title: 'Tab A', contentText: 'Content A'},
+          {title: 'Tab B', contentText: 'Content B'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
-      const tabA = screen.getByRole('button', { name: 'Tab A' }) as HTMLButtonElement;
-      const tabB = screen.getByRole('button', { name: 'Tab B' }) as HTMLButtonElement;
+      const tabA = screen.getByRole('button', {name: 'Tab A'}) as HTMLButtonElement;
+      const tabB = screen.getByRole('button', {name: 'Tab B'}) as HTMLButtonElement;
 
       // Initially Tab A is selected (disabled)
       expect(tabA.disabled).not.toBe(tabB.disabled);
@@ -212,15 +209,15 @@ describe('Tabs Component', () => {
     it('should select first tab by default', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'First tab content' },
-          { title: 'Tab 2', contentText: 'Second tab content' },
+          {title: 'Tab 1', contentText: 'First tab content'},
+          {title: 'Tab 2', contentText: 'Second tab content'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // First tab's content should be visible
@@ -230,22 +227,22 @@ describe('Tabs Component', () => {
     it('should switch content when clicking a different tab', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'First tab content' },
-          { title: 'Tab 2', contentText: 'Second tab content' },
+          {title: 'Tab 1', contentText: 'First tab content'},
+          {title: 'Tab 2', contentText: 'Second tab content'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Initially first tab content visible
       expect(screen.getByText('First tab content')).toBeInTheDocument();
 
       // Click second tab
-      fireEvent.click(screen.getByRole('button', { name: 'Tab 2' }));
+      fireEvent.click(screen.getByRole('button', {name: 'Tab 2'}));
 
       // Second tab content should now be visible
       expect(screen.getByText('Second tab content')).toBeInTheDocument();
@@ -254,19 +251,19 @@ describe('Tabs Component', () => {
     it('should hide previous tab content when switching', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'First tab content' },
-          { title: 'Tab 2', contentText: 'Second tab content' },
+          {title: 'Tab 1', contentText: 'First tab content'},
+          {title: 'Tab 2', contentText: 'Second tab content'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Click second tab
-      fireEvent.click(screen.getByRole('button', { name: 'Tab 2' }));
+      fireEvent.click(screen.getByRole('button', {name: 'Tab 2'}));
 
       // First tab content should no longer be in document
       expect(screen.queryByText('First tab content')).not.toBeInTheDocument();
@@ -275,19 +272,19 @@ describe('Tabs Component', () => {
     it('should update disabled state when switching tabs', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content 1' },
-          { title: 'Tab 2', contentText: 'Content 2' },
+          {title: 'Tab 1', contentText: 'Content 1'},
+          {title: 'Tab 2', contentText: 'Content 2'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
-      const tab1Button = screen.getByRole('button', { name: 'Tab 1' });
-      const tab2Button = screen.getByRole('button', { name: 'Tab 2' });
+      const tab1Button = screen.getByRole('button', {name: 'Tab 1'});
+      const tab2Button = screen.getByRole('button', {name: 'Tab 2'});
 
       // Initially Tab 1 is disabled
       expect(tab1Button).toBeDisabled();
@@ -304,33 +301,33 @@ describe('Tabs Component', () => {
     it('should handle switching between multiple tabs', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content One' },
-          { title: 'Tab 2', contentText: 'Content Two' },
-          { title: 'Tab 3', contentText: 'Content Three' },
+          {title: 'Tab 1', contentText: 'Content One'},
+          {title: 'Tab 2', contentText: 'Content Two'},
+          {title: 'Tab 3', contentText: 'Content Three'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Start at Tab 1
       expect(screen.getByText('Content One')).toBeInTheDocument();
 
       // Go to Tab 3
-      fireEvent.click(screen.getByRole('button', { name: 'Tab 3' }));
+      fireEvent.click(screen.getByRole('button', {name: 'Tab 3'}));
       expect(screen.getByText('Content Three')).toBeInTheDocument();
       expect(screen.queryByText('Content One')).not.toBeInTheDocument();
 
       // Go to Tab 2
-      fireEvent.click(screen.getByRole('button', { name: 'Tab 2' }));
+      fireEvent.click(screen.getByRole('button', {name: 'Tab 2'}));
       expect(screen.getByText('Content Two')).toBeInTheDocument();
       expect(screen.queryByText('Content Three')).not.toBeInTheDocument();
 
       // Go back to Tab 1
-      fireEvent.click(screen.getByRole('button', { name: 'Tab 1' }));
+      fireEvent.click(screen.getByRole('button', {name: 'Tab 1'}));
       expect(screen.getByText('Content One')).toBeInTheDocument();
     });
   });
@@ -340,20 +337,32 @@ describe('Tabs Component', () => {
       const messages: Types.ServerToClientMessage[] = [
         createSurfaceUpdate([
           // Tab 1: Column with multiple text items
-          { id: 'text-1a', component: { Text: { text: { literalString: 'Item 1' } , usageHint: 'body' } } },
-          { id: 'text-1b', component: { Text: { text: { literalString: 'Item 2' } , usageHint: 'body' } } },
-          { id: 'col-1', component: { Column: { children: { explicitList: ['text-1a', 'text-1b'] } } } },
+          {
+            id: 'text-1a',
+            component: {Text: {text: {literalString: 'Item 1'}, usageHint: 'body'}},
+          },
+          {
+            id: 'text-1b',
+            component: {Text: {text: {literalString: 'Item 2'}, usageHint: 'body'}},
+          },
+          {
+            id: 'col-1',
+            component: {Column: {children: {explicitList: ['text-1a', 'text-1b']}}},
+          },
           // Tab 2: Button
-          { id: 'btn-text', component: { Text: { text: { literalString: 'Click me' } , usageHint: 'body' } } },
-          { id: 'btn-1', component: { Button: { child: 'btn-text', action: { name: 'test' } } } },
+          {
+            id: 'btn-text',
+            component: {Text: {text: {literalString: 'Click me'}, usageHint: 'body'}},
+          },
+          {id: 'btn-1', component: {Button: {child: 'btn-text', action: {name: 'test'}}}},
           // Tabs
           {
             id: 'tabs-1',
             component: {
               Tabs: {
                 tabItems: [
-                  { title: { literalString: 'List' }, child: 'col-1' },
-                  { title: { literalString: 'Action' }, child: 'btn-1' },
+                  {title: {literalString: 'List'}, child: 'col-1'},
+                  {title: {literalString: 'Action'}, child: 'btn-1'},
                 ],
               },
             },
@@ -365,7 +374,7 @@ describe('Tabs Component', () => {
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // First tab shows column content
@@ -373,23 +382,23 @@ describe('Tabs Component', () => {
       expect(screen.getByText('Item 2')).toBeInTheDocument();
 
       // Switch to second tab
-      fireEvent.click(screen.getByRole('button', { name: 'Action' }));
+      fireEvent.click(screen.getByRole('button', {name: 'Action'}));
 
       // Button should be visible
-      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+      expect(screen.getByRole('button', {name: 'Click me'})).toBeInTheDocument();
     });
   });
 
   describe('Empty/Edge Cases', () => {
     it('should render with single tab', () => {
       const messages = createTabsMessages('tabs-1', {
-        tabs: [{ title: 'Only Tab', contentText: 'Only content' }],
+        tabs: [{title: 'Only Tab', contentText: 'Only content'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const buttons = container.querySelectorAll('#buttons button');
@@ -403,17 +412,17 @@ describe('Tabs Component', () => {
           {
             id: 'tabs-1',
             component: {
-              Tabs: { tabItems: [] },
+              Tabs: {tabItems: []},
             },
           },
         ]),
         createBeginRendering('tabs-1'),
       ];
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Should still render the tabs wrapper
@@ -431,13 +440,13 @@ describe('Tabs Component', () => {
       // Tabs styling comes from structural CSS, not theme classes.
       // The litTheme.components.Tabs.container is intentionally empty.
       const messages = createTabsMessages('tabs-1', {
-        tabs: [{ title: 'Tab 1', contentText: 'Content 1' }],
+        tabs: [{title: 'Tab 1', contentText: 'Content 1'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('.a2ui-tabs > section');
@@ -448,13 +457,13 @@ describe('Tabs Component', () => {
       // Tabs button container styling comes from structural CSS.
       // The litTheme.components.Tabs.element is intentionally empty.
       const messages = createTabsMessages('tabs-1', {
-        tabs: [{ title: 'Tab 1', contentText: 'Content 1' }],
+        tabs: [{title: 'Tab 1', contentText: 'Content 1'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const buttonsContainer = container.querySelector('#buttons');
@@ -466,15 +475,15 @@ describe('Tabs Component', () => {
       // The litTheme.components.Tabs.controls.all/selected are intentionally empty.
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content 1' },
-          { title: 'Tab 2', contentText: 'Content 2' },
+          {title: 'Tab 1', contentText: 'Content 1'},
+          {title: 'Tab 2', contentText: 'Content 2'},
         ],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const buttons = container.querySelectorAll('#buttons button');
@@ -487,13 +496,13 @@ describe('Tabs Component', () => {
   describe('Structure', () => {
     it('should have correct DOM structure: div.a2ui-tabs > section > #buttons + content', () => {
       const messages = createTabsMessages('tabs-1', {
-        tabs: [{ title: 'Tab 1', contentText: 'Content 1' }],
+        tabs: [{title: 'Tab 1', contentText: 'Content 1'}],
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-tabs');
@@ -516,18 +525,18 @@ describe('Tabs Component', () => {
     it('should have focusable tab buttons', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content 1' },
-          { title: 'Tab 2', contentText: 'Content 2' },
+          {title: 'Tab 1', contentText: 'Content 1'},
+          {title: 'Tab 2', contentText: 'Content 2'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
-      const tab2Button = screen.getByRole('button', { name: 'Tab 2' });
+      const tab2Button = screen.getByRole('button', {name: 'Tab 2'});
       tab2Button.focus();
       expect(document.activeElement).toBe(tab2Button);
     });
@@ -535,22 +544,22 @@ describe('Tabs Component', () => {
     it('should be keyboard activatable', () => {
       const messages = createTabsMessages('tabs-1', {
         tabs: [
-          { title: 'Tab 1', contentText: 'Content 1' },
-          { title: 'Tab 2', contentText: 'Content 2' },
+          {title: 'Tab 1', contentText: 'Content 1'},
+          {title: 'Tab 2', contentText: 'Content 2'},
         ],
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
-      const tab2Button = screen.getByRole('button', { name: 'Tab 2' });
+      const tab2Button = screen.getByRole('button', {name: 'Tab 2'});
 
       // Focus and press Enter
       tab2Button.focus();
-      fireEvent.keyDown(tab2Button, { key: 'Enter' });
+      fireEvent.keyDown(tab2Button, {key: 'Enter'});
       fireEvent.click(tab2Button); // Buttons respond to click, not keyDown by default
 
       expect(screen.getByText('Content 2')).toBeInTheDocument();
diff --git a/renderers/react/tests/v0_8/unit/components/Text.test.tsx b/renderers/react/tests/v0_8/unit/components/Text.test.tsx
index c8afd2b39..46640dd12 100644
--- a/renderers/react/tests/v0_8/unit/components/Text.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/Text.test.tsx
@@ -14,24 +14,24 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen, waitFor} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
-import { litTheme, defaultTheme } from '../../../../src/v0_8';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
+import {litTheme, defaultTheme} from '../../../../src/v0_8';
 
 describe('Text Component', () => {
   describe('Basic Rendering', () => {
     it('should render text with literal string', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Hello World' },
+        text: {literalString: 'Hello World'},
         usageHint: 'body',
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -41,14 +41,14 @@ describe('Text Component', () => {
 
     it('should render text with whitespace only', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '   ' },
+        text: {literalString: '   '},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       // Surface should exist with whitespace content
@@ -58,14 +58,14 @@ describe('Text Component', () => {
 
     it('should render empty string', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '' },
+        text: {literalString: ''},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(container.querySelector('.a2ui-surface')).toBeInTheDocument();
@@ -75,17 +75,17 @@ describe('Text Component', () => {
   describe('Usage Hints', () => {
     const usageHints = ['h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body'] as const;
 
-    usageHints.forEach((hint) => {
+    usageHints.forEach(hint => {
       it(`should render with usageHint="${hint}"`, async () => {
         const messages = createSimpleMessages('text-1', 'Text', {
-          text: { literalString: `${hint} text` },
+          text: {literalString: `${hint} text`},
           usageHint: hint,
         });
 
         render(
           <TestWrapper>
             <TestRenderer messages={messages} />
-          </TestWrapper>
+          </TestWrapper>,
         );
 
         await waitFor(() => {
@@ -98,14 +98,14 @@ describe('Text Component', () => {
     // The usageHint only affects CSS classes, not the wrapper element.
     it('should render h1 with section wrapper (Lit DOM structure)', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Main Title' },
+        text: {literalString: 'Main Title'},
         usageHint: 'h1',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -118,14 +118,14 @@ describe('Text Component', () => {
 
     it('should render h2 with section wrapper (Lit DOM structure)', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Section Title' },
+        text: {literalString: 'Section Title'},
         usageHint: 'h2',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -137,14 +137,14 @@ describe('Text Component', () => {
 
     it('should render caption with section wrapper (Lit DOM structure)', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Caption text' },
+        text: {literalString: 'Caption text'},
         usageHint: 'caption',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -156,14 +156,14 @@ describe('Text Component', () => {
 
     it('should render body with section wrapper (Lit DOM structure)', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Body text' },
+        text: {literalString: 'Body text'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -177,14 +177,14 @@ describe('Text Component', () => {
   describe('Theme Support', () => {
     it('should apply default theme classes', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Themed text' },
+        text: {literalString: 'Themed text'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={defaultTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -197,14 +197,14 @@ describe('Text Component', () => {
 
     it('should apply lit theme classes for h1', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Lit theme text' },
+        text: {literalString: 'Lit theme text'},
         usageHint: 'h1',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={litTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -217,14 +217,14 @@ describe('Text Component', () => {
 
     it('should apply body variant classes from lit theme', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Body text' },
+        text: {literalString: 'Body text'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={litTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -239,14 +239,14 @@ describe('Text Component', () => {
   describe('Markdown Rendering', () => {
     it('should render bold text', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'This is **bold** text' },
+        text: {literalString: 'This is **bold** text'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -258,14 +258,14 @@ describe('Text Component', () => {
 
     it('should render italic text', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'This is *italic* text' },
+        text: {literalString: 'This is *italic* text'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -277,14 +277,14 @@ describe('Text Component', () => {
 
     it('should render inline code', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Use the `console.log()` function' },
+        text: {literalString: 'Use the `console.log()` function'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -296,14 +296,14 @@ describe('Text Component', () => {
 
     it('should render unordered lists', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '- Item 1\n- Item 2\n- Item 3' },
+        text: {literalString: '- Item 1\n- Item 2\n- Item 3'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -316,14 +316,14 @@ describe('Text Component', () => {
 
     it('should render ordered lists', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '1. First\n2. Second\n3. Third' },
+        text: {literalString: '1. First\n2. Second\n3. Third'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -336,14 +336,14 @@ describe('Text Component', () => {
 
     it('should render links', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Visit [Google](https://google.com)' },
+        text: {literalString: 'Visit [Google](https://google.com)'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -356,14 +356,14 @@ describe('Text Component', () => {
 
     it('should render plain URLs as text (auto-linkify not enabled)', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Check out https://example.com for more' },
+        text: {literalString: 'Check out https://example.com for more'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -375,14 +375,14 @@ describe('Text Component', () => {
 
     it('should render blockquotes', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '> This is a quote' },
+        text: {literalString: '> This is a quote'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -393,14 +393,14 @@ describe('Text Component', () => {
 
     it('should render code blocks', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '```\nconst x = 1;\n```' },
+        text: {literalString: '```\nconst x = 1;\n```'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -413,14 +413,14 @@ describe('Text Component', () => {
 
     it('should preserve line breaks in text', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'Line 1\nLine 2' },
+        text: {literalString: 'Line 1\nLine 2'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -434,14 +434,14 @@ describe('Text Component', () => {
   describe('Markdown Theme Classes', () => {
     it('should apply theme classes to markdown elements', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '- List item' },
+        text: {literalString: '- List item'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={litTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -454,14 +454,14 @@ describe('Text Component', () => {
 
     it('should apply paragraph classes from theme', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: 'A paragraph of text.' },
+        text: {literalString: 'A paragraph of text.'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper theme={litTheme}>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -476,14 +476,14 @@ describe('Text Component', () => {
   describe('Security', () => {
     it('should not render raw HTML', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '<script>alert("xss")</script>' },
+        text: {literalString: '<script>alert("xss")</script>'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -497,14 +497,14 @@ describe('Text Component', () => {
 
     it('should not render onclick handlers', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '<div onclick="alert(1)">Click me</div>' },
+        text: {literalString: '<div onclick="alert(1)">Click me</div>'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
@@ -516,14 +516,14 @@ describe('Text Component', () => {
 
     it('should not render iframe tags', async () => {
       const messages = createSimpleMessages('text-1', 'Text', {
-        text: { literalString: '<iframe src="https://evil.com"></iframe>' },
+        text: {literalString: '<iframe src="https://evil.com"></iframe>'},
         usageHint: 'body',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       await waitFor(() => {
diff --git a/renderers/react/tests/v0_8/unit/components/TextField.test.tsx b/renderers/react/tests/v0_8/unit/components/TextField.test.tsx
index f2d1f281b..8f0a51865 100644
--- a/renderers/react/tests/v0_8/unit/components/TextField.test.tsx
+++ b/renderers/react/tests/v0_8/unit/components/TextField.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
 import React from 'react';
-import { TestWrapper, TestRenderer, createSimpleMessages } from '../../utils';
+import {TestWrapper, TestRenderer, createSimpleMessages} from '../../utils';
 
 /**
  * TextField tests following A2UI specification.
@@ -32,13 +32,13 @@ describe('TextField Component', () => {
   describe('Basic Rendering', () => {
     it('should render an input element', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Username' },
+        label: {literalString: 'Username'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -47,13 +47,13 @@ describe('TextField Component', () => {
 
     it('should render with wrapper div', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Email' },
+        label: {literalString: 'Email'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const wrapper = container.querySelector('.a2ui-textfield');
@@ -62,14 +62,14 @@ describe('TextField Component', () => {
 
     it('should render with initial text value', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Name' },
-        text: { literalString: 'John Doe' },
+        label: {literalString: 'Name'},
+        text: {literalString: 'John Doe'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
@@ -78,13 +78,13 @@ describe('TextField Component', () => {
 
     it('should render placeholder text', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Search' },
+        label: {literalString: 'Search'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
@@ -95,13 +95,13 @@ describe('TextField Component', () => {
   describe('Label Rendering', () => {
     it('should render label (required field)', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Username' },
+        label: {literalString: 'Username'},
       });
 
       render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       expect(screen.getByText('Username')).toBeInTheDocument();
@@ -109,13 +109,13 @@ describe('TextField Component', () => {
 
     it('should associate label with input via htmlFor', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Email Address' },
+        label: {literalString: 'Email Address'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const label = container.querySelector('label');
@@ -127,14 +127,14 @@ describe('TextField Component', () => {
   describe('Input Types (type)', () => {
     it('should render text input by default (shortText)', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Name' },
+        label: {literalString: 'Name'},
         type: 'shortText',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -143,14 +143,14 @@ describe('TextField Component', () => {
 
     it('should render number input for type=number', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Age' },
+        label: {literalString: 'Age'},
         textFieldType: 'number',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -159,14 +159,14 @@ describe('TextField Component', () => {
 
     it('should render date input for type=date', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Birth Date' },
+        label: {literalString: 'Birth Date'},
         textFieldType: 'date',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input');
@@ -175,14 +175,14 @@ describe('TextField Component', () => {
 
     it('should render textarea for type=longText', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Description' },
+        label: {literalString: 'Description'},
         textFieldType: 'longText',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const textarea = container.querySelector('textarea');
@@ -194,35 +194,35 @@ describe('TextField Component', () => {
   describe('User Interaction', () => {
     it('should update value on change', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Input' },
+        label: {literalString: 'Input'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
-      fireEvent.change(input, { target: { value: 'New value' } });
+      fireEvent.change(input, {target: {value: 'New value'}});
 
       expect(input.value).toBe('New value');
     });
 
     it('should update textarea value on change', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Comments' },
+        label: {literalString: 'Comments'},
         textFieldType: 'longText',
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const textarea = container.querySelector('textarea') as HTMLTextAreaElement;
-      fireEvent.change(textarea, { target: { value: 'Long text content' } });
+      fireEvent.change(textarea, {target: {value: 'Long text content'}});
 
       expect(textarea.value).toBe('Long text content');
     });
@@ -231,13 +231,13 @@ describe('TextField Component', () => {
   describe('Theme Support', () => {
     it('should render within section container', () => {
       const messages = createSimpleMessages('tf-1', 'TextField', {
-        label: { literalString: 'Field' },
+        label: {literalString: 'Field'},
       });
 
-      const { container } = render(
+      const {container} = render(
         <TestWrapper>
           <TestRenderer messages={messages} />
-        </TestWrapper>
+        </TestWrapper>,
       );
 
       const section = container.querySelector('section');
diff --git a/renderers/react/tests/v0_8/utils/assertions.ts b/renderers/react/tests/v0_8/utils/assertions.ts
index 518274ce5..73748fa4e 100644
--- a/renderers/react/tests/v0_8/utils/assertions.ts
+++ b/renderers/react/tests/v0_8/utils/assertions.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { Mock } from 'vitest';
+import type {Mock} from 'vitest';
 
 /**
  * Safely get a mock call argument with proper typing.
@@ -36,7 +36,9 @@ export function getMockCallArg<T>(mock: Mock, callIndex: number, argIndex = 0):
 export function getElement<T>(array: T[], index: number): T {
   const element = array[index];
   if (element === undefined) {
-    throw new Error(`Array element at index ${index} does not exist. Array length: ${array.length}`);
+    throw new Error(
+      `Array element at index ${index} does not exist. Array length: ${array.length}`,
+    );
   }
   return element;
 }
diff --git a/renderers/react/tests/v0_8/utils/messages.ts b/renderers/react/tests/v0_8/utils/messages.ts
index 32f87a50e..6a1891432 100644
--- a/renderers/react/tests/v0_8/utils/messages.ts
+++ b/renderers/react/tests/v0_8/utils/messages.ts
@@ -20,13 +20,13 @@ import type * as Types from '@a2ui/web_core/types/types';
  * Create a surface update message with components.
  */
 export function createSurfaceUpdate(
-  components: Array<{ id: string; component: Record<string, unknown> }>,
-  surfaceId = '@default'
+  components: Array<{id: string; component: Record<string, unknown>}>,
+  surfaceId = '@default',
 ): Types.ServerToClientMessage {
   return {
     surfaceUpdate: {
       surfaceId,
-      components: components.map((c) => ({
+      components: components.map(c => ({
         id: c.id,
         component: c.component,
       })),
@@ -39,7 +39,7 @@ export function createSurfaceUpdate(
  */
 export function createBeginRendering(
   rootId: string,
-  surfaceId = '@default'
+  surfaceId = '@default',
 ): Types.ServerToClientMessage {
   return {
     beginRendering: {
@@ -56,13 +56,10 @@ export function createSimpleMessages(
   id: string,
   componentType: string,
   props: Record<string, unknown>,
-  surfaceId = '@default'
+  surfaceId = '@default',
 ): Types.ServerToClientMessage[] {
   return [
-    createSurfaceUpdate(
-      [{ id, component: { [componentType]: props } }],
-      surfaceId
-    ),
+    createSurfaceUpdate([{id, component: {[componentType]: props}}], surfaceId),
     createBeginRendering(id, surfaceId),
   ];
 }
@@ -72,9 +69,15 @@ export function createSimpleMessages(
  * Per A2UI spec: Updates application state independently of UI structure.
  */
 export function createDataModelUpdate(
-  contents: Array<{ key: string; valueString?: string; valueNumber?: number; valueBoolean?: boolean; valueMap?: unknown[] }>,
+  contents: Array<{
+    key: string;
+    valueString?: string;
+    valueNumber?: number;
+    valueBoolean?: boolean;
+    valueMap?: unknown[];
+  }>,
   surfaceId = '@default',
-  path?: string
+  path?: string,
 ): Types.ServerToClientMessage {
   return {
     dataModelUpdate: {
@@ -102,9 +105,9 @@ export function createDeleteSurface(surfaceId: string): Types.ServerToClientMess
  * Uses valueString for JSON-serializable values.
  */
 export function createDataModelUpdateSpec(
-  contents: Array<{ key: string; valueString?: string; valueMap?: unknown[] }>,
+  contents: Array<{key: string; valueString?: string; valueMap?: unknown[]}>,
   surfaceId = '@default',
-  path = '/'
+  path = '/',
 ): Types.ServerToClientMessage {
   return {
     dataModelUpdate: {
diff --git a/renderers/react/tests/v0_8/utils/render.tsx b/renderers/react/tests/v0_8/utils/render.tsx
index ff43f42a6..28acfac9e 100644
--- a/renderers/react/tests/v0_8/utils/render.tsx
+++ b/renderers/react/tests/v0_8/utils/render.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import React, { useEffect, type ReactNode } from 'react';
-import { A2UIProvider, A2UIRenderer, useA2UI } from '../../../src/v0_8';
+import React, {useEffect, type ReactNode} from 'react';
+import {A2UIProvider, A2UIRenderer, useA2UI} from '../../../src/v0_8';
 import type * as Types from '@a2ui/web_core/types/types';
 
 /**
@@ -28,7 +28,7 @@ export function TestRenderer({
   messages: Types.ServerToClientMessage[];
   surfaceId?: string;
 }) {
-  const { processMessages } = useA2UI();
+  const {processMessages} = useA2UI();
 
   useEffect(() => {
     processMessages(messages);
diff --git a/renderers/react/tests/v0_9/adapter.test.tsx b/renderers/react/tests/v0_9/adapter.test.tsx
index 30fc781c2..96e952e03 100644
--- a/renderers/react/tests/v0_9/adapter.test.tsx
+++ b/renderers/react/tests/v0_9/adapter.test.tsx
@@ -14,19 +14,28 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
-import { createComponentImplementation } from '../../src/v0_9/adapter';
-import { A2uiSurface } from '../../src/v0_9/A2uiSurface';
-import { ComponentContext, ComponentModel, SurfaceModel, Catalog, CommonSchemas } from '@a2ui/web_core/v0_9';
-import { z } from 'zod';
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {createComponentImplementation} from '../../src/v0_9/adapter';
+import {A2uiSurface} from '../../src/v0_9/A2uiSurface';
+import {
+  ComponentContext,
+  ComponentModel,
+  SurfaceModel,
+  Catalog,
+  CommonSchemas,
+} from '@a2ui/web_core/v0_9';
+import {z} from 'zod';
 
 const mockCatalog = new Catalog('test', [], []);
 
 describe('adapter', () => {
   it('should render component with resolved props', () => {
     const surface = new SurfaceModel<any>('test-surface', mockCatalog);
-    const compModel = new ComponentModel('c1', 'TestComp', { text: 'Hello World', child: 'child1' });
+    const compModel = new ComponentModel('c1', 'TestComp', {
+      text: 'Hello World',
+      child: 'child1',
+    });
     surface.componentsModel.addComponent(compModel);
 
     const context = new ComponentContext(surface, 'c1', '/');
@@ -35,21 +44,20 @@ describe('adapter', () => {
       name: 'TestComp',
       schema: z.object({
         text: CommonSchemas.DynamicString,
-        child: CommonSchemas.ComponentId
-      })
+        child: CommonSchemas.ComponentId,
+      }),
     };
 
-    const TestComponent = createComponentImplementation(
-      TestApiDef,
-      ({ props, buildChild }) => {
-        return <div>
+    const TestComponent = createComponentImplementation(TestApiDef, ({props, buildChild}) => {
+      return (
+        <div>
           <span>{props.text}</span>
           {props.child && buildChild(props.child)}
-        </div>;
-      }
-    );
+        </div>
+      );
+    });
 
-    const buildChild = vi.fn().mockImplementation((id) => <div data-testid={id}>Child</div>);
+    const buildChild = vi.fn().mockImplementation(id => <div data-testid={id}>Child</div>);
 
     render(<TestComponent.render context={context} buildChild={buildChild} />);
 
@@ -59,9 +67,9 @@ describe('adapter', () => {
 
   it('should react to data model changes', async () => {
     const surface = new SurfaceModel<any>('test-surface', mockCatalog);
-    const compModel = new ComponentModel('c1', 'TestComp', { text: { path: '/greeting' } });
+    const compModel = new ComponentModel('c1', 'TestComp', {text: {path: '/greeting'}});
     surface.componentsModel.addComponent(compModel);
-    
+
     // Set initial data
     surface.dataModel.set('/greeting', 'Hello Reactive');
 
@@ -70,18 +78,17 @@ describe('adapter', () => {
     const TestApiDef = {
       name: 'TestComp',
       schema: z.object({
-        text: CommonSchemas.DynamicString
-      })
+        text: CommonSchemas.DynamicString,
+      }),
     };
 
-    const TestComponent = createComponentImplementation(
-      TestApiDef,
-      ({ props }) => {
-        return <div data-testid="msg">{props.text}</div>;
-      }
-    );
+    const TestComponent = createComponentImplementation(TestApiDef, ({props}) => {
+      return <div data-testid="msg">{props.text}</div>;
+    });
 
-    const { getByTestId } = render(<TestComponent.render context={context} buildChild={() => null} />);
+    const {getByTestId} = render(
+      <TestComponent.render context={context} buildChild={() => null} />,
+    );
 
     expect(getByTestId('msg').textContent).toBe('Hello Reactive');
 
@@ -95,9 +102,9 @@ describe('adapter', () => {
 
   it('should clean up listeners on unmount', () => {
     const surface = new SurfaceModel<any>('test-surface', mockCatalog);
-    const compModel = new ComponentModel('c1', 'TestComp', { text: { path: '/greeting' } });
+    const compModel = new ComponentModel('c1', 'TestComp', {text: {path: '/greeting'}});
     surface.componentsModel.addComponent(compModel);
-    
+
     const context = new ComponentContext(surface, 'c1', '/');
 
     const unsubscribeSpy = vi.fn();
@@ -109,64 +116,69 @@ describe('adapter', () => {
     const TestApiDef = {
       name: 'TestComp',
       schema: z.object({
-        text: CommonSchemas.DynamicString
-      })
+        text: CommonSchemas.DynamicString,
+      }),
     };
 
-    const TestComponent = createComponentImplementation(
-      TestApiDef,
-      ({ props }) => {
-        return <div>{props.text}</div>;
-      }
-    );
+    const TestComponent = createComponentImplementation(TestApiDef, ({props}) => {
+      return <div>{props.text}</div>;
+    });
 
-    const { unmount } = render(<TestComponent.render context={context} buildChild={() => null} />);
+    const {unmount} = render(<TestComponent.render context={context} buildChild={() => null} />);
 
     expect(spyAddListener).toHaveBeenCalled();
-    
+
     unmount();
-    
+
     expect(unsubscribeSpy).toHaveBeenCalled();
   });
 
   it('preserves progressive rendering (avoids stale closures from over-memoization)', async () => {
-    const ParentApiDef = { name: 'TestParent', schema: z.object({ child: CommonSchemas.ComponentId }) };
-    const ChildApiDef = { name: 'TestChild', schema: z.object({ text: CommonSchemas.DynamicString }) };
-    
+    const ParentApiDef = {
+      name: 'TestParent',
+      schema: z.object({child: CommonSchemas.ComponentId}),
+    };
+    const ChildApiDef = {
+      name: 'TestChild',
+      schema: z.object({text: CommonSchemas.DynamicString}),
+    };
+
     let parentRenderCount = 0;
 
-    const TestParent = createComponentImplementation(ParentApiDef, ({ props, buildChild }) => {
+    const TestParent = createComponentImplementation(ParentApiDef, ({props, buildChild}) => {
       parentRenderCount++;
       return <div data-testid="parent">{props.child && buildChild(props.child)}</div>;
     });
 
-    const TestChild = createComponentImplementation(ChildApiDef, ({ props }) => (
+    const TestChild = createComponentImplementation(ChildApiDef, ({props}) => (
       <span data-testid="resolved">{props.text}</span>
     ));
 
     const testCatalog = new Catalog('test', [TestParent, TestChild], []);
     const surface = new SurfaceModel<any>('test-surface', testCatalog);
-    
+
     // 1. Initial State: Parent component exists, but its child is missing from the surface.
-    const parentModel = new ComponentModel('root', 'TestParent', { child: 'child1' });
+    const parentModel = new ComponentModel('root', 'TestParent', {child: 'child1'});
     surface.componentsModel.addComponent(parentModel);
 
-    const { getByTestId, queryByTestId } = render(<A2uiSurface surface={surface} />);
+    const {getByTestId, queryByTestId} = render(<A2uiSurface surface={surface} />);
 
     // Assert the missing child renders the fallback
     expect(getByTestId('parent').textContent).toContain('[Loading child1...]');
-    
+
     const countBeforeChild = parentRenderCount;
 
     // 2. Simulate streaming 'updateComponents' adding the missing child
     await act(async () => {
-      surface.componentsModel.addComponent(new ComponentModel('child1', 'TestChild', { text: 'Loaded Data' }));
+      surface.componentsModel.addComponent(
+        new ComponentModel('child1', 'TestChild', {text: 'Loaded Data'}),
+      );
     });
 
     // 3. Child should automatically resolve through DeferredChild's subscription
     expect(queryByTestId('resolved')).not.toBeNull();
     expect(getByTestId('resolved').textContent).toBe('Loaded Data');
-    
+
     // Crucially, the parent should NOT have re-rendered because of the child addition.
     // The DeferredChild wrapper localized the update.
     expect(parentRenderCount).toBe(countBeforeChild);
diff --git a/renderers/react/tests/v0_9/basic-catalog-examples.test.tsx b/renderers/react/tests/v0_9/basic-catalog-examples.test.tsx
index 29d13cda0..18e2d7fa9 100644
--- a/renderers/react/tests/v0_9/basic-catalog-examples.test.tsx
+++ b/renderers/react/tests/v0_9/basic-catalog-examples.test.tsx
@@ -27,14 +27,14 @@ import path from 'path';
 describe('v0.9 Basic Catalog Examples Rendering', () => {
   const examplesDir = path.resolve(
     process.cwd(),
-    '../../specification/v0_9/json/catalogs/basic/examples'
+    '../../specification/v0_9/json/catalogs/basic/examples',
   );
 
   if (!fs.existsSync(examplesDir)) {
     throw new Error(`Examples directory not found: ${examplesDir}`);
   }
 
-  const files = fs.readdirSync(examplesDir).filter((f) => f.endsWith('.json'));
+  const files = fs.readdirSync(examplesDir).filter(f => f.endsWith('.json'));
 
   for (const file of files) {
     it(`should successfully render ${file}`, async () => {
@@ -65,7 +65,7 @@ describe('v0.9 Basic Catalog Examples Rendering', () => {
       const {container} = render(
         <React.StrictMode>
           <A2uiSurface surface={surface as any} />
-        </React.StrictMode>
+        </React.StrictMode>,
       );
 
       // Assert that it rendered something and didn't throw
diff --git a/renderers/react/tests/v0_9/catalog-components.test.tsx b/renderers/react/tests/v0_9/catalog-components.test.tsx
index 23ef100cd..59afa8bcc 100644
--- a/renderers/react/tests/v0_9/catalog-components.test.tsx
+++ b/renderers/react/tests/v0_9/catalog-components.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi } from 'vitest';
-import { screen, fireEvent, act } from '@testing-library/react';
-import { ComponentModel } from '@a2ui/web_core/v0_9';
-import { renderA2uiComponent } from '../utils';
+import {describe, it, expect, vi} from 'vitest';
+import {screen, fireEvent, act} from '@testing-library/react';
+import {ComponentModel} from '@a2ui/web_core/v0_9';
+import {renderA2uiComponent} from '../utils';
 
 import {
   Text,
@@ -43,18 +43,18 @@ import {
 describe('Basic Catalog Components', () => {
   describe('Text', () => {
     it('renders static text', () => {
-      renderA2uiComponent(Text, 't1', { text: 'Hello World' });
+      renderA2uiComponent(Text, 't1', {text: 'Hello World'});
       expect(screen.getByText('Hello World')).toBeDefined();
     });
 
     it('renders reactive text from data model', async () => {
-      const { updateData } = renderA2uiComponent(
-        Text, 
-        't1', 
-        { text: { path: '/msg' } },
-        { initialData: { msg: 'Initial' } }
+      const {updateData} = renderA2uiComponent(
+        Text,
+        't1',
+        {text: {path: '/msg'}},
+        {initialData: {msg: 'Initial'}},
       );
-      
+
       expect(screen.getByText('Initial')).toBeDefined();
 
       await act(async () => {
@@ -65,7 +65,7 @@ describe('Basic Catalog Components', () => {
     });
 
     it('renders with correct heading tag based on variant', () => {
-      const { view } = renderA2uiComponent(Text, 't1', { text: 'Title', variant: 'h1' });
+      const {view} = renderA2uiComponent(Text, 't1', {text: 'Title', variant: 'h1'});
       const h1 = view.container.querySelector('div.h1');
       expect(h1).not.toBeNull();
       expect(h1?.textContent).toBe('# Title');
@@ -74,9 +74,9 @@ describe('Basic Catalog Components', () => {
 
   describe('Image', () => {
     it('renders image with url and object-fit', () => {
-      const { view } = renderA2uiComponent(Image, 'i1', { 
+      const {view} = renderA2uiComponent(Image, 'i1', {
         url: 'https://example.com/img.png',
-        fit: 'cover'
+        fit: 'cover',
       });
       const img = view.container.querySelector('img') as HTMLImageElement;
       expect(img.src).toBe('https://example.com/img.png');
@@ -84,18 +84,18 @@ describe('Basic Catalog Components', () => {
     });
 
     it('renders image with description as alt text', () => {
-      const { view } = renderA2uiComponent(Image, 'i1', { 
+      const {view} = renderA2uiComponent(Image, 'i1', {
         url: 'url',
-        description: 'A beautiful sunset'
+        description: 'A beautiful sunset',
       });
       const img = view.container.querySelector('img') as HTMLImageElement;
       expect(img.alt).toBe('A beautiful sunset');
     });
 
     it('applies variant-specific styling (avatar)', () => {
-      const { view } = renderA2uiComponent(Image, 'i1', { 
+      const {view} = renderA2uiComponent(Image, 'i1', {
         url: 'url',
-        variant: 'avatar'
+        variant: 'avatar',
       });
       const img = view.container.querySelector('img') as HTMLImageElement;
       expect(img.style.borderRadius).toBe('50%');
@@ -105,13 +105,13 @@ describe('Basic Catalog Components', () => {
 
   describe('Icon', () => {
     it('renders material icon by name', () => {
-      const { view } = renderA2uiComponent(Icon, 'ic1', { name: 'settings' });
+      const {view} = renderA2uiComponent(Icon, 'ic1', {name: 'settings'});
       expect(view.container.textContent).toContain('settings');
       expect(view.container.querySelector('.material-symbols-outlined')).not.toBeNull();
     });
 
     it('converts camelCase icon names to snake_case', () => {
-      const { view } = renderA2uiComponent(Icon, 'ic1', { name: 'shoppingCart' });
+      const {view} = renderA2uiComponent(Icon, 'ic1', {name: 'shoppingCart'});
       expect(view.container.textContent).toContain('shopping_cart');
     });
 
@@ -121,14 +121,14 @@ describe('Basic Catalog Components', () => {
       ['favoriteOff', 'favorite_border'],
       ['starOff', 'star_border'],
     ])('maps "%s" to "%s"', (specName, materialName) => {
-      const { view } = renderA2uiComponent(Icon, 'ic1', { name: specName });
+      const {view} = renderA2uiComponent(Icon, 'ic1', {name: specName});
       expect(view.container.textContent).toContain(materialName);
     });
   });
 
   describe('Video', () => {
     it('renders video element with source and controls', () => {
-      const { view } = renderA2uiComponent(Video, 'v1', { url: 'vid.mp4' });
+      const {view} = renderA2uiComponent(Video, 'v1', {url: 'vid.mp4'});
       const video = view.container.querySelector('video') as HTMLVideoElement;
       expect(video.src).toContain('vid.mp4');
       expect(video.controls).toBe(true);
@@ -137,9 +137,9 @@ describe('Basic Catalog Components', () => {
 
   describe('AudioPlayer', () => {
     it('renders audio element and description', () => {
-      renderA2uiComponent(AudioPlayer, 'a1', { 
+      renderA2uiComponent(AudioPlayer, 'a1', {
         url: 'audio.mp3',
-        description: 'Listen to this'
+        description: 'Listen to this',
       });
       expect(screen.getByText('Listen to this')).toBeDefined();
       const audio = document.querySelector('audio') as HTMLAudioElement;
@@ -149,34 +149,34 @@ describe('Basic Catalog Components', () => {
 
   describe('Button', () => {
     it('dispatches action on click', async () => {
-      const { surface } = renderA2uiComponent(Button, 'b1', { 
-        action: { event: { name: 'submit_clicked' } },
-        child: 'label1'
+      const {surface} = renderA2uiComponent(Button, 'b1', {
+        action: {event: {name: 'submit_clicked'}},
+        child: 'label1',
       });
 
       const actionSpy = vi.fn();
       surface.onAction.subscribe(actionSpy);
 
       fireEvent.click(screen.getByRole('button'));
-      
-      expect(actionSpy).toHaveBeenCalledWith(expect.objectContaining({ name: 'submit_clicked' }));
+
+      expect(actionSpy).toHaveBeenCalledWith(expect.objectContaining({name: 'submit_clicked'}));
     });
 
     it('is disabled when isValid is false (via checks)', async () => {
-      const { updateData } = renderA2uiComponent(
-        Button, 
-        'b1', 
-        { 
-          action: { event: { name: 'submit' } },
+      const {updateData} = renderA2uiComponent(
+        Button,
+        'b1',
+        {
+          action: {event: {name: 'submit'}},
           checks: [
             {
               call: 'required',
-              args: { value: { path: '/name' } },
-              message: 'Name is required'
-            }
-          ]
+              args: {value: {path: '/name'}},
+              message: 'Name is required',
+            },
+          ],
         },
-        { initialData: { name: '' } }
+        {initialData: {name: ''}},
       );
 
       const button = screen.getByRole('button') as HTMLButtonElement;
@@ -190,7 +190,7 @@ describe('Basic Catalog Components', () => {
     });
 
     it('delegates child rendering to buildChild', () => {
-      const { buildChild } = renderA2uiComponent(Button, 'b1', { child: 'inner1' });
+      const {buildChild} = renderA2uiComponent(Button, 'b1', {child: 'inner1'});
       expect(buildChild).toHaveBeenCalledWith('inner1');
       expect(screen.getByTestId('child-inner1')).toBeDefined();
     });
@@ -198,27 +198,27 @@ describe('Basic Catalog Components', () => {
 
   describe('TextField', () => {
     it('updates data model on change', () => {
-      const { surface } = renderA2uiComponent(TextField, 'f1', { 
+      const {surface} = renderA2uiComponent(TextField, 'f1', {
         label: 'Name',
-        value: { path: '/user/name' }
+        value: {path: '/user/name'},
       });
 
       const input = screen.getByLabelText('Name');
-      fireEvent.change(input, { target: { value: 'Bob' } });
-      
+      fireEvent.change(input, {target: {value: 'Bob'}});
+
       expect(surface.dataModel.get('/user/name')).toBe('Bob');
     });
 
     it('shows validation error message', async () => {
-      const { updateData } = renderA2uiComponent(
-        TextField, 
-        'f1', 
-        { 
+      const {updateData} = renderA2uiComponent(
+        TextField,
+        'f1',
+        {
           label: 'Email',
-          value: { path: '/email' },
-          checks: [{ call: 'required', args: { value: { path: '/email' } }, message: 'Required!' }]
+          value: {path: '/email'},
+          checks: [{call: 'required', args: {value: {path: '/email'}}, message: 'Required!'}],
         },
-        { initialData: { email: '' } }
+        {initialData: {email: ''}},
       );
 
       expect(screen.getByText('Required!')).toBeDefined();
@@ -233,8 +233,8 @@ describe('Basic Catalog Components', () => {
 
   describe('Layout and Structural Components', () => {
     it('Row renders multiple children', () => {
-      const { buildChild } = renderA2uiComponent(Row, 'r1', { 
-        children: ['c1', 'c2']
+      const {buildChild} = renderA2uiComponent(Row, 'r1', {
+        children: ['c1', 'c2'],
       });
 
       expect(buildChild).toHaveBeenCalledWith('c1');
@@ -244,27 +244,25 @@ describe('Basic Catalog Components', () => {
     });
 
     it('Column renders children vertically', () => {
-      const { buildChild, view } = renderA2uiComponent(Column, 'col1', { 
-        children: ['c1']
+      const {buildChild, view} = renderA2uiComponent(Column, 'col1', {
+        children: ['c1'],
       });
       expect(buildChild).toHaveBeenCalledWith('c1');
-      expect(view.container.firstChild).toHaveStyle({ flexDirection: 'column' });
+      expect(view.container.firstChild).toHaveStyle({flexDirection: 'column'});
     });
 
     it('List supports dynamic templates with scoped data context', () => {
       renderA2uiComponent(
-        List, 
-        'list1', 
-        { 
-          children: { componentId: 'itemComp', path: '/items' } 
+        List,
+        'list1',
+        {
+          children: {componentId: 'itemComp', path: '/items'},
         },
         {
-          initialData: { items: [{ n: 'A' }, { n: 'B' }] },
+          initialData: {items: [{n: 'A'}, {n: 'B'}]},
           additionalImpls: [Text],
-          additionalComponents: [
-            new ComponentModel('itemComp', 'Text', { text: { path: 'n' } })
-          ]
-        }
+          additionalComponents: [new ComponentModel('itemComp', 'Text', {text: {path: 'n'}})],
+        },
       );
 
       expect(screen.getByText('A')).toBeDefined();
@@ -272,7 +270,7 @@ describe('Basic Catalog Components', () => {
     });
 
     it('Card renders its child', () => {
-      const { buildChild } = renderA2uiComponent(Card, 'card1', { child: 'c1' });
+      const {buildChild} = renderA2uiComponent(Card, 'card1', {child: 'c1'});
       expect(buildChild).toHaveBeenCalledWith('c1');
       expect(screen.getByTestId('child-c1')).toBeDefined();
     });
@@ -280,9 +278,9 @@ describe('Basic Catalog Components', () => {
     it('Tabs switches active tab content', () => {
       renderA2uiComponent(Tabs, 'tabs1', {
         tabs: [
-          { title: 'Home', child: 'home_c' },
-          { title: 'Settings', child: 'settings_c' }
-        ]
+          {title: 'Home', child: 'home_c'},
+          {title: 'Settings', child: 'settings_c'},
+        ],
       });
 
       expect(screen.getByTestId('child-home_c')).toBeDefined();
@@ -297,7 +295,7 @@ describe('Basic Catalog Components', () => {
     it('Modal opens content on trigger click', () => {
       renderA2uiComponent(Modal, 'm1', {
         trigger: 't1',
-        content: 'c1'
+        content: 'c1',
       });
 
       expect(screen.getByTestId('child-t1')).toBeDefined();
@@ -309,16 +307,16 @@ describe('Basic Catalog Components', () => {
     });
 
     it('Divider renders a themed line', () => {
-      const { view } = renderA2uiComponent(Divider, 'd1', { axis: 'horizontal' });
-      expect(view.container.firstChild).toHaveStyle({ height: 'var(--a2ui-border-width, 1px)' });
+      const {view} = renderA2uiComponent(Divider, 'd1', {axis: 'horizontal'});
+      expect(view.container.firstChild).toHaveStyle({height: 'var(--a2ui-border-width, 1px)'});
     });
   });
 
   describe('Input Components', () => {
     it('CheckBox updates data', () => {
-      const { surface } = renderA2uiComponent(CheckBox, 'cb1', {
+      const {surface} = renderA2uiComponent(CheckBox, 'cb1', {
         label: 'Agree',
-        value: { path: '/agreed' }
+        value: {path: '/agreed'},
       });
 
       fireEvent.click(screen.getByLabelText('Agree'));
@@ -326,27 +324,30 @@ describe('Basic Catalog Components', () => {
     });
 
     it('Slider updates data', () => {
-      const { surface } = renderA2uiComponent(Slider, 's1', {
+      const {surface} = renderA2uiComponent(Slider, 's1', {
         label: 'Volume',
-        value: { path: '/vol' },
-        max: 100
+        value: {path: '/vol'},
+        max: 100,
       });
 
-      fireEvent.change(screen.getByLabelText('Volume'), { target: { value: '75' } });
+      fireEvent.change(screen.getByLabelText('Volume'), {target: {value: '75'}});
       expect(surface.dataModel.get('/vol')).toBe(75);
     });
 
     it('ChoicePicker mutuallyExclusive selection', () => {
-      const { surface } = renderA2uiComponent(ChoicePicker, 'cp1', {
+      const {surface} = renderA2uiComponent(ChoicePicker, 'cp1', {
         label: 'Pick',
-        options: [{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }],
-        value: { path: '/picked' },
-        variant: 'mutuallyExclusive'
+        options: [
+          {label: 'A', value: 'a'},
+          {label: 'B', value: 'b'},
+        ],
+        value: {path: '/picked'},
+        variant: 'mutuallyExclusive',
       });
 
       fireEvent.click(screen.getByLabelText('A'));
       expect(surface.dataModel.get('/picked')).toEqual(['a']);
-      
+
       fireEvent.click(screen.getByLabelText('B'));
       expect(surface.dataModel.get('/picked')).toEqual(['b']);
     });
@@ -354,26 +355,34 @@ describe('Basic Catalog Components', () => {
     it('ChoicePicker filters options', () => {
       renderA2uiComponent(ChoicePicker, 'cp2', {
         label: 'Pick',
-        options: [{ label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }],
-        value: { path: '/picked' },
-        filterable: true
+        options: [
+          {label: 'Apple', value: 'apple'},
+          {label: 'Banana', value: 'banana'},
+        ],
+        value: {path: '/picked'},
+        filterable: true,
       });
 
       expect(screen.getByText('Apple')).toBeDefined();
       expect(screen.getByText('Banana')).toBeDefined();
 
-      fireEvent.change(screen.getByPlaceholderText('Filter options...'), { target: { value: 'App' } });
+      fireEvent.change(screen.getByPlaceholderText('Filter options...'), {
+        target: {value: 'App'},
+      });
 
       expect(screen.getByText('Apple')).toBeDefined();
       expect(screen.queryByText('Banana')).toBeNull();
     });
 
     it('ChoicePicker renders chips and handles selection', () => {
-      const { surface } = renderA2uiComponent(ChoicePicker, 'cp3', {
+      const {surface} = renderA2uiComponent(ChoicePicker, 'cp3', {
         label: 'Pick',
-        options: [{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }],
-        value: { path: '/picked' },
-        displayStyle: 'chips'
+        options: [
+          {label: 'A', value: 'a'},
+          {label: 'B', value: 'b'},
+        ],
+        value: {path: '/picked'},
+        displayStyle: 'chips',
       });
 
       fireEvent.click(screen.getByText('A'));
@@ -381,13 +390,13 @@ describe('Basic Catalog Components', () => {
     });
 
     it('DateTimeInput handles date changes', () => {
-      const { surface } = renderA2uiComponent(DateTimeInput, 'dt1', {
+      const {surface} = renderA2uiComponent(DateTimeInput, 'dt1', {
         label: 'When',
-        value: { path: '/date' },
-        enableDate: true
+        value: {path: '/date'},
+        enableDate: true,
       });
 
-      fireEvent.change(screen.getByLabelText('When'), { target: { value: '2026-03-20' } });
+      fireEvent.change(screen.getByLabelText('When'), {target: {value: '2026-03-20'}});
       expect(surface.dataModel.get('/date')).toBe('2026-03-20');
     });
   });
diff --git a/renderers/react/tests/v0_9/integration-scenarios.test.tsx b/renderers/react/tests/v0_9/integration-scenarios.test.tsx
index 855e11c27..b7419ec45 100644
--- a/renderers/react/tests/v0_9/integration-scenarios.test.tsx
+++ b/renderers/react/tests/v0_9/integration-scenarios.test.tsx
@@ -35,7 +35,7 @@ describe('Gallery Integration Tests', () => {
     render(
       <React.StrictMode>
         <A2uiSurface surface={surface as any} />
-      </React.StrictMode>
+      </React.StrictMode>,
     );
 
     expect(screen.getByText('### Markdown Rendering')).toBeInTheDocument();
@@ -51,7 +51,7 @@ describe('Gallery Integration Tests', () => {
     render(
       <React.StrictMode>
         <A2uiSurface surface={surface as any} />
-      </React.StrictMode>
+      </React.StrictMode>,
     );
 
     expect(screen.getByText('### Review pull request')).toBeInTheDocument();
@@ -68,7 +68,7 @@ describe('Gallery Integration Tests', () => {
     render(
       <React.StrictMode>
         <A2uiSurface surface={surface as any} />
-      </React.StrictMode>
+      </React.StrictMode>,
     );
 
     const emailInput = screen.getByLabelText('Email') as HTMLInputElement;
diff --git a/renderers/react/tests/v0_9/weight.test.tsx b/renderers/react/tests/v0_9/weight.test.tsx
index ec6d7244e..0ced0d2fc 100644
--- a/renderers/react/tests/v0_9/weight.test.tsx
+++ b/renderers/react/tests/v0_9/weight.test.tsx
@@ -14,16 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { renderA2uiComponent } from '../utils';
-import { getWeightStyle } from '../../src/v0_9/catalog/basic/utils';
-import {
-  Image,
-  Text,
-  Card,
-  Row,
-  Column,
-} from '../../src/v0_9/catalog/basic';
+import {describe, it, expect} from 'vitest';
+import {renderA2uiComponent} from '../utils';
+import {getWeightStyle} from '../../src/v0_9/catalog/basic/utils';
+import {Image, Text, Card, Row, Column} from '../../src/v0_9/catalog/basic';
 
 describe('getWeightStyle', () => {
   it('returns empty object when weight is undefined', () => {
@@ -31,38 +25,38 @@ describe('getWeightStyle', () => {
   });
 
   it('returns flex, minWidth, and minHeight when weight is set', () => {
-    expect(getWeightStyle(2)).toEqual({ flex: '2', minWidth: 0, minHeight: 0 });
+    expect(getWeightStyle(2)).toEqual({flex: '2', minWidth: 0, minHeight: 0});
   });
 
   it('handles fractional weights', () => {
-    expect(getWeightStyle(1.5)).toEqual({ flex: '1.5', minWidth: 0, minHeight: 0 });
+    expect(getWeightStyle(1.5)).toEqual({flex: '1.5', minWidth: 0, minHeight: 0});
   });
 
   it('treats weight: 0 as a valid value (a child that does not grow)', () => {
     // Per spec, weight is "similar to flex-grow"; 0 is a meaningful value.
-    expect(getWeightStyle(0)).toEqual({ flex: '0', minWidth: 0, minHeight: 0 });
+    expect(getWeightStyle(0)).toEqual({flex: '0', minWidth: 0, minHeight: 0});
   });
 });
 
 describe('weight property is honored on basic catalog components', () => {
-  const cases: Array<{ name: string; impl: any; props: Record<string, any> }> = [
-    { name: 'Image', impl: Image, props: { url: 'https://example.com/x.png' } },
-    { name: 'Text', impl: Text, props: { text: 'hello' } },
-    { name: 'Card', impl: Card, props: { child: 'unknown-child' } },
-    { name: 'Row', impl: Row, props: { children: [] } },
-    { name: 'Column', impl: Column, props: { children: [] } },
+  const cases: Array<{name: string; impl: any; props: Record<string, any>}> = [
+    {name: 'Image', impl: Image, props: {url: 'https://example.com/x.png'}},
+    {name: 'Text', impl: Text, props: {text: 'hello'}},
+    {name: 'Card', impl: Card, props: {child: 'unknown-child'}},
+    {name: 'Row', impl: Row, props: {children: []}},
+    {name: 'Column', impl: Column, props: {children: []}},
   ];
 
-  for (const { name, impl, props } of cases) {
+  for (const {name, impl, props} of cases) {
     it(`${name} applies flex when weight is set`, () => {
-      const { view } = renderA2uiComponent(impl, 'c1', { ...props, weight: 2 });
+      const {view} = renderA2uiComponent(impl, 'c1', {...props, weight: 2});
       const root = view.container.firstChild as HTMLElement;
       expect(root.style.flexGrow).toBe('2');
       expect(root.style.minWidth).toBe('0');
     });
 
     it(`${name} does not apply flex when weight is unset`, () => {
-      const { view } = renderA2uiComponent(impl, 'c1', props);
+      const {view} = renderA2uiComponent(impl, 'c1', props);
       const root = view.container.firstChild as HTMLElement;
       expect(root.style.flex).toBe('');
     });
diff --git a/renderers/react/tsup.config.ts b/renderers/react/tsup.config.ts
index 26b5f1437..065912f30 100644
--- a/renderers/react/tsup.config.ts
+++ b/renderers/react/tsup.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'tsup';
+import {defineConfig} from 'tsup';
 
 export default defineConfig([
   // Main entry with DTS
@@ -37,9 +37,9 @@ export default defineConfig([
   },
   // Styles entry without DTS (avoids symlink resolution issues)
   {
-    entry: { 
+    entry: {
       'styles/index': 'src/styles/index.ts',
-      'v0_8/styles/index': 'src/v0_8/styles/index.ts'
+      'v0_8/styles/index': 'src/v0_8/styles/index.ts',
     },
     format: ['esm', 'cjs'],
     dts: false,
diff --git a/renderers/react/visual-parity/PARITY.md b/renderers/react/visual-parity/PARITY.md
index 1954704e9..9f1c7ef73 100644
--- a/renderers/react/visual-parity/PARITY.md
+++ b/renderers/react/visual-parity/PARITY.md
@@ -25,9 +25,13 @@ Each React component renders a wrapper div (representing `:host`) plus a section
 
 ```tsx
 // React component structure
-<div className="a2ui-card">           {/* ← :host equivalent */}
-  <section className="theme-classes"> {/* ← internal element */}
-    {children}                        {/* ← ::slotted(*) equivalent */}
+<div className="a2ui-card">
+  {' '}
+  {/* ← :host equivalent */}
+  <section className="theme-classes">
+    {' '}
+    {/* ← internal element */}
+    {children} {/* ← ::slotted(*) equivalent */}
   </section>
 </div>
 ```
@@ -40,16 +44,17 @@ This mirroring allows CSS selectors to target the same conceptual elements in bo
 
 Lit's Shadow DOM selectors need transformation for React's global CSS:
 
-| Lit (Shadow DOM)      | React (Light DOM)                        |
-|-----------------------|------------------------------------------|
-| `:host`               | `.a2ui-surface .a2ui-{component}`        |
-| `section`             | `.a2ui-surface .a2ui-{component} section`|
-| `::slotted(*)`        | `.a2ui-surface .a2ui-{component} section > *` |
-| `element` (e.g., `h2`)| `:where(.a2ui-surface .a2ui-{component}) element` |
+| Lit (Shadow DOM)       | React (Light DOM)                                 |
+| ---------------------- | ------------------------------------------------- |
+| `:host`                | `.a2ui-surface .a2ui-{component}`                 |
+| `section`              | `.a2ui-surface .a2ui-{component} section`         |
+| `::slotted(*)`         | `.a2ui-surface .a2ui-{component} section > *`     |
+| `element` (e.g., `h2`) | `:where(.a2ui-surface .a2ui-{component}) element` |
 
 ### Example: Card Component
 
 Lit's card.ts static styles:
+
 ```css
 :host {
   display: block;
@@ -72,6 +77,7 @@ section ::slotted(*) {
 ```
 
 React's componentSpecificStyles equivalent:
+
 ```css
 .a2ui-surface .a2ui-card {
   display: block;
@@ -100,6 +106,7 @@ React's componentSpecificStyles equivalent:
 Shadow DOM provides natural style encapsulation with low specificity. A selector like `h2` inside Shadow DOM has specificity `(0,0,0,1)`.
 
 In React's global CSS, we need contextual selectors to scope styles:
+
 ```css
 .a2ui-surface .a2ui-text h2 { ... }
 ```
@@ -109,10 +116,12 @@ This has specificity `(0,0,2,1)` — much higher than Lit's `(0,0,0,1)`.
 ### Why It Matters
 
 Utility classes like `.typography-w-500` have specificity `(0,0,1,0)`. In Lit:
+
 - `h2 { font: inherit; }` = `(0,0,0,1)` — loses to utility class
 - `.typography-w-500` = `(0,0,1,0)` — **wins**, font-weight: 500 applied
 
 In React (without fix):
+
 - `.a2ui-surface .a2ui-text h2 { font: inherit; }` = `(0,0,2,1)` — **wins**
 - `.typography-w-500` = `(0,0,1,0)` — loses, font-weight reset to 400
 
@@ -152,17 +161,20 @@ Use `:where()` when the Lit component has element selectors that should be overr
 ### Vite Cache Issues (504 Outdated Optimize Dep)
 
 If you see errors like:
+
 ```
 Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep)
 Uncaught TypeError: Failed to fetch dynamically imported module
 ```
 
 This happens when Vite's dependency optimization cache becomes stale, typically after:
+
 - Switching git branches
 - Updating dependencies
 - Rebuilding the React renderer
 
 **Fix:** Clear the Vite cache and restart:
+
 ```bash
 # From renderers/react/visual-parity/
 rm -rf node_modules/.vite react/node_modules/.vite lit/node_modules/.vite ../node_modules/.vite
@@ -174,12 +186,14 @@ npm run dev:react  # or dev:lit
 If you edit files in `renderers/react/src/` but the visual parity app doesn't reflect the changes, this is because the visual parity app imports from the **built** `@a2ui/react` package, not directly from source.
 
 **Why this happens:**
+
 1. Source changes are in `renderers/react/src/`
 2. Visual parity app imports from `@a2ui/react/styles` (workspace package)
 3. Vite pre-bundles workspace dependencies into `node_modules/.vite`
 4. The pre-bundled cache still has the old built version
 
 **Fix:** Rebuild the package and clear Vite's cache:
+
 ```bash
 # From renderers/react/visual-parity/
 
@@ -193,7 +207,7 @@ rm -rf react/node_modules/.vite node_modules/.vite
 npm run dev:react
 ```
 
-**Note:** Vite's HMR works for changes *within* the visual parity app, but changes to workspace dependencies require rebuilding + cache clearing.
+**Note:** Vite's HMR works for changes _within_ the visual parity app, but changes to workspace dependencies require rebuilding + cache clearing.
 
 ## Testing Parity
 
@@ -211,6 +225,7 @@ npm run dev
 ```
 
 The tests:
+
 1. Load the same fixture in both Lit (localhost:5002) and React (localhost:5001)
 2. Take screenshots of both renderers
 3. Compare pixel differences using pixelmatch
@@ -224,43 +239,43 @@ Each Lit component with `static styles` needs a corresponding entry in `componen
 
 ### ✅ Implemented (0% pixel diff in visual parity tests)
 
-| Component | Lit File | Styles | Notes |
-|-----------|----------|--------|-------|
-| **Card** | `card.ts` | `:host`, `section`, `::slotted(*)` | Uses `> section` child combinator |
-| **Text** | `text.ts` | `:host`, `h1-h5` (uses `:where()`) | Paragraph margin reset added |
-| **Divider** | `divider.ts` | `:host`, `hr` | Added margin to match browser default |
-| **TextField** | `text-field.ts` | `:host`, `input`, `label`, `textarea` | Uses `:where()` for element selectors. Multiline support added |
-| **Button** | `button.ts` | `:host` | Simple display/flex |
-| **Icon** | `icon.ts` | `:host` | Simple display/flex |
-| **Column** | `column.ts` | `:host`, `section`, attribute selectors | Uses `data-alignment` and `data-distribution` |
-| **Row** | `row.ts` | `:host`, `section`, attribute selectors | Uses `data-alignment` and `data-distribution` |
-| **List** | `list.ts` | `:host`, `section`, `::slotted(*)` | All fixtures pass 0% including cards inside lists |
-| **Image** | `image.ts` | `:host`, `img` | Uses `:where()` for `img`. All usage hints pass 0% |
-| **Slider** | `slider.ts` | `:host`, `input[type="range"]` | Uses `:where()` for `input`. Basic slider passes 0% |
-| **Tabs** | `tabs.ts` | `:host`, `section`, `button` | All fixtures pass 0% |
-| **CheckBox** | `checkbox.ts` | `:host`, `input` | Uses `:where()` for `input`. Works via path binding |
-| **DateTimeInput** | `datetime-input.ts` | `:host`, `input` | Uses `:where()` for `input`. React uses HTML5 inputs directly |
-| **Modal** | `modal.ts` | `:host`, `dialog`, `#controls`, `button` | Renders dialog in place (no portal) to stay inside `.a2ui-surface`. Matches Lit: closed shows section with entry, open shows dialog |
-| **Video** | `video.ts` | `:host`, `video` | Uses `:where()` for `video`. Minor pixel variance (~0.5%) due to native video element rendering |
-| **AudioPlayer** | `audio.ts` | `:host`, `audio` | Uses `:where()` for `audio`. Note: Lit does NOT implement `description` property |
-| **MultipleChoice** | `multiple-choice.ts` | `:host`, `select` | Uses `:where()` for `select`. Both renderers use `<select>` dropdown |
+| Component          | Lit File             | Styles                                   | Notes                                                                                                                               |
+| ------------------ | -------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| **Card**           | `card.ts`            | `:host`, `section`, `::slotted(*)`       | Uses `> section` child combinator                                                                                                   |
+| **Text**           | `text.ts`            | `:host`, `h1-h5` (uses `:where()`)       | Paragraph margin reset added                                                                                                        |
+| **Divider**        | `divider.ts`         | `:host`, `hr`                            | Added margin to match browser default                                                                                               |
+| **TextField**      | `text-field.ts`      | `:host`, `input`, `label`, `textarea`    | Uses `:where()` for element selectors. Multiline support added                                                                      |
+| **Button**         | `button.ts`          | `:host`                                  | Simple display/flex                                                                                                                 |
+| **Icon**           | `icon.ts`            | `:host`                                  | Simple display/flex                                                                                                                 |
+| **Column**         | `column.ts`          | `:host`, `section`, attribute selectors  | Uses `data-alignment` and `data-distribution`                                                                                       |
+| **Row**            | `row.ts`             | `:host`, `section`, attribute selectors  | Uses `data-alignment` and `data-distribution`                                                                                       |
+| **List**           | `list.ts`            | `:host`, `section`, `::slotted(*)`       | All fixtures pass 0% including cards inside lists                                                                                   |
+| **Image**          | `image.ts`           | `:host`, `img`                           | Uses `:where()` for `img`. All usage hints pass 0%                                                                                  |
+| **Slider**         | `slider.ts`          | `:host`, `input[type="range"]`           | Uses `:where()` for `input`. Basic slider passes 0%                                                                                 |
+| **Tabs**           | `tabs.ts`            | `:host`, `section`, `button`             | All fixtures pass 0%                                                                                                                |
+| **CheckBox**       | `checkbox.ts`        | `:host`, `input`                         | Uses `:where()` for `input`. Works via path binding                                                                                 |
+| **DateTimeInput**  | `datetime-input.ts`  | `:host`, `input`                         | Uses `:where()` for `input`. React uses HTML5 inputs directly                                                                       |
+| **Modal**          | `modal.ts`           | `:host`, `dialog`, `#controls`, `button` | Renders dialog in place (no portal) to stay inside `.a2ui-surface`. Matches Lit: closed shows section with entry, open shows dialog |
+| **Video**          | `video.ts`           | `:host`, `video`                         | Uses `:where()` for `video`. Minor pixel variance (~0.5%) due to native video element rendering                                     |
+| **AudioPlayer**    | `audio.ts`           | `:host`, `audio`                         | Uses `:where()` for `audio`. Note: Lit does NOT implement `description` property                                                    |
+| **MultipleChoice** | `multiple-choice.ts` | `:host`, `select`                        | Uses `:where()` for `select`. Both renderers use `<select>` dropdown                                                                |
 
 ### ⚠️ Lit Renderer Issues
 
-| Component | Lit File | Issue |
-|-----------|----------|-------|
-| **Slider** | `slider.ts` | Value does not update when slider moves |
-| **Divider** | `divider.ts` | Ignores `axis` property - always renders same orientation |
-| **CheckBox** | `checkbox.ts` | Uses `.value` instead of `.checked` (line 100), so checked state only displays correctly when using path binding. Using `literalBoolean` with `false` causes component to not render. Visual parity tests pass using path binding. |
-| **DateTimeInput** | `datetime-input.ts` | Uses `getMonth()` which is 0-indexed (0-11) without adding 1, causing issues in January and one month off otherwise. Also parses all values through `new Date()` constructor which does not accept time-only strings. React uses HTML5 inputs directly as they match A2UI format. |
+| Component          | Lit File             | Issue                                                                                                                                                                                                                                                                                                               |
+| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Slider**         | `slider.ts`          | Value does not update when slider moves                                                                                                                                                                                                                                                                             |
+| **Divider**        | `divider.ts`         | Ignores `axis` property - always renders same orientation                                                                                                                                                                                                                                                           |
+| **CheckBox**       | `checkbox.ts`        | Uses `.value` instead of `.checked` (line 100), so checked state only displays correctly when using path binding. Using `literalBoolean` with `false` causes component to not render. Visual parity tests pass using path binding.                                                                                  |
+| **DateTimeInput**  | `datetime-input.ts`  | Uses `getMonth()` which is 0-indexed (0-11) without adding 1, causing issues in January and one month off otherwise. Also parses all values through `new Date()` constructor which does not accept time-only strings. React uses HTML5 inputs directly as they match A2UI format.                                   |
 | **MultipleChoice** | `multiple-choice.ts` | `<option>` tag has a bug: renders value as attribute name (`<option ${value}>`) instead of `value` attribute (`<option value=${value}>`). Also unconditionally accesses `selections.path` without checking if it exists, so `literalArray` selections don't work. Has a leftover `console.log` in `#setBoundValue`. |
 
 ### Special Cases
 
-| Component | Notes |
-|-----------|-------|
+| Component   | Notes                                                                   |
+| ----------- | ----------------------------------------------------------------------- |
 | **Surface** | Root component with different structure; doesn't use `structuralStyles` |
-| **Root** | Internal component, styles handled differently |
+| **Root**    | Internal component, styles handled differently                          |
 
 ## Implementation Hints
 
@@ -275,7 +290,7 @@ Lit uses `:host([attribute="value"])` for attribute-based styling. In React, use
 
 ```css
 /* componentSpecificStyles */
-.a2ui-surface .a2ui-column[data-alignment="center"] section {
+.a2ui-surface .a2ui-column[data-alignment='center'] section {
   align-items: center;
 }
 ```
diff --git a/renderers/react/visual-parity/README.md b/renderers/react/visual-parity/README.md
index 76a152827..9bc3eb75c 100644
--- a/renderers/react/visual-parity/README.md
+++ b/renderers/react/visual-parity/README.md
@@ -8,8 +8,8 @@ the Lit renderer (the reference implementation).
 These tests compare screenshots of the same A2UI components rendered by both
 implementations:
 
--   **Lit renderer** (Shadow DOM) - Reference implementation at `localhost:5002`
--   **React renderer** (Light DOM) - Test subject at `localhost:5001`
+- **Lit renderer** (Shadow DOM) - Reference implementation at `localhost:5002`
+- **React renderer** (Light DOM) - Test subject at `localhost:5001`
 
 Tests pass when the pixel difference is ≤1%.
 
@@ -45,7 +45,7 @@ Tests pass when the pixel difference is ≤1%.
 ### Prerequisites
 
 1.  Build the React renderer first: `bash cd renderers/react npm install npm run
-    build`
+build`
 
 2.  Install visual-parity dependencies: `bash cd visual-parity npm install`
 
@@ -124,21 +124,21 @@ visual-parity/
 Add to `fixtures/components/<component>.ts`:
 
 ```typescript
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const myNewFixture: ComponentFixture = {
-  root: 'component-1',  // ID of root component
+  root: 'component-1', // ID of root component
   components: [
     {
       id: 'text-1',
       component: {
-        Text: { text: { literalString: 'Hello World' } },
+        Text: {text: {literalString: 'Hello World'}},
       },
     },
     {
       id: 'component-1',
       component: {
-        Button: { child: 'text-1', primary: true },
+        Button: {child: 'text-1', primary: true},
       },
     },
   ],
@@ -159,14 +159,14 @@ Add to `fixtures/components/index.ts`:
 
 ```typescript
 export * from './myComponent';
-import { myComponentFixtures } from './myComponent';
+import {myComponentFixtures} from './myComponent';
 // Add to allFixtures aggregation
 ```
 
 Add to `fixtures/index.ts`:
 
 ```typescript
-import { myComponentFixtures } from './components';
+import {myComponentFixtures} from './components';
 
 export const allFixtures = {
   ...existingFixtures,
@@ -184,12 +184,12 @@ npm test -- --grep "myNewFixture"
 
 ```typescript
 interface ComponentFixture {
-  root: string;                    // ID of the root component to render
+  root: string; // ID of the root component to render
   components: Array<{
-    id: string;                    // Unique component ID
-    component: Record<string, unknown>;  // A2UI component definition
+    id: string; // Unique component ID
+    component: Record<string, unknown>; // A2UI component definition
   }>;
-  data?: Record<string, unknown>;  // Initial data model values (JSON Pointer paths)
+  data?: Record<string, unknown>; // Initial data model values (JSON Pointer paths)
 }
 ```
 
@@ -197,11 +197,11 @@ interface ComponentFixture {
 
 Tests run across multiple themes to ensure theme switching works:
 
-Theme          | Description
--------------- | ---------------------------------
-`lit`          | Default litTheme from @a2ui/react
-`visualParity` | Alternate theme for testing
-`minimal`      | Stripped-down theme
+| Theme          | Description                       |
+| -------------- | --------------------------------- |
+| `lit`          | Default litTheme from @a2ui/react |
+| `visualParity` | Alternate theme for testing       |
+| `minimal`      | Stripped-down theme               |
 
 To test a specific theme: `bash npm test -- --grep "Theme: minimal"`
 
@@ -212,7 +212,8 @@ Some fixtures are skipped due to known implementation differences:
 | Fixture           | Reason                                                   |
 | ----------------- | -------------------------------------------------------- |
 | `multipleChoice*` | Implementation differs: React uses radio/checkboxes, Lit |
-:                   : uses `<select>`                                          :
+
+: : uses `<select>` :
 
 ## Troubleshooting
 
@@ -258,20 +259,20 @@ npm run test:ui ```
 
 ## Key Modules
 
-Module             | Purpose
------------------- | -------------------------------------
-`@playwright/test` | Browser automation and test framework
-`pixelmatch`       | Pixel-by-pixel image comparison
-`pngjs`            | PNG image parsing
-`vite`             | Dev server for React and Lit apps
+| Module             | Purpose                               |
+| ------------------ | ------------------------------------- |
+| `@playwright/test` | Browser automation and test framework |
+| `pixelmatch`       | Pixel-by-pixel image comparison       |
+| `pngjs`            | PNG image parsing                     |
+| `vite`             | Dev server for React and Lit apps     |
 
 ## Thresholds
 
-Parameter              | Value     | Purpose
----------------------- | --------- | -----------------------------------
-`PIXEL_DIFF_THRESHOLD` | 0.01 (1%) | Per-pixel color tolerance
-`MAX_DIFF_PERCENT`     | 1%        | Maximum % of pixels that can differ
+| Parameter              | Value     | Purpose                             |
+| ---------------------- | --------- | ----------------------------------- |
+| `PIXEL_DIFF_THRESHOLD` | 0.01 (1%) | Per-pixel color tolerance           |
+| `MAX_DIFF_PERCENT`     | 1%        | Maximum % of pixels that can differ |
 
 ## Related Documentation
 
--   [PARITY.md](./PARITY.md) - CSS transformation approach for React/Lit parity
+- [PARITY.md](./PARITY.md) - CSS transformation approach for React/Lit parity
diff --git a/renderers/react/visual-parity/fixtures/components/audioPlayer.ts b/renderers/react/visual-parity/fixtures/components/audioPlayer.ts
index e8ad3d446..16bd03f39 100644
--- a/renderers/react/visual-parity/fixtures/components/audioPlayer.ts
+++ b/renderers/react/visual-parity/fixtures/components/audioPlayer.ts
@@ -22,7 +22,7 @@
  * React implements description, but these fixtures only test url for parity.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const audioPlayerBasic: ComponentFixture = {
   root: 'audio-1',
@@ -31,7 +31,7 @@ export const audioPlayerBasic: ComponentFixture = {
       id: 'audio-1',
       component: {
         AudioPlayer: {
-          url: { literalString: 'https://www.w3schools.com/html/horse.mp3' },
+          url: {literalString: 'https://www.w3schools.com/html/horse.mp3'},
         },
       },
     },
@@ -48,7 +48,7 @@ export const audioPlayerWithPathBinding: ComponentFixture = {
       id: 'audio-2',
       component: {
         AudioPlayer: {
-          url: { path: '/media/audioUrl' },
+          url: {path: '/media/audioUrl'},
         },
       },
     },
diff --git a/renderers/react/visual-parity/fixtures/components/button.ts b/renderers/react/visual-parity/fixtures/components/button.ts
index e0c06a408..86dedcd7a 100644
--- a/renderers/react/visual-parity/fixtures/components/button.ts
+++ b/renderers/react/visual-parity/fixtures/components/button.ts
@@ -18,7 +18,7 @@
  * Button component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const buttonPrimary: ComponentFixture = {
   root: 'btn-1',
@@ -26,13 +26,13 @@ export const buttonPrimary: ComponentFixture = {
     {
       id: 'btn-text',
       component: {
-        Text: { text: { literalString: 'Primary Button' } },
+        Text: {text: {literalString: 'Primary Button'}},
       },
     },
     {
       id: 'btn-1',
       component: {
-        Button: { child: 'btn-text', action: { name: 'click' }, primary: true },
+        Button: {child: 'btn-text', action: {name: 'click'}, primary: true},
       },
     },
   ],
@@ -44,13 +44,13 @@ export const buttonSecondary: ComponentFixture = {
     {
       id: 'btn-text-2',
       component: {
-        Text: { text: { literalString: 'Secondary Button' } },
+        Text: {text: {literalString: 'Secondary Button'}},
       },
     },
     {
       id: 'btn-2',
       component: {
-        Button: { child: 'btn-text-2', action: { name: 'click' }, primary: false },
+        Button: {child: 'btn-text-2', action: {name: 'click'}, primary: false},
       },
     },
   ],
@@ -62,25 +62,25 @@ export const buttonWithIcon: ComponentFixture = {
     {
       id: 'btn-icon-icon',
       component: {
-        Icon: { name: { literalString: 'add' } },
+        Icon: {name: {literalString: 'add'}},
       },
     },
     {
       id: 'btn-icon-text',
       component: {
-        Text: { text: { literalString: 'Add Item' } },
+        Text: {text: {literalString: 'Add Item'}},
       },
     },
     {
       id: 'btn-icon-row',
       component: {
-        Row: { children: { explicitList: ['btn-icon-icon', 'btn-icon-text'] } },
+        Row: {children: {explicitList: ['btn-icon-icon', 'btn-icon-text']}},
       },
     },
     {
       id: 'btn-icon',
       component: {
-        Button: { child: 'btn-icon-row', action: { name: 'add' }, primary: true },
+        Button: {child: 'btn-icon-row', action: {name: 'add'}, primary: true},
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/card.ts b/renderers/react/visual-parity/fixtures/components/card.ts
index db01b5fc7..10ac224de 100644
--- a/renderers/react/visual-parity/fixtures/components/card.ts
+++ b/renderers/react/visual-parity/fixtures/components/card.ts
@@ -18,7 +18,7 @@
  * Card component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const card: ComponentFixture = {
   root: 'card-1',
@@ -26,25 +26,25 @@ export const card: ComponentFixture = {
     {
       id: 'card-title',
       component: {
-        Text: { text: { literalString: 'Card Title' }, usageHint: 'h2' },
+        Text: {text: {literalString: 'Card Title'}, usageHint: 'h2'},
       },
     },
     {
       id: 'card-body',
       component: {
-        Text: { text: { literalString: 'Card body content goes here.' } },
+        Text: {text: {literalString: 'Card body content goes here.'}},
       },
     },
     {
       id: 'card-content',
       component: {
-        Column: { children: { explicitList: ['card-title', 'card-body'] } },
+        Column: {children: {explicitList: ['card-title', 'card-body']}},
       },
     },
     {
       id: 'card-1',
       component: {
-        Card: { child: 'card-content' },
+        Card: {child: 'card-content'},
       },
     },
   ],
@@ -57,7 +57,7 @@ export const cardWithImage: ComponentFixture = {
       id: 'card-img-image',
       component: {
         Image: {
-          url: { literalString: 'https://picsum.photos/seed/card/300/150' },
+          url: {literalString: 'https://picsum.photos/seed/card/300/150'},
           usageHint: 'header',
         },
       },
@@ -65,25 +65,27 @@ export const cardWithImage: ComponentFixture = {
     {
       id: 'card-img-title',
       component: {
-        Text: { text: { literalString: 'Card with Image' }, usageHint: 'h2' },
+        Text: {text: {literalString: 'Card with Image'}, usageHint: 'h2'},
       },
     },
     {
       id: 'card-img-body',
       component: {
-        Text: { text: { literalString: 'This card has a header image above the title.' } },
+        Text: {text: {literalString: 'This card has a header image above the title.'}},
       },
     },
     {
       id: 'card-img-content',
       component: {
-        Column: { children: { explicitList: ['card-img-image', 'card-img-title', 'card-img-body'] } },
+        Column: {
+          children: {explicitList: ['card-img-image', 'card-img-title', 'card-img-body']},
+        },
       },
     },
     {
       id: 'card-img',
       component: {
-        Card: { child: 'card-img-content' },
+        Card: {child: 'card-img-content'},
       },
     },
   ],
@@ -96,7 +98,7 @@ export const cardComplex: ComponentFixture = {
       id: 'card-complex-avatar',
       component: {
         Image: {
-          url: { literalString: 'https://picsum.photos/seed/avatar/48/48' },
+          url: {literalString: 'https://picsum.photos/seed/avatar/48/48'},
           usageHint: 'avatar',
         },
       },
@@ -104,25 +106,25 @@ export const cardComplex: ComponentFixture = {
     {
       id: 'card-complex-name',
       component: {
-        Text: { text: { literalString: 'John Doe' }, usageHint: 'h3' },
+        Text: {text: {literalString: 'John Doe'}, usageHint: 'h3'},
       },
     },
     {
       id: 'card-complex-role',
       component: {
-        Text: { text: { literalString: 'Software Engineer' }, usageHint: 'caption' },
+        Text: {text: {literalString: 'Software Engineer'}, usageHint: 'caption'},
       },
     },
     {
       id: 'card-complex-info',
       component: {
-        Column: { children: { explicitList: ['card-complex-name', 'card-complex-role'] } },
+        Column: {children: {explicitList: ['card-complex-name', 'card-complex-role']}},
       },
     },
     {
       id: 'card-complex-header',
       component: {
-        Row: { children: { explicitList: ['card-complex-avatar', 'card-complex-info'] } },
+        Row: {children: {explicitList: ['card-complex-avatar', 'card-complex-info']}},
       },
     },
     {
@@ -134,19 +136,23 @@ export const cardComplex: ComponentFixture = {
     {
       id: 'card-complex-body',
       component: {
-        Text: { text: { literalString: 'Building amazing user interfaces with A2UI.' } },
+        Text: {text: {literalString: 'Building amazing user interfaces with A2UI.'}},
       },
     },
     {
       id: 'card-complex-content',
       component: {
-        Column: { children: { explicitList: ['card-complex-header', 'card-complex-divider', 'card-complex-body'] } },
+        Column: {
+          children: {
+            explicitList: ['card-complex-header', 'card-complex-divider', 'card-complex-body'],
+          },
+        },
       },
     },
     {
       id: 'card-complex',
       component: {
-        Card: { child: 'card-complex-content' },
+        Card: {child: 'card-complex-content'},
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/checkbox.ts b/renderers/react/visual-parity/fixtures/components/checkbox.ts
index 75835574b..36ad58ea0 100644
--- a/renderers/react/visual-parity/fixtures/components/checkbox.ts
+++ b/renderers/react/visual-parity/fixtures/components/checkbox.ts
@@ -21,7 +21,7 @@
  * The value is read from the data model and two-way bound.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const checkboxUnchecked: ComponentFixture = {
   root: 'cb-1',
@@ -33,8 +33,8 @@ export const checkboxUnchecked: ComponentFixture = {
       id: 'cb-1',
       component: {
         CheckBox: {
-          label: { literalString: 'Unchecked option' },
-          value: { path: '/checkbox/unchecked' },
+          label: {literalString: 'Unchecked option'},
+          value: {path: '/checkbox/unchecked'},
         },
       },
     },
@@ -51,8 +51,8 @@ export const checkboxChecked: ComponentFixture = {
       id: 'cb-2',
       component: {
         CheckBox: {
-          label: { literalString: 'Checked option' },
-          value: { path: '/checkbox/checked' },
+          label: {literalString: 'Checked option'},
+          value: {path: '/checkbox/checked'},
         },
       },
     },
@@ -69,8 +69,10 @@ export const checkboxLongLabel: ComponentFixture = {
       id: 'cb-long',
       component: {
         CheckBox: {
-          label: { literalString: 'I agree to the terms and conditions of service and privacy policy' },
-          value: { path: '/checkbox/longLabel' },
+          label: {
+            literalString: 'I agree to the terms and conditions of service and privacy policy',
+          },
+          value: {path: '/checkbox/longLabel'},
         },
       },
     },
diff --git a/renderers/react/visual-parity/fixtures/components/column.ts b/renderers/react/visual-parity/fixtures/components/column.ts
index 3a0ebd337..3fd16d5fe 100644
--- a/renderers/react/visual-parity/fixtures/components/column.ts
+++ b/renderers/react/visual-parity/fixtures/components/column.ts
@@ -18,18 +18,18 @@
  * Column component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const column: ComponentFixture = {
   root: 'col-1',
   components: [
-    { id: 'col-text-1', component: { Text: { text: { literalString: 'First item' } } } },
-    { id: 'col-text-2', component: { Text: { text: { literalString: 'Second item' } } } },
-    { id: 'col-text-3', component: { Text: { text: { literalString: 'Third item' } } } },
+    {id: 'col-text-1', component: {Text: {text: {literalString: 'First item'}}}},
+    {id: 'col-text-2', component: {Text: {text: {literalString: 'Second item'}}}},
+    {id: 'col-text-3', component: {Text: {text: {literalString: 'Third item'}}}},
     {
       id: 'col-1',
       component: {
-        Column: { children: { explicitList: ['col-text-1', 'col-text-2', 'col-text-3'] } },
+        Column: {children: {explicitList: ['col-text-1', 'col-text-2', 'col-text-3']}},
       },
     },
   ],
@@ -38,13 +38,16 @@ export const column: ComponentFixture = {
 export const columnStart: ComponentFixture = {
   root: 'col-start',
   components: [
-    { id: 'col-start-1', component: { Text: { text: { literalString: 'Top' } } } },
-    { id: 'col-start-2', component: { Text: { text: { literalString: 'Middle' } } } },
-    { id: 'col-start-3', component: { Text: { text: { literalString: 'Bottom' } } } },
+    {id: 'col-start-1', component: {Text: {text: {literalString: 'Top'}}}},
+    {id: 'col-start-2', component: {Text: {text: {literalString: 'Middle'}}}},
+    {id: 'col-start-3', component: {Text: {text: {literalString: 'Bottom'}}}},
     {
       id: 'col-start',
       component: {
-        Column: { children: { explicitList: ['col-start-1', 'col-start-2', 'col-start-3'] }, distribution: 'start' },
+        Column: {
+          children: {explicitList: ['col-start-1', 'col-start-2', 'col-start-3']},
+          distribution: 'start',
+        },
       },
     },
   ],
@@ -53,13 +56,16 @@ export const columnStart: ComponentFixture = {
 export const columnCenter: ComponentFixture = {
   root: 'col-center',
   components: [
-    { id: 'col-center-1', component: { Text: { text: { literalString: 'Top' } } } },
-    { id: 'col-center-2', component: { Text: { text: { literalString: 'Middle' } } } },
-    { id: 'col-center-3', component: { Text: { text: { literalString: 'Bottom' } } } },
+    {id: 'col-center-1', component: {Text: {text: {literalString: 'Top'}}}},
+    {id: 'col-center-2', component: {Text: {text: {literalString: 'Middle'}}}},
+    {id: 'col-center-3', component: {Text: {text: {literalString: 'Bottom'}}}},
     {
       id: 'col-center',
       component: {
-        Column: { children: { explicitList: ['col-center-1', 'col-center-2', 'col-center-3'] }, distribution: 'center' },
+        Column: {
+          children: {explicitList: ['col-center-1', 'col-center-2', 'col-center-3']},
+          distribution: 'center',
+        },
       },
     },
   ],
@@ -68,13 +74,16 @@ export const columnCenter: ComponentFixture = {
 export const columnEnd: ComponentFixture = {
   root: 'col-end',
   components: [
-    { id: 'col-end-1', component: { Text: { text: { literalString: 'Top' } } } },
-    { id: 'col-end-2', component: { Text: { text: { literalString: 'Middle' } } } },
-    { id: 'col-end-3', component: { Text: { text: { literalString: 'Bottom' } } } },
+    {id: 'col-end-1', component: {Text: {text: {literalString: 'Top'}}}},
+    {id: 'col-end-2', component: {Text: {text: {literalString: 'Middle'}}}},
+    {id: 'col-end-3', component: {Text: {text: {literalString: 'Bottom'}}}},
     {
       id: 'col-end',
       component: {
-        Column: { children: { explicitList: ['col-end-1', 'col-end-2', 'col-end-3'] }, distribution: 'end' },
+        Column: {
+          children: {explicitList: ['col-end-1', 'col-end-2', 'col-end-3']},
+          distribution: 'end',
+        },
       },
     },
   ],
@@ -83,13 +92,24 @@ export const columnEnd: ComponentFixture = {
 export const columnMixed: ComponentFixture = {
   root: 'col-mixed',
   components: [
-    { id: 'col-mixed-h', component: { Text: { text: { literalString: 'Section Title' }, usageHint: 'h3' } } },
-    { id: 'col-mixed-body', component: { Text: { text: { literalString: 'Regular body text content.' } } } },
-    { id: 'col-mixed-caption', component: { Text: { text: { literalString: 'Caption text below' }, usageHint: 'caption' } } },
+    {
+      id: 'col-mixed-h',
+      component: {Text: {text: {literalString: 'Section Title'}, usageHint: 'h3'}},
+    },
+    {
+      id: 'col-mixed-body',
+      component: {Text: {text: {literalString: 'Regular body text content.'}}},
+    },
+    {
+      id: 'col-mixed-caption',
+      component: {Text: {text: {literalString: 'Caption text below'}, usageHint: 'caption'}},
+    },
     {
       id: 'col-mixed',
       component: {
-        Column: { children: { explicitList: ['col-mixed-h', 'col-mixed-body', 'col-mixed-caption'] } },
+        Column: {
+          children: {explicitList: ['col-mixed-h', 'col-mixed-body', 'col-mixed-caption']},
+        },
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/dateTimeInput.ts b/renderers/react/visual-parity/fixtures/components/dateTimeInput.ts
index 33ea5aaef..e98b5adcd 100644
--- a/renderers/react/visual-parity/fixtures/components/dateTimeInput.ts
+++ b/renderers/react/visual-parity/fixtures/components/dateTimeInput.ts
@@ -18,7 +18,7 @@
  * DateTimeInput component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const dateTimeInputDate: ComponentFixture = {
   root: 'dt-date',
@@ -27,7 +27,7 @@ export const dateTimeInputDate: ComponentFixture = {
       id: 'dt-date',
       component: {
         DateTimeInput: {
-          value: { literalString: '2025-02-15' },
+          value: {literalString: '2025-02-15'},
           enableDate: true,
           enableTime: false,
         },
@@ -43,7 +43,7 @@ export const dateTimeInputTime: ComponentFixture = {
       id: 'dt-time',
       component: {
         DateTimeInput: {
-          value: { literalString: '14:30' },
+          value: {literalString: '14:30'},
           enableDate: false,
           enableTime: true,
         },
@@ -59,7 +59,7 @@ export const dateTimeInputBoth: ComponentFixture = {
       id: 'dt-both',
       component: {
         DateTimeInput: {
-          value: { literalString: '2025-02-15T14:30' },
+          value: {literalString: '2025-02-15T14:30'},
           enableDate: true,
           enableTime: true,
         },
diff --git a/renderers/react/visual-parity/fixtures/components/divider.ts b/renderers/react/visual-parity/fixtures/components/divider.ts
index 01612a337..ef6388bcd 100644
--- a/renderers/react/visual-parity/fixtures/components/divider.ts
+++ b/renderers/react/visual-parity/fixtures/components/divider.ts
@@ -18,7 +18,7 @@
  * Divider component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const dividerHorizontal: ComponentFixture = {
   root: 'div-h',
@@ -38,7 +38,7 @@ export const dividerVertical: ComponentFixture = {
     {
       id: 'div-v',
       component: {
-        Divider: { axis: 'vertical' },
+        Divider: {axis: 'vertical'},
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/icon.ts b/renderers/react/visual-parity/fixtures/components/icon.ts
index 2fdaac8f2..39059a647 100644
--- a/renderers/react/visual-parity/fixtures/components/icon.ts
+++ b/renderers/react/visual-parity/fixtures/components/icon.ts
@@ -18,7 +18,7 @@
  * Icon component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const icon: ComponentFixture = {
   root: 'icon-1',
@@ -26,7 +26,7 @@ export const icon: ComponentFixture = {
     {
       id: 'icon-1',
       component: {
-        Icon: { name: { literalString: 'home' } },
+        Icon: {name: {literalString: 'home'}},
       },
     },
   ],
@@ -35,15 +35,25 @@ export const icon: ComponentFixture = {
 export const iconMultiple: ComponentFixture = {
   root: 'icons-row',
   components: [
-    { id: 'icon-home', component: { Icon: { name: { literalString: 'home' } } } },
-    { id: 'icon-search', component: { Icon: { name: { literalString: 'search' } } } },
-    { id: 'icon-settings', component: { Icon: { name: { literalString: 'settings' } } } },
-    { id: 'icon-favorite', component: { Icon: { name: { literalString: 'favorite' } } } },
-    { id: 'icon-star', component: { Icon: { name: { literalString: 'star' } } } },
+    {id: 'icon-home', component: {Icon: {name: {literalString: 'home'}}}},
+    {id: 'icon-search', component: {Icon: {name: {literalString: 'search'}}}},
+    {id: 'icon-settings', component: {Icon: {name: {literalString: 'settings'}}}},
+    {id: 'icon-favorite', component: {Icon: {name: {literalString: 'favorite'}}}},
+    {id: 'icon-star', component: {Icon: {name: {literalString: 'star'}}}},
     {
       id: 'icons-row',
       component: {
-        Row: { children: { explicitList: ['icon-home', 'icon-search', 'icon-settings', 'icon-favorite', 'icon-star'] } },
+        Row: {
+          children: {
+            explicitList: [
+              'icon-home',
+              'icon-search',
+              'icon-settings',
+              'icon-favorite',
+              'icon-star',
+            ],
+          },
+        },
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/image.ts b/renderers/react/visual-parity/fixtures/components/image.ts
index 9a05d99fe..34a0f2940 100644
--- a/renderers/react/visual-parity/fixtures/components/image.ts
+++ b/renderers/react/visual-parity/fixtures/components/image.ts
@@ -20,7 +20,7 @@
  * The seed parameter ensures consistent images across test runs.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 // Picsum URLs with seed for consistent images
 const placeholderUrl = 'https://picsum.photos/seed/a2ui/150/150';
@@ -33,7 +33,7 @@ export const imageBasic: ComponentFixture = {
     {
       id: 'img-basic',
       component: {
-        Image: { url: { literalString: placeholderUrl } },
+        Image: {url: {literalString: placeholderUrl}},
       },
     },
   ],
@@ -46,7 +46,7 @@ export const imageAvatar: ComponentFixture = {
       id: 'img-avatar',
       component: {
         Image: {
-          url: { literalString: avatarUrl },
+          url: {literalString: avatarUrl},
           usageHint: 'avatar',
         },
       },
@@ -61,7 +61,7 @@ export const imageHeader: ComponentFixture = {
       id: 'img-header',
       component: {
         Image: {
-          url: { literalString: largeUrl },
+          url: {literalString: largeUrl},
           usageHint: 'header',
         },
       },
@@ -76,7 +76,7 @@ export const imageIcon: ComponentFixture = {
       id: 'img-icon',
       component: {
         Image: {
-          url: { literalString: avatarUrl },
+          url: {literalString: avatarUrl},
           usageHint: 'icon',
         },
       },
@@ -91,7 +91,7 @@ export const imageLargeFeature: ComponentFixture = {
       id: 'img-large',
       component: {
         Image: {
-          url: { literalString: largeUrl },
+          url: {literalString: largeUrl},
           usageHint: 'largeFeature',
         },
       },
@@ -106,7 +106,7 @@ export const imageMediumFeature: ComponentFixture = {
       id: 'img-medium',
       component: {
         Image: {
-          url: { literalString: placeholderUrl },
+          url: {literalString: placeholderUrl},
           usageHint: 'mediumFeature',
         },
       },
@@ -121,7 +121,7 @@ export const imageSmallFeature: ComponentFixture = {
       id: 'img-small',
       component: {
         Image: {
-          url: { literalString: avatarUrl },
+          url: {literalString: avatarUrl},
           usageHint: 'smallFeature',
         },
       },
diff --git a/renderers/react/visual-parity/fixtures/components/index.ts b/renderers/react/visual-parity/fixtures/components/index.ts
index 51ecee833..876be34e6 100644
--- a/renderers/react/visual-parity/fixtures/components/index.ts
+++ b/renderers/react/visual-parity/fixtures/components/index.ts
@@ -32,27 +32,27 @@ export * from './checkbox';
 export * from './textField';
 export * from './slider';
 export * from './dateTimeInput';
-export { multipleChoice } from './multipleChoice';
+export {multipleChoice} from './multipleChoice';
 export * from './video';
 export * from './audioPlayer';
 export * from './modal';
 
 // Re-export fixture groups
-export { textFixtures } from './text';
-export { buttonFixtures } from './button';
-export { iconFixtures } from './icon';
-export { imageFixtures } from './image';
-export { dividerFixtures } from './divider';
-export { cardFixtures } from './card';
-export { rowFixtures } from './row';
-export { columnFixtures } from './column';
-export { listFixtures } from './list';
-export { tabsFixtures } from './tabs';
-export { checkboxFixtures } from './checkbox';
-export { textFieldFixtures } from './textField';
-export { sliderFixtures } from './slider';
-export { dateTimeInputFixtures } from './dateTimeInput';
-export { multipleChoiceFixtures } from './multipleChoice';
-export { videoFixtures } from './video';
-export { audioPlayerFixtures } from './audioPlayer';
-export { modalFixtures } from './modal';
+export {textFixtures} from './text';
+export {buttonFixtures} from './button';
+export {iconFixtures} from './icon';
+export {imageFixtures} from './image';
+export {dividerFixtures} from './divider';
+export {cardFixtures} from './card';
+export {rowFixtures} from './row';
+export {columnFixtures} from './column';
+export {listFixtures} from './list';
+export {tabsFixtures} from './tabs';
+export {checkboxFixtures} from './checkbox';
+export {textFieldFixtures} from './textField';
+export {sliderFixtures} from './slider';
+export {dateTimeInputFixtures} from './dateTimeInput';
+export {multipleChoiceFixtures} from './multipleChoice';
+export {videoFixtures} from './video';
+export {audioPlayerFixtures} from './audioPlayer';
+export {modalFixtures} from './modal';
diff --git a/renderers/react/visual-parity/fixtures/components/list.ts b/renderers/react/visual-parity/fixtures/components/list.ts
index ebc935ec8..e6044953a 100644
--- a/renderers/react/visual-parity/fixtures/components/list.ts
+++ b/renderers/react/visual-parity/fixtures/components/list.ts
@@ -18,19 +18,19 @@
  * List component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const listVertical: ComponentFixture = {
   root: 'list-v',
   components: [
-    { id: 'list-v-1', component: { Text: { text: { literalString: 'Item 1' } } } },
-    { id: 'list-v-2', component: { Text: { text: { literalString: 'Item 2' } } } },
-    { id: 'list-v-3', component: { Text: { text: { literalString: 'Item 3' } } } },
-    { id: 'list-v-4', component: { Text: { text: { literalString: 'Item 4' } } } },
+    {id: 'list-v-1', component: {Text: {text: {literalString: 'Item 1'}}}},
+    {id: 'list-v-2', component: {Text: {text: {literalString: 'Item 2'}}}},
+    {id: 'list-v-3', component: {Text: {text: {literalString: 'Item 3'}}}},
+    {id: 'list-v-4', component: {Text: {text: {literalString: 'Item 4'}}}},
     {
       id: 'list-v',
       component: {
-        List: { children: { explicitList: ['list-v-1', 'list-v-2', 'list-v-3', 'list-v-4'] } },
+        List: {children: {explicitList: ['list-v-1', 'list-v-2', 'list-v-3', 'list-v-4']}},
       },
     },
   ],
@@ -39,13 +39,16 @@ export const listVertical: ComponentFixture = {
 export const listHorizontal: ComponentFixture = {
   root: 'list-h',
   components: [
-    { id: 'list-h-1', component: { Icon: { name: { literalString: 'home' } } } },
-    { id: 'list-h-2', component: { Icon: { name: { literalString: 'search' } } } },
-    { id: 'list-h-3', component: { Icon: { name: { literalString: 'settings' } } } },
+    {id: 'list-h-1', component: {Icon: {name: {literalString: 'home'}}}},
+    {id: 'list-h-2', component: {Icon: {name: {literalString: 'search'}}}},
+    {id: 'list-h-3', component: {Icon: {name: {literalString: 'settings'}}}},
     {
       id: 'list-h',
       component: {
-        List: { children: { explicitList: ['list-h-1', 'list-h-2', 'list-h-3'] }, direction: 'horizontal' },
+        List: {
+          children: {explicitList: ['list-h-1', 'list-h-2', 'list-h-3']},
+          direction: 'horizontal',
+        },
       },
     },
   ],
@@ -55,25 +58,43 @@ export const listWithCards: ComponentFixture = {
   root: 'list-cards',
   components: [
     // Card 1
-    { id: 'card1-title', component: { Text: { text: { literalString: 'Card One' }, usageHint: 'h3' } } },
-    { id: 'card1-body', component: { Text: { text: { literalString: 'First card content' } } } },
-    { id: 'card1-col', component: { Column: { children: { explicitList: ['card1-title', 'card1-body'] } } } },
-    { id: 'card1', component: { Card: { child: 'card1-col' } } },
+    {
+      id: 'card1-title',
+      component: {Text: {text: {literalString: 'Card One'}, usageHint: 'h3'}},
+    },
+    {id: 'card1-body', component: {Text: {text: {literalString: 'First card content'}}}},
+    {
+      id: 'card1-col',
+      component: {Column: {children: {explicitList: ['card1-title', 'card1-body']}}},
+    },
+    {id: 'card1', component: {Card: {child: 'card1-col'}}},
     // Card 2
-    { id: 'card2-title', component: { Text: { text: { literalString: 'Card Two' }, usageHint: 'h3' } } },
-    { id: 'card2-body', component: { Text: { text: { literalString: 'Second card content' } } } },
-    { id: 'card2-col', component: { Column: { children: { explicitList: ['card2-title', 'card2-body'] } } } },
-    { id: 'card2', component: { Card: { child: 'card2-col' } } },
+    {
+      id: 'card2-title',
+      component: {Text: {text: {literalString: 'Card Two'}, usageHint: 'h3'}},
+    },
+    {id: 'card2-body', component: {Text: {text: {literalString: 'Second card content'}}}},
+    {
+      id: 'card2-col',
+      component: {Column: {children: {explicitList: ['card2-title', 'card2-body']}}},
+    },
+    {id: 'card2', component: {Card: {child: 'card2-col'}}},
     // Card 3
-    { id: 'card3-title', component: { Text: { text: { literalString: 'Card Three' }, usageHint: 'h3' } } },
-    { id: 'card3-body', component: { Text: { text: { literalString: 'Third card content' } } } },
-    { id: 'card3-col', component: { Column: { children: { explicitList: ['card3-title', 'card3-body'] } } } },
-    { id: 'card3', component: { Card: { child: 'card3-col' } } },
+    {
+      id: 'card3-title',
+      component: {Text: {text: {literalString: 'Card Three'}, usageHint: 'h3'}},
+    },
+    {id: 'card3-body', component: {Text: {text: {literalString: 'Third card content'}}}},
+    {
+      id: 'card3-col',
+      component: {Column: {children: {explicitList: ['card3-title', 'card3-body']}}},
+    },
+    {id: 'card3', component: {Card: {child: 'card3-col'}}},
     // List
     {
       id: 'list-cards',
       component: {
-        List: { children: { explicitList: ['card1', 'card2', 'card3'] } },
+        List: {children: {explicitList: ['card1', 'card2', 'card3']}},
       },
     },
   ],
@@ -82,21 +103,33 @@ export const listWithCards: ComponentFixture = {
 export const listMixed: ComponentFixture = {
   root: 'list-mixed',
   components: [
-    { id: 'list-mixed-h', component: { Text: { text: { literalString: 'Feature List' }, usageHint: 'h2' } } },
+    {
+      id: 'list-mixed-h',
+      component: {Text: {text: {literalString: 'Feature List'}, usageHint: 'h2'}},
+    },
     // Feature items with icons
-    { id: 'feat1-icon', component: { Icon: { name: { literalString: 'check' } } } },
-    { id: 'feat1-text', component: { Text: { text: { literalString: 'Feature One' } } } },
-    { id: 'feat1', component: { Row: { children: { explicitList: ['feat1-icon', 'feat1-text'] } } } },
-    { id: 'feat2-icon', component: { Icon: { name: { literalString: 'check' } } } },
-    { id: 'feat2-text', component: { Text: { text: { literalString: 'Feature Two' } } } },
-    { id: 'feat2', component: { Row: { children: { explicitList: ['feat2-icon', 'feat2-text'] } } } },
-    { id: 'feat3-icon', component: { Icon: { name: { literalString: 'check' } } } },
-    { id: 'feat3-text', component: { Text: { text: { literalString: 'Feature Three' } } } },
-    { id: 'feat3', component: { Row: { children: { explicitList: ['feat3-icon', 'feat3-text'] } } } },
+    {id: 'feat1-icon', component: {Icon: {name: {literalString: 'check'}}}},
+    {id: 'feat1-text', component: {Text: {text: {literalString: 'Feature One'}}}},
+    {
+      id: 'feat1',
+      component: {Row: {children: {explicitList: ['feat1-icon', 'feat1-text']}}},
+    },
+    {id: 'feat2-icon', component: {Icon: {name: {literalString: 'check'}}}},
+    {id: 'feat2-text', component: {Text: {text: {literalString: 'Feature Two'}}}},
+    {
+      id: 'feat2',
+      component: {Row: {children: {explicitList: ['feat2-icon', 'feat2-text']}}},
+    },
+    {id: 'feat3-icon', component: {Icon: {name: {literalString: 'check'}}}},
+    {id: 'feat3-text', component: {Text: {text: {literalString: 'Feature Three'}}}},
+    {
+      id: 'feat3',
+      component: {Row: {children: {explicitList: ['feat3-icon', 'feat3-text']}}},
+    },
     {
       id: 'list-mixed',
       component: {
-        List: { children: { explicitList: ['list-mixed-h', 'feat1', 'feat2', 'feat3'] } },
+        List: {children: {explicitList: ['list-mixed-h', 'feat1', 'feat2', 'feat3']}},
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/modal.ts b/renderers/react/visual-parity/fixtures/components/modal.ts
index 213553731..1e709d92f 100644
--- a/renderers/react/visual-parity/fixtures/components/modal.ts
+++ b/renderers/react/visual-parity/fixtures/components/modal.ts
@@ -18,7 +18,7 @@
  * Modal component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const modalBasic: ComponentFixture = {
   root: 'modal-1',
@@ -26,19 +26,19 @@ export const modalBasic: ComponentFixture = {
     {
       id: 'trigger-text',
       component: {
-        Text: { text: { literalString: 'Open Modal' } },
+        Text: {text: {literalString: 'Open Modal'}},
       },
     },
     {
       id: 'trigger-btn',
       component: {
-        Button: { child: 'trigger-text', action: { name: 'open' } },
+        Button: {child: 'trigger-text', action: {name: 'open'}},
       },
     },
     {
       id: 'modal-content-text',
       component: {
-        Text: { text: { literalString: 'This is the modal content.' } },
+        Text: {text: {literalString: 'This is the modal content.'}},
       },
     },
     {
@@ -59,37 +59,42 @@ export const modalWithCard: ComponentFixture = {
     {
       id: 'trigger-text-2',
       component: {
-        Text: { text: { literalString: 'Show Details' } },
+        Text: {text: {literalString: 'Show Details'}},
       },
     },
     {
       id: 'trigger-btn-2',
       component: {
-        Button: { child: 'trigger-text-2', action: { name: 'open' }, primary: true },
+        Button: {child: 'trigger-text-2', action: {name: 'open'}, primary: true},
       },
     },
     {
       id: 'modal-title',
       component: {
-        Text: { text: { literalString: 'Details' }, usageHint: 'h2' },
+        Text: {text: {literalString: 'Details'}, usageHint: 'h2'},
       },
     },
     {
       id: 'modal-body',
       component: {
-        Text: { text: { literalString: 'Here are the details you requested. This modal contains a card with multiple text elements.' } },
+        Text: {
+          text: {
+            literalString:
+              'Here are the details you requested. This modal contains a card with multiple text elements.',
+          },
+        },
       },
     },
     {
       id: 'modal-content-col',
       component: {
-        Column: { children: { explicitList: ['modal-title', 'modal-body'] } },
+        Column: {children: {explicitList: ['modal-title', 'modal-body']}},
       },
     },
     {
       id: 'modal-card',
       component: {
-        Card: { child: 'modal-content-col' },
+        Card: {child: 'modal-content-col'},
       },
     },
     {
diff --git a/renderers/react/visual-parity/fixtures/components/multipleChoice.ts b/renderers/react/visual-parity/fixtures/components/multipleChoice.ts
index 515271362..9b51ccf8f 100644
--- a/renderers/react/visual-parity/fixtures/components/multipleChoice.ts
+++ b/renderers/react/visual-parity/fixtures/components/multipleChoice.ts
@@ -22,7 +22,7 @@
  * affect the visual rendering (always a dropdown).
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const multipleChoice: ComponentFixture = {
   root: 'mc-1',
@@ -31,11 +31,11 @@ export const multipleChoice: ComponentFixture = {
       id: 'mc-1',
       component: {
         MultipleChoice: {
-          selections: { path: '/mcSelections' },
+          selections: {path: '/mcSelections'},
           options: [
-            { value: 'option1', label: { literalString: 'Option 1' } },
-            { value: 'option2', label: { literalString: 'Option 2' } },
-            { value: 'option3', label: { literalString: 'Option 3' } },
+            {value: 'option1', label: {literalString: 'Option 1'}},
+            {value: 'option2', label: {literalString: 'Option 2'}},
+            {value: 'option3', label: {literalString: 'Option 3'}},
           ],
         },
       },
diff --git a/renderers/react/visual-parity/fixtures/components/row.ts b/renderers/react/visual-parity/fixtures/components/row.ts
index c74724db9..83931100e 100644
--- a/renderers/react/visual-parity/fixtures/components/row.ts
+++ b/renderers/react/visual-parity/fixtures/components/row.ts
@@ -18,18 +18,18 @@
  * Row component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const row: ComponentFixture = {
   root: 'row-1',
   components: [
-    { id: 'row-icon-1', component: { Icon: { name: { literalString: 'home' } } } },
-    { id: 'row-icon-2', component: { Icon: { name: { literalString: 'search' } } } },
-    { id: 'row-icon-3', component: { Icon: { name: { literalString: 'settings' } } } },
+    {id: 'row-icon-1', component: {Icon: {name: {literalString: 'home'}}}},
+    {id: 'row-icon-2', component: {Icon: {name: {literalString: 'search'}}}},
+    {id: 'row-icon-3', component: {Icon: {name: {literalString: 'settings'}}}},
     {
       id: 'row-1',
       component: {
-        Row: { children: { explicitList: ['row-icon-1', 'row-icon-2', 'row-icon-3'] } },
+        Row: {children: {explicitList: ['row-icon-1', 'row-icon-2', 'row-icon-3']}},
       },
     },
   ],
@@ -38,13 +38,13 @@ export const row: ComponentFixture = {
 export const rowWithText: ComponentFixture = {
   root: 'row-text',
   components: [
-    { id: 'row-text-1', component: { Text: { text: { literalString: 'First' } } } },
-    { id: 'row-text-2', component: { Text: { text: { literalString: 'Second' } } } },
-    { id: 'row-text-3', component: { Text: { text: { literalString: 'Third' } } } },
+    {id: 'row-text-1', component: {Text: {text: {literalString: 'First'}}}},
+    {id: 'row-text-2', component: {Text: {text: {literalString: 'Second'}}}},
+    {id: 'row-text-3', component: {Text: {text: {literalString: 'Third'}}}},
     {
       id: 'row-text',
       component: {
-        Row: { children: { explicitList: ['row-text-1', 'row-text-2', 'row-text-3'] } },
+        Row: {children: {explicitList: ['row-text-1', 'row-text-2', 'row-text-3']}},
       },
     },
   ],
@@ -53,13 +53,16 @@ export const rowWithText: ComponentFixture = {
 export const rowStart: ComponentFixture = {
   root: 'row-start',
   components: [
-    { id: 'row-start-1', component: { Text: { text: { literalString: 'A' } } } },
-    { id: 'row-start-2', component: { Text: { text: { literalString: 'B' } } } },
-    { id: 'row-start-3', component: { Text: { text: { literalString: 'C' } } } },
+    {id: 'row-start-1', component: {Text: {text: {literalString: 'A'}}}},
+    {id: 'row-start-2', component: {Text: {text: {literalString: 'B'}}}},
+    {id: 'row-start-3', component: {Text: {text: {literalString: 'C'}}}},
     {
       id: 'row-start',
       component: {
-        Row: { children: { explicitList: ['row-start-1', 'row-start-2', 'row-start-3'] }, distribution: 'start' },
+        Row: {
+          children: {explicitList: ['row-start-1', 'row-start-2', 'row-start-3']},
+          distribution: 'start',
+        },
       },
     },
   ],
@@ -68,13 +71,16 @@ export const rowStart: ComponentFixture = {
 export const rowCenter: ComponentFixture = {
   root: 'row-center',
   components: [
-    { id: 'row-center-1', component: { Text: { text: { literalString: 'A' } } } },
-    { id: 'row-center-2', component: { Text: { text: { literalString: 'B' } } } },
-    { id: 'row-center-3', component: { Text: { text: { literalString: 'C' } } } },
+    {id: 'row-center-1', component: {Text: {text: {literalString: 'A'}}}},
+    {id: 'row-center-2', component: {Text: {text: {literalString: 'B'}}}},
+    {id: 'row-center-3', component: {Text: {text: {literalString: 'C'}}}},
     {
       id: 'row-center',
       component: {
-        Row: { children: { explicitList: ['row-center-1', 'row-center-2', 'row-center-3'] }, distribution: 'center' },
+        Row: {
+          children: {explicitList: ['row-center-1', 'row-center-2', 'row-center-3']},
+          distribution: 'center',
+        },
       },
     },
   ],
@@ -83,13 +89,16 @@ export const rowCenter: ComponentFixture = {
 export const rowEnd: ComponentFixture = {
   root: 'row-end',
   components: [
-    { id: 'row-end-1', component: { Text: { text: { literalString: 'A' } } } },
-    { id: 'row-end-2', component: { Text: { text: { literalString: 'B' } } } },
-    { id: 'row-end-3', component: { Text: { text: { literalString: 'C' } } } },
+    {id: 'row-end-1', component: {Text: {text: {literalString: 'A'}}}},
+    {id: 'row-end-2', component: {Text: {text: {literalString: 'B'}}}},
+    {id: 'row-end-3', component: {Text: {text: {literalString: 'C'}}}},
     {
       id: 'row-end',
       component: {
-        Row: { children: { explicitList: ['row-end-1', 'row-end-2', 'row-end-3'] }, distribution: 'end' },
+        Row: {
+          children: {explicitList: ['row-end-1', 'row-end-2', 'row-end-3']},
+          distribution: 'end',
+        },
       },
     },
   ],
@@ -98,13 +107,16 @@ export const rowEnd: ComponentFixture = {
 export const rowSpaceBetween: ComponentFixture = {
   root: 'row-space',
   components: [
-    { id: 'row-space-1', component: { Text: { text: { literalString: 'Left' } } } },
-    { id: 'row-space-2', component: { Text: { text: { literalString: 'Center' } } } },
-    { id: 'row-space-3', component: { Text: { text: { literalString: 'Right' } } } },
+    {id: 'row-space-1', component: {Text: {text: {literalString: 'Left'}}}},
+    {id: 'row-space-2', component: {Text: {text: {literalString: 'Center'}}}},
+    {id: 'row-space-3', component: {Text: {text: {literalString: 'Right'}}}},
     {
       id: 'row-space',
       component: {
-        Row: { children: { explicitList: ['row-space-1', 'row-space-2', 'row-space-3'] }, distribution: 'spaceBetween' },
+        Row: {
+          children: {explicitList: ['row-space-1', 'row-space-2', 'row-space-3']},
+          distribution: 'spaceBetween',
+        },
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/slider.ts b/renderers/react/visual-parity/fixtures/components/slider.ts
index 7e19152de..623f5b0d4 100644
--- a/renderers/react/visual-parity/fixtures/components/slider.ts
+++ b/renderers/react/visual-parity/fixtures/components/slider.ts
@@ -21,7 +21,7 @@
  * Using path bindings for values to match the A2UI data model pattern.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const slider: ComponentFixture = {
   root: 'slider-1',
@@ -33,7 +33,7 @@ export const slider: ComponentFixture = {
       id: 'slider-1',
       component: {
         Slider: {
-          value: { path: '/slider/value' },
+          value: {path: '/slider/value'},
           minValue: 0,
           maxValue: 100,
         },
diff --git a/renderers/react/visual-parity/fixtures/components/tabs.ts b/renderers/react/visual-parity/fixtures/components/tabs.ts
index 6bbdbc118..020101530 100644
--- a/renderers/react/visual-parity/fixtures/components/tabs.ts
+++ b/renderers/react/visual-parity/fixtures/components/tabs.ts
@@ -18,23 +18,23 @@
  * Tabs component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const tabsBasic: ComponentFixture = {
   root: 'tabs-basic',
   components: [
     // Tab 1 content
-    { id: 'tab1-content', component: { Text: { text: { literalString: 'Content for Tab 1' } } } },
+    {id: 'tab1-content', component: {Text: {text: {literalString: 'Content for Tab 1'}}}},
     // Tab 2 content
-    { id: 'tab2-content', component: { Text: { text: { literalString: 'Content for Tab 2' } } } },
+    {id: 'tab2-content', component: {Text: {text: {literalString: 'Content for Tab 2'}}}},
     // Tabs
     {
       id: 'tabs-basic',
       component: {
         Tabs: {
           tabItems: [
-            { title: { literalString: 'Tab 1' }, child: 'tab1-content' },
-            { title: { literalString: 'Tab 2' }, child: 'tab2-content' },
+            {title: {literalString: 'Tab 1'}, child: 'tab1-content'},
+            {title: {literalString: 'Tab 2'}, child: 'tab2-content'},
           ],
         },
       },
@@ -46,20 +46,29 @@ export const tabsMultiple: ComponentFixture = {
   root: 'tabs-multi',
   components: [
     // Tab contents
-    { id: 'tabm1-content', component: { Text: { text: { literalString: 'Overview content goes here.' } } } },
-    { id: 'tabm2-content', component: { Text: { text: { literalString: 'Details and specifications.' } } } },
-    { id: 'tabm3-content', component: { Text: { text: { literalString: 'Reviews from users.' } } } },
-    { id: 'tabm4-content', component: { Text: { text: { literalString: 'Related items.' } } } },
+    {
+      id: 'tabm1-content',
+      component: {Text: {text: {literalString: 'Overview content goes here.'}}},
+    },
+    {
+      id: 'tabm2-content',
+      component: {Text: {text: {literalString: 'Details and specifications.'}}},
+    },
+    {
+      id: 'tabm3-content',
+      component: {Text: {text: {literalString: 'Reviews from users.'}}},
+    },
+    {id: 'tabm4-content', component: {Text: {text: {literalString: 'Related items.'}}}},
     // Tabs
     {
       id: 'tabs-multi',
       component: {
         Tabs: {
           tabItems: [
-            { title: { literalString: 'Overview' }, child: 'tabm1-content' },
-            { title: { literalString: 'Details' }, child: 'tabm2-content' },
-            { title: { literalString: 'Reviews' }, child: 'tabm3-content' },
-            { title: { literalString: 'Related' }, child: 'tabm4-content' },
+            {title: {literalString: 'Overview'}, child: 'tabm1-content'},
+            {title: {literalString: 'Details'}, child: 'tabm2-content'},
+            {title: {literalString: 'Reviews'}, child: 'tabm3-content'},
+            {title: {literalString: 'Related'}, child: 'tabm4-content'},
           ],
         },
       },
@@ -75,30 +84,80 @@ export const tabsComplex: ComponentFixture = {
   },
   components: [
     // Profile tab content
-    { id: 'profile-avatar', component: { Image: { url: { literalString: 'https://picsum.photos/seed/user/64/64' }, usageHint: 'avatar' } } },
-    { id: 'profile-name', component: { Text: { text: { literalString: 'John Doe' }, usageHint: 'h3' } } },
-    { id: 'profile-bio', component: { Text: { text: { literalString: 'Software developer and UI enthusiast.' } } } },
-    { id: 'profile-col', component: { Column: { children: { explicitList: ['profile-avatar', 'profile-name', 'profile-bio'] } } } },
+    {
+      id: 'profile-avatar',
+      component: {
+        Image: {
+          url: {literalString: 'https://picsum.photos/seed/user/64/64'},
+          usageHint: 'avatar',
+        },
+      },
+    },
+    {
+      id: 'profile-name',
+      component: {Text: {text: {literalString: 'John Doe'}, usageHint: 'h3'}},
+    },
+    {
+      id: 'profile-bio',
+      component: {Text: {text: {literalString: 'Software developer and UI enthusiast.'}}},
+    },
+    {
+      id: 'profile-col',
+      component: {
+        Column: {children: {explicitList: ['profile-avatar', 'profile-name', 'profile-bio']}},
+      },
+    },
     // Settings tab content
-    { id: 'settings-title', component: { Text: { text: { literalString: 'Preferences' }, usageHint: 'h3' } } },
-    { id: 'settings-cb1', component: { CheckBox: { label: { literalString: 'Enable notifications' }, value: { path: '/tabs/notify' } } } },
-    { id: 'settings-cb2', component: { CheckBox: { label: { literalString: 'Dark mode' }, value: { path: '/tabs/dark' } } } },
-    { id: 'settings-col', component: { Column: { children: { explicitList: ['settings-title', 'settings-cb1', 'settings-cb2'] } } } },
+    {
+      id: 'settings-title',
+      component: {Text: {text: {literalString: 'Preferences'}, usageHint: 'h3'}},
+    },
+    {
+      id: 'settings-cb1',
+      component: {
+        CheckBox: {
+          label: {literalString: 'Enable notifications'},
+          value: {path: '/tabs/notify'},
+        },
+      },
+    },
+    {
+      id: 'settings-cb2',
+      component: {
+        CheckBox: {label: {literalString: 'Dark mode'}, value: {path: '/tabs/dark'}},
+      },
+    },
+    {
+      id: 'settings-col',
+      component: {
+        Column: {children: {explicitList: ['settings-title', 'settings-cb1', 'settings-cb2']}},
+      },
+    },
     // Activity tab content
-    { id: 'activity-title', component: { Text: { text: { literalString: 'Recent Activity' }, usageHint: 'h3' } } },
-    { id: 'activity-1', component: { Text: { text: { literalString: 'Completed task A' } } } },
-    { id: 'activity-2', component: { Text: { text: { literalString: 'Updated profile' } } } },
-    { id: 'activity-3', component: { Text: { text: { literalString: 'Joined project B' } } } },
-    { id: 'activity-col', component: { Column: { children: { explicitList: ['activity-title', 'activity-1', 'activity-2', 'activity-3'] } } } },
+    {
+      id: 'activity-title',
+      component: {Text: {text: {literalString: 'Recent Activity'}, usageHint: 'h3'}},
+    },
+    {id: 'activity-1', component: {Text: {text: {literalString: 'Completed task A'}}}},
+    {id: 'activity-2', component: {Text: {text: {literalString: 'Updated profile'}}}},
+    {id: 'activity-3', component: {Text: {text: {literalString: 'Joined project B'}}}},
+    {
+      id: 'activity-col',
+      component: {
+        Column: {
+          children: {explicitList: ['activity-title', 'activity-1', 'activity-2', 'activity-3']},
+        },
+      },
+    },
     // Tabs
     {
       id: 'tabs-complex',
       component: {
         Tabs: {
           tabItems: [
-            { title: { literalString: 'Profile' }, child: 'profile-col' },
-            { title: { literalString: 'Settings' }, child: 'settings-col' },
-            { title: { literalString: 'Activity' }, child: 'activity-col' },
+            {title: {literalString: 'Profile'}, child: 'profile-col'},
+            {title: {literalString: 'Settings'}, child: 'settings-col'},
+            {title: {literalString: 'Activity'}, child: 'activity-col'},
           ],
         },
       },
diff --git a/renderers/react/visual-parity/fixtures/components/text.ts b/renderers/react/visual-parity/fixtures/components/text.ts
index 997c1dc14..21fd88393 100644
--- a/renderers/react/visual-parity/fixtures/components/text.ts
+++ b/renderers/react/visual-parity/fixtures/components/text.ts
@@ -18,7 +18,7 @@
  * Text component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const textBasic: ComponentFixture = {
   root: 'text-1',
@@ -26,7 +26,7 @@ export const textBasic: ComponentFixture = {
     {
       id: 'text-1',
       component: {
-        Text: { text: { literalString: 'Hello, this is basic text.' } },
+        Text: {text: {literalString: 'Hello, this is basic text.'}},
       },
     },
   ],
@@ -38,7 +38,7 @@ export const textH1: ComponentFixture = {
     {
       id: 'text-h1',
       component: {
-        Text: { text: { literalString: 'Heading 1' }, usageHint: 'h1' },
+        Text: {text: {literalString: 'Heading 1'}, usageHint: 'h1'},
       },
     },
   ],
@@ -50,7 +50,7 @@ export const textH2: ComponentFixture = {
     {
       id: 'text-h2',
       component: {
-        Text: { text: { literalString: 'Heading 2' }, usageHint: 'h2' },
+        Text: {text: {literalString: 'Heading 2'}, usageHint: 'h2'},
       },
     },
   ],
@@ -62,7 +62,7 @@ export const textH3: ComponentFixture = {
     {
       id: 'text-h3',
       component: {
-        Text: { text: { literalString: 'Heading 3' }, usageHint: 'h3' },
+        Text: {text: {literalString: 'Heading 3'}, usageHint: 'h3'},
       },
     },
   ],
@@ -74,7 +74,7 @@ export const textH4: ComponentFixture = {
     {
       id: 'text-h4',
       component: {
-        Text: { text: { literalString: 'Heading 4' }, usageHint: 'h4' },
+        Text: {text: {literalString: 'Heading 4'}, usageHint: 'h4'},
       },
     },
   ],
@@ -86,7 +86,7 @@ export const textH5: ComponentFixture = {
     {
       id: 'text-h5',
       component: {
-        Text: { text: { literalString: 'Heading 5' }, usageHint: 'h5' },
+        Text: {text: {literalString: 'Heading 5'}, usageHint: 'h5'},
       },
     },
   ],
@@ -98,7 +98,7 @@ export const textBody: ComponentFixture = {
     {
       id: 'text-body',
       component: {
-        Text: { text: { literalString: 'Body text content goes here.' }, usageHint: 'body' },
+        Text: {text: {literalString: 'Body text content goes here.'}, usageHint: 'body'},
       },
     },
   ],
@@ -110,7 +110,7 @@ export const textCaption: ComponentFixture = {
     {
       id: 'text-caption',
       component: {
-        Text: { text: { literalString: 'Caption text' }, usageHint: 'caption' },
+        Text: {text: {literalString: 'Caption text'}, usageHint: 'caption'},
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/components/textField.ts b/renderers/react/visual-parity/fixtures/components/textField.ts
index 3ecce6992..870059317 100644
--- a/renderers/react/visual-parity/fixtures/components/textField.ts
+++ b/renderers/react/visual-parity/fixtures/components/textField.ts
@@ -18,7 +18,7 @@
  * TextField component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const textField: ComponentFixture = {
   root: 'tf-1',
@@ -26,7 +26,7 @@ export const textField: ComponentFixture = {
     {
       id: 'tf-1',
       component: {
-        TextField: { label: { literalString: 'Your Name' } },
+        TextField: {label: {literalString: 'Your Name'}},
       },
     },
   ],
@@ -39,8 +39,8 @@ export const textFieldWithValue: ComponentFixture = {
       id: 'tf-value',
       component: {
         TextField: {
-          label: { literalString: 'Email' },
-          text: { literalString: 'user@example.com' },
+          label: {literalString: 'Email'},
+          text: {literalString: 'user@example.com'},
         },
       },
     },
diff --git a/renderers/react/visual-parity/fixtures/components/video.ts b/renderers/react/visual-parity/fixtures/components/video.ts
index b60c376a5..dcc21d175 100644
--- a/renderers/react/visual-parity/fixtures/components/video.ts
+++ b/renderers/react/visual-parity/fixtures/components/video.ts
@@ -18,7 +18,7 @@
  * Video component fixtures for visual parity testing.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const videoBasic: ComponentFixture = {
   root: 'video-1',
@@ -27,7 +27,7 @@ export const videoBasic: ComponentFixture = {
       id: 'video-1',
       component: {
         Video: {
-          url: { literalString: 'https://www.w3schools.com/html/mov_bbb.mp4' },
+          url: {literalString: 'https://www.w3schools.com/html/mov_bbb.mp4'},
         },
       },
     },
@@ -44,7 +44,7 @@ export const videoWithPathBinding: ComponentFixture = {
       id: 'video-2',
       component: {
         Video: {
-          url: { path: '/media/videoUrl' },
+          url: {path: '/media/videoUrl'},
         },
       },
     },
diff --git a/renderers/react/visual-parity/fixtures/index.ts b/renderers/react/visual-parity/fixtures/index.ts
index 3fc301723..b20da496d 100644
--- a/renderers/react/visual-parity/fixtures/index.ts
+++ b/renderers/react/visual-parity/fixtures/index.ts
@@ -20,7 +20,7 @@
  */
 
 // Re-export types
-export type { ComponentFixture } from './types';
+export type {ComponentFixture} from './types';
 
 // Import all component fixtures
 import {
@@ -44,7 +44,7 @@ import {
   modalFixtures,
 } from './components';
 
-import { nestedFixtures } from './nested';
+import {nestedFixtures} from './nested';
 
 // Re-export individual fixtures for direct import
 export * from './components';
diff --git a/renderers/react/visual-parity/fixtures/nested/index.ts b/renderers/react/visual-parity/fixtures/nested/index.ts
index 9eb0a39da..e69626947 100644
--- a/renderers/react/visual-parity/fixtures/nested/index.ts
+++ b/renderers/react/visual-parity/fixtures/nested/index.ts
@@ -19,4 +19,4 @@
  */
 
 export * from './layouts';
-export { nestedFixtures } from './layouts';
+export {nestedFixtures} from './layouts';
diff --git a/renderers/react/visual-parity/fixtures/nested/layouts.ts b/renderers/react/visual-parity/fixtures/nested/layouts.ts
index bc1d7022c..905189a1a 100644
--- a/renderers/react/visual-parity/fixtures/nested/layouts.ts
+++ b/renderers/react/visual-parity/fixtures/nested/layouts.ts
@@ -19,27 +19,54 @@
  * Tests complex compositions of multiple components.
  */
 
-import type { ComponentFixture } from '../types';
+import type {ComponentFixture} from '../types';
 
 export const nestedCardInList: ComponentFixture = {
   root: 'nested-card-list',
   components: [
     // Card 1
-    { id: 'n-card1-icon', component: { Icon: { name: { literalString: 'folder' } } } },
-    { id: 'n-card1-title', component: { Text: { text: { literalString: 'Documents' }, usageHint: 'h3' } } },
-    { id: 'n-card1-count', component: { Text: { text: { literalString: '24 files' }, usageHint: 'caption' } } },
-    { id: 'n-card1-header', component: { Row: { children: { explicitList: ['n-card1-icon', 'n-card1-title'] } } } },
-    { id: 'n-card1-col', component: { Column: { children: { explicitList: ['n-card1-header', 'n-card1-count'] } } } },
-    { id: 'n-card1', component: { Card: { child: 'n-card1-col' } } },
+    {id: 'n-card1-icon', component: {Icon: {name: {literalString: 'folder'}}}},
+    {
+      id: 'n-card1-title',
+      component: {Text: {text: {literalString: 'Documents'}, usageHint: 'h3'}},
+    },
+    {
+      id: 'n-card1-count',
+      component: {Text: {text: {literalString: '24 files'}, usageHint: 'caption'}},
+    },
+    {
+      id: 'n-card1-header',
+      component: {Row: {children: {explicitList: ['n-card1-icon', 'n-card1-title']}}},
+    },
+    {
+      id: 'n-card1-col',
+      component: {Column: {children: {explicitList: ['n-card1-header', 'n-card1-count']}}},
+    },
+    {id: 'n-card1', component: {Card: {child: 'n-card1-col'}}},
     // Card 2
-    { id: 'n-card2-icon', component: { Icon: { name: { literalString: 'image' } } } },
-    { id: 'n-card2-title', component: { Text: { text: { literalString: 'Photos' }, usageHint: 'h3' } } },
-    { id: 'n-card2-count', component: { Text: { text: { literalString: '156 images' }, usageHint: 'caption' } } },
-    { id: 'n-card2-header', component: { Row: { children: { explicitList: ['n-card2-icon', 'n-card2-title'] } } } },
-    { id: 'n-card2-col', component: { Column: { children: { explicitList: ['n-card2-header', 'n-card2-count'] } } } },
-    { id: 'n-card2', component: { Card: { child: 'n-card2-col' } } },
+    {id: 'n-card2-icon', component: {Icon: {name: {literalString: 'image'}}}},
+    {
+      id: 'n-card2-title',
+      component: {Text: {text: {literalString: 'Photos'}, usageHint: 'h3'}},
+    },
+    {
+      id: 'n-card2-count',
+      component: {Text: {text: {literalString: '156 images'}, usageHint: 'caption'}},
+    },
+    {
+      id: 'n-card2-header',
+      component: {Row: {children: {explicitList: ['n-card2-icon', 'n-card2-title']}}},
+    },
+    {
+      id: 'n-card2-col',
+      component: {Column: {children: {explicitList: ['n-card2-header', 'n-card2-count']}}},
+    },
+    {id: 'n-card2', component: {Card: {child: 'n-card2-col'}}},
     // List
-    { id: 'nested-card-list', component: { List: { children: { explicitList: ['n-card1', 'n-card2'] } } } },
+    {
+      id: 'nested-card-list',
+      component: {List: {children: {explicitList: ['n-card1', 'n-card2']}}},
+    },
   ],
 };
 
@@ -47,21 +74,48 @@ export const nestedForm: ComponentFixture = {
   root: 'nested-form',
   components: [
     // Form header
-    { id: 'form-title', component: { Text: { text: { literalString: 'Contact Form' }, usageHint: 'h2' } } },
-    { id: 'form-subtitle', component: { Text: { text: { literalString: 'Fill out the form below' }, usageHint: 'caption' } } },
+    {
+      id: 'form-title',
+      component: {Text: {text: {literalString: 'Contact Form'}, usageHint: 'h2'}},
+    },
+    {
+      id: 'form-subtitle',
+      component: {
+        Text: {text: {literalString: 'Fill out the form below'}, usageHint: 'caption'},
+      },
+    },
     // Form fields
-    { id: 'form-name', component: { TextField: { label: { literalString: 'Name' } } } },
-    { id: 'form-email', component: { TextField: { label: { literalString: 'Email' } } } },
-    { id: 'form-message', component: { TextField: { label: { literalString: 'Message' } } } },
+    {id: 'form-name', component: {TextField: {label: {literalString: 'Name'}}}},
+    {id: 'form-email', component: {TextField: {label: {literalString: 'Email'}}}},
+    {id: 'form-message', component: {TextField: {label: {literalString: 'Message'}}}},
     // Submit button
-    { id: 'form-btn-text', component: { Text: { text: { literalString: 'Submit' } } } },
-    { id: 'form-btn', component: { Button: { child: 'form-btn-text', action: { name: 'submit' }, primary: true } } },
+    {id: 'form-btn-text', component: {Text: {text: {literalString: 'Submit'}}}},
+    {
+      id: 'form-btn',
+      component: {Button: {child: 'form-btn-text', action: {name: 'submit'}, primary: true}},
+    },
     // Card wrapper
-    { id: 'form-col', component: { Column: { children: { explicitList: ['form-title', 'form-subtitle', 'form-name', 'form-email', 'form-message', 'form-btn'] } } } },
+    {
+      id: 'form-col',
+      component: {
+        Column: {
+          children: {
+            explicitList: [
+              'form-title',
+              'form-subtitle',
+              'form-name',
+              'form-email',
+              'form-message',
+              'form-btn',
+            ],
+          },
+        },
+      },
+    },
     {
       id: 'nested-form',
       component: {
-        Card: { child: 'form-col' },
+        Card: {child: 'form-col'},
       },
     },
   ],
@@ -71,22 +125,25 @@ export const nestedRowInColumn: ComponentFixture = {
   root: 'nested-row-col',
   components: [
     // Row 1
-    { id: 'r1-t1', component: { Text: { text: { literalString: 'A1' } } } },
-    { id: 'r1-t2', component: { Text: { text: { literalString: 'A2' } } } },
-    { id: 'r1-t3', component: { Text: { text: { literalString: 'A3' } } } },
-    { id: 'row1', component: { Row: { children: { explicitList: ['r1-t1', 'r1-t2', 'r1-t3'] } } } },
+    {id: 'r1-t1', component: {Text: {text: {literalString: 'A1'}}}},
+    {id: 'r1-t2', component: {Text: {text: {literalString: 'A2'}}}},
+    {id: 'r1-t3', component: {Text: {text: {literalString: 'A3'}}}},
+    {id: 'row1', component: {Row: {children: {explicitList: ['r1-t1', 'r1-t2', 'r1-t3']}}}},
     // Row 2
-    { id: 'r2-t1', component: { Text: { text: { literalString: 'B1' } } } },
-    { id: 'r2-t2', component: { Text: { text: { literalString: 'B2' } } } },
-    { id: 'r2-t3', component: { Text: { text: { literalString: 'B3' } } } },
-    { id: 'row2', component: { Row: { children: { explicitList: ['r2-t1', 'r2-t2', 'r2-t3'] } } } },
+    {id: 'r2-t1', component: {Text: {text: {literalString: 'B1'}}}},
+    {id: 'r2-t2', component: {Text: {text: {literalString: 'B2'}}}},
+    {id: 'r2-t3', component: {Text: {text: {literalString: 'B3'}}}},
+    {id: 'row2', component: {Row: {children: {explicitList: ['r2-t1', 'r2-t2', 'r2-t3']}}}},
     // Row 3
-    { id: 'r3-t1', component: { Text: { text: { literalString: 'C1' } } } },
-    { id: 'r3-t2', component: { Text: { text: { literalString: 'C2' } } } },
-    { id: 'r3-t3', component: { Text: { text: { literalString: 'C3' } } } },
-    { id: 'row3', component: { Row: { children: { explicitList: ['r3-t1', 'r3-t2', 'r3-t3'] } } } },
+    {id: 'r3-t1', component: {Text: {text: {literalString: 'C1'}}}},
+    {id: 'r3-t2', component: {Text: {text: {literalString: 'C2'}}}},
+    {id: 'r3-t3', component: {Text: {text: {literalString: 'C3'}}}},
+    {id: 'row3', component: {Row: {children: {explicitList: ['r3-t1', 'r3-t2', 'r3-t3']}}}},
     // Column
-    { id: 'nested-row-col', component: { Column: { children: { explicitList: ['row1', 'row2', 'row3'] } } } },
+    {
+      id: 'nested-row-col',
+      component: {Column: {children: {explicitList: ['row1', 'row2', 'row3']}}},
+    },
   ],
 };
 
@@ -94,19 +151,22 @@ export const nestedColumnInRow: ComponentFixture = {
   root: 'nested-col-row',
   components: [
     // Column 1
-    { id: 'c1-t1', component: { Text: { text: { literalString: 'Col 1 - A' } } } },
-    { id: 'c1-t2', component: { Text: { text: { literalString: 'Col 1 - B' } } } },
-    { id: 'col1', component: { Column: { children: { explicitList: ['c1-t1', 'c1-t2'] } } } },
+    {id: 'c1-t1', component: {Text: {text: {literalString: 'Col 1 - A'}}}},
+    {id: 'c1-t2', component: {Text: {text: {literalString: 'Col 1 - B'}}}},
+    {id: 'col1', component: {Column: {children: {explicitList: ['c1-t1', 'c1-t2']}}}},
     // Column 2
-    { id: 'c2-t1', component: { Text: { text: { literalString: 'Col 2 - A' } } } },
-    { id: 'c2-t2', component: { Text: { text: { literalString: 'Col 2 - B' } } } },
-    { id: 'col2', component: { Column: { children: { explicitList: ['c2-t1', 'c2-t2'] } } } },
+    {id: 'c2-t1', component: {Text: {text: {literalString: 'Col 2 - A'}}}},
+    {id: 'c2-t2', component: {Text: {text: {literalString: 'Col 2 - B'}}}},
+    {id: 'col2', component: {Column: {children: {explicitList: ['c2-t1', 'c2-t2']}}}},
     // Column 3
-    { id: 'c3-t1', component: { Text: { text: { literalString: 'Col 3 - A' } } } },
-    { id: 'c3-t2', component: { Text: { text: { literalString: 'Col 3 - B' } } } },
-    { id: 'col3', component: { Column: { children: { explicitList: ['c3-t1', 'c3-t2'] } } } },
+    {id: 'c3-t1', component: {Text: {text: {literalString: 'Col 3 - A'}}}},
+    {id: 'c3-t2', component: {Text: {text: {literalString: 'Col 3 - B'}}}},
+    {id: 'col3', component: {Column: {children: {explicitList: ['c3-t1', 'c3-t2']}}}},
     // Row
-    { id: 'nested-col-row', component: { Row: { children: { explicitList: ['col1', 'col2', 'col3'] } } } },
+    {
+      id: 'nested-col-row',
+      component: {Row: {children: {explicitList: ['col1', 'col2', 'col3']}}},
+    },
   ],
 };
 
@@ -114,25 +174,58 @@ export const nestedDashboard: ComponentFixture = {
   root: 'nested-dashboard',
   components: [
     // Header
-    { id: 'dash-title', component: { Text: { text: { literalString: 'Dashboard' }, usageHint: 'h1' } } },
-    { id: 'dash-icon', component: { Icon: { name: { literalString: 'dashboard' } } } },
-    { id: 'dash-header', component: { Row: { children: { explicitList: ['dash-icon', 'dash-title'] } } } },
+    {
+      id: 'dash-title',
+      component: {Text: {text: {literalString: 'Dashboard'}, usageHint: 'h1'}},
+    },
+    {id: 'dash-icon', component: {Icon: {name: {literalString: 'dashboard'}}}},
+    {
+      id: 'dash-header',
+      component: {Row: {children: {explicitList: ['dash-icon', 'dash-title']}}},
+    },
     // Stats cards
-    { id: 'stat1-val', component: { Text: { text: { literalString: '1,234' }, usageHint: 'h2' } } },
-    { id: 'stat1-label', component: { Text: { text: { literalString: 'Users' }, usageHint: 'caption' } } },
-    { id: 'stat1-col', component: { Column: { children: { explicitList: ['stat1-val', 'stat1-label'] } } } },
-    { id: 'stat1', component: { Card: { child: 'stat1-col' } } },
-    { id: 'stat2-val', component: { Text: { text: { literalString: '567' }, usageHint: 'h2' } } },
-    { id: 'stat2-label', component: { Text: { text: { literalString: 'Orders' }, usageHint: 'caption' } } },
-    { id: 'stat2-col', component: { Column: { children: { explicitList: ['stat2-val', 'stat2-label'] } } } },
-    { id: 'stat2', component: { Card: { child: 'stat2-col' } } },
-    { id: 'stat3-val', component: { Text: { text: { literalString: '$12,345' }, usageHint: 'h2' } } },
-    { id: 'stat3-label', component: { Text: { text: { literalString: 'Revenue' }, usageHint: 'caption' } } },
-    { id: 'stat3-col', component: { Column: { children: { explicitList: ['stat3-val', 'stat3-label'] } } } },
-    { id: 'stat3', component: { Card: { child: 'stat3-col' } } },
-    { id: 'stats-row', component: { Row: { children: { explicitList: ['stat1', 'stat2', 'stat3'] } } } },
+    {id: 'stat1-val', component: {Text: {text: {literalString: '1,234'}, usageHint: 'h2'}}},
+    {
+      id: 'stat1-label',
+      component: {Text: {text: {literalString: 'Users'}, usageHint: 'caption'}},
+    },
+    {
+      id: 'stat1-col',
+      component: {Column: {children: {explicitList: ['stat1-val', 'stat1-label']}}},
+    },
+    {id: 'stat1', component: {Card: {child: 'stat1-col'}}},
+    {id: 'stat2-val', component: {Text: {text: {literalString: '567'}, usageHint: 'h2'}}},
+    {
+      id: 'stat2-label',
+      component: {Text: {text: {literalString: 'Orders'}, usageHint: 'caption'}},
+    },
+    {
+      id: 'stat2-col',
+      component: {Column: {children: {explicitList: ['stat2-val', 'stat2-label']}}},
+    },
+    {id: 'stat2', component: {Card: {child: 'stat2-col'}}},
+    {
+      id: 'stat3-val',
+      component: {Text: {text: {literalString: '$12,345'}, usageHint: 'h2'}},
+    },
+    {
+      id: 'stat3-label',
+      component: {Text: {text: {literalString: 'Revenue'}, usageHint: 'caption'}},
+    },
+    {
+      id: 'stat3-col',
+      component: {Column: {children: {explicitList: ['stat3-val', 'stat3-label']}}},
+    },
+    {id: 'stat3', component: {Card: {child: 'stat3-col'}}},
+    {
+      id: 'stats-row',
+      component: {Row: {children: {explicitList: ['stat1', 'stat2', 'stat3']}}},
+    },
     // Main layout
-    { id: 'nested-dashboard', component: { Column: { children: { explicitList: ['dash-header', 'stats-row'] } } } },
+    {
+      id: 'nested-dashboard',
+      component: {Column: {children: {explicitList: ['dash-header', 'stats-row']}}},
+    },
   ],
 };
 
@@ -140,27 +233,84 @@ export const nestedProfile: ComponentFixture = {
   root: 'nested-profile',
   components: [
     // Avatar and info
-    { id: 'profile-avatar', component: { Image: { url: { literalString: 'https://picsum.photos/seed/profile/80/80' }, usageHint: 'avatar' } } },
-    { id: 'profile-name', component: { Text: { text: { literalString: 'Jane Doe' }, usageHint: 'h2' } } },
-    { id: 'profile-role', component: { Text: { text: { literalString: 'Product Designer' }, usageHint: 'caption' } } },
-    { id: 'profile-info', component: { Column: { children: { explicitList: ['profile-name', 'profile-role'] } } } },
-    { id: 'profile-header', component: { Row: { children: { explicitList: ['profile-avatar', 'profile-info'] } } } },
+    {
+      id: 'profile-avatar',
+      component: {
+        Image: {
+          url: {literalString: 'https://picsum.photos/seed/profile/80/80'},
+          usageHint: 'avatar',
+        },
+      },
+    },
+    {
+      id: 'profile-name',
+      component: {Text: {text: {literalString: 'Jane Doe'}, usageHint: 'h2'}},
+    },
+    {
+      id: 'profile-role',
+      component: {Text: {text: {literalString: 'Product Designer'}, usageHint: 'caption'}},
+    },
+    {
+      id: 'profile-info',
+      component: {Column: {children: {explicitList: ['profile-name', 'profile-role']}}},
+    },
+    {
+      id: 'profile-header',
+      component: {Row: {children: {explicitList: ['profile-avatar', 'profile-info']}}},
+    },
     // Divider
-    { id: 'profile-divider', component: { Divider: {} } },
+    {id: 'profile-divider', component: {Divider: {}}},
     // Bio
-    { id: 'bio-title', component: { Text: { text: { literalString: 'About' }, usageHint: 'h3' } } },
-    { id: 'bio-text', component: { Text: { text: { literalString: 'Passionate about creating beautiful and functional user interfaces. 5+ years of experience in UI/UX design.' } } } },
+    {id: 'bio-title', component: {Text: {text: {literalString: 'About'}, usageHint: 'h3'}}},
+    {
+      id: 'bio-text',
+      component: {
+        Text: {
+          text: {
+            literalString:
+              'Passionate about creating beautiful and functional user interfaces. 5+ years of experience in UI/UX design.',
+          },
+        },
+      },
+    },
     // Contact info
-    { id: 'contact-title', component: { Text: { text: { literalString: 'Contact' }, usageHint: 'h3' } } },
-    { id: 'contact-email-icon', component: { Icon: { name: { literalString: 'mail' } } } },
-    { id: 'contact-email-text', component: { Text: { text: { literalString: 'jane@example.com' } } } },
-    { id: 'contact-email', component: { Row: { children: { explicitList: ['contact-email-icon', 'contact-email-text'] } } } },
+    {
+      id: 'contact-title',
+      component: {Text: {text: {literalString: 'Contact'}, usageHint: 'h3'}},
+    },
+    {id: 'contact-email-icon', component: {Icon: {name: {literalString: 'mail'}}}},
+    {
+      id: 'contact-email-text',
+      component: {Text: {text: {literalString: 'jane@example.com'}}},
+    },
+    {
+      id: 'contact-email',
+      component: {
+        Row: {children: {explicitList: ['contact-email-icon', 'contact-email-text']}},
+      },
+    },
     // Card
-    { id: 'profile-col', component: { Column: { children: { explicitList: ['profile-header', 'profile-divider', 'bio-title', 'bio-text', 'contact-title', 'contact-email'] } } } },
+    {
+      id: 'profile-col',
+      component: {
+        Column: {
+          children: {
+            explicitList: [
+              'profile-header',
+              'profile-divider',
+              'bio-title',
+              'bio-text',
+              'contact-title',
+              'contact-email',
+            ],
+          },
+        },
+      },
+    },
     {
       id: 'nested-profile',
       component: {
-        Card: { child: 'profile-col' },
+        Card: {child: 'profile-col'},
       },
     },
   ],
@@ -176,29 +326,89 @@ export const nestedSettings: ComponentFixture = {
   },
   components: [
     // Header
-    { id: 'settings-title', component: { Text: { text: { literalString: 'Settings' }, usageHint: 'h2' } } },
+    {
+      id: 'settings-title',
+      component: {Text: {text: {literalString: 'Settings'}, usageHint: 'h2'}},
+    },
     // Preferences section
-    { id: 'pref-title', component: { Text: { text: { literalString: 'Preferences' }, usageHint: 'h3' } } },
-    { id: 'pref-notify', component: { CheckBox: { label: { literalString: 'Enable notifications' }, value: { path: '/settings/notify' } } } },
-    { id: 'pref-dark', component: { CheckBox: { label: { literalString: 'Dark mode' }, value: { path: '/settings/dark' } } } },
-    { id: 'pref-auto', component: { CheckBox: { label: { literalString: 'Auto-update' }, value: { path: '/settings/auto' } } } },
-    { id: 'pref-section', component: { Column: { children: { explicitList: ['pref-title', 'pref-notify', 'pref-dark', 'pref-auto'] } } } },
+    {
+      id: 'pref-title',
+      component: {Text: {text: {literalString: 'Preferences'}, usageHint: 'h3'}},
+    },
+    {
+      id: 'pref-notify',
+      component: {
+        CheckBox: {
+          label: {literalString: 'Enable notifications'},
+          value: {path: '/settings/notify'},
+        },
+      },
+    },
+    {
+      id: 'pref-dark',
+      component: {
+        CheckBox: {label: {literalString: 'Dark mode'}, value: {path: '/settings/dark'}},
+      },
+    },
+    {
+      id: 'pref-auto',
+      component: {
+        CheckBox: {label: {literalString: 'Auto-update'}, value: {path: '/settings/auto'}},
+      },
+    },
+    {
+      id: 'pref-section',
+      component: {
+        Column: {
+          children: {explicitList: ['pref-title', 'pref-notify', 'pref-dark', 'pref-auto']},
+        },
+      },
+    },
     // Volume slider (no label - Lit bug doesn't wire labels; use path binding with min/max)
-    { id: 'vol-slider', component: { Slider: { value: { path: '/settings/volume' }, minValue: 0, maxValue: 100 } } },
+    {
+      id: 'vol-slider',
+      component: {Slider: {value: {path: '/settings/volume'}, minValue: 0, maxValue: 100}},
+    },
     // Divider
-    { id: 'settings-div', component: { Divider: {} } },
+    {id: 'settings-div', component: {Divider: {}}},
     // Buttons
-    { id: 'save-btn-text', component: { Text: { text: { literalString: 'Save' } } } },
-    { id: 'save-btn', component: { Button: { child: 'save-btn-text', action: { name: 'save' }, primary: true } } },
-    { id: 'cancel-btn-text', component: { Text: { text: { literalString: 'Cancel' } } } },
-    { id: 'cancel-btn', component: { Button: { child: 'cancel-btn-text', action: { name: 'cancel' }, primary: false } } },
-    { id: 'btn-row', component: { Row: { children: { explicitList: ['save-btn', 'cancel-btn'] } } } },
+    {id: 'save-btn-text', component: {Text: {text: {literalString: 'Save'}}}},
+    {
+      id: 'save-btn',
+      component: {Button: {child: 'save-btn-text', action: {name: 'save'}, primary: true}},
+    },
+    {id: 'cancel-btn-text', component: {Text: {text: {literalString: 'Cancel'}}}},
+    {
+      id: 'cancel-btn',
+      component: {
+        Button: {child: 'cancel-btn-text', action: {name: 'cancel'}, primary: false},
+      },
+    },
+    {
+      id: 'btn-row',
+      component: {Row: {children: {explicitList: ['save-btn', 'cancel-btn']}}},
+    },
     // Card wrapper
-    { id: 'settings-col', component: { Column: { children: { explicitList: ['settings-title', 'pref-section', 'vol-slider', 'settings-div', 'btn-row'] } } } },
+    {
+      id: 'settings-col',
+      component: {
+        Column: {
+          children: {
+            explicitList: [
+              'settings-title',
+              'pref-section',
+              'vol-slider',
+              'settings-div',
+              'btn-row',
+            ],
+          },
+        },
+      },
+    },
     {
       id: 'nested-settings',
       component: {
-        Card: { child: 'settings-col' },
+        Card: {child: 'settings-col'},
       },
     },
   ],
diff --git a/renderers/react/visual-parity/fixtures/themes/index.ts b/renderers/react/visual-parity/fixtures/themes/index.ts
index bc3e585fb..40c9cf790 100644
--- a/renderers/react/visual-parity/fixtures/themes/index.ts
+++ b/renderers/react/visual-parity/fixtures/themes/index.ts
@@ -19,10 +19,10 @@
  * Maps theme names to theme objects for URL-based theme selection.
  */
 
-import { litTheme } from '@a2ui/react';
-import { visualParityTheme } from './visualParityTheme';
-import { minimalTheme } from './minimalTheme';
-import type { Types } from '@a2ui/lit/0.8';
+import {litTheme} from '@a2ui/react';
+import {visualParityTheme} from './visualParityTheme';
+import {minimalTheme} from './minimalTheme';
+import type {Types} from '@a2ui/lit/0.8';
 
 /**
  * Registry of themes available for visual parity testing.
@@ -54,6 +54,6 @@ export function getTheme(name: string | null): Types.Theme | undefined {
 }
 
 // Re-export individual themes
-export { litTheme } from '@a2ui/react';
-export { visualParityTheme } from './visualParityTheme';
-export { minimalTheme } from './minimalTheme';
+export {litTheme} from '@a2ui/react';
+export {visualParityTheme} from './visualParityTheme';
+export {minimalTheme} from './minimalTheme';
diff --git a/renderers/react/visual-parity/fixtures/themes/minimalTheme.ts b/renderers/react/visual-parity/fixtures/themes/minimalTheme.ts
index 44dfea09c..8bb7314f6 100644
--- a/renderers/react/visual-parity/fixtures/themes/minimalTheme.ts
+++ b/renderers/react/visual-parity/fixtures/themes/minimalTheme.ts
@@ -20,7 +20,7 @@
  * Tests structural correctness without style interference.
  */
 
-import type { Types } from '@a2ui/lit/0.8';
+import type {Types} from '@a2ui/lit/0.8';
 
 export const minimalTheme: Types.Theme = {
   components: {
@@ -65,7 +65,7 @@ export const minimalTheme: Types.Theme = {
 
     Image: {
       all: {},
-      avatar: { 'border-br-50': true },
+      avatar: {'border-br-50': true},
       header: {},
       icon: {},
       largeFeature: {},
diff --git a/renderers/react/visual-parity/fixtures/themes/visualParityTheme.ts b/renderers/react/visual-parity/fixtures/themes/visualParityTheme.ts
index 89cfb61fe..e315f0d81 100644
--- a/renderers/react/visual-parity/fixtures/themes/visualParityTheme.ts
+++ b/renderers/react/visual-parity/fixtures/themes/visualParityTheme.ts
@@ -19,7 +19,7 @@
  * This is an alternate theme designed for testing theme switching.
  */
 
-import type { Types } from '@a2ui/lit/0.8';
+import type {Types} from '@a2ui/lit/0.8';
 
 export const visualParityTheme: Types.Theme = {
   components: {
@@ -68,8 +68,8 @@ export const visualParityTheme: Types.Theme = {
       'filled-heavy': true,
     },
     Image: {
-      all: { 'layout-w-100': true },
-      avatar: { 'border-br-50': true },
+      all: {'layout-w-100': true},
+      avatar: {'border-br-50': true},
       header: {},
       icon: {},
       largeFeature: {},
@@ -228,8 +228,8 @@ export const visualParityTheme: Types.Theme = {
         'layout-g-2': true,
       },
       controls: {
-        all: { 'layout-p-2': true },
-        selected: { 'color-bgc-p90': true, 'border-br-8': true },
+        all: {'layout-p-2': true},
+        selected: {'color-bgc-p90': true, 'border-br-8': true},
       },
       container: {
         'layout-dis-flx': true,
diff --git a/renderers/react/visual-parity/lit/index.html b/renderers/react/visual-parity/lit/index.html
index 10957335e..5338f98a3 100644
--- a/renderers/react/visual-parity/lit/index.html
+++ b/renderers/react/visual-parity/lit/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -21,9 +21,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>A2UI Visual Parity - Lit</title>
     <!-- Material Symbols font for icons -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+    />
     <!-- Outfit font -->
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
     <style>
       :root {
         --n-100: #ffffff;
@@ -140,8 +146,8 @@
         --e-5: #2d0001;
         --e-0: #000000;
 
-        --font-family: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         --color-scheme: light;
diff --git a/renderers/react/visual-parity/lit/src/main.ts b/renderers/react/visual-parity/lit/src/main.ts
index 06031a05f..057d5d47c 100644
--- a/renderers/react/visual-parity/lit/src/main.ts
+++ b/renderers/react/visual-parity/lit/src/main.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { v0_8 } from '@a2ui/lit';
+import {v0_8} from '@a2ui/lit';
 import * as UI from '@a2ui/lit/ui';
-import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { provide } from '@lit/context';
-import { renderMarkdown } from '@a2ui/markdown-it';
-import { allFixtures, type FixtureName, type ComponentFixture } from '../../fixtures';
-import { getTheme, themeNames, type ThemeName } from '../../fixtures/themes';
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {provide} from '@lit/context';
+import {renderMarkdown} from '@a2ui/markdown-it';
+import {allFixtures, type FixtureName, type ComponentFixture} from '../../fixtures';
+import {getTheme, themeNames, type ThemeName} from '../../fixtures/themes';
 
 // Themed surface component that provides theme context directly
 // This matches the pattern from @copilotkit/a2ui-renderer's themed-a2ui-surface
@@ -29,20 +29,20 @@ import { getTheme, themeNames, type ThemeName } from '../../fixtures/themes';
 // provide the theme directly on a component that renders a2ui-surface as a child
 @customElement('themed-a2ui-surface')
 class ThemedA2UISurface extends LitElement {
-  @provide({ context: UI.Context.themeContext })
-  @property({ attribute: false })
+  @provide({context: UI.Context.themeContext})
+  @property({attribute: false})
   accessor theme: v0_8.Types.Theme | undefined = undefined;
 
-  @provide({ context: UI.Context.markdown })
+  @provide({context: UI.Context.markdown})
   accessor markdownRenderer: v0_8.Types.MarkdownRenderer = renderMarkdown;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   accessor surfaceId: string = '';
 
-  @property({ attribute: false })
+  @property({attribute: false})
   accessor surface: any = undefined;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   accessor processor: any = undefined;
 
   render() {
@@ -60,18 +60,18 @@ class ThemedA2UISurface extends LitElement {
  */
 function toValueMap(key: string, value: unknown): v0_8.Types.ValueMap {
   if (typeof value === 'boolean') {
-    return { key, valueBoolean: value };
+    return {key, valueBoolean: value};
   } else if (typeof value === 'string') {
-    return { key, valueString: value };
+    return {key, valueString: value};
   } else if (typeof value === 'number') {
-    return { key, valueNumber: value };
+    return {key, valueNumber: value};
   } else if (typeof value === 'object' && value !== null) {
     return {
       key,
       valueMap: Object.entries(value).map(([k, v]) => toValueMap(k, v)),
     };
   }
-  return { key, valueString: String(value) };
+  return {key, valueString: String(value)};
 }
 
 /**
@@ -82,7 +82,7 @@ function toValueMap(key: string, value: unknown): v0_8.Types.ValueMap {
  */
 function dataToMessages(
   data: Record<string, unknown>,
-  surfaceId: string
+  surfaceId: string,
 ): v0_8.Types.ServerToClientMessage[] {
   // Group values by parent path to avoid overwriting
   const byParentPath = new Map<string, v0_8.Types.ValueMap[]>();
@@ -119,7 +119,7 @@ function dataToMessages(
  */
 function fixtureToMessages(
   fixture: ComponentFixture,
-  surfaceId: string
+  surfaceId: string,
 ): v0_8.Types.ServerToClientMessage[] {
   const messages: v0_8.Types.ServerToClientMessage[] = [];
 
@@ -132,7 +132,7 @@ function fixtureToMessages(
   messages.push({
     surfaceUpdate: {
       surfaceId,
-      components: fixture.components.map((c) => ({
+      components: fixture.components.map(c => ({
         id: c.id,
         component: c.component,
       })),
@@ -181,14 +181,17 @@ function init() {
       <p>Available fixtures:</p>
       <ul>
         ${Object.keys(allFixtures)
-          .map((name) => `<li><a href="?fixture=${name}&theme=${effectiveTheme}">${name}</a></li>`)
+          .map(name => `<li><a href="?fixture=${name}&theme=${effectiveTheme}">${name}</a></li>`)
           .join('')}
       </ul>
       <h2>Available themes:</h2>
       <ul>
         ${themeNames
-          .filter((t) => t !== 'default')
-          .map((theme) => `<li><a href="?theme=${theme}">${theme}</a> ${theme === effectiveTheme ? '(current)' : ''}</li>`)
+          .filter(t => t !== 'default')
+          .map(
+            theme =>
+              `<li><a href="?theme=${theme}">${theme}</a> ${theme === effectiveTheme ? '(current)' : ''}</li>`,
+          )
           .join('')}
       </ul>
       <p>Current theme: <strong>${effectiveTheme}</strong></p>
diff --git a/renderers/react/visual-parity/lit/vite.config.ts b/renderers/react/visual-parity/lit/vite.config.ts
index d29920277..05d734570 100644
--- a/renderers/react/visual-parity/lit/vite.config.ts
+++ b/renderers/react/visual-parity/lit/vite.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 
 export default defineConfig({
   root: 'lit',
diff --git a/renderers/react/visual-parity/playwright.config.ts b/renderers/react/visual-parity/playwright.config.ts
index 7526e246e..6cf9c0766 100644
--- a/renderers/react/visual-parity/playwright.config.ts
+++ b/renderers/react/visual-parity/playwright.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig, devices } from '@playwright/test';
+import {defineConfig, devices} from '@playwright/test';
 
 /**
  * Playwright configuration for A2UI visual parity tests.
@@ -29,10 +29,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
 
-  reporter: [
-    ['html', { open: 'never' }],
-    ['list'],
-  ],
+  reporter: [['html', {open: 'never'}], ['list']],
 
   use: {
     trace: 'on-first-retry',
@@ -44,7 +41,7 @@ export default defineConfig({
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
-        viewport: { width: 1280, height: 720 },
+        viewport: {width: 1280, height: 720},
       },
     },
   ],
diff --git a/renderers/react/visual-parity/react/index.html b/renderers/react/visual-parity/react/index.html
index 7dbb3db8f..f19f0dabd 100644
--- a/renderers/react/visual-parity/react/index.html
+++ b/renderers/react/visual-parity/react/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -21,9 +21,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>A2UI Visual Parity - React</title>
     <!-- Material Symbols font for icons -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
+    />
     <!-- Outfit font -->
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
     <style>
       :root {
         --n-100: #ffffff;
@@ -140,8 +146,8 @@
         --e-5: #2d0001;
         --e-0: #000000;
 
-        --font-family: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         --color-scheme: light;
diff --git a/renderers/react/visual-parity/react/src/FixturePage.tsx b/renderers/react/visual-parity/react/src/FixturePage.tsx
index 6f9df5220..630116acd 100644
--- a/renderers/react/visual-parity/react/src/FixturePage.tsx
+++ b/renderers/react/visual-parity/react/src/FixturePage.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react';
-import { useA2UI, A2UIRenderer } from '@a2ui/react';
-import type { Types } from '@a2ui/lit/0.8';
-import { allFixtures, type FixtureName, type ComponentFixture } from '../../fixtures';
+import React, {useEffect, useState} from 'react';
+import {useA2UI, A2UIRenderer} from '@a2ui/react';
+import type {Types} from '@a2ui/lit/0.8';
+import {allFixtures, type FixtureName, type ComponentFixture} from '../../fixtures';
 
 /**
  * Convert a value to a ValueMap entry.
@@ -25,18 +25,18 @@ import { allFixtures, type FixtureName, type ComponentFixture } from '../../fixt
  */
 function toValueMap(key: string, value: unknown): Types.ValueMap {
   if (typeof value === 'boolean') {
-    return { key, valueBoolean: value };
+    return {key, valueBoolean: value};
   } else if (typeof value === 'string') {
-    return { key, valueString: value };
+    return {key, valueString: value};
   } else if (typeof value === 'number') {
-    return { key, valueNumber: value };
+    return {key, valueNumber: value};
   } else if (typeof value === 'object' && value !== null) {
     return {
       key,
       valueMap: Object.entries(value).map(([k, v]) => toValueMap(k, v)),
     };
   }
-  return { key, valueString: String(value) };
+  return {key, valueString: String(value)};
 }
 
 /**
@@ -47,7 +47,7 @@ function toValueMap(key: string, value: unknown): Types.ValueMap {
  */
 function dataToMessages(
   data: Record<string, unknown>,
-  surfaceId: string
+  surfaceId: string,
 ): Types.ServerToClientMessage[] {
   // Group values by parent path to avoid overwriting
   const byParentPath = new Map<string, Types.ValueMap[]>();
@@ -84,7 +84,7 @@ function dataToMessages(
  */
 function fixtureToMessages(
   fixture: ComponentFixture,
-  surfaceId: string
+  surfaceId: string,
 ): Types.ServerToClientMessage[] {
   const messages: Types.ServerToClientMessage[] = [];
 
@@ -97,7 +97,7 @@ function fixtureToMessages(
   messages.push({
     surfaceUpdate: {
       surfaceId,
-      components: fixture.components.map((c) => ({
+      components: fixture.components.map(c => ({
         id: c.id,
         component: c.component,
       })),
@@ -116,7 +116,7 @@ function fixtureToMessages(
 }
 
 export function FixturePage() {
-  const { processMessages } = useA2UI();
+  const {processMessages} = useA2UI();
   const [fixtureName, setFixtureName] = useState<FixtureName | null>(null);
   const [ready, setReady] = useState(false);
 
@@ -150,7 +150,7 @@ export function FixturePage() {
         <h1>Visual Parity - React</h1>
         <p>Available fixtures:</p>
         <ul>
-          {Object.keys(allFixtures).map((name) => (
+          {Object.keys(allFixtures).map(name => (
             <li key={name}>
               <a href={`?fixture=${name}&theme=${currentTheme}`}>{name}</a>
             </li>
@@ -158,13 +158,15 @@ export function FixturePage() {
         </ul>
         <h2>Available themes:</h2>
         <ul>
-          {themes.map((theme) => (
+          {themes.map(theme => (
             <li key={theme}>
               <a href={`?theme=${theme}`}>{theme}</a> {theme === currentTheme ? '(current)' : ''}
             </li>
           ))}
         </ul>
-        <p>Current theme: <strong>{currentTheme}</strong></p>
+        <p>
+          Current theme: <strong>{currentTheme}</strong>
+        </p>
       </div>
     );
   }
diff --git a/renderers/react/visual-parity/react/src/main.tsx b/renderers/react/visual-parity/react/src/main.tsx
index 94a1ac9f4..925de439b 100644
--- a/renderers/react/visual-parity/react/src/main.tsx
+++ b/renderers/react/visual-parity/react/src/main.tsx
@@ -16,10 +16,10 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { A2UIProvider, initializeDefaultCatalog } from '@a2ui/react';
-import { injectStyles } from '@a2ui/react/styles';
-import { FixturePage } from './FixturePage';
-import { getTheme, themeNames } from '../../fixtures/themes';
+import {A2UIProvider, initializeDefaultCatalog} from '@a2ui/react';
+import {injectStyles} from '@a2ui/react/styles';
+import {FixturePage} from './FixturePage';
+import {getTheme, themeNames} from '../../fixtures/themes';
 
 // Initialize the default component catalog
 initializeDefaultCatalog();
@@ -46,5 +46,5 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     <A2UIProvider theme={selectedTheme}>
       <FixturePage />
     </A2UIProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/renderers/react/visual-parity/react/vite.config.ts b/renderers/react/visual-parity/react/vite.config.ts
index cbe0d9b52..2a0a1fe2b 100644
--- a/renderers/react/visual-parity/react/vite.config.ts
+++ b/renderers/react/visual-parity/react/vite.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
@@ -30,10 +30,7 @@ export default defineConfig({
     force: true,
     // Pre-bundle web_core subpath imports so Vite doesn't discover them lazily
     // (which causes "optimized dependencies changed. reloading" mid-page-load)
-    include: [
-      '@a2ui/web_core/styles/index',
-      '@a2ui/web_core/data/model-processor',
-    ],
+    include: ['@a2ui/web_core/styles/index', '@a2ui/web_core/data/model-processor'],
     exclude: [
       '@a2ui/react',
       '@a2ui/lit',
diff --git a/renderers/react/visual-parity/tests/visual-parity.spec.ts b/renderers/react/visual-parity/tests/visual-parity.spec.ts
index 8c29f4035..18df8e88c 100644
--- a/renderers/react/visual-parity/tests/visual-parity.spec.ts
+++ b/renderers/react/visual-parity/tests/visual-parity.spec.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { test, expect } from '@playwright/test';
-import { PNG } from 'pngjs';
+import {test, expect} from '@playwright/test';
+import {PNG} from 'pngjs';
 import pixelmatch from 'pixelmatch';
-import { allFixtures, fixtureNames, type FixtureName } from '../fixtures';
-import { themeNames, type ThemeName } from '../fixtures/themes';
+import {allFixtures, fixtureNames, type FixtureName} from '../fixtures';
+import {themeNames, type ThemeName} from '../fixtures/themes';
 
 /**
  * Visual parity tests for A2UI React vs Lit renderers.
@@ -53,9 +53,7 @@ const skippedFixtures: FixtureName[] = [];
 /**
  * Get fixtures to test (excluding skipped ones).
  */
-const fixturesToTest = fixtureNames.filter(
-  (name) => !skippedFixtures.includes(name)
-);
+const fixturesToTest = fixtureNames.filter(name => !skippedFixtures.includes(name));
 
 /**
  * Themes to test for visual parity.
@@ -73,8 +71,8 @@ const themesToTest: ThemeName[] = ['lit', 'visualParity', 'minimal'];
  */
 function compareImages(
   img1Buffer: Buffer,
-  img2Buffer: Buffer
-): { diffPixels: number; totalPixels: number; diffPercent: number } {
+  img2Buffer: Buffer,
+): {diffPixels: number; totalPixels: number; diffPercent: number} {
   const img1 = PNG.sync.read(img1Buffer);
   const img2 = PNG.sync.read(img2Buffer);
 
@@ -94,7 +92,7 @@ function compareImages(
     null, // Don't generate diff image
     img1.width,
     img1.height,
-    { threshold: PIXEL_DIFF_THRESHOLD }
+    {threshold: PIXEL_DIFF_THRESHOLD},
   );
 
   return {
@@ -108,7 +106,7 @@ function compareImages(
  * Build URL with fixture and optional theme parameters.
  */
 function buildUrl(baseUrl: string, fixture: string, theme?: string): string {
-  const params = new URLSearchParams({ fixture });
+  const params = new URLSearchParams({fixture});
   if (theme && theme !== 'default') {
     params.set('theme', theme);
   }
@@ -123,7 +121,7 @@ test.describe('Visual Parity: React vs Lit', () => {
   for (const theme of themesToTest) {
     test.describe(`Theme: ${theme}`, () => {
       for (const fixture of fixturesToTest) {
-        test(`${fixture}`, async ({ browser }) => {
+        test(`${fixture}`, async ({browser}) => {
           // Use separate contexts to avoid any state leakage between renderers
           const litContext = await browser.newContext();
           const reactContext = await browser.newContext();
@@ -138,7 +136,7 @@ test.describe('Visual Parity: React vs Lit', () => {
 
             // Screenshot Lit (reference)
             await litPage.goto(litUrl);
-            await litPage.waitForSelector('.fixture-container', { state: 'visible' });
+            await litPage.waitForSelector('.fixture-container', {state: 'visible'});
             await litPage.waitForLoadState('networkidle');
             // Wait for fonts to load (important for text rendering parity)
             await litPage.evaluate(() => document.fonts.ready);
@@ -147,7 +145,7 @@ test.describe('Visual Parity: React vs Lit', () => {
 
             // Screenshot React (test subject)
             await reactPage.goto(reactUrl);
-            await reactPage.waitForSelector('.fixture-container', { state: 'visible' });
+            await reactPage.waitForSelector('.fixture-container', {state: 'visible'});
             await reactPage.waitForLoadState('networkidle');
             // Wait for fonts to load
             await reactPage.evaluate(() => document.fonts.ready);
@@ -155,21 +153,21 @@ test.describe('Visual Parity: React vs Lit', () => {
             const reactScreenshot = await reactContainer.screenshot();
 
             // Direct comparison: React vs Lit
-            const { diffPixels, totalPixels, diffPercent } = compareImages(
+            const {diffPixels, totalPixels, diffPercent} = compareImages(
               reactScreenshot,
-              litScreenshot
+              litScreenshot,
             );
 
             // Report the difference
             console.log(
-              `[${theme}] ${fixture}: ${diffPixels}/${totalPixels} pixels differ (${diffPercent.toFixed(2)}%)`
+              `[${theme}] ${fixture}: ${diffPixels}/${totalPixels} pixels differ (${diffPercent.toFixed(2)}%)`,
             );
 
             // Fail if difference exceeds threshold
             expect(
               diffPercent,
               `[Theme: ${theme}] React and Lit differ by ${diffPercent.toFixed(2)}% (${diffPixels} pixels). ` +
-                `Max allowed: ${MAX_DIFF_PERCENT}%`
+                `Max allowed: ${MAX_DIFF_PERCENT}%`,
             ).toBeLessThanOrEqual(MAX_DIFF_PERCENT);
           } finally {
             await litContext.close();
@@ -186,7 +184,7 @@ test.describe('Visual Parity: React vs Lit', () => {
 // =============================================================================
 
 test.describe('DOM Structure Debug', () => {
-  test('debug - compare dimensions', async ({ browser }) => {
+  test('debug - compare dimensions', async ({browser}) => {
     const fixture = 'buttonPrimary'; // Change this to test different fixtures
     const theme = 'lit';
     const litContext = await browser.newContext();
@@ -199,7 +197,7 @@ test.describe('DOM Structure Debug', () => {
       // Get Lit dimensions
       const litUrl = buildUrl(LIT_BASE_URL, fixture, theme);
       await litPage.goto(litUrl);
-      await litPage.waitForSelector('.fixture-container', { state: 'visible' });
+      await litPage.waitForSelector('.fixture-container', {state: 'visible'});
       await litPage.waitForLoadState('networkidle');
       await litPage.evaluate(() => document.fonts.ready);
 
@@ -228,7 +226,9 @@ test.describe('DOM Structure Debug', () => {
         const pStyle = pEl ? window.getComputedStyle(pEl) : null;
 
         // Check CSS variable value at themed-surface level
-        const cssVarP100 = themedSurface ? getComputedStyle(themedSurface).getPropertyValue('--p-100') : 'N/A';
+        const cssVarP100 = themedSurface
+          ? getComputedStyle(themedSurface).getPropertyValue('--p-100')
+          : 'N/A';
 
         // Check CSS variable values at different levels
         const pComputedStyle = pEl ? getComputedStyle(pEl) : null;
@@ -251,7 +251,7 @@ test.describe('DOM Structure Debug', () => {
       // Get React dimensions
       const reactUrl = buildUrl(REACT_BASE_URL, fixture, theme);
       await reactPage.goto(reactUrl);
-      await reactPage.waitForSelector('.fixture-container', { state: 'visible' });
+      await reactPage.waitForSelector('.fixture-container', {state: 'visible'});
       await reactPage.waitForLoadState('networkidle');
       await reactPage.evaluate(() => document.fonts.ready);
 
@@ -338,25 +338,25 @@ test.describe('DOM Structure Debug', () => {
     }
   });
 
-  test('debug - compare DOM', async ({ page }) => {
+  test('debug - compare DOM', async ({page}) => {
     const fixture = 'dividerHorizontal';
     const theme = 'lit';
 
     // Capture console errors
     const errors: string[] = [];
-    page.on('console', (msg) => {
+    page.on('console', msg => {
       if (msg.type() === 'error') {
         errors.push(msg.text());
       }
     });
-    page.on('pageerror', (err) => {
+    page.on('pageerror', err => {
       errors.push(err.message);
     });
 
     // Get Lit DOM - also check shadow DOM
     const litUrl = buildUrl(LIT_BASE_URL, fixture, theme);
     await page.goto(litUrl);
-    await page.waitForSelector('.fixture-container', { state: 'attached' });
+    await page.waitForSelector('.fixture-container', {state: 'attached'});
     await page.waitForTimeout(1000);
     const litHtml = await page.locator('.fixture-container').innerHTML();
 
@@ -391,13 +391,13 @@ test.describe('DOM Structure Debug', () => {
         containerHeight: containerComputed?.height,
       };
 
-      return { surfaceShadow, rootShadow, dividerShadow, litStyles };
+      return {surfaceShadow, rootShadow, dividerShadow, litStyles};
     });
 
     // Get React DOM
     const reactUrl = buildUrl(REACT_BASE_URL, fixture, theme);
     await page.goto(reactUrl);
-    await page.waitForSelector('.fixture-container', { state: 'visible' });
+    await page.waitForSelector('.fixture-container', {state: 'visible'});
     await page.waitForTimeout(500);
     const reactHtml = await page.locator('.fixture-container').innerHTML();
 
@@ -451,10 +451,12 @@ test.describe('DOM Structure Debug', () => {
     });
     console.log('\n=== Themes ===');
     console.log(`Testing: ${themesToTest.length} themes`);
-    themesToTest.forEach((theme) => {
+    themesToTest.forEach(theme => {
       console.log(`  - ${theme}`);
     });
-    console.log(`\nTotal test cases: ${fixturesToTest.length} fixtures x ${themesToTest.length} themes = ${fixturesToTest.length * themesToTest.length}`);
+    console.log(
+      `\nTotal test cases: ${fixturesToTest.length} fixtures x ${themesToTest.length} themes = ${fixturesToTest.length * themesToTest.length}`,
+    );
     expect(true).toBe(true);
   });
 });
diff --git a/renderers/react/vitest.config.ts b/renderers/react/vitest.config.ts
index 555a3e83b..b30ad5f24 100644
--- a/renderers/react/vitest.config.ts
+++ b/renderers/react/vitest.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vitest/config';
+import {defineConfig} from 'vitest/config';
 import path from 'path';
 
 export default defineConfig({
diff --git a/renderers/scripts/increment_version.mjs b/renderers/scripts/increment_version.mjs
index d4756f0f4..3a0f92f44 100755
--- a/renderers/scripts/increment_version.mjs
+++ b/renderers/scripts/increment_version.mjs
@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { readFileSync, writeFileSync } from 'node:fs';
-import { getPackageGraph, incrementVersion, runCommand } from './lib/workspace.mjs';
+import {readFileSync, writeFileSync} from 'node:fs';
+import {getPackageGraph, incrementVersion, runCommand} from './lib/workspace.mjs';
 
 const args = process.argv.slice(2);
 const skipSync = args.includes('--skip-sync');
@@ -63,7 +63,7 @@ if (dependents.length > 0 && !skipSync) {
     }
     console.log(`- Syncing ${dep.name} in ${dep.dir}`);
     // Update lockfiles normally, but ignore scripts to prevent postinstall esbuild errors
-    runCommand('npm', ['install', '--ignore-scripts', '--no-audit', '--no-fund'], { cwd: dep.dir });
+    runCommand('npm', ['install', '--ignore-scripts', '--no-audit', '--no-fund'], {cwd: dep.dir});
   }
 }
 
diff --git a/renderers/scripts/lib/workspace.mjs b/renderers/scripts/lib/workspace.mjs
index 9b91523e5..f1ed663a9 100644
--- a/renderers/scripts/lib/workspace.mjs
+++ b/renderers/scripts/lib/workspace.mjs
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { readFileSync, readdirSync, statSync, existsSync } from 'node:fs';
-import { join, resolve, relative, dirname } from 'node:path';
-import { spawnSync } from 'node:child_process';
-import { fileURLToPath } from 'node:url';
+import {readFileSync, readdirSync, statSync, existsSync} from 'node:fs';
+import {join, resolve, relative, dirname} from 'node:path';
+import {spawnSync} from 'node:child_process';
+import {fileURLToPath} from 'node:url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 export const ROOT_DIR = resolve(__dirname, '../../../');
@@ -54,18 +54,20 @@ export function getPackageGraph() {
   for (const path of packagePaths) {
     const pkg = JSON.parse(readFileSync(path, 'utf8'));
     const dir = dirname(path);
-    
-    // If we have a duplicate name, prioritize packages in 'renderers/' 
+
+    // If we have a duplicate name, prioritize packages in 'renderers/'
     // or those that are not private (if one is private and other isn't)
     if (packages[pkg.name]) {
       const existing = packages[pkg.name];
       const isNewInRenderers = dir.includes('/renderers/');
       const isExistingInRenderers = existing.dir.includes('/renderers/');
-      
+
       if (isExistingInRenderers && !isNewInRenderers) continue;
       if (isExistingInRenderers === isNewInRenderers) {
         const newScriptsCount = Object.keys(pkg.scripts || {}).length;
-        const existingScriptsCount = Object.keys(JSON.parse(readFileSync(existing.path, 'utf8')).scripts || {}).length;
+        const existingScriptsCount = Object.keys(
+          JSON.parse(readFileSync(existing.path, 'utf8')).scripts || {},
+        ).length;
         if (newScriptsCount <= existingScriptsCount) continue;
       }
     }
@@ -78,7 +80,7 @@ export function getPackageGraph() {
       dependencies: pkg.dependencies || {},
       devDependencies: pkg.devDependencies || {},
       peerDependencies: pkg.peerDependencies || {},
-      private: !!pkg.private
+      private: !!pkg.private,
     };
   }
 
@@ -86,8 +88,8 @@ export function getPackageGraph() {
   for (const name in packages) {
     const pkg = packages[name];
     pkg.internalDependencies = [];
-    
-    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies, ...pkg.peerDependencies };
+
+    const allDeps = {...pkg.dependencies, ...pkg.devDependencies, ...pkg.peerDependencies};
     for (const depName in allDeps) {
       if (packages[depName] && allDeps[depName].startsWith('file:')) {
         pkg.internalDependencies.push(depName);
@@ -105,7 +107,7 @@ export function getPackageGraph() {
 export function incrementVersion(version) {
   const parts = version.split('.');
   const lastPart = parts[parts.length - 1];
-  
+
   // Check if last part is numeric or ends with a number
   const match = lastPart.match(/^(.*?)(\d+)$/);
   if (match) {
@@ -114,7 +116,7 @@ export function incrementVersion(version) {
     parts[parts.length - 1] = `${prefix}${num + 1}`;
     return parts.join('.');
   }
-  
+
   return version + '.1'; // Fallback
 }
 
@@ -126,12 +128,12 @@ export function runCommand(command, args, options = {}) {
   const result = spawnSync(command, args, {
     stdio: 'inherit',
     shell: true,
-    ...options
+    ...options,
   });
-  
+
   if (result.status !== 0) {
     throw new Error(`Command failed: ${command} ${args.join(' ')}`);
   }
-  
+
   return result;
 }
diff --git a/renderers/scripts/prepare-publish.mjs b/renderers/scripts/prepare-publish.mjs
index c0c43c01a..e586ae007 100644
--- a/renderers/scripts/prepare-publish.mjs
+++ b/renderers/scripts/prepare-publish.mjs
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { readFileSync, writeFileSync, copyFileSync, existsSync, mkdirSync } from 'node:fs';
-import { join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { getPackageGraph } from './lib/workspace.mjs';
+import {readFileSync, writeFileSync, copyFileSync, existsSync, mkdirSync} from 'node:fs';
+import {join, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {getPackageGraph} from './lib/workspace.mjs';
 
 // This script prepares a package for publishing.
 // Arguments:
@@ -43,14 +43,14 @@ const resolvedDistDir = resolve(packageDir, distDir);
 const rootDir = resolve(scriptDir, '../../');
 
 if (!existsSync(resolvedDistDir)) {
-  mkdirSync(resolvedDistDir, { recursive: true });
+  mkdirSync(resolvedDistDir, {recursive: true});
 }
 
 const graph = getPackageGraph();
 const pkg = JSON.parse(readFileSync(resolvedSourcePkg, 'utf8'));
 
 // 2. Update internal @a2ui dependencies
-const updateInternalDeps = (deps) => {
+const updateInternalDeps = deps => {
   if (!deps) return;
   for (const name in deps) {
     const version = deps[name];
diff --git a/renderers/scripts/publish_npm.mjs b/renderers/scripts/publish_npm.mjs
index 88451d1f9..d8a5331e4 100755
--- a/renderers/scripts/publish_npm.mjs
+++ b/renderers/scripts/publish_npm.mjs
@@ -15,12 +15,12 @@
  * limitations under the License.
  */
 
-import { getPackageGraph, runCommand as defaultRunCommand } from './lib/workspace.mjs';
-import { execSync } from 'node:child_process';
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
+import {getPackageGraph, runCommand as defaultRunCommand} from './lib/workspace.mjs';
+import {execSync} from 'node:child_process';
+import {readFileSync} from 'node:fs';
+import {join} from 'node:path';
 import * as readline from 'node:readline';
-import { fileURLToPath } from 'node:url';
+import {fileURLToPath} from 'node:url';
 
 export async function runPublish(args, customRunCommand, customExecSync, customReadline) {
   const runCmd = customRunCommand || defaultRunCommand;
@@ -50,7 +50,9 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
   }
 
   if (packagesToPublish.length === 0) {
-    throw new Error('Usage: publish_npm --packages=pkg1,pkg2 [--force] [--yes] [--dry-run] [--skip-tests] [--test-only]');
+    throw new Error(
+      'Usage: publish_npm --packages=pkg1,pkg2 [--force] [--yes] [--dry-run] [--skip-tests] [--test-only]',
+    );
   }
 
   const graph = getPackageGraph();
@@ -80,7 +82,9 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
       console.warn(`WARNING: You are publishing renderers but NOT ${missingCores.join(' and ')}.`);
       console.warn('This can lead to broken versions if shared dependencies have changed.');
       console.warn('Use --force to override this check.');
-      throw new Error(`Safety check failed: ${missingCores.join(' and ')} missing from publish list.`);
+      throw new Error(
+        `Safety check failed: ${missingCores.join(' and ')} missing from publish list.`,
+      );
     }
   }
 
@@ -130,9 +134,9 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
     if (nMaj === oMaj && nMin > oMin) return nPre ? 'PREMINOR' : 'MINOR';
     if (nMaj === oMaj && nMin === oMin && nPat > oPat) return nPre ? 'PREPATCH' : 'PATCH';
     if (oCore === nCore) {
-       if (oPre && !nPre) return 'GRADUATION (RELEASE)';
-       if (!oPre && nPre) return 'OLDER_OR_UNKNOWN';
-       return 'PRERELEASE';
+      if (oPre && !nPre) return 'GRADUATION (RELEASE)';
+      if (!oPre && nPre) return 'OLDER_OR_UNKNOWN';
+      return 'PRERELEASE';
     }
 
     return 'OLDER_OR_UNKNOWN';
@@ -145,26 +149,35 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
     let remoteVersion;
 
     try {
-      remoteVersion = exec(`npm view ${pkgName} version`, { encoding: 'utf8', stdio: ['pipe', 'pipe', 'ignore'] }).trim();
+      remoteVersion = exec(`npm view ${pkgName} version`, {
+        encoding: 'utf8',
+        stdio: ['pipe', 'pipe', 'ignore'],
+      }).trim();
     } catch (e) {
       remoteVersion = null;
     }
 
     if (!remoteVersion) {
-      console.log(`✅ [NEW PACKAGE] ${pkgName}: Will be published for the first time as ${localVersion}`);
+      console.log(
+        `✅ [NEW PACKAGE] ${pkgName}: Will be published for the first time as ${localVersion}`,
+      );
       continue;
     }
 
     if (remoteVersion === localVersion) {
       console.error(`\n❌ ERROR: ${pkgName} version ${localVersion} is already published on npm!`);
-      console.error(`Please increment the version (e.g., using increment_version.mjs) before publishing.`);
+      console.error(
+        `Please increment the version (e.g., using increment_version.mjs) before publishing.`,
+      );
       throw new Error(`Version ${localVersion} already published.`);
     }
 
     const diff = getVersionDiff(remoteVersion, localVersion);
     if (diff === 'OLDER_OR_UNKNOWN') {
-       console.error(`\n❌ ERROR: ${pkgName} local version (${localVersion}) appears older or invalid compared to npm version (${remoteVersion})!`);
-       throw new Error(`Invalid version progression for ${pkgName}.`);
+      console.error(
+        `\n❌ ERROR: ${pkgName} local version (${localVersion}) appears older or invalid compared to npm version (${remoteVersion})!`,
+      );
+      throw new Error(`Invalid version progression for ${pkgName}.`);
     }
 
     console.log(`✅ [${diff}] ${pkgName}: ${remoteVersion} -> ${localVersion}`);
@@ -177,9 +190,9 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
   let isDirty = false;
 
   try {
-    currentBranch = exec('git rev-parse --abbrev-ref HEAD', { encoding: 'utf8' }).trim();
-    commitHash = exec('git rev-parse HEAD', { encoding: 'utf8' }).trim();
-    const status = exec('git status --porcelain', { encoding: 'utf8' }).trim();
+    currentBranch = exec('git rev-parse --abbrev-ref HEAD', {encoding: 'utf8'}).trim();
+    commitHash = exec('git rev-parse HEAD', {encoding: 'utf8'}).trim();
+    const status = exec('git status --porcelain', {encoding: 'utf8'}).trim();
     isDirty = status.length > 0;
   } catch (e) {
     console.warn('⚠️ Could not verify Git status. Ensure you are in a valid Git repository.');
@@ -187,7 +200,9 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
 
   if (isDirty) {
     console.warn(`\n⚠️  WARNING: Your Git working tree is DIRTY (you have uncommitted changes).`);
-    console.warn(`Publishing from a dirty tree means the published code will NOT exactly match the commit history.`);
+    console.warn(
+      `Publishing from a dirty tree means the published code will NOT exactly match the commit history.`,
+    );
     console.warn(`It is highly recommended to commit or stash your changes before publishing.`);
   }
 
@@ -198,12 +213,15 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
     const askUser = async () => {
       if (customReadline) return await customReadline();
 
-      const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+      const rl = readline.createInterface({input: process.stdin, output: process.stdout});
       return await new Promise(resolve => {
-        rl.question(`\nDo you want to proceed with publishing these versions from commit ${commitHash.substring(0, 7)}? (yes/no): `, (ans) => {
-          rl.close();
-          resolve(ans);
-        });
+        rl.question(
+          `\nDo you want to proceed with publishing these versions from commit ${commitHash.substring(0, 7)}? (yes/no): `,
+          ans => {
+            rl.close();
+            resolve(ans);
+          },
+        );
       });
     };
 
@@ -224,8 +242,14 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
     console.log(`\n=== Preparing ${pkg.name} (${pkg.version}) ===`);
 
     console.log(`- Running npm install in ${pkg.dir}`);
-    if (dryRun) console.log(`[DRY RUN] Would execute: npm install --no-save --ignore-scripts --no-audit --no-fund in ${pkg.dir}`);
-    else runCmd('npm', ['install', '--no-save', '--ignore-scripts', '--no-audit', '--no-fund'], { cwd: pkg.dir });
+    if (dryRun)
+      console.log(
+        `[DRY RUN] Would execute: npm install --no-save --ignore-scripts --no-audit --no-fund in ${pkg.dir}`,
+      );
+    else
+      runCmd('npm', ['install', '--no-save', '--ignore-scripts', '--no-audit', '--no-fund'], {
+        cwd: pkg.dir,
+      });
 
     if (skipTests) {
       console.log(`- Skipping npm test for ${pkg.name}`);
@@ -235,7 +259,7 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
 
       console.log(`- Running npm run ${testScript} in ${pkg.dir}`);
       if (dryRun) console.log(`[DRY RUN] Would execute: npm run ${testScript} in ${pkg.dir}`);
-      else runCmd('npm', ['run', testScript], { cwd: pkg.dir });
+      else runCmd('npm', ['run', testScript], {cwd: pkg.dir});
     }
   }
 
@@ -252,7 +276,7 @@ export async function runPublish(args, customRunCommand, customExecSync, customR
 
     console.log(`- Running publish:package in ${pkg.dir}`);
     if (dryRun) console.log(`[DRY RUN] Would execute: npm run publish:package in ${pkg.dir}`);
-    else runCmd('npm', ['run', 'publish:package'], { cwd: pkg.dir });
+    else runCmd('npm', ['run', 'publish:package'], {cwd: pkg.dir});
   }
 
   console.log('\nAll packages published successfully.');
diff --git a/renderers/scripts/publish_npm.test.mjs b/renderers/scripts/publish_npm.test.mjs
index 513d58318..b38924f66 100644
--- a/renderers/scripts/publish_npm.test.mjs
+++ b/renderers/scripts/publish_npm.test.mjs
@@ -15,9 +15,9 @@
  * limitations under the License.
  */
 
-import { describe, it } from 'node:test';
+import {describe, it} from 'node:test';
 import assert from 'node:assert';
-import { runPublish } from './publish_npm.mjs';
+import {runPublish} from './publish_npm.mjs';
 
 describe('publish_npm script integration test', () => {
   it('should correctly topologically sort and execute dry-run publishing logic', async () => {
@@ -25,7 +25,9 @@ describe('publish_npm script integration test', () => {
 
     // Mock command runner
     function mockRunCommand(cmd, args, options) {
-      executedCommands.push(`${cmd} ${args.join(' ')} (in ${options?.cwd ? options.cwd.split('/').pop() : 'root'})`);
+      executedCommands.push(
+        `${cmd} ${args.join(' ')} (in ${options?.cwd ? options.cwd.split('/').pop() : 'root'})`,
+      );
     }
 
     // Mock execSync for npm view
@@ -45,24 +47,39 @@ describe('publish_npm script integration test', () => {
       ['--packages=lit,web_core,markdown-it', '--yes', '--skip-tests'],
       mockRunCommand,
       mockExecSync,
-      null // readline not needed with --yes
+      null, // readline not needed with --yes
     );
 
     // Verify topological order in preparation phase
-    const webCoreInstallIndex = executedCommands.findIndex(cmd => cmd.includes('install') && cmd.includes('web_core'));
-    const markdownItInstallIndex = executedCommands.findIndex(cmd => cmd.includes('install') && cmd.includes('markdown-it'));
-    const litInstallIndex = executedCommands.findIndex(cmd => cmd.includes('install') && cmd.includes('lit'));
+    const webCoreInstallIndex = executedCommands.findIndex(
+      cmd => cmd.includes('install') && cmd.includes('web_core'),
+    );
+    const markdownItInstallIndex = executedCommands.findIndex(
+      cmd => cmd.includes('install') && cmd.includes('markdown-it'),
+    );
+    const litInstallIndex = executedCommands.findIndex(
+      cmd => cmd.includes('install') && cmd.includes('lit'),
+    );
 
     assert.ok(webCoreInstallIndex > -1, 'Should install web_core');
     assert.ok(markdownItInstallIndex > -1, 'Should install markdown-it');
     assert.ok(litInstallIndex > -1, 'Should install lit');
-    assert.ok(webCoreInstallIndex < litInstallIndex, 'web_core must be prepared before lit (topological sort)');
+    assert.ok(
+      webCoreInstallIndex < litInstallIndex,
+      'web_core must be prepared before lit (topological sort)',
+    );
     assert.ok(markdownItInstallIndex < litInstallIndex, 'markdown-it must be prepared before lit');
 
     // Verify topological order in publish phase
-    const webCorePublishIndex = executedCommands.findIndex(cmd => cmd.includes('publish:package') && cmd.includes('web_core'));
-    const markdownItPublishIndex = executedCommands.findIndex(cmd => cmd.includes('publish:package') && cmd.includes('markdown-it'));
-    const litPublishIndex = executedCommands.findIndex(cmd => cmd.includes('publish:package') && cmd.includes('lit'));
+    const webCorePublishIndex = executedCommands.findIndex(
+      cmd => cmd.includes('publish:package') && cmd.includes('web_core'),
+    );
+    const markdownItPublishIndex = executedCommands.findIndex(
+      cmd => cmd.includes('publish:package') && cmd.includes('markdown-it'),
+    );
+    const litPublishIndex = executedCommands.findIndex(
+      cmd => cmd.includes('publish:package') && cmd.includes('lit'),
+    );
 
     assert.ok(webCorePublishIndex > -1, 'Should publish web_core');
     assert.ok(markdownItPublishIndex > -1, 'Should publish markdown-it');
@@ -87,7 +104,7 @@ describe('publish_npm script integration test', () => {
       ['--packages=web_core', '--yes', '--test-only'],
       mockRunCommand,
       mockExecSync,
-      null
+      null,
     );
 
     const hasInstall = executedCommands.some(cmd => cmd.includes('npm install'));
@@ -98,4 +115,4 @@ describe('publish_npm script integration test', () => {
     assert.ok(hasTest, 'Should run npm test');
     assert.strictEqual(hasPublish, false, 'Should NOT run publish:package');
   });
-});
\ No newline at end of file
+});
diff --git a/renderers/scripts/upload_manifest.mjs b/renderers/scripts/upload_manifest.mjs
index 4328e452f..f0eba918c 100755
--- a/renderers/scripts/upload_manifest.mjs
+++ b/renderers/scripts/upload_manifest.mjs
@@ -15,19 +15,21 @@
  * limitations under the License.
  */
 
-import { writeFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { getPackageGraph, runCommand, ROOT_DIR } from './lib/workspace.mjs';
+import {writeFileSync} from 'node:fs';
+import {join} from 'node:path';
+import {getPackageGraph, runCommand, ROOT_DIR} from './lib/workspace.mjs';
 
 // Configuration - adjust these as needed for your environment
-const GCS_URI = process.env.A2UI_NPM_MANIFEST_GCS_URI || 'gs://oss-exit-gate-prod-projects-bucket/a2ui/npm/manifests';
+const GCS_URI =
+  process.env.A2UI_NPM_MANIFEST_GCS_URI ||
+  'gs://oss-exit-gate-prod-projects-bucket/a2ui/npm/manifests';
 
 const graph = getPackageGraph();
 const renderers = Object.values(graph).filter(p => p.dir.includes('/renderers/'));
 
 const manifest = {
   publish_all: true,
-  packages: {}
+  packages: {},
 };
 
 for (const pkg of renderers) {
@@ -44,7 +46,9 @@ const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19); /
 // Find the version of a representative package for the manifest name
 const mainVersion = graph['@a2ui/web_core']?.version;
 if (!mainVersion) {
-  throw new Error('Could not find @a2ui/web_core in workspace. Ensure you are running from the correct directory.');
+  throw new Error(
+    'Could not find @a2ui/web_core in workspace. Ensure you are running from the correct directory.',
+  );
 }
 const manifestFileName = `manifest-${mainVersion}-${timestamp}.json`;
 
@@ -54,6 +58,8 @@ try {
   runCommand('gcloud', ['storage', 'cp', manifestPath, `${GCS_URI}/${manifestFileName}`]);
   console.log('Manifest uploaded successfully.');
 } catch (error) {
-  console.error('Failed to upload manifest. Ensure gcloud is authenticated and you have permissions.');
+  console.error(
+    'Failed to upload manifest. Ensure gcloud is authenticated and you have permissions.',
+  );
   process.exit(1);
 }
diff --git a/renderers/web_core/.prettierrc.js b/renderers/web_core/.prettierrc.js
deleted file mode 100644
index acea2231c..000000000
--- a/renderers/web_core/.prettierrc.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright 2026 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import prettier from 'gts/.prettierrc.json' with {type: "json"};
-
-export default {
-  ...prettier,
-};
diff --git a/renderers/web_core/README.md b/renderers/web_core/README.md
index c6467aab2..f2e8a9dc7 100644
--- a/renderers/web_core/README.md
+++ b/renderers/web_core/README.md
@@ -14,7 +14,7 @@ The `@a2ui/web_core` package contains the core logic, state management, and prot
 
 ### Version v0_9 (Recommended)
 
-The v0_9 architecture centers around a decoupled model where rendering is driven by a `SurfaceGroupModel` and its constituent `SurfaceModel`s. 
+The v0_9 architecture centers around a decoupled model where rendering is driven by a `SurfaceGroupModel` and its constituent `SurfaceModel`s.
 
 - **Internal Models**: `DataModel` manages the application state, while `SurfaceComponentsModel` tracks the components rendered on a surface.
 - **DataContext**: Provides the execution environment for expressions and functions defined in the A2UI protocol.
diff --git a/renderers/web_core/eslint.config.js b/renderers/web_core/eslint.config.js
index 6f30dd512..c2bebc21e 100644
--- a/renderers/web_core/eslint.config.js
+++ b/renderers/web_core/eslint.config.js
@@ -14,35 +14,32 @@
  * limitations under the License.
  */
 
-import gts from "gts";
+import gts from 'gts';
 
 const customConfig = [
   {
     ignores: [
-      ".prettierrc.js",
-      "eslint.config.js",
-      "dist",
-      "node_modules",
-      ".wireit",
-      "**/*.d.ts",
+      '.prettierrc.js',
+      'eslint.config.js',
+      'dist',
+      'node_modules',
+      '.wireit',
+      '**/*.d.ts',
       // Old library version.
-      "src/v0_8",
+      'src/v0_8',
     ],
   },
   {
     rules: {
       // any is often the best we can do for a generic library.
-      "@typescript-eslint/no-explicit-any": "off",
+      '@typescript-eslint/no-explicit-any': 'off',
       // Also needed for generic library functionality, though perhaps we could
       // make these more precise in the future.
-      "@typescript-eslint/no-unsafe-function-type": "off",
+      '@typescript-eslint/no-unsafe-function-type': 'off',
       // Not a terribly useful check at time of writing - perhaps enable later.
-      "@typescript-eslint/no-floating-promises": "off",
+      '@typescript-eslint/no-floating-promises': 'off',
     },
   },
 ];
 
-export default [
-  ...gts,
-  ...customConfig,
-];
+export default [...gts, ...customConfig];
diff --git a/renderers/web_core/src/v0_8/data/guards.test.ts b/renderers/web_core/src/v0_8/data/guards.test.ts
index 215c35114..739bcffde 100644
--- a/renderers/web_core/src/v0_8/data/guards.test.ts
+++ b/renderers/web_core/src/v0_8/data/guards.test.ts
@@ -14,95 +14,68 @@
  * limitations under the License.
  */
 
-import assert from "node:assert";
-import { describe, it } from "node:test";
-import * as guards from "./guards.js";
-
-describe("v0.8 Guards", () => {
-  const validComponentNode = { id: "1", type: "Text", properties: {} };
-  const validStringValue = { literal: "hello" };
-  const validNumberValue = { literal: 42 };
-  const validBooleanValue = { literal: true };
-
-  describe("Basics", () => {
-    it("isValueMap", () => {
-      assert.strictEqual(
-        guards.isValueMap({ key: "k1", valueString: "v1" }),
-        true,
-      );
-      assert.strictEqual(guards.isValueMap({ notKey: "k1" }), false);
+import assert from 'node:assert';
+import {describe, it} from 'node:test';
+import * as guards from './guards.js';
+
+describe('v0.8 Guards', () => {
+  const validComponentNode = {id: '1', type: 'Text', properties: {}};
+  const validStringValue = {literal: 'hello'};
+  const validNumberValue = {literal: 42};
+  const validBooleanValue = {literal: true};
+
+  describe('Basics', () => {
+    it('isValueMap', () => {
+      assert.strictEqual(guards.isValueMap({key: 'k1', valueString: 'v1'}), true);
+      assert.strictEqual(guards.isValueMap({notKey: 'k1'}), false);
       assert.strictEqual(guards.isValueMap(null), false);
-      assert.strictEqual(guards.isValueMap("string"), false);
+      assert.strictEqual(guards.isValueMap('string'), false);
     });
 
-    it("isPath", () => {
-      assert.strictEqual(guards.isPath("path", "/a/b"), true);
-      assert.strictEqual(guards.isPath("path", 123), false);
-      assert.strictEqual(guards.isPath("notPath", "/a/b"), false);
+    it('isPath', () => {
+      assert.strictEqual(guards.isPath('path', '/a/b'), true);
+      assert.strictEqual(guards.isPath('path', 123), false);
+      assert.strictEqual(guards.isPath('notPath', '/a/b'), false);
     });
 
-    it("isObject", () => {
+    it('isObject', () => {
       assert.strictEqual(guards.isObject({}), true);
       assert.strictEqual(guards.isObject([]), false);
       assert.strictEqual(guards.isObject(null), false);
       assert.strictEqual(guards.isObject(42), false);
     });
 
-    it("isComponentArrayReference", () => {
-      assert.strictEqual(
-        guards.isComponentArrayReference({ explicitList: ["1", "2"] }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isComponentArrayReference({ template: {} }),
-        true,
-      );
+    it('isComponentArrayReference', () => {
+      assert.strictEqual(guards.isComponentArrayReference({explicitList: ['1', '2']}), true);
+      assert.strictEqual(guards.isComponentArrayReference({template: {}}), true);
       assert.strictEqual(guards.isComponentArrayReference({}), false);
       assert.strictEqual(guards.isComponentArrayReference(null), false);
     });
   });
 
-  describe("Component Resolution Guards", () => {
-    it("isResolvedAudioPlayer", () => {
-      assert.strictEqual(
-        guards.isResolvedAudioPlayer({ url: validStringValue }),
-        true,
-      );
-      assert.strictEqual(guards.isResolvedAudioPlayer({ url: 42 }), false);
+  describe('Component Resolution Guards', () => {
+    it('isResolvedAudioPlayer', () => {
+      assert.strictEqual(guards.isResolvedAudioPlayer({url: validStringValue}), true);
+      assert.strictEqual(guards.isResolvedAudioPlayer({url: 42}), false);
       assert.strictEqual(guards.isResolvedAudioPlayer({}), false);
     });
 
-    it("isResolvedButton", () => {
-      assert.strictEqual(
-        guards.isResolvedButton({ child: validComponentNode, action: {} }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isResolvedButton({ child: validComponentNode }),
-        false,
-      ); // missing action
-      assert.strictEqual(guards.isResolvedButton({ action: {} }), false); // missing child
+    it('isResolvedButton', () => {
+      assert.strictEqual(guards.isResolvedButton({child: validComponentNode, action: {}}), true);
+      assert.strictEqual(guards.isResolvedButton({child: validComponentNode}), false); // missing action
+      assert.strictEqual(guards.isResolvedButton({action: {}}), false); // missing child
       assert.strictEqual(guards.isResolvedButton({}), false);
     });
 
-    it("isResolvedCard", () => {
-      assert.strictEqual(
-        guards.isResolvedCard({ child: validComponentNode }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isResolvedCard({ children: [validComponentNode] }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isResolvedCard({ children: "not array" }),
-        false,
-      );
+    it('isResolvedCard', () => {
+      assert.strictEqual(guards.isResolvedCard({child: validComponentNode}), true);
+      assert.strictEqual(guards.isResolvedCard({children: [validComponentNode]}), true);
+      assert.strictEqual(guards.isResolvedCard({children: 'not array'}), false);
       assert.strictEqual(guards.isResolvedCard({}), false);
       assert.strictEqual(guards.isResolvedCard(null), false);
     });
 
-    it("isResolvedCheckbox", () => {
+    it('isResolvedCheckbox', () => {
       assert.strictEqual(
         guards.isResolvedCheckbox({
           label: validStringValue,
@@ -110,67 +83,43 @@ describe("v0.8 Guards", () => {
         }),
         true,
       );
-      assert.strictEqual(
-        guards.isResolvedCheckbox({ label: validStringValue }),
-        false,
-      );
-      assert.strictEqual(
-        guards.isResolvedCheckbox({ value: validBooleanValue }),
-        false,
-      );
+      assert.strictEqual(guards.isResolvedCheckbox({label: validStringValue}), false);
+      assert.strictEqual(guards.isResolvedCheckbox({value: validBooleanValue}), false);
     });
 
-    it("isResolvedColumn", () => {
-      assert.strictEqual(
-        guards.isResolvedColumn({ children: [validComponentNode] }),
-        true,
-      );
-      assert.strictEqual(guards.isResolvedColumn({ children: {} }), false);
+    it('isResolvedColumn', () => {
+      assert.strictEqual(guards.isResolvedColumn({children: [validComponentNode]}), true);
+      assert.strictEqual(guards.isResolvedColumn({children: {}}), false);
       assert.strictEqual(guards.isResolvedColumn({}), false);
     });
 
-    it("isResolvedDateTimeInput", () => {
-      assert.strictEqual(
-        guards.isResolvedDateTimeInput({ value: validStringValue }),
-        true,
-      );
+    it('isResolvedDateTimeInput', () => {
+      assert.strictEqual(guards.isResolvedDateTimeInput({value: validStringValue}), true);
       assert.strictEqual(guards.isResolvedDateTimeInput({}), false);
     });
 
-    it("isResolvedDivider", () => {
-      assert.strictEqual(
-        guards.isResolvedDivider({ anyOptionalProp: true }),
-        true,
-      );
+    it('isResolvedDivider', () => {
+      assert.strictEqual(guards.isResolvedDivider({anyOptionalProp: true}), true);
       assert.strictEqual(guards.isResolvedDivider(null), false);
     });
 
-    it("isResolvedImage", () => {
-      assert.strictEqual(
-        guards.isResolvedImage({ url: validStringValue }),
-        true,
-      );
+    it('isResolvedImage', () => {
+      assert.strictEqual(guards.isResolvedImage({url: validStringValue}), true);
       assert.strictEqual(guards.isResolvedImage({}), false);
     });
 
-    it("isResolvedIcon", () => {
-      assert.strictEqual(
-        guards.isResolvedIcon({ name: validStringValue }),
-        true,
-      );
+    it('isResolvedIcon', () => {
+      assert.strictEqual(guards.isResolvedIcon({name: validStringValue}), true);
       assert.strictEqual(guards.isResolvedIcon({}), false);
     });
 
-    it("isResolvedList", () => {
-      assert.strictEqual(
-        guards.isResolvedList({ children: [validComponentNode] }),
-        true,
-      );
-      assert.strictEqual(guards.isResolvedList({ children: {} }), false);
+    it('isResolvedList', () => {
+      assert.strictEqual(guards.isResolvedList({children: [validComponentNode]}), true);
+      assert.strictEqual(guards.isResolvedList({children: {}}), false);
       assert.strictEqual(guards.isResolvedList({}), false);
     });
 
-    it("isResolvedModal", () => {
+    it('isResolvedModal', () => {
       assert.strictEqual(
         guards.isResolvedModal({
           entryPointChild: validComponentNode,
@@ -178,135 +127,90 @@ describe("v0.8 Guards", () => {
         }),
         true,
       );
-      assert.strictEqual(
-        guards.isResolvedModal({ entryPointChild: validComponentNode }),
-        false,
-      );
+      assert.strictEqual(guards.isResolvedModal({entryPointChild: validComponentNode}), false);
     });
 
-    it("isResolvedMultipleChoice", () => {
-      assert.strictEqual(
-        guards.isResolvedMultipleChoice({ selections: [] }),
-        true,
-      );
+    it('isResolvedMultipleChoice', () => {
+      assert.strictEqual(guards.isResolvedMultipleChoice({selections: []}), true);
       assert.strictEqual(guards.isResolvedMultipleChoice({}), false);
     });
 
-    it("isResolvedRow", () => {
-      assert.strictEqual(
-        guards.isResolvedRow({ children: [validComponentNode] }),
-        true,
-      );
-      assert.strictEqual(guards.isResolvedRow({ children: {} }), false);
+    it('isResolvedRow', () => {
+      assert.strictEqual(guards.isResolvedRow({children: [validComponentNode]}), true);
+      assert.strictEqual(guards.isResolvedRow({children: {}}), false);
       assert.strictEqual(guards.isResolvedRow({}), false);
     });
 
-    it("isResolvedSlider", () => {
-      assert.strictEqual(
-        guards.isResolvedSlider({ value: validNumberValue }),
-        true,
-      );
+    it('isResolvedSlider', () => {
+      assert.strictEqual(guards.isResolvedSlider({value: validNumberValue}), true);
       assert.strictEqual(guards.isResolvedSlider({}), false);
     });
 
-    it("isResolvedTabs (and isResolvedTabItem)", () => {
-      const validItem = { title: validStringValue, child: validComponentNode };
-      assert.strictEqual(
-        guards.isResolvedTabs({ tabItems: [validItem] }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isResolvedTabs({ tabItems: [{ title: validStringValue }] }),
-        false,
-      ); // missing child
-      assert.strictEqual(guards.isResolvedTabs({ tabItems: {} }), false);
+    it('isResolvedTabs (and isResolvedTabItem)', () => {
+      const validItem = {title: validStringValue, child: validComponentNode};
+      assert.strictEqual(guards.isResolvedTabs({tabItems: [validItem]}), true);
+      assert.strictEqual(guards.isResolvedTabs({tabItems: [{title: validStringValue}]}), false); // missing child
+      assert.strictEqual(guards.isResolvedTabs({tabItems: {}}), false);
       assert.strictEqual(guards.isResolvedTabs({}), false);
     });
 
-    it("isResolvedText", () => {
-      assert.strictEqual(
-        guards.isResolvedText({ text: validStringValue }),
-        true,
-      );
+    it('isResolvedText', () => {
+      assert.strictEqual(guards.isResolvedText({text: validStringValue}), true);
       assert.strictEqual(guards.isResolvedText({}), false);
     });
 
-    it("isResolvedTextField", () => {
-      assert.strictEqual(
-        guards.isResolvedTextField({ label: validStringValue }),
-        true,
-      );
+    it('isResolvedTextField', () => {
+      assert.strictEqual(guards.isResolvedTextField({label: validStringValue}), true);
       assert.strictEqual(guards.isResolvedTextField({}), false);
     });
 
-    it("isResolvedVideo", () => {
-      assert.strictEqual(
-        guards.isResolvedVideo({ url: validStringValue }),
-        true,
-      );
+    it('isResolvedVideo', () => {
+      assert.strictEqual(guards.isResolvedVideo({url: validStringValue}), true);
       assert.strictEqual(guards.isResolvedVideo({}), false);
     });
   });
 
-  describe("Internal/Private structural guards via components", () => {
-    it("isStringValue via Text", () => {
-      assert.strictEqual(guards.isResolvedText({ text: { path: "." } }), true);
-      assert.strictEqual(
-        guards.isResolvedText({ text: { literalString: "hello" } }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isResolvedText({ text: { invalid: "string" } }),
-        false,
-      );
+  describe('Internal/Private structural guards via components', () => {
+    it('isStringValue via Text', () => {
+      assert.strictEqual(guards.isResolvedText({text: {path: '.'}}), true);
+      assert.strictEqual(guards.isResolvedText({text: {literalString: 'hello'}}), true);
+      assert.strictEqual(guards.isResolvedText({text: {invalid: 'string'}}), false);
     });
 
-    it("isNumberValue via Slider", () => {
-      assert.strictEqual(
-        guards.isResolvedSlider({ value: { path: "." } }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isResolvedSlider({ value: { literalNumber: 42 } }),
-        true,
-      );
-      assert.strictEqual(
-        guards.isResolvedSlider({ value: { invalid: 42 } }),
-        false,
-      );
+    it('isNumberValue via Slider', () => {
+      assert.strictEqual(guards.isResolvedSlider({value: {path: '.'}}), true);
+      assert.strictEqual(guards.isResolvedSlider({value: {literalNumber: 42}}), true);
+      assert.strictEqual(guards.isResolvedSlider({value: {invalid: 42}}), false);
     });
 
-    it("isBooleanValue via Checkbox", () => {
+    it('isBooleanValue via Checkbox', () => {
       assert.strictEqual(
         guards.isResolvedCheckbox({
           label: validStringValue,
-          value: { path: "." },
+          value: {path: '.'},
         }),
         true,
       );
       assert.strictEqual(
         guards.isResolvedCheckbox({
           label: validStringValue,
-          value: { literalBoolean: true },
+          value: {literalBoolean: true},
         }),
         true,
       );
       assert.strictEqual(
         guards.isResolvedCheckbox({
           label: validStringValue,
-          value: { invalid: true },
+          value: {invalid: true},
         }),
         false,
       );
     });
 
-    it("isAnyComponentNode edge cases via Row", () => {
-      assert.strictEqual(
-        guards.isResolvedRow({ children: [{ id: "1", type: "Text" }] }),
-        false,
-      ); // missing properties
-      assert.strictEqual(guards.isResolvedRow({ children: [null] }), false);
-      assert.strictEqual(guards.isResolvedRow({ children: ["string"] }), false);
+    it('isAnyComponentNode edge cases via Row', () => {
+      assert.strictEqual(guards.isResolvedRow({children: [{id: '1', type: 'Text'}]}), false); // missing properties
+      assert.strictEqual(guards.isResolvedRow({children: [null]}), false);
+      assert.strictEqual(guards.isResolvedRow({children: ['string']}), false);
     });
   });
 });
diff --git a/renderers/web_core/src/v0_8/data/guards.ts b/renderers/web_core/src/v0_8/data/guards.ts
index 466d573a0..2035f37c0 100644
--- a/renderers/web_core/src/v0_8/data/guards.ts
+++ b/renderers/web_core/src/v0_8/data/guards.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { BooleanValue, NumberValue, StringValue } from "../types/primitives";
+import {BooleanValue, NumberValue, StringValue} from '../types/primitives';
 import {
   AnyComponentNode,
   ComponentArrayReference,
@@ -38,87 +38,77 @@ import {
   ResolvedTextField,
   ResolvedVideo,
   ValueMap,
-} from "../types/types";
+} from '../types/types';
 
 export function isValueMap(value: unknown): value is ValueMap {
-  return isObject(value) && "key" in value;
+  return isObject(value) && 'key' in value;
 }
 
 export function isPath(key: string, value: unknown): value is string {
-  return key === "path" && typeof value === "string";
+  return key === 'path' && typeof value === 'string';
 }
 
 export function isObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
-export function isComponentArrayReference(
-  value: unknown,
-): value is ComponentArrayReference {
+export function isComponentArrayReference(value: unknown): value is ComponentArrayReference {
   if (!isObject(value)) return false;
-  return "explicitList" in value || "template" in value;
+  return 'explicitList' in value || 'template' in value;
 }
 
 function isStringValue(value: unknown): value is StringValue {
   return (
     isObject(value) &&
-    ("path" in value ||
-      ("literal" in value && typeof value.literal === "string") ||
-      "literalString" in value)
+    ('path' in value ||
+      ('literal' in value && typeof value.literal === 'string') ||
+      'literalString' in value)
   );
 }
 
 function isNumberValue(value: unknown): value is NumberValue {
   return (
     isObject(value) &&
-    ("path" in value ||
-      ("literal" in value && typeof value.literal === "number") ||
-      "literalNumber" in value)
+    ('path' in value ||
+      ('literal' in value && typeof value.literal === 'number') ||
+      'literalNumber' in value)
   );
 }
 
 function isBooleanValue(value: unknown): value is BooleanValue {
   return (
     isObject(value) &&
-    ("path" in value ||
-      ("literal" in value && typeof value.literal === "boolean") ||
-      "literalBoolean" in value)
+    ('path' in value ||
+      ('literal' in value && typeof value.literal === 'boolean') ||
+      'literalBoolean' in value)
   );
 }
 
 function isAnyComponentNode(value: unknown): value is AnyComponentNode {
   if (!isObject(value)) return false;
-  const hasBaseKeys = "id" in value && "type" in value && "properties" in value;
+  const hasBaseKeys = 'id' in value && 'type' in value && 'properties' in value;
   if (!hasBaseKeys) return false;
 
   return true;
 }
 
-export function isResolvedAudioPlayer(
-  props: unknown,
-): props is ResolvedAudioPlayer {
-  return isObject(props) && "url" in props && isStringValue(props.url);
+export function isResolvedAudioPlayer(props: unknown): props is ResolvedAudioPlayer {
+  return isObject(props) && 'url' in props && isStringValue(props.url);
 }
 
 export function isResolvedButton(props: unknown): props is ResolvedButton {
   return (
-    isObject(props) &&
-    "child" in props &&
-    isAnyComponentNode(props.child) &&
-    "action" in props
+    isObject(props) && 'child' in props && isAnyComponentNode(props.child) && 'action' in props
   );
 }
 
 export function isResolvedCard(props: unknown): props is ResolvedCard {
   if (!isObject(props)) return false;
-  if (!("child" in props)) {
-    if (!("children" in props)) {
+  if (!('child' in props)) {
+    if (!('children' in props)) {
       return false;
     } else {
-      return (
-        Array.isArray(props.children) &&
-        props.children.every(isAnyComponentNode)
-      );
+      return Array.isArray(props.children) && props.children.every(isAnyComponentNode);
     }
   }
 
@@ -128,9 +118,9 @@ export function isResolvedCard(props: unknown): props is ResolvedCard {
 export function isResolvedCheckbox(props: unknown): props is ResolvedCheckbox {
   return (
     isObject(props) &&
-    "label" in props &&
+    'label' in props &&
     isStringValue(props.label) &&
-    "value" in props &&
+    'value' in props &&
     isBooleanValue(props.value)
   );
 }
@@ -138,16 +128,14 @@ export function isResolvedCheckbox(props: unknown): props is ResolvedCheckbox {
 export function isResolvedColumn(props: unknown): props is ResolvedColumn {
   return (
     isObject(props) &&
-    "children" in props &&
+    'children' in props &&
     Array.isArray(props.children) &&
     props.children.every(isAnyComponentNode)
   );
 }
 
-export function isResolvedDateTimeInput(
-  props: unknown,
-): props is ResolvedDateTimeInput {
-  return isObject(props) && "value" in props && isStringValue(props.value);
+export function isResolvedDateTimeInput(props: unknown): props is ResolvedDateTimeInput {
+  return isObject(props) && 'value' in props && isStringValue(props.value);
 }
 
 export function isResolvedDivider(props: unknown): props is ResolvedDivider {
@@ -157,17 +145,17 @@ export function isResolvedDivider(props: unknown): props is ResolvedDivider {
 }
 
 export function isResolvedImage(props: unknown): props is ResolvedImage {
-  return isObject(props) && "url" in props && isStringValue(props.url);
+  return isObject(props) && 'url' in props && isStringValue(props.url);
 }
 
 export function isResolvedIcon(props: unknown): props is ResolvedIcon {
-  return isObject(props) && "name" in props && isStringValue(props.name);
+  return isObject(props) && 'name' in props && isStringValue(props.name);
 }
 
 export function isResolvedList(props: unknown): props is ResolvedList {
   return (
     isObject(props) &&
-    "children" in props &&
+    'children' in props &&
     Array.isArray(props.children) &&
     props.children.every(isAnyComponentNode)
   );
@@ -176,38 +164,36 @@ export function isResolvedList(props: unknown): props is ResolvedList {
 export function isResolvedModal(props: unknown): props is ResolvedModal {
   return (
     isObject(props) &&
-    "entryPointChild" in props &&
+    'entryPointChild' in props &&
     isAnyComponentNode(props.entryPointChild) &&
-    "contentChild" in props &&
+    'contentChild' in props &&
     isAnyComponentNode(props.contentChild)
   );
 }
 
-export function isResolvedMultipleChoice(
-  props: unknown,
-): props is ResolvedMultipleChoice {
-  return isObject(props) && "selections" in props;
+export function isResolvedMultipleChoice(props: unknown): props is ResolvedMultipleChoice {
+  return isObject(props) && 'selections' in props;
 }
 
 export function isResolvedRow(props: unknown): props is ResolvedRow {
   return (
     isObject(props) &&
-    "children" in props &&
+    'children' in props &&
     Array.isArray(props.children) &&
     props.children.every(isAnyComponentNode)
   );
 }
 
 export function isResolvedSlider(props: unknown): props is ResolvedSlider {
-  return isObject(props) && "value" in props && isNumberValue(props.value);
+  return isObject(props) && 'value' in props && isNumberValue(props.value);
 }
 
 function isResolvedTabItem(item: unknown): item is ResolvedTabItem {
   return (
     isObject(item) &&
-    "title" in item &&
+    'title' in item &&
     isStringValue(item.title) &&
-    "child" in item &&
+    'child' in item &&
     isAnyComponentNode(item.child)
   );
 }
@@ -215,22 +201,20 @@ function isResolvedTabItem(item: unknown): item is ResolvedTabItem {
 export function isResolvedTabs(props: unknown): props is ResolvedTabs {
   return (
     isObject(props) &&
-    "tabItems" in props &&
+    'tabItems' in props &&
     Array.isArray(props.tabItems) &&
     props.tabItems.every(isResolvedTabItem)
   );
 }
 
 export function isResolvedText(props: unknown): props is ResolvedText {
-  return isObject(props) && "text" in props && isStringValue(props.text);
+  return isObject(props) && 'text' in props && isStringValue(props.text);
 }
 
-export function isResolvedTextField(
-  props: unknown,
-): props is ResolvedTextField {
-  return isObject(props) && "label" in props && isStringValue(props.label);
+export function isResolvedTextField(props: unknown): props is ResolvedTextField {
+  return isObject(props) && 'label' in props && isStringValue(props.label);
 }
 
 export function isResolvedVideo(props: unknown): props is ResolvedVideo {
-  return isObject(props) && "url" in props && isStringValue(props.url);
+  return isObject(props) && 'url' in props && isStringValue(props.url);
 }
diff --git a/renderers/web_core/src/v0_8/data/model-processor.test.ts b/renderers/web_core/src/v0_8/data/model-processor.test.ts
index 8099a8a9b..d1ed9bf69 100644
--- a/renderers/web_core/src/v0_8/data/model-processor.test.ts
+++ b/renderers/web_core/src/v0_8/data/model-processor.test.ts
@@ -14,54 +14,54 @@
  * limitations under the License.
  */
 
-import assert from "node:assert";
-import {describe, it, beforeEach} from "node:test";
-import {A2uiMessageProcessor} from "./model-processor.js";
-import {TextNode, RowNode} from "../types/types.js";
+import assert from 'node:assert';
+import {describe, it, beforeEach} from 'node:test';
+import {A2uiMessageProcessor} from './model-processor.js';
+import {TextNode, RowNode} from '../types/types.js';
 
-describe("A2uiMessageProcessor", () => {
+describe('A2uiMessageProcessor', () => {
   let processor: A2uiMessageProcessor;
 
   beforeEach(() => {
     processor = new A2uiMessageProcessor();
   });
 
-  it("handles beginRendering", () => {
+  it('handles beginRendering', () => {
     processor.processMessages([
       {
         beginRendering: {
-          surfaceId: "s1",
-          root: "root",
-          styles: {font: "Arial"},
+          surfaceId: 's1',
+          root: 'root',
+          styles: {font: 'Arial'},
         },
       },
     ]);
 
     const surfaces = processor.getSurfaces();
-    const surface = surfaces.get("s1");
+    const surface = surfaces.get('s1');
     assert.ok(surface);
-    assert.strictEqual(surface.rootComponentId, "root");
-    assert.deepStrictEqual(surface.styles, {font: "Arial"});
+    assert.strictEqual(surface.rootComponentId, 'root');
+    assert.deepStrictEqual(surface.styles, {font: 'Arial'});
     // The component tree remains null until components are added via surfaceUpdate.
     assert.strictEqual(surface.componentTree, null);
   });
 
-  it("handles surfaceUpdate", () => {
+  it('handles surfaceUpdate', () => {
     processor.processMessages([
       {
-        beginRendering: {surfaceId: "s1", root: "root"},
+        beginRendering: {surfaceId: 's1', root: 'root'},
       },
     ]);
 
     processor.processMessages([
       {
         surfaceUpdate: {
-          surfaceId: "s1",
+          surfaceId: 's1',
           components: [
             {
-              id: "root",
+              id: 'root',
               component: {
-                Text: {text: {literal: "Hello"}, usageHint: "body"},
+                Text: {text: {literal: 'Hello'}, usageHint: 'body'},
               } as any,
             },
           ],
@@ -69,72 +69,72 @@ describe("A2uiMessageProcessor", () => {
       },
     ]);
 
-    const surface = processor.getSurfaces().get("s1");
+    const surface = processor.getSurfaces().get('s1');
     assert.ok(surface);
     assert.ok(surface.componentTree);
     const root = surface.componentTree as TextNode;
-    assert.strictEqual(root.id, "root");
-    assert.strictEqual(root.type, "Text");
+    assert.strictEqual(root.id, 'root');
+    assert.strictEqual(root.type, 'Text');
     // The property preserves the literal wrapper
-    assert.deepStrictEqual(root.properties.text, {literal: "Hello"});
+    assert.deepStrictEqual(root.properties.text, {literal: 'Hello'});
   });
 
-  it("handles dataModelUpdate", () => {
+  it('handles dataModelUpdate', () => {
     processor.processMessages([
       {
-        beginRendering: {surfaceId: "s1", root: "root"},
+        beginRendering: {surfaceId: 's1', root: 'root'},
       },
       {
         dataModelUpdate: {
-          surfaceId: "s1",
-          contents: [{key: "message", valueString: "World"}],
+          surfaceId: 's1',
+          contents: [{key: 'message', valueString: 'World'}],
         },
       },
     ]);
 
-    const surface = processor.getSurfaces().get("s1");
-    assert.strictEqual(surface?.dataModel.get("message"), "World");
+    const surface = processor.getSurfaces().get('s1');
+    assert.strictEqual(surface?.dataModel.get('message'), 'World');
   });
 
-  it("handles deleteSurface", () => {
+  it('handles deleteSurface', () => {
     processor.processMessages([
       {
-        beginRendering: {surfaceId: "s1", root: "root"},
+        beginRendering: {surfaceId: 's1', root: 'root'},
       },
     ]);
-    assert.ok(processor.getSurfaces().has("s1"));
+    assert.ok(processor.getSurfaces().has('s1'));
 
     processor.processMessages([
       {
-        deleteSurface: {surfaceId: "s1"},
+        deleteSurface: {surfaceId: 's1'},
       },
     ]);
-    assert.ok(!processor.getSurfaces().has("s1"));
+    assert.ok(!processor.getSurfaces().has('s1'));
   });
 
-  it("resolves component references (children)", () => {
+  it('resolves component references (children)', () => {
     processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "row"}},
+      {beginRendering: {surfaceId: 's1', root: 'row'}},
       {
         surfaceUpdate: {
-          surfaceId: "s1",
+          surfaceId: 's1',
           components: [
             {
-              id: "row",
+              id: 'row',
               component: {
-                Row: {children: {explicitList: ["t1", "t2"]}},
+                Row: {children: {explicitList: ['t1', 't2']}},
               } as any,
             },
             {
-              id: "t1",
+              id: 't1',
               component: {
-                Text: {text: {literal: "One"}, usageHint: "body"},
+                Text: {text: {literal: 'One'}, usageHint: 'body'},
               } as any,
             },
             {
-              id: "t2",
+              id: 't2',
               component: {
-                Text: {text: {literal: "Two"}, usageHint: "body"},
+                Text: {text: {literal: 'Two'}, usageHint: 'body'},
               } as any,
             },
           ],
@@ -142,32 +142,30 @@ describe("A2uiMessageProcessor", () => {
       },
     ]);
 
-    const surface = processor.getSurfaces().get("s1");
+    const surface = processor.getSurfaces().get('s1');
     const root = surface?.componentTree as RowNode;
-    assert.strictEqual(root.type, "Row");
+    assert.strictEqual(root.type, 'Row');
     assert.strictEqual(root.properties.children.length, 2);
-    assert.deepStrictEqual(
-      (root.properties.children[0] as TextNode).properties.text,
-      {literal: "One"},
-    );
-    assert.deepStrictEqual(
-      (root.properties.children[1] as TextNode).properties.text,
-      {literal: "Two"},
-    );
+    assert.deepStrictEqual((root.properties.children[0] as TextNode).properties.text, {
+      literal: 'One',
+    });
+    assert.deepStrictEqual((root.properties.children[1] as TextNode).properties.text, {
+      literal: 'Two',
+    });
   });
 
-  it("resolves templates", () => {
+  it('resolves templates', () => {
     processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "row"}},
+      {beginRendering: {surfaceId: 's1', root: 'row'}},
       {
         dataModelUpdate: {
-          surfaceId: "s1",
+          surfaceId: 's1',
           contents: [
             {
-              key: "items",
+              key: 'items',
               valueMap: [
-                {key: "0", valueString: "Item A"},
-                {key: "1", valueString: "Item B"},
+                {key: '0', valueString: 'Item A'},
+                {key: '1', valueString: 'Item B'},
               ],
             },
           ],
@@ -175,25 +173,25 @@ describe("A2uiMessageProcessor", () => {
       },
       {
         surfaceUpdate: {
-          surfaceId: "s1",
+          surfaceId: 's1',
           components: [
             {
-              id: "row",
+              id: 'row',
               component: {
                 Row: {
                   children: {
                     template: {
-                      componentId: "item",
-                      dataBinding: "/items",
+                      componentId: 'item',
+                      dataBinding: '/items',
                     },
                   },
                 },
               } as any,
             },
             {
-              id: "item",
+              id: 'item',
               component: {
-                Text: {text: {path: "."}, usageHint: "body"},
+                Text: {text: {path: '.'}, usageHint: 'body'},
               } as any,
             },
           ],
@@ -201,9 +199,9 @@ describe("A2uiMessageProcessor", () => {
       },
     ]);
 
-    const surface = processor.getSurfaces().get("s1");
+    const surface = processor.getSurfaces().get('s1');
     const root = surface?.componentTree as RowNode;
-    assert.strictEqual(root.type, "Row");
+    assert.strictEqual(root.type, 'Row');
     assert.strictEqual(root.properties.children.length, 2);
 
     // Verify template expansion
@@ -211,174 +209,153 @@ describe("A2uiMessageProcessor", () => {
     const child1 = root.properties.children[1] as TextNode;
 
     // Check that binding paths are correct (processor does NOT resolve the value, just the binding path context)
-    assert.deepStrictEqual(child0.properties.text, {path: "."});
+    assert.deepStrictEqual(child0.properties.text, {path: '.'});
 
     // Now verify we can resolve the data using the node's context
-    const textProp0 = child0.properties.text as {path: string;};
+    const textProp0 = child0.properties.text as {path: string};
     const resolvedValue0 = processor.getData(child0, textProp0.path, 's1');
     assert.strictEqual(resolvedValue0, 'Item A');
 
-    const textProp1 = child1.properties.text as {path: string;};
+    const textProp1 = child1.properties.text as {path: string};
     const resolvedValue1 = processor.getData(child1, textProp1.path, 's1');
     assert.strictEqual(resolvedValue1, 'Item B');
   });
 
-  it("getData resolves paths relative to node context", () => {
+  it('getData resolves paths relative to node context', () => {
     processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "root"}},
+      {beginRendering: {surfaceId: 's1', root: 'root'}},
       {
         dataModelUpdate: {
-          surfaceId: "s1",
-          contents: [
-            {key: "user", valueMap: [{key: "name", valueString: "Alice"}]},
-          ],
+          surfaceId: 's1',
+          contents: [{key: 'user', valueMap: [{key: 'name', valueString: 'Alice'}]}],
         },
       },
     ]);
 
-    processor.getSurfaces().get("s1");
-    const node = {id: "test", dataContextPath: "/user"} as any;
+    processor.getSurfaces().get('s1');
+    const node = {id: 'test', dataContextPath: '/user'} as any;
 
-    const name = processor.getData(node, "name", "s1");
-    assert.strictEqual(name, "Alice");
+    const name = processor.getData(node, 'name', 's1');
+    assert.strictEqual(name, 'Alice');
 
-    const self = processor.getData(node, ".", "s1");
+    const self = processor.getData(node, '.', 's1');
     assert.ok(self instanceof Map);
-    assert.strictEqual((self as Map<string, any>).get("name"), "Alice");
+    assert.strictEqual((self as Map<string, any>).get('name'), 'Alice');
 
-    const rootData = processor.getData(node, "/user/name", "s1");
-    assert.strictEqual(rootData, "Alice");
+    const rootData = processor.getData(node, '/user/name', 's1');
+    assert.strictEqual(rootData, 'Alice');
   });
 
-  it("setData updates data model", () => {
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "root"}},
-    ]);
-    const surface = processor.getSurfaces().get("s1");
-    const node = {id: "test", dataContextPath: "/"} as any;
+  it('setData updates data model', () => {
+    processor.processMessages([{beginRendering: {surfaceId: 's1', root: 'root'}}]);
+    const surface = processor.getSurfaces().get('s1');
+    const node = {id: 'test', dataContextPath: '/'} as any;
 
-    processor.setData(node, "count", 42, "s1");
-    assert.strictEqual(surface?.dataModel.get("count"), 42);
+    processor.setData(node, 'count', 42, 's1');
+    assert.strictEqual(surface?.dataModel.get('count'), 42);
 
-    processor.setData(node, "/nested/value", "foo", "s1");
-    const nested = surface?.dataModel.get("nested") as Map<string, any>;
-    assert.strictEqual(nested.get("value"), "foo");
+    processor.setData(node, '/nested/value', 'foo', 's1');
+    const nested = surface?.dataModel.get('nested') as Map<string, any>;
+    assert.strictEqual(nested.get('value'), 'foo');
   });
 
-  it("normalizes paths correctly", () => {
-    const p = (processor as any).normalizePath("users[0].name");
-    assert.strictEqual(p, "/users/0/name");
+  it('normalizes paths correctly', () => {
+    const p = (processor as any).normalizePath('users[0].name');
+    assert.strictEqual(p, '/users/0/name');
   });
 
-  it("parses JSON strings in data", () => {
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "root"}},
-    ]);
+  it('parses JSON strings in data', () => {
+    processor.processMessages([{beginRendering: {surfaceId: 's1', root: 'root'}}]);
 
     // Explicitly testing private/internal parsing logic via public update
     processor.processMessages([
       {
         dataModelUpdate: {
-          surfaceId: "s1",
-          contents: [{key: "config", valueString: '{"theme":"dark"}'}],
+          surfaceId: 's1',
+          contents: [{key: 'config', valueString: '{"theme":"dark"}'}],
         },
       },
     ]);
 
-    const surface = processor.getSurfaces().get("s1");
-    const config = surface?.dataModel.get("config") as any;
-    assert.deepStrictEqual(config, {theme: "dark"});
+    const surface = processor.getSurfaces().get('s1');
+    const config = surface?.dataModel.get('config') as any;
+    assert.deepStrictEqual(config, {theme: 'dark'});
   });
 
-  it("test basic edge cases and internal fallbacks", () => {
+  it('test basic edge cases and internal fallbacks', () => {
     // 1. clearSurfaces
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "root"}},
-    ]);
+    processor.processMessages([{beginRendering: {surfaceId: 's1', root: 'root'}}]);
     assert.strictEqual(processor.getSurfaces().size, 1);
     processor.clearSurfaces();
     assert.strictEqual(processor.getSurfaces().size, 0);
 
     // 2. setData with null node
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "root"}},
-    ]);
+    processor.processMessages([{beginRendering: {surfaceId: 's1', root: 'root'}}]);
     // Shouldn't throw
-    processor.setData(null, "foo", "bar");
+    processor.setData(null, 'foo', 'bar');
 
     // 3. setData with default data context (default to /)
-    const node = {id: "test", dataContextPath: undefined} as any;
-    processor.setData(node, ".", "value");
-    const surface = processor.getSurfaces().get("s1")!;
-    assert.strictEqual(surface.dataModel.get("."), undefined); // Normal setDataByPath logic when root=/
+    const node = {id: 'test', dataContextPath: undefined} as any;
+    processor.setData(node, '.', 'value');
+    const surface = processor.getSurfaces().get('s1')!;
+    assert.strictEqual(surface.dataModel.get('.'), undefined); // Normal setDataByPath logic when root=/
 
     // 4. parseIfJsonString with invalid JSON layout
     processor.processMessages([
       {
         dataModelUpdate: {
-          surfaceId: "s1",
-          contents: [{key: "badJson", valueString: '{bad" }'}],
+          surfaceId: 's1',
+          contents: [{key: 'badJson', valueString: '{bad" }'}],
         },
       },
     ]);
-    assert.strictEqual(surface.dataModel.get("badJson"), '{bad" }'); // Returns original
+    assert.strictEqual(surface.dataModel.get('badJson'), '{bad" }'); // Returns original
 
     // 5. convertKeyValueArrayToMap with missing valueKey
     // Explicit array pass directly to internal mapping simulation
-    (processor as any).setDataByPath(surface.dataModel, "malformed", [
-      {key: "foo", unknownKey: "bar"}, // missing value map/string etc
+    (processor as any).setDataByPath(surface.dataModel, 'malformed', [
+      {key: 'foo', unknownKey: 'bar'}, // missing value map/string etc
     ]);
-    const malformed = surface.dataModel.get("malformed") as Map<string, any>;
-    assert.strictEqual(malformed.has("foo"), false); // Skips processing
+    const malformed = surface.dataModel.get('malformed') as Map<string, any>;
+    assert.strictEqual(malformed.has('foo'), false); // Skips processing
 
     // 6. object normalization at root
-    (processor as any).setDataByPath(surface.dataModel, "/", {
-      plain: "object",
+    (processor as any).setDataByPath(surface.dataModel, '/', {
+      plain: 'object',
     });
-    assert.strictEqual(surface.dataModel.get("plain"), "object");
+    assert.strictEqual(surface.dataModel.get('plain'), 'object');
 
     // 7. non-map/object root fails gracefully
-    (processor as any).setDataByPath(surface.dataModel, "/", "stringroot");
+    (processor as any).setDataByPath(surface.dataModel, '/', 'stringroot');
     // Doesn't explode, just prints error internally
   });
 
-  it("test array set operations and invalid primitive traversal", () => {
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s1", root: "root"}},
-    ]);
-    const surface = processor.getSurfaces().get("s1")!;
+  it('test array set operations and invalid primitive traversal', () => {
+    processor.processMessages([{beginRendering: {surfaceId: 's1', root: 'root'}}]);
+    const surface = processor.getSurfaces().get('s1')!;
 
     // Manually set an array to avoid empty array being converted to Map
-    surface.dataModel.set("list", ["dummy"]);
+    surface.dataModel.set('list', ['dummy']);
 
     // Now it's an array at /list, set something deep inside it
-    (processor as any).setDataByPath(
-      surface.dataModel,
-      "/list/0/name",
-      "Alice",
-    );
+    (processor as any).setDataByPath(surface.dataModel, '/list/0/name', 'Alice');
 
     // Also test setting a value directly on an array index
-    (processor as any).setDataByPath(surface.dataModel, "/list/1", "Bob");
+    (processor as any).setDataByPath(surface.dataModel, '/list/1', 'Bob');
 
-    const list = surface.dataModel.get("list") as any[];
-    assert.strictEqual(list[0].get("name"), "Alice"); // It creates a Map for `name`
-    assert.strictEqual(list[1], "Bob");
+    const list = surface.dataModel.get('list') as any[];
+    assert.strictEqual(list[0].get('name'), 'Alice'); // It creates a Map for `name`
+    assert.strictEqual(list[1], 'Bob');
 
     // Test getDataByPath failing traversal over a primitive
-    (processor as any).setDataByPath(surface.dataModel, "/primitive", "hello");
-    const result = (processor as any).getDataByPath(
-      surface.dataModel,
-      "/primitive/invalid",
-    );
+    (processor as any).setDataByPath(surface.dataModel, '/primitive', 'hello');
+    const result = (processor as any).getDataByPath(surface.dataModel, '/primitive/invalid');
     assert.strictEqual(result, null);
   });
 
-  it("test tree rebuilding edge cases", () => {
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s_tree", root: "root"}},
-    ]);
-    const surface = processor.getSurfaces().get("s_tree")!;
+  it('test tree rebuilding edge cases', () => {
+    processor.processMessages([{beginRendering: {surfaceId: 's_tree', root: 'root'}}]);
+    const surface = processor.getSurfaces().get('s_tree')!;
 
     // 1. rebuildComponentTree without rootComponentId
     surface.rootComponentId = null;
@@ -386,14 +363,14 @@ describe("A2uiMessageProcessor", () => {
     assert.strictEqual(surface.componentTree, null);
 
     // 2. Circular dependency
-    surface.rootComponentId = "circleA";
-    surface.components.set("circleA", {
-      id: "circleA",
-      component: {Row: {children: ["circleB"]}} as any,
+    surface.rootComponentId = 'circleA';
+    surface.components.set('circleA', {
+      id: 'circleA',
+      component: {Row: {children: ['circleB']}} as any,
     });
-    surface.components.set("circleB", {
-      id: "circleB",
-      component: {Row: {children: ["circleA"]}} as any,
+    surface.components.set('circleB', {
+      id: 'circleB',
+      component: {Row: {children: ['circleA']}} as any,
     });
 
     assert.throws(() => {
@@ -401,38 +378,36 @@ describe("A2uiMessageProcessor", () => {
     }, /Circular dependency/);
   });
 
-  it("throws A2uiValidationError for malformed components", () => {
-    processor.processMessages([
-      {beginRendering: {surfaceId: `s_bad_comp`, root: "bad"}},
-    ]);
-    const surface = processor.getSurfaces().get("s_bad_comp")!;
-    surface.rootComponentId = "bad";
+  it('throws A2uiValidationError for malformed components', () => {
+    processor.processMessages([{beginRendering: {surfaceId: `s_bad_comp`, root: 'bad'}}]);
+    const surface = processor.getSurfaces().get('s_bad_comp')!;
+    surface.rootComponentId = 'bad';
 
     // Divider is omitted here because it has no required fields, so `{}` is valid.
     const types = [
-      "Text",
-      "Image",
-      "Icon",
-      "Video",
-      "AudioPlayer",
-      "Row",
-      "Column",
-      "List",
-      "Card",
-      "Tabs",
-      "Modal",
-      "Button",
-      "CheckBox",
-      "TextField",
-      "DateTimeInput",
-      "MultipleChoice",
-      "Slider",
+      'Text',
+      'Image',
+      'Icon',
+      'Video',
+      'AudioPlayer',
+      'Row',
+      'Column',
+      'List',
+      'Card',
+      'Tabs',
+      'Modal',
+      'Button',
+      'CheckBox',
+      'TextField',
+      'DateTimeInput',
+      'MultipleChoice',
+      'Slider',
     ];
 
     for (const type of types) {
       assert.throws(() => {
-        surface.components.set("bad", {
-          id: "bad",
+        surface.components.set('bad', {
+          id: 'bad',
           component: {
             [type]: {
               /* missing required fields */
@@ -444,75 +419,73 @@ describe("A2uiMessageProcessor", () => {
     }
 
     // Default catch-all (doesn't throw, just passes it through)
-    surface.components.set("bad", {
-      id: "bad",
-      component: {CustomWidget: {foo: "bar"}} as any,
+    surface.components.set('bad', {
+      id: 'bad',
+      component: {CustomWidget: {foo: 'bar'}} as any,
     });
     (processor as any).rebuildComponentTree(surface);
-    assert.strictEqual((surface.componentTree as any).type, "CustomWidget");
+    assert.strictEqual((surface.componentTree as any).type, 'CustomWidget');
   });
 
-  it("resolves Template with Array data", () => {
+  it('resolves Template with Array data', () => {
     processor.processMessages([
-      {beginRendering: {surfaceId: "s3_arr", root: "list"}},
+      {beginRendering: {surfaceId: 's3_arr', root: 'list'}},
       {
         dataModelUpdate: {
-          surfaceId: "s3_arr",
-          path: "/items",
+          surfaceId: 's3_arr',
+          path: '/items',
           contents: [
-            {key: "0", valueString: "a"},
-            {key: "1", valueString: "b"},
+            {key: '0', valueString: 'a'},
+            {key: '1', valueString: 'b'},
           ],
         },
       },
     ]);
-    const surface = processor.getSurfaces().get("s3_arr")!;
+    const surface = processor.getSurfaces().get('s3_arr')!;
 
-    surface.components.set("list", {
-      id: "list",
+    surface.components.set('list', {
+      id: 'list',
       component: {
         List: {
           children: {
-            template: {dataBinding: "/items", componentId: "item"},
+            template: {dataBinding: '/items', componentId: 'item'},
           },
         },
       } as any,
     });
-    surface.components.set("item", {
-      id: "item",
+    surface.components.set('item', {
+      id: 'item',
       component: {
-        Text: {text: {literalString: "hello"}, usageHint: "body"},
+        Text: {text: {literalString: 'hello'}, usageHint: 'body'},
       },
     });
     (processor as any).rebuildComponentTree(surface);
 
     const root = surface.componentTree as any;
     assert.strictEqual(root.properties.children.length, 2);
-    assert.strictEqual(root.properties.children[0].id, "item:0");
-    assert.strictEqual(root.properties.children[0].dataContextPath, "/items/0");
-    assert.strictEqual(root.properties.children[1].id, "item:1");
-    assert.strictEqual(root.properties.children[1].dataContextPath, "/items/1");
+    assert.strictEqual(root.properties.children[0].id, 'item:0');
+    assert.strictEqual(root.properties.children[0].dataContextPath, '/items/0');
+    assert.strictEqual(root.properties.children[1].id, 'item:1');
+    assert.strictEqual(root.properties.children[1].dataContextPath, '/items/1');
   });
 
-  it("resolves Template with undefined/null data as empty array", () => {
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s3_null", root: "list"}},
-    ]);
-    const surface = processor.getSurfaces().get("s3_null")!;
-    surface.components.set("list", {
-      id: "list",
+  it('resolves Template with undefined/null data as empty array', () => {
+    processor.processMessages([{beginRendering: {surfaceId: 's3_null', root: 'list'}}]);
+    const surface = processor.getSurfaces().get('s3_null')!;
+    surface.components.set('list', {
+      id: 'list',
       component: {
         List: {
           children: {
-            template: {dataBinding: "/missingItems", componentId: "item"},
+            template: {dataBinding: '/missingItems', componentId: 'item'},
           },
         },
       } as any,
     });
-    surface.components.set("item", {
-      id: "item",
+    surface.components.set('item', {
+      id: 'item',
       component: {
-        Text: {text: {literalString: "hello"}, usageHint: "body"},
+        Text: {text: {literalString: 'hello'}, usageHint: 'body'},
       },
     });
 
@@ -522,177 +495,156 @@ describe("A2uiMessageProcessor", () => {
     assert.deepStrictEqual(root.properties.children, []);
   });
 
-  it("sets primitive at path via single array element with dot key", () => {
+  it('sets primitive at path via single array element with dot key', () => {
     processor.processMessages([
-      {beginRendering: {surfaceId: "s1_prim", root: "list"}},
+      {beginRendering: {surfaceId: 's1_prim', root: 'list'}},
       {
         dataModelUpdate: {
-          surfaceId: "s1_prim",
-          path: "/nested/item",
-          contents: [{key: ".", valueString: "hello"}],
+          surfaceId: 's1_prim',
+          path: '/nested/item',
+          contents: [{key: '.', valueString: 'hello'}],
         },
       },
     ]);
-    const surface = processor.getSurfaces().get("s1_prim")!;
-    surface.components.set("list", {
-      id: "list",
+    const surface = processor.getSurfaces().get('s1_prim')!;
+    surface.components.set('list', {
+      id: 'list',
       component: {Row: {children: {explicitList: []}}} as any,
     });
     (processor as any).rebuildComponentTree(surface);
     const root = surface.componentTree!;
-    assert.strictEqual(
-      processor.getData(root, "/nested/item", "s1_prim"),
-      "hello",
-    );
+    assert.strictEqual(processor.getData(root, '/nested/item', 's1_prim'), 'hello');
 
     // Test the fallback where valueString is absent but we pass something anyway
     assert.throws(() => {
       processor.processMessages([
         {
           dataModelUpdate: {
-            surfaceId: "s1_prim",
-            path: "/nested/malformed",
-            contents: [{key: "."} as any],
+            surfaceId: 's1_prim',
+            path: '/nested/malformed',
+            contents: [{key: '.'} as any],
           },
         },
       ]);
     }, /Value must have exactly one value property/);
   });
 
-  it("path resolves through primitive objects and arrays", () => {
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s1_path", root: "list"}},
-    ]);
-    const surface = processor.getSurfaces().get("s1_path")!;
-    surface.dataModel.set("obj", {
-      nestedMap: new Map([["index", [1, 2, {val: "hi"}]]]),
+  it('path resolves through primitive objects and arrays', () => {
+    processor.processMessages([{beginRendering: {surfaceId: 's1_path', root: 'list'}}]);
+    const surface = processor.getSurfaces().get('s1_path')!;
+    surface.dataModel.set('obj', {
+      nestedMap: new Map([['index', [1, 2, {val: 'hi'}]]]),
     });
-    surface.components.set("list", {
-      id: "list",
+    surface.components.set('list', {
+      id: 'list',
       component: {Row: {children: {explicitList: []}}} as any,
     });
     (processor as any).rebuildComponentTree(surface);
     const root = surface.componentTree!;
 
+    assert.strictEqual(processor.getData(root, '/obj/nestedMap/index/2/val', 's1_path'), 'hi');
     assert.strictEqual(
-      processor.getData(root, "/obj/nestedMap/index/2/val", "s1_path"),
-      "hi",
-    );
-    assert.strictEqual(
-      processor.getData(root, "/obj/nestedMap/index/2/val/deeper", "s1_path"),
+      processor.getData(root, '/obj/nestedMap/index/2/val/deeper', 's1_path'),
       null,
     );
   });
 
-  it("builds all component types correctly", () => {
-    const surfaceId = "s_all";
-    processor.processMessages([{beginRendering: {surfaceId, root: "col"}}]);
+  it('builds all component types correctly', () => {
+    const surfaceId = 's_all';
+    processor.processMessages([{beginRendering: {surfaceId, root: 'col'}}]);
     const surface = processor.getSurfaces().get(surfaceId)!;
 
     const components = {
-      col: {Column: {children: ["row"]}},
-      row: {Row: {children: ["card"]}},
-      card: {Card: {child: "tabs"}},
+      col: {Column: {children: ['row']}},
+      row: {Row: {children: ['card']}},
+      card: {Card: {child: 'tabs'}},
       tabs: {
         Tabs: {
-          tabItems: [{title: {literalString: "T1"}, child: "modal"}],
+          tabItems: [{title: {literalString: 'T1'}, child: 'modal'}],
         },
       },
-      modal: {Modal: {entryPointChild: "list", contentChild: "div"}},
-      list: {List: {children: ["btn"]}},
-      btn: {Button: {child: "btn_txt", action: "act"}},
-      btn_txt: {Text: {text: {literalString: "Click"}}},
+      modal: {Modal: {entryPointChild: 'list', contentChild: 'div'}},
+      list: {List: {children: ['btn']}},
+      btn: {Button: {child: 'btn_txt', action: 'act'}},
+      btn_txt: {Text: {text: {literalString: 'Click'}}},
       div: {Divider: {}},
       chk: {
         CheckBox: {
-          label: {literalString: "Chk"},
+          label: {literalString: 'Chk'},
           value: {literalBoolean: true},
         },
       },
-      txt: {TextField: {label: {literalString: "Txt"}}},
-      dt: {DateTimeInput: {value: {literalString: "2022-01-01"}}},
-      mc: {MultipleChoice: {selections: {literal: ["a"]}}},
+      txt: {TextField: {label: {literalString: 'Txt'}}},
+      dt: {DateTimeInput: {value: {literalString: '2022-01-01'}}},
+      mc: {MultipleChoice: {selections: {literal: ['a']}}},
       sl: {Slider: {value: {literalNumber: 50}}},
-      img: {Image: {url: {literalString: "http://img"}}},
-      icon: {Icon: {name: {literalString: "home"}}},
-      vid: {Video: {url: {literalString: "http://vid"}}},
-      aud: {AudioPlayer: {url: {literalString: "http://aud"}}},
+      img: {Image: {url: {literalString: 'http://img'}}},
+      icon: {Icon: {name: {literalString: 'home'}}},
+      vid: {Video: {url: {literalString: 'http://vid'}}},
+      aud: {AudioPlayer: {url: {literalString: 'http://aud'}}},
     };
 
     for (const [id, comp] of Object.entries(components)) {
       surface.components.set(id, {id, component: comp} as any);
     }
 
-    surface.components.set("root_all", {
-      id: "root_all",
+    surface.components.set('root_all', {
+      id: 'root_all',
       component: {
         Column: {
-          children: [
-            "col",
-            "chk",
-            "txt",
-            "dt",
-            "mc",
-            "sl",
-            "img",
-            "icon",
-            "vid",
-            "aud",
-          ],
+          children: ['col', 'chk', 'txt', 'dt', 'mc', 'sl', 'img', 'icon', 'vid', 'aud'],
         },
       },
     } as any);
 
-    surface.rootComponentId = "root_all";
+    surface.rootComponentId = 'root_all';
     (processor as any).rebuildComponentTree(surface);
 
     const root = surface.componentTree as any;
-    assert.strictEqual(root.type, "Column");
+    assert.strictEqual(root.type, 'Column');
     assert.strictEqual(root.properties.children.length, 10);
   });
 
-  it("handles recursive valueMap in convertKeyValueArrayToMap", () => {
+  it('handles recursive valueMap in convertKeyValueArrayToMap', () => {
     // We need to bypass private check or use a method that calls it.
     // setData calls setDataByPath which calls convertKeyValueArrayToMap.
     const update = {
-      surfaceId: "s_rec",
+      surfaceId: 's_rec',
       contents: [
         {
-          key: "nested",
-          valueMap: [{key: "inner", valueString: "val"}],
+          key: 'nested',
+          valueMap: [{key: 'inner', valueString: 'val'}],
         },
       ] as any, // Recursive generic type difficult to construct in TS literal
     };
 
     // We can use processMessages with dataModelUpdate.
-    processor.processMessages([
-      {beginRendering: {surfaceId: "s_rec", root: "root"}},
-    ]);
+    processor.processMessages([{beginRendering: {surfaceId: 's_rec', root: 'root'}}]);
 
     // Set root to Map first
-    const surface = processor.getSurfaces().get("s_rec")!;
-    (surface.dataModel as any).set("junk", "ignored");
+    const surface = processor.getSurfaces().get('s_rec')!;
+    (surface.dataModel as any).set('junk', 'ignored');
 
     processor.processMessages([{dataModelUpdate: update}]);
 
     // Verify data
-    const nested = surface.dataModel.get("nested") as Map<string, any>;
+    const nested = surface.dataModel.get('nested') as Map<string, any>;
     assert.strictEqual(nested instanceof Map, true);
-    assert.strictEqual(nested.get("inner"), "val");
+    assert.strictEqual(nested.get('inner'), 'val');
   });
 
-  it("resolves Template with Map data", () => {
+  it('resolves Template with Map data', () => {
     processor.processMessages([
-      {beginRendering: {surfaceId: "s3_map", root: "list"}},
+      {beginRendering: {surfaceId: 's3_map', root: 'list'}},
       {
         dataModelUpdate: {
-          surfaceId: "s3_map",
+          surfaceId: 's3_map',
           contents: [
             {
-              key: "items",
+              key: 'items',
               valueMap: [
-                {key: "a", valueString: "valA"},
-                {key: "b", valueString: "valB"},
+                {key: 'a', valueString: 'valA'},
+                {key: 'b', valueString: 'valB'},
               ],
             },
           ],
@@ -700,65 +652,61 @@ describe("A2uiMessageProcessor", () => {
       },
     ]);
 
-    const surface = processor.getSurfaces().get("s3_map")!;
+    const surface = processor.getSurfaces().get('s3_map')!;
 
     // Define components
-    surface.components.set("list", {
-      id: "list",
+    surface.components.set('list', {
+      id: 'list',
       component: {
         List: {
           children: {
             template: {
-              dataBinding: "/items",
-              componentId: "item",
+              dataBinding: '/items',
+              componentId: 'item',
             },
           },
         },
       } as any,
     });
-    surface.components.set("item", {
-      id: "item",
+    surface.components.set('item', {
+      id: 'item',
       component: {
-        Text: {text: {path: "."}},
+        Text: {text: {path: '.'}},
       } as any,
     });
 
     (processor as any).rebuildComponentTree(surface);
     const root = surface.componentTree as any;
-    assert.strictEqual(root.type, "List");
+    assert.strictEqual(root.type, 'List');
     // Map entries should be processed.
     assert.strictEqual(root.properties.children.length, 2);
   });
 
-  it("handles Object-to-Map normalization in handleDataModelUpdate (direct call)", () => {
-    const surfaceId = "s_norm";
-    processor.processMessages([
-      {beginRendering: {surfaceId, root: "root"}},
-    ]);
+  it('handles Object-to-Map normalization in handleDataModelUpdate (direct call)', () => {
+    const surfaceId = 's_norm';
+    processor.processMessages([{beginRendering: {surfaceId, root: 'root'}}]);
     const surface = processor.getSurfaces().get(surfaceId)!;
 
     // Direct call to bypass Zod validation in processMessages
     (processor as any).handleDataModelUpdate(
       {
         surfaceId,
-        contents: {normalized: "value"},
+        contents: {normalized: 'value'},
       },
       surfaceId,
     );
 
-    assert.strictEqual(surface.dataModel.get("normalized"), "value");
+    assert.strictEqual(surface.dataModel.get('normalized'), 'value');
   });
 
-  it("throws validation error for invalid List", () => {
-    const surfaceId = "s_bad_list";
-    processor.processMessages([
-      {beginRendering: {surfaceId, root: "badList"}},
-    ]);
+  it('throws validation error for invalid List', () => {
+    const surfaceId = 's_bad_list';
+    processor.processMessages([{beginRendering: {surfaceId, root: 'badList'}}]);
     const surface = processor.getSurfaces().get(surfaceId)!;
 
-    surface.components.set("badList", {
-      id: "badList",
-      component: {List: {children: "not-array"}} as any,
+    surface.components.set('badList', {
+      id: 'badList',
+      component: {List: {children: 'not-array'}} as any,
     });
 
     assert.throws(() => {
@@ -766,64 +714,62 @@ describe("A2uiMessageProcessor", () => {
     }, /Invalid data; expected List/);
   });
 
-  it("handles recursive valueMap in convertKeyValueArrayToMap with dot key", () => {
-    const surfaceId = "s_dot_rec";
+  it('handles recursive valueMap in convertKeyValueArrayToMap with dot key', () => {
+    const surfaceId = 's_dot_rec';
     const surface = (processor as any).getOrCreateSurface(surfaceId);
     const value = [
       {
-        key: ".",
-        valueMap: [{key: "inner", valueString: "val"}],
+        key: '.',
+        valueMap: [{key: 'inner', valueString: 'val'}],
       },
     ];
 
     // Calling setDataByPath directly (private)
-    (processor as any).setDataByPath(surface.dataModel, "/target", value);
+    (processor as any).setDataByPath(surface.dataModel, '/target', value);
 
-    const target = surface.dataModel.get("target") as Map<string, any>;
+    const target = surface.dataModel.get('target') as Map<string, any>;
     assert.strictEqual(target instanceof Map, true);
-    assert.strictEqual(target.get("inner"), "val");
+    assert.strictEqual(target.get('inner'), 'val');
   });
 
-  it("resolves Template with Array data (via direct setData)", () => {
-    const surfaceId = "s_direct_arr";
-    processor.processMessages([
-      {beginRendering: {surfaceId, root: "list"}},
-    ]);
+  it('resolves Template with Array data (via direct setData)', () => {
+    const surfaceId = 's_direct_arr';
+    processor.processMessages([{beginRendering: {surfaceId, root: 'list'}}]);
     const surface = processor.getSurfaces().get(surfaceId)!;
 
     // Setup components
-    surface.components.set("list", {
-      id: "list",
+    surface.components.set('list', {
+      id: 'list',
       component: {
         List: {
           children: {
             template: {
-              dataBinding: "/items",
-              componentId: "item",
+              dataBinding: '/items',
+              componentId: 'item',
             },
           },
         },
       } as any,
     });
-    surface.components.set("item", {
-      id: "item",
+    surface.components.set('item', {
+      id: 'item',
       component: {
-        Text: {text: {path: "."}},
+        Text: {text: {path: '.'}},
       } as any,
     });
 
     // Direct set array to bypass normalization/schema
-    const itemsArray = ["A", "B"];
-    surface.dataModel.set("items", itemsArray);
+    const itemsArray = ['A', 'B'];
+    surface.dataModel.set('items', itemsArray);
 
     (processor as any).rebuildComponentTree(surface);
 
     const root = surface.componentTree as any;
-    assert.strictEqual(root.type, "List");
+    assert.strictEqual(root.type, 'List');
     assert.strictEqual(root.properties.children.length, 2);
   });
 
-  it("ignores non-strings when trying to parse JSON", () => {
+  it('ignores non-strings when trying to parse JSON', () => {
     const result = (processor as any).parseIfJsonString(123);
     assert.strictEqual(result, 123);
   });
diff --git a/renderers/web_core/src/v0_8/data/model-processor.ts b/renderers/web_core/src/v0_8/data/model-processor.ts
index 2347ed59b..cd511a777 100644
--- a/renderers/web_core/src/v0_8/data/model-processor.ts
+++ b/renderers/web_core/src/v0_8/data/model-processor.ts
@@ -30,9 +30,9 @@ import {
   SurfaceUpdateMessage,
   MessageProcessor,
   ValueMap,
-} from "../types/types.js";
-import { A2uiMessageSchema } from "../schema/server-to-client.js";
-import { A2uiStateError, A2uiValidationError } from "../errors.js";
+} from '../types/types.js';
+import {A2uiMessageSchema} from '../schema/server-to-client.js';
+import {A2uiStateError, A2uiValidationError} from '../errors.js';
 import {
   isComponentArrayReference,
   isObject,
@@ -55,14 +55,14 @@ import {
   isResolvedText,
   isResolvedTextField,
   isResolvedVideo,
-} from "./guards.js";
+} from './guards.js';
 
 /**
  * Processes and consolidates A2UIProtocolMessage objects into a structured,
  * hierarchical model of UI surfaces.
  */
 export class A2uiMessageProcessor implements MessageProcessor {
-  static readonly DEFAULT_SURFACE_ID = "@default";
+  static readonly DEFAULT_SURFACE_ID = '@default';
 
   private mapCtor: MapConstructor = Map;
   private arrayCtor: ArrayConstructor = Array;
@@ -76,7 +76,7 @@ export class A2uiMessageProcessor implements MessageProcessor {
       arrayCtor: ArrayConstructor;
       setCtor: SetConstructor;
       objCtor: ObjectConstructor;
-    } = { mapCtor: Map, arrayCtor: Array, setCtor: Set, objCtor: Object },
+    } = {mapCtor: Map, arrayCtor: Array, setCtor: Set, objCtor: Object},
   ) {
     this.arrayCtor = opts.arrayCtor;
     this.mapCtor = opts.mapCtor;
@@ -110,24 +110,15 @@ export class A2uiMessageProcessor implements MessageProcessor {
       const message = A2uiMessageSchema.parse(rawMessage);
 
       if (message.beginRendering) {
-        this.handleBeginRendering(
-          message.beginRendering,
-          message.beginRendering.surfaceId,
-        );
+        this.handleBeginRendering(message.beginRendering, message.beginRendering.surfaceId);
       }
 
       if (message.surfaceUpdate) {
-        this.handleSurfaceUpdate(
-          message.surfaceUpdate,
-          message.surfaceUpdate.surfaceId,
-        );
+        this.handleSurfaceUpdate(message.surfaceUpdate, message.surfaceUpdate.surfaceId);
       }
 
       if (message.dataModelUpdate) {
-        this.handleDataModelUpdate(
-          message.dataModelUpdate,
-          message.dataModelUpdate.surfaceId,
-        );
+        this.handleDataModelUpdate(message.dataModelUpdate, message.dataModelUpdate.surfaceId);
       }
 
       if (message.deleteSurface) {
@@ -153,8 +144,8 @@ export class A2uiMessageProcessor implements MessageProcessor {
 
     // The special `.` path means the final path is the node's data context
     // path and so we return the dataContextPath as-is.
-    if (relativePath === "." || relativePath === "") {
-      finalPath = node.dataContextPath ?? "/";
+    if (relativePath === '.' || relativePath === '') {
+      finalPath = node.dataContextPath ?? '/';
     } else {
       // For all other paths, resolve them against the node's context.
       finalPath = this.resolvePath(relativePath, node.dataContextPath);
@@ -170,7 +161,7 @@ export class A2uiMessageProcessor implements MessageProcessor {
     surfaceId = A2uiMessageProcessor.DEFAULT_SURFACE_ID,
   ): void {
     if (!node) {
-      console.warn("No component node set");
+      console.warn('No component node set');
       return;
     }
 
@@ -181,8 +172,8 @@ export class A2uiMessageProcessor implements MessageProcessor {
 
     // The special `.` path means the final path is the node's data context
     // path and so we return the dataContextPath as-is.
-    if (relativePath === "." || relativePath === "") {
-      finalPath = node.dataContextPath ?? "/";
+    if (relativePath === '.' || relativePath === '') {
+      finalPath = node.dataContextPath ?? '/';
     } else {
       // For all other paths, resolve them against the node's context.
       finalPath = this.resolvePath(relativePath, node.dataContextPath);
@@ -193,13 +184,13 @@ export class A2uiMessageProcessor implements MessageProcessor {
 
   resolvePath(path: string, dataContextPath?: string): string {
     // If the path is absolute, it overrides any context.
-    if (path.startsWith("/")) {
+    if (path.startsWith('/')) {
       return path;
     }
 
-    if (dataContextPath && dataContextPath !== "/") {
+    if (dataContextPath && dataContextPath !== '/') {
       // Ensure there's exactly one slash between the context and the path.
-      return dataContextPath.endsWith("/")
+      return dataContextPath.endsWith('/')
         ? `${dataContextPath}${path}`
         : `${dataContextPath}/${path}`;
     }
@@ -209,27 +200,21 @@ export class A2uiMessageProcessor implements MessageProcessor {
   }
 
   private parseIfJsonString(value: DataValue): DataValue {
-    if (typeof value !== "string") {
+    if (typeof value !== 'string') {
       return value;
     }
 
     const trimmedValue = value.trim();
     if (
-      (trimmedValue.startsWith("{") && trimmedValue.endsWith("}")) ||
-      (trimmedValue.startsWith("[") && trimmedValue.endsWith("]"))
+      (trimmedValue.startsWith('{') && trimmedValue.endsWith('}')) ||
+      (trimmedValue.startsWith('[') && trimmedValue.endsWith(']'))
     ) {
       try {
         // It looks like JSON, attempt to parse it.
         return JSON.parse(value);
       } catch (e) {
         // It looked like JSON but wasn't. Keep the original string.
-        console.warn(
-          `Failed to parse potential JSON string: "${value.substring(
-            0,
-            50,
-          )}..."`,
-          e,
-        );
+        console.warn(`Failed to parse potential JSON string: "${value.substring(0, 50)}..."`, e);
         return value; // Return original string
       }
     }
@@ -246,7 +231,7 @@ export class A2uiMessageProcessor implements MessageProcessor {
   private convertKeyValueArrayToMap(arr: DataArray): DataMap {
     const map = new this.mapCtor<string, DataValue>();
     for (const item of arr) {
-      if (!isObject(item) || !("key" in item)) continue;
+      if (!isObject(item) || !('key' in item)) continue;
 
       const key = item.key as string;
 
@@ -256,9 +241,9 @@ export class A2uiMessageProcessor implements MessageProcessor {
 
       let value: DataValue = item[valueKey];
       // It's a valueMap. We must recursively convert it.
-      if (valueKey === "valueMap" && Array.isArray(value)) {
+      if (valueKey === 'valueMap' && Array.isArray(value)) {
         value = this.convertKeyValueArrayToMap(value);
-      } else if (typeof value === "string") {
+      } else if (typeof value === 'string') {
         value = this.parseIfJsonString(value);
       }
 
@@ -269,13 +254,10 @@ export class A2uiMessageProcessor implements MessageProcessor {
 
   private setDataByPath(root: DataMap, path: string, value: DataValue | ValueMap[]): void {
     // Check if the incoming value is the special key-value array format.
-    if (
-      Array.isArray(value) &&
-      (value.length === 0 || (isObject(value[0]) && "key" in value[0]))
-    ) {
+    if (Array.isArray(value) && (value.length === 0 || (isObject(value[0]) && 'key' in value[0]))) {
       // Check for "set primitive at path" convention:
       // path: "/messages/123", contents: [{ key: ".", valueString: "hi" }]
-      if (value.length === 1 && isObject(value[0]) && value[0].key === ".") {
+      if (value.length === 1 && isObject(value[0]) && value[0].key === '.') {
         const item = value[0];
         const valueKey = this.findValueKey(item);
 
@@ -285,9 +267,9 @@ export class A2uiMessageProcessor implements MessageProcessor {
 
           // We must still process this value in case it's a valueMap or
           // a JSON string.
-          if (valueKey === "valueMap" && Array.isArray(value)) {
+          if (valueKey === 'valueMap' && Array.isArray(value)) {
             value = this.convertKeyValueArrayToMap(value as DataArray);
-          } else if (typeof value === "string") {
+          } else if (typeof value === 'string') {
             value = this.parseIfJsonString(value);
           }
           // Now, `value` is the primitive (e.g., "hi"), and we continue
@@ -302,8 +284,8 @@ export class A2uiMessageProcessor implements MessageProcessor {
     }
 
     const segments = this.normalizePath(path)
-      .split("/")
-      .filter((s) => s);
+      .split('/')
+      .filter(s => s);
     if (segments.length === 0) {
       // Root data can either be a Map or an Object. If we receive an Object,
       // however, we will normalize it to a proper Map.
@@ -318,7 +300,7 @@ export class A2uiMessageProcessor implements MessageProcessor {
           root.set(key, v);
         }
       } else {
-        console.error("Cannot set root of DataModel to a non-Map value.");
+        console.error('Cannot set root of DataModel to a non-Map value.');
       }
       return;
     }
@@ -334,11 +316,7 @@ export class A2uiMessageProcessor implements MessageProcessor {
         target = current[parseInt(segment, 10)];
       }
 
-      if (
-        target === undefined ||
-        typeof target !== "object" ||
-        target === null
-      ) {
+      if (target === undefined || typeof target !== 'object' || target === null) {
         target = new this.mapCtor();
         if (current instanceof this.mapCtor) {
           current.set(segment, target);
@@ -366,19 +344,19 @@ export class A2uiMessageProcessor implements MessageProcessor {
    */
   private normalizePath(path: string): string {
     // 1. Replace all bracket accessors `[index]` with dot accessors `.index`
-    const dotPath = path.replace(/\[(\d+)\]/g, ".$1");
+    const dotPath = path.replace(/\[(\d+)\]/g, '.$1');
 
     // 2. Split by dots
-    const segments = dotPath.split(".");
+    const segments = dotPath.split('.');
 
     // 3. Join with slashes and ensure it starts with a slash
-    return "/" + segments.filter((s) => s.length > 0).join("/");
+    return '/' + segments.filter(s => s.length > 0).join('/');
   }
 
   private getDataByPath(root: DataMap, path: string): DataValue | null {
     const segments = this.normalizePath(path)
-      .split("/")
-      .filter((s) => s);
+      .split('/')
+      .filter(s => s);
 
     let current: DataValue = root;
     for (const segment of segments) {
@@ -415,20 +393,14 @@ export class A2uiMessageProcessor implements MessageProcessor {
     return surface;
   }
 
-  private handleBeginRendering(
-    message: BeginRenderingMessage,
-    surfaceId: SurfaceID,
-  ): void {
+  private handleBeginRendering(message: BeginRenderingMessage, surfaceId: SurfaceID): void {
     const surface = this.getOrCreateSurface(surfaceId);
     surface.rootComponentId = message.root;
     surface.styles = message.styles ?? {};
     this.rebuildComponentTree(surface);
   }
 
-  private handleSurfaceUpdate(
-    message: SurfaceUpdateMessage,
-    surfaceId: SurfaceID,
-  ): void {
+  private handleSurfaceUpdate(message: SurfaceUpdateMessage, surfaceId: SurfaceID): void {
     const surface = this.getOrCreateSurface(surfaceId);
     for (const component of message.components) {
       surface.components.set(component.id, component);
@@ -436,12 +408,9 @@ export class A2uiMessageProcessor implements MessageProcessor {
     this.rebuildComponentTree(surface);
   }
 
-  private handleDataModelUpdate(
-    message: DataModelUpdate,
-    surfaceId: SurfaceID,
-  ): void {
+  private handleDataModelUpdate(message: DataModelUpdate, surfaceId: SurfaceID): void {
     const surface = this.getOrCreateSurface(surfaceId);
-    const path = message.path ?? "/";
+    const path = message.path ?? '/';
     this.setDataByPath(surface.dataModel, path, message.contents);
     this.rebuildComponentTree(surface);
   }
@@ -470,14 +439,14 @@ export class A2uiMessageProcessor implements MessageProcessor {
       surface.rootComponentId,
       surface,
       visited,
-      "/",
-      "", // Initial idSuffix.
+      '/',
+      '', // Initial idSuffix.
     );
   }
 
   /** Finds a value key in a map. */
   private findValueKey(value: Record<string, unknown>): string | undefined {
-    return Object.keys(value).find((k) => k.startsWith("value"));
+    return Object.keys(value).find(k => k.startsWith('value'));
   }
 
   /**
@@ -488,19 +457,17 @@ export class A2uiMessageProcessor implements MessageProcessor {
     surface: Surface,
     visited: Set<string>,
     dataContextPath: string,
-    idSuffix = "",
+    idSuffix = '',
   ): AnyComponentNode | null {
     const fullId = `${baseComponentId}${idSuffix}`; // Construct the full ID
-    const { components } = surface;
+    const {components} = surface;
 
     if (!components.has(baseComponentId)) {
       return null;
     }
 
     if (visited.has(fullId)) {
-      throw new A2uiStateError(
-        `Circular dependency for component "${fullId}".`,
-      );
+      throw new A2uiStateError(`Circular dependency for component "${fullId}".`);
     }
 
     visited.add(fullId);
@@ -508,8 +475,7 @@ export class A2uiMessageProcessor implements MessageProcessor {
     const componentData = components.get(baseComponentId)!;
     const componentProps = componentData.component ?? {};
     const componentType = Object.keys(componentProps)[0];
-    const unresolvedProperties =
-      componentProps[componentType as keyof typeof componentProps];
+    const unresolvedProperties = componentProps[componentType as keyof typeof componentProps];
 
     // Manually build the resolvedProperties object by resolving each value in
     // the component's properties.
@@ -534,224 +500,188 @@ export class A2uiMessageProcessor implements MessageProcessor {
     const baseNode = {
       id: fullId,
       dataContextPath,
-      weight: componentData.weight ?? "initial",
+      weight: componentData.weight ?? 'initial',
     };
     switch (componentType) {
-      case "Text":
+      case 'Text':
         if (!isResolvedText(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Text",
+          type: 'Text',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Image":
+      case 'Image':
         if (!isResolvedImage(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Image",
+          type: 'Image',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Icon":
+      case 'Icon':
         if (!isResolvedIcon(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Icon",
+          type: 'Icon',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Video":
+      case 'Video':
         if (!isResolvedVideo(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Video",
+          type: 'Video',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "AudioPlayer":
+      case 'AudioPlayer':
         if (!isResolvedAudioPlayer(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "AudioPlayer",
+          type: 'AudioPlayer',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Row":
+      case 'Row':
         if (!isResolvedRow(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
 
         return new this.objCtor({
           ...baseNode,
-          type: "Row",
+          type: 'Row',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Column":
+      case 'Column':
         if (!isResolvedColumn(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
 
         return new this.objCtor({
           ...baseNode,
-          type: "Column",
+          type: 'Column',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "List":
+      case 'List':
         if (!isResolvedList(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "List",
+          type: 'List',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Card":
+      case 'Card':
         if (!isResolvedCard(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Card",
+          type: 'Card',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Tabs":
+      case 'Tabs':
         if (!isResolvedTabs(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Tabs",
+          type: 'Tabs',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Divider":
+      case 'Divider':
         if (!isResolvedDivider(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Divider",
+          type: 'Divider',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Modal":
+      case 'Modal':
         if (!isResolvedModal(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Modal",
+          type: 'Modal',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Button":
+      case 'Button':
         if (!isResolvedButton(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Button",
+          type: 'Button',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "CheckBox":
+      case 'CheckBox':
         if (!isResolvedCheckbox(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "CheckBox",
+          type: 'CheckBox',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "TextField":
+      case 'TextField':
         if (!isResolvedTextField(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "TextField",
+          type: 'TextField',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "DateTimeInput":
+      case 'DateTimeInput':
         if (!isResolvedDateTimeInput(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "DateTimeInput",
+          type: 'DateTimeInput',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "MultipleChoice":
+      case 'MultipleChoice':
         if (!isResolvedMultipleChoice(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "MultipleChoice",
+          type: 'MultipleChoice',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
-      case "Slider":
+      case 'Slider':
         if (!isResolvedSlider(resolvedProperties)) {
-          throw new A2uiValidationError(
-            `Invalid data; expected ${componentType}`,
-          );
+          throw new A2uiValidationError(`Invalid data; expected ${componentType}`);
         }
         return new this.objCtor({
           ...baseNode,
-          type: "Slider",
+          type: 'Slider',
           properties: resolvedProperties,
         }) as AnyComponentNode;
 
@@ -775,39 +705,24 @@ export class A2uiMessageProcessor implements MessageProcessor {
     surface: Surface,
     visited: Set<string>,
     dataContextPath: string,
-    idSuffix = "",
+    idSuffix = '',
   ): ResolvedValue {
     // 1. If it's a string that matches a component ID, build that node.
-    if (typeof value === "string" && surface.components.has(value)) {
-      return this.buildNodeRecursive(
-        value,
-        surface,
-        visited,
-        dataContextPath,
-        idSuffix,
-      );
+    if (typeof value === 'string' && surface.components.has(value)) {
+      return this.buildNodeRecursive(value, surface, visited, dataContextPath, idSuffix);
     }
 
     // 2. If it's a ComponentArrayReference (e.g., a `children` property),
     //    resolve the list and return an array of nodes.
     if (isComponentArrayReference(value)) {
       if (value.explicitList) {
-        return value.explicitList.map((id) =>
-          this.buildNodeRecursive(
-            id,
-            surface,
-            visited,
-            dataContextPath,
-            idSuffix,
-          ),
+        return value.explicitList.map(id =>
+          this.buildNodeRecursive(id, surface, visited, dataContextPath, idSuffix),
         );
       }
 
       if (value.template) {
-        const fullDataPath = this.resolvePath(
-          value.template.dataBinding,
-          dataContextPath,
-        );
+        const fullDataPath = this.resolvePath(value.template.dataBinding, dataContextPath);
         const data = this.getDataByPath(surface.dataModel, fullDataPath);
         const template = value.template;
 
@@ -817,11 +732,11 @@ export class A2uiMessageProcessor implements MessageProcessor {
             // Create a synthetic ID based on the template ID and the
             // full index path of the data (e.g., template-id:0:1)
             const parentIndices = dataContextPath
-              .split("/")
-              .filter((segment) => /^\d+$/.test(segment));
+              .split('/')
+              .filter(segment => /^\d+$/.test(segment));
 
             const newIndices = [...parentIndices, index];
-            const newSuffix = `:${newIndices.join(":")}`;
+            const newSuffix = `:${newIndices.join(':')}`;
             const childDataContextPath = `${fullDataPath}/${index}`;
 
             return this.buildNodeRecursive(
@@ -837,7 +752,7 @@ export class A2uiMessageProcessor implements MessageProcessor {
         // Handle Map data.
         const mapCtor = this.mapCtor;
         if (data instanceof mapCtor) {
-          return Array.from(data.keys(), (key) => {
+          return Array.from(data.keys(), key => {
             const newSuffix = `:${key}`;
             const childDataContextPath = `${fullDataPath}/${key}`;
 
@@ -858,14 +773,8 @@ export class A2uiMessageProcessor implements MessageProcessor {
 
     // 3. If it's a plain array, resolve each of its items.
     if (Array.isArray(value)) {
-      return value.map((item) =>
-        this.resolvePropertyValue(
-          item,
-          surface,
-          visited,
-          dataContextPath,
-          idSuffix,
-        ),
+      return value.map(item =>
+        this.resolvePropertyValue(item, surface, visited, dataContextPath, idSuffix),
       );
     }
 
@@ -878,12 +787,12 @@ export class A2uiMessageProcessor implements MessageProcessor {
         // dataContextPath and if 1) it's not the default and 2) we also see the
         // path beginning with /item/ or ./we trim it.
         let propertyValue = propValue;
-        if (isPath(key, propValue) && dataContextPath !== "/") {
+        if (isPath(key, propValue) && dataContextPath !== '/') {
           propertyValue = propValue
-            .replace(/^\.?\/item/, "")
-            .replace(/^\.?\/text/, "")
-            .replace(/^\.?\/label/, "")
-            .replace(/^\.?\//, "");
+            .replace(/^\.?\/item/, '')
+            .replace(/^\.?\/text/, '')
+            .replace(/^\.?\/label/, '')
+            .replace(/^\.?\//, '');
           newObj[key] = propertyValue as ResolvedValue;
           continue;
         }
diff --git a/renderers/web_core/src/v0_8/errors.ts b/renderers/web_core/src/v0_8/errors.ts
index 8b0ef2582..64f49c585 100644
--- a/renderers/web_core/src/v0_8/errors.ts
+++ b/renderers/web_core/src/v0_8/errors.ts
@@ -28,7 +28,7 @@ interface V8ErrorConstructor extends ErrorConstructor {
 export class A2uiError extends Error {
   public readonly code: string;
 
-  constructor(message: string, code: string = "UNKNOWN_ERROR") {
+  constructor(message: string, code: string = 'UNKNOWN_ERROR') {
     super(message);
     this.name = this.constructor.name;
     this.code = code;
@@ -48,7 +48,7 @@ export class A2uiValidationError extends A2uiError {
     message: string,
     public readonly details?: any,
   ) {
-    super(message, "VALIDATION_ERROR");
+    super(message, 'VALIDATION_ERROR');
   }
 }
 
@@ -60,7 +60,7 @@ export class A2uiDataError extends A2uiError {
     message: string,
     public readonly path?: string,
   ) {
-    super(message, "DATA_ERROR");
+    super(message, 'DATA_ERROR');
   }
 }
 
@@ -72,7 +72,7 @@ export class A2uiExpressionError extends A2uiError {
     message: string,
     public readonly expression?: string,
   ) {
-    super(message, "EXPRESSION_ERROR");
+    super(message, 'EXPRESSION_ERROR');
   }
 }
 
@@ -81,6 +81,6 @@ export class A2uiExpressionError extends A2uiError {
  */
 export class A2uiStateError extends A2uiError {
   constructor(message: string) {
-    super(message, "STATE_ERROR");
+    super(message, 'STATE_ERROR');
   }
 }
diff --git a/renderers/web_core/src/v0_8/events/index.ts b/renderers/web_core/src/v0_8/events/index.ts
index 60a40c3f6..fb5d76411 100644
--- a/renderers/web_core/src/v0_8/events/index.ts
+++ b/renderers/web_core/src/v0_8/events/index.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export * from "./base.js";
-export * from "./validation-event.js";
+export * from './base.js';
+export * from './validation-event.js';
diff --git a/renderers/web_core/src/v0_8/events/validation-event.ts b/renderers/web_core/src/v0_8/events/validation-event.ts
index 885ec3064..e217105ef 100644
--- a/renderers/web_core/src/v0_8/events/validation-event.ts
+++ b/renderers/web_core/src/v0_8/events/validation-event.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { BaseEventDetail } from "./base.js";
+import {BaseEventDetail} from './base.js';
 
 /**
  * Detailed payload for the `a2ui-validation-input` event.
  */
-export interface ValidationEventDetail extends BaseEventDetail<"a2ui-validation-input"> {
+export interface ValidationEventDetail extends BaseEventDetail<'a2ui-validation-input'> {
   /**
    * The ID of the component that is being validated.
    */
@@ -40,12 +40,9 @@ export interface ValidationEventDetail extends BaseEventDetail<"a2ui-validation-
  * Event dispatched when an input component's validation state is updated.
  */
 export class A2UIValidationEvent extends CustomEvent<ValidationEventDetail> {
-  static readonly EVENT_NAME = "a2ui-validation-input";
+  static readonly EVENT_NAME = 'a2ui-validation-input';
 
-  constructor(
-    detail: Omit<ValidationEventDetail, "eventType">,
-    eventInitDict?: EventInit,
-  ) {
+  constructor(detail: Omit<ValidationEventDetail, 'eventType'>, eventInitDict?: EventInit) {
     super(A2UIValidationEvent.EVENT_NAME, {
       bubbles: true,
       composed: true,
@@ -60,6 +57,6 @@ export class A2UIValidationEvent extends CustomEvent<ValidationEventDetail> {
 
 declare global {
   interface HTMLElementEventMap {
-    "a2ui-validation-input": A2UIValidationEvent;
+    'a2ui-validation-input': A2UIValidationEvent;
   }
 }
diff --git a/renderers/web_core/src/v0_8/index.ts b/renderers/web_core/src/v0_8/index.ts
index 05e8cd1cd..22f60eb24 100644
--- a/renderers/web_core/src/v0_8/index.ts
+++ b/renderers/web_core/src/v0_8/index.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-export * as Events from "./events/index.js";
-export * from "./data/guards.js";
-export * from "./data/model-processor.js";
-export * from "./styles/index.js";
-export * from "./types/colors.js";
-export * from "./types/primitives.js";
-export * from "./types/types.js";
-export * from "./errors.js";
+export * as Events from './events/index.js';
+export * from './data/guards.js';
+export * from './data/model-processor.js';
+export * from './styles/index.js';
+export * from './types/colors.js';
+export * from './types/primitives.js';
+export * from './types/types.js';
+export * from './errors.js';
 
-import A2UIClientEventMessage from "./schemas/server_to_client_with_standard_catalog.json" with { type: "json" };
+import A2UIClientEventMessage from './schemas/server_to_client_with_standard_catalog.json' with {type: 'json'};
 
 export const Schemas = {
   A2UIClientEventMessage,
diff --git a/renderers/web_core/src/v0_8/schema/common-types.ts b/renderers/web_core/src/v0_8/schema/common-types.ts
index 2114d5ea2..2f9d6e9be 100644
--- a/renderers/web_core/src/v0_8/schema/common-types.ts
+++ b/renderers/web_core/src/v0_8/schema/common-types.ts
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { z } from "zod";
+import {z} from 'zod';
 
 /**
  * Base primitives
  */
 
 const exactlyOneKey = (val: any, ctx: z.RefinementCtx) => {
-  const keys = Object.keys(val).filter((k) => val[k] !== undefined);
+  const keys = Object.keys(val).filter(k => val[k] !== undefined);
   if (keys.length !== 1) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
-      message: `Must define exactly one property, found ${keys.length} (${keys.join(", ")}).`,
+      message: `Must define exactly one property, found ${keys.length} (${keys.join(', ')}).`,
     });
   }
 };
@@ -92,7 +92,7 @@ export const DataValueSchema = z
       if (currentDepth > 5) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
-          message: "valueMap recursion exceeded maximum depth of 5.",
+          message: 'valueMap recursion exceeded maximum depth of 5.',
         });
         return;
       }
@@ -129,9 +129,7 @@ export type BooleanValue = z.infer<typeof BooleanValueSchema>;
  * Action Schema for components that trigger user actions
  */
 export const ActionSchema = z.object({
-  name: z
-    .string()
-    .describe("A unique name identifying the action (e.g., 'submitForm')."),
+  name: z.string().describe("A unique name identifying the action (e.g., 'submitForm')."),
   context: z
     .array(
       z.object({
@@ -144,23 +142,16 @@ export const ActionSchema = z.object({
                 "A data binding reference to a location in the data model (e.g., '/user/name').",
               )
               .optional(),
-            literalString: z
-              .string()
-              .describe("A fixed, hardcoded string value.")
-              .optional(),
+            literalString: z.string().describe('A fixed, hardcoded string value.').optional(),
             literalNumber: z.number().optional(),
             literalBoolean: z.boolean().optional(),
           })
-          .describe(
-            "The dynamic value. Define EXACTLY ONE of the nested properties.",
-          )
+          .describe('The dynamic value. Define EXACTLY ONE of the nested properties.')
           .strict()
           .superRefine(exactlyOneKey),
       }),
     )
-    .describe(
-      "A key-value map of data bindings to be resolved when the action is triggered.",
-    )
+    .describe('A key-value map of data bindings to be resolved when the action is triggered.')
     .optional(),
 });
 
@@ -170,24 +161,15 @@ export const ActionSchema = z.object({
 
 export const TextSchema = z.object({
   text: StringValueSchema,
-  usageHint: z
-    .enum(["h1", "h2", "h3", "h4", "h5", "caption", "body"])
-    .optional(),
+  usageHint: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body']).optional(),
 });
 
 export const ImageSchema = z.object({
   url: StringValueSchema,
   usageHint: z
-    .enum([
-      "icon",
-      "avatar",
-      "smallFeature",
-      "mediumFeature",
-      "largeFeature",
-      "header",
-    ])
+    .enum(['icon', 'avatar', 'smallFeature', 'mediumFeature', 'largeFeature', 'header'])
     .optional(),
-  fit: z.enum(["contain", "cover", "fill", "none", "scale-down"]).optional(),
+  fit: z.enum(['contain', 'cover', 'fill', 'none', 'scale-down']).optional(),
   altText: StringValueSchema.optional(),
 });
 
@@ -201,9 +183,7 @@ export const VideoSchema = z.object({
 
 export const AudioPlayerSchema = z.object({
   url: StringValueSchema,
-  description: StringValueSchema.optional().describe(
-    "A label, title, or placeholder text.",
-  ),
+  description: StringValueSchema.optional().describe('A label, title, or placeholder text.'),
 });
 
 export const TabsSchema = z.object({
@@ -218,14 +198,9 @@ export const TabsSchema = z.object({
                 "A data binding reference to a location in the data model (e.g., '/user/name').",
               )
               .optional(),
-            literalString: z
-              .string()
-              .describe("A fixed, hardcoded string value.")
-              .optional(),
+            literalString: z.string().describe('A fixed, hardcoded string value.').optional(),
           }),
-          child: z
-            .string()
-            .describe("A reference to a component instance by its unique ID."),
+          child: z.string().describe('A reference to a component instance by its unique ID.'),
         })
         .strict()
         .superRefine((val: any, ctx: z.RefinementCtx) => {
@@ -246,43 +221,32 @@ export const TabsSchema = z.object({
           }
         }),
     )
-    .describe("A list of tabs, each with a title and a child component ID."),
+    .describe('A list of tabs, each with a title and a child component ID.'),
 });
 
 export const DividerSchema = z.object({
-  axis: z
-    .enum(["horizontal", "vertical"])
-    .optional()
-    .describe("The orientation."),
+  axis: z.enum(['horizontal', 'vertical']).optional().describe('The orientation.'),
   color: z
     .string()
     .optional()
-    .describe("The color of the divider (e.g., hex code or semantic name)."),
-  thickness: z.number().optional().describe("The thickness of the divider."),
+    .describe('The color of the divider (e.g., hex code or semantic name).'),
+  thickness: z.number().optional().describe('The thickness of the divider.'),
 });
 
 export const ModalSchema = z.object({
   entryPointChild: z
     .string()
-    .describe(
-      "The ID of the component (e.g., a button) that triggers the modal.",
-    ),
-  contentChild: z
-    .string()
-    .describe("The ID of the component to display as the modal's content."),
+    .describe('The ID of the component (e.g., a button) that triggers the modal.'),
+  contentChild: z.string().describe("The ID of the component to display as the modal's content."),
 });
 
 export const ButtonSchema = z.object({
-  child: z
-    .string()
-    .describe("The ID of the component to display as the button's content."),
-  action: ActionSchema.describe("Represents a user-initiated action."),
+  child: z.string().describe("The ID of the component to display as the button's content."),
+  action: ActionSchema.describe('Represents a user-initiated action.'),
   primary: z
     .boolean()
     .optional()
-    .describe(
-      "Indicates if this button should be styled as the primary action."
-    ),
+    .describe('Indicates if this button should be styled as the primary action.'),
 });
 
 export const CheckboxSchema = z.object({
@@ -291,9 +255,7 @@ export const CheckboxSchema = z.object({
     .object({
       path: z
         .string()
-        .describe(
-          "A data binding reference to a location in the data model (e.g., '/user/name').",
-        )
+        .describe("A data binding reference to a location in the data model (e.g., '/user/name').")
         .optional(),
       literalBoolean: z.boolean().optional(),
     })
@@ -303,12 +265,9 @@ export const CheckboxSchema = z.object({
 
 export const TextFieldSchema = z.object({
   text: StringValueSchema.optional(),
-  label: StringValueSchema.describe("A label, title, or placeholder text."),
-  textFieldType: z.enum(["shortText", "number", "date", "longText", "obscured"]).optional(),
-  validationRegexp: z
-    .string()
-    .optional()
-    .describe("A regex string to validate the input."),
+  label: StringValueSchema.describe('A label, title, or placeholder text.'),
+  textFieldType: z.enum(['shortText', 'number', 'date', 'longText', 'obscured']).optional(),
+  validationRegexp: z.string().optional().describe('A regex string to validate the input.'),
 });
 
 export const DateTimeInputSchema = z.object({
@@ -326,9 +285,7 @@ export const MultipleChoiceSchema = z.object({
     .object({
       path: z
         .string()
-        .describe(
-          "A data binding reference to a location in the data model (e.g., '/user/name').",
-        )
+        .describe("A data binding reference to a location in the data model (e.g., '/user/name').")
         .optional(),
       literalArray: z.array(z.string()).optional(),
     })
@@ -345,10 +302,7 @@ export const MultipleChoiceSchema = z.object({
                 "A data binding reference to a location in the data model (e.g., '/user/name').",
               )
               .optional(),
-            literalString: z
-              .string()
-              .describe("A fixed, hardcoded string value.")
-              .optional(),
+            literalString: z.string().describe('A fixed, hardcoded string value.').optional(),
           })
           .strict()
           .superRefine(exactlyOneKey),
@@ -357,7 +311,7 @@ export const MultipleChoiceSchema = z.object({
     )
     .optional(),
   maxAllowedSelections: z.number().optional(),
-  type: z.enum(["checkbox", "chips"]).optional(),
+  type: z.enum(['checkbox', 'chips']).optional(),
   filterable: z.boolean().optional(),
 });
 
@@ -366,9 +320,7 @@ export const SliderSchema = z.object({
     .object({
       path: z
         .string()
-        .describe(
-          "A data binding reference to a location in the data model (e.g., '/user/name').",
-        )
+        .describe("A data binding reference to a location in the data model (e.g., '/user/name').")
         .optional(),
       literalNumber: z.number().optional(),
     })
@@ -388,7 +340,7 @@ export const ComponentArrayReferenceSchema = z
   .object({
     explicitList: z.array(z.string()).optional(),
     template: ComponentArrayTemplateSchema.describe(
-      "A template for generating a dynamic list of children from a data model list. `componentId` is the component to use as a template, and `dataBinding` is the path to the map of components in the data model. Values in the map will define the list of children.",
+      'A template for generating a dynamic list of children from a data model list. `componentId` is the component to use as a template, and `dataBinding` is the path to the map of components in the data model. Values in the map will define the list of children.',
     ).optional(),
   })
   .strict()
@@ -397,41 +349,25 @@ export const ComponentArrayReferenceSchema = z
 export const RowSchema = z.object({
   children: ComponentArrayReferenceSchema,
   distribution: z
-    .enum([
-      "start",
-      "center",
-      "end",
-      "spaceBetween",
-      "spaceAround",
-      "spaceEvenly",
-    ])
+    .enum(['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly'])
     .optional(),
-  alignment: z.enum(["start", "center", "end", "stretch"]).optional(),
+  alignment: z.enum(['start', 'center', 'end', 'stretch']).optional(),
 });
 
 export const ColumnSchema = z.object({
   children: ComponentArrayReferenceSchema,
   distribution: z
-    .enum([
-      "start",
-      "center",
-      "end",
-      "spaceBetween",
-      "spaceAround",
-      "spaceEvenly",
-    ])
+    .enum(['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly'])
     .optional(),
-  alignment: z.enum(["start", "center", "end", "stretch"]).optional(),
+  alignment: z.enum(['start', 'center', 'end', 'stretch']).optional(),
 });
 
 export const ListSchema = z.object({
   children: ComponentArrayReferenceSchema,
-  direction: z.enum(["vertical", "horizontal"]).optional(),
-  alignment: z.enum(["start", "center", "end", "stretch"]).optional(),
+  direction: z.enum(['vertical', 'horizontal']).optional(),
+  alignment: z.enum(['start', 'center', 'end', 'stretch']).optional(),
 });
 
 export const CardSchema = z.object({
-  child: z
-    .string()
-    .describe("The ID of the component to be rendered inside the card."),
+  child: z.string().describe('The ID of the component to be rendered inside the card.'),
 });
diff --git a/renderers/web_core/src/v0_8/schema/server-to-client.ts b/renderers/web_core/src/v0_8/schema/server-to-client.ts
index 6663d92f0..3707b46d1 100644
--- a/renderers/web_core/src/v0_8/schema/server-to-client.ts
+++ b/renderers/web_core/src/v0_8/schema/server-to-client.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { z } from "zod";
+import {z} from 'zod';
 import {
   AudioPlayerSchema,
   ButtonSchema,
@@ -35,7 +35,7 @@ import {
   TextSchema,
   VideoSchema,
   DataValueSchema,
-} from "./common-types.js";
+} from './common-types.js';
 
 const validateValueProperty = (val: any, ctx: z.RefinementCtx) => {
   let count = 0;
@@ -82,7 +82,7 @@ export const ComponentPropertiesSchema = AnyComponentSchema;
 
 export const ComponentInstanceSchema = z
   .object({
-    id: z.string().describe("The unique identifier for this component."),
+    id: z.string().describe('The unique identifier for this component.'),
     weight: z
       .number()
       .optional()
@@ -95,39 +95,35 @@ export const ComponentInstanceSchema = z
   })
   .strict()
   .describe(
-    "Represents a *single* component in a UI widget tree. This component could be one of many supported types.",
+    'Represents a *single* component in a UI widget tree. This component could be one of many supported types.',
   );
 
 export const BeginRenderingMessageSchema = z
   .object({
-    surfaceId: z
-      .string()
-      .describe("The unique identifier for the UI surface to be rendered."),
+    surfaceId: z.string().describe('The unique identifier for the UI surface to be rendered.'),
     catalogId: z
       .string()
       .optional()
       .describe(
-        "The identifier of the component catalog to use for this surface. If omitted, the client MUST default to the standard catalog for this A2UI version (https://a2ui.org/specification/v0_8/standard_catalog_definition.json).",
+        'The identifier of the component catalog to use for this surface. If omitted, the client MUST default to the standard catalog for this A2UI version (https://a2ui.org/specification/v0_8/standard_catalog_definition.json).',
       ),
-    root: z.string().describe("The ID of the root component to render."),
+    root: z.string().describe('The ID of the root component to render.'),
     styles: z
       .object({
-        font: z.string().optional().describe("The primary font for the UI."),
+        font: z.string().optional().describe('The primary font for the UI.'),
         primaryColor: z
           .string()
           .regex(/^#[0-9a-fA-F]{6}$/)
           .optional()
-          .describe(
-            "The primary UI color as a hexadecimal code (e.g., '#00BFFF').",
-          ),
+          .describe("The primary UI color as a hexadecimal code (e.g., '#00BFFF')."),
       })
       .strict()
       .optional()
-      .describe("Styling information for the UI."),
+      .describe('Styling information for the UI.'),
   })
   .strict()
   .describe(
-    "Signals the client to begin rendering a surface with a root component and specific styles.",
+    'Signals the client to begin rendering a surface with a root component and specific styles.',
   );
 
 export const SurfaceUpdateMessageSchema = z
@@ -135,12 +131,12 @@ export const SurfaceUpdateMessageSchema = z
     surfaceId: z
       .string()
       .describe(
-        "The unique identifier for the UI surface to be updated. If you are adding a new surface this *must* be a new, unique identified that has never been used for any existing surfaces shown.",
+        'The unique identifier for the UI surface to be updated. If you are adding a new surface this *must* be a new, unique identified that has never been used for any existing surfaces shown.',
       ),
     components: z
       .array(ComponentInstanceSchema)
       .min(1)
-      .describe("A list containing all UI components for the surface."),
+      .describe('A list containing all UI components for the surface.'),
   })
   .strict()
   .superRefine((data, ctx) => {
@@ -151,7 +147,7 @@ export const SurfaceUpdateMessageSchema = z
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: `Duplicate component ID found: ${c.id}`,
-            path: ["components"],
+            path: ['components'],
           });
         }
         componentIds.add(c.id);
@@ -164,7 +160,7 @@ export const SurfaceUpdateMessageSchema = z
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: `Component '${componentId}' references non-existent component ID '${id}'.`,
-            path: ["components"],
+            path: ['components'],
           });
         }
       }
@@ -179,61 +175,48 @@ export const SurfaceUpdateMessageSchema = z
       const properties: any = (component.component as any)[componentType];
 
       switch (componentType) {
-        case "Row":
-        case "Column":
-        case "List":
+        case 'Row':
+        case 'Column':
+        case 'List':
           if (properties.children && !Array.isArray(properties.children)) {
             const hasExplicit = !!properties.children.explicitList;
             const hasTemplate = !!properties.children.template;
-            if (
-              (hasExplicit && hasTemplate) ||
-              (!hasExplicit && !hasTemplate)
-            ) {
+            if ((hasExplicit && hasTemplate) || (!hasExplicit && !hasTemplate)) {
               ctx.addIssue({
                 code: z.ZodIssueCode.custom,
                 message: `Component '${component.id}' must have either 'explicitList' or 'template' in children, but not both or neither.`,
               });
             }
-            if (hasExplicit)
-              checkRefs(properties.children.explicitList, component.id);
-            if (hasTemplate)
-              checkRefs(
-                [properties.children.template?.componentId],
-                component.id,
-              );
+            if (hasExplicit) checkRefs(properties.children.explicitList, component.id);
+            if (hasTemplate) checkRefs([properties.children.template?.componentId], component.id);
           }
           break;
-        case "Card":
+        case 'Card':
           if (properties.child) checkRefs([properties.child], component.id);
           break;
-        case "Tabs":
+        case 'Tabs':
           if (properties.tabItems && Array.isArray(properties.tabItems)) {
             properties.tabItems.forEach((tab: any) => {
               if (tab.child) checkRefs([tab.child], component.id);
             });
           }
           break;
-        case "Modal":
-          checkRefs(
-            [properties.entryPointChild, properties.contentChild],
-            component.id,
-          );
+        case 'Modal':
+          checkRefs([properties.entryPointChild, properties.contentChild], component.id);
           break;
-        case "Button":
+        case 'Button':
           if (properties.child) checkRefs([properties.child], component.id);
           break;
       }
     }
   })
-  .describe("Updates a surface with a new set of components.");
+  .describe('Updates a surface with a new set of components.');
 
 export const DataModelUpdateMessageSchema = z
   .object({
     surfaceId: z
       .string()
-      .describe(
-        "The unique identifier for the UI surface this data model update applies to.",
-      ),
+      .describe('The unique identifier for the UI surface this data model update applies to.'),
     path: z
       .string()
       .optional()
@@ -247,18 +230,14 @@ export const DataModelUpdateMessageSchema = z
       ),
   })
   .strict()
-  .describe("Updates the data model for a surface.");
+  .describe('Updates the data model for a surface.');
 
 export const DeleteSurfaceMessageSchema = z
   .object({
-    surfaceId: z
-      .string()
-      .describe("The unique identifier for the UI surface to be deleted."),
+    surfaceId: z.string().describe('The unique identifier for the UI surface to be deleted.'),
   })
   .strict()
-  .describe(
-    "Signals the client to delete the surface identified by 'surfaceId'.",
-  );
+  .describe("Signals the client to delete the surface identified by 'surfaceId'.");
 
 export const A2uiMessageSchema = z
   .object({
@@ -269,19 +248,14 @@ export const A2uiMessageSchema = z
   })
   .strict()
   .superRefine((data, ctx) => {
-    const keys = Object.keys(data).filter((k) =>
-      [
-        "beginRendering",
-        "surfaceUpdate",
-        "dataModelUpdate",
-        "deleteSurface",
-      ].includes(k),
+    const keys = Object.keys(data).filter(k =>
+      ['beginRendering', 'surfaceUpdate', 'dataModelUpdate', 'deleteSurface'].includes(k),
     );
     if (keys.length !== 1) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message:
-          "A2UI Protocol message must have exactly one of: surfaceUpdate, dataModelUpdate, beginRendering, deleteSurface.",
+          'A2UI Protocol message must have exactly one of: surfaceUpdate, dataModelUpdate, beginRendering, deleteSurface.',
       });
     }
   })
diff --git a/renderers/web_core/src/v0_8/schema/verify-schema.test.ts b/renderers/web_core/src/v0_8/schema/verify-schema.test.ts
index 00ccf3421..dae69c862 100644
--- a/renderers/web_core/src/v0_8/schema/verify-schema.test.ts
+++ b/renderers/web_core/src/v0_8/schema/verify-schema.test.ts
@@ -14,38 +14,32 @@
  * limitations under the License.
  */
 
-import { describe, it } from "node:test";
-import * as assert from "node:assert";
-import { zodToJsonSchema } from "zod-to-json-schema";
-import { readFileSync } from "fs";
-import { resolve, join, dirname } from "path";
-import { fileURLToPath } from "url";
-import { A2uiMessageSchema as V08A2uiMessageSchema } from "./server-to-client.js";
+import {describe, it} from 'node:test';
+import * as assert from 'node:assert';
+import {zodToJsonSchema} from 'zod-to-json-schema';
+import {readFileSync} from 'fs';
+import {resolve, join, dirname} from 'path';
+import {fileURLToPath} from 'url';
+import {A2uiMessageSchema as V08A2uiMessageSchema} from './server-to-client.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 // `__dirname` will be `dist/src/v0_9/schema` when run via `node --test dist/**/*.test.js`
 
-const SPEC_DIR_V0_8 = resolve(
-  __dirname,
-  "../../../../../../specification/v0_8/json",
-);
+const SPEC_DIR_V0_8 = resolve(__dirname, '../../../../../../specification/v0_8/json');
 
 // Parse both so we can do structural comparison rather than formatting
 // Compare definitions specifically, ignoring descriptions
 function compareDefinitions(zodDefs: any, jsonDefs: any): Record<string, any> {
   const diff: Record<string, any> = {};
-  const keys = new Set([
-    ...Object.keys(zodDefs || {}),
-    ...Object.keys(jsonDefs || {}),
-  ]);
+  const keys = new Set([...Object.keys(zodDefs || {}), ...Object.keys(jsonDefs || {})]);
 
   for (const key of keys) {
-    if (key === "A2uiMessage") continue; // Zod wrapper artifact
+    if (key === 'A2uiMessage') continue; // Zod wrapper artifact
 
-    if (!zodDefs[key]) diff[key] = { error: "Missing in Zod schema" };
-    else if (!jsonDefs[key]) diff[key] = { error: "Missing in JSON schema" };
+    if (!zodDefs[key]) diff[key] = {error: 'Missing in Zod schema'};
+    else if (!jsonDefs[key]) diff[key] = {error: 'Missing in JSON schema'};
     else {
       const defDiff = getObjectDiff(zodDefs[key], jsonDefs[key]);
       if (Object.keys(defDiff).length > 0) {
@@ -56,16 +50,13 @@ function compareDefinitions(zodDefs: any, jsonDefs: any): Record<string, any> {
   return diff;
 }
 
-function getObjectDiff(obj1: any, obj2: any, path = ""): Record<string, any> {
+function getObjectDiff(obj1: any, obj2: any, path = ''): Record<string, any> {
   const diff: Record<string, any> = {};
 
   // Ignore descriptions in strict structural comparison
-  const ignoreKeys = new Set(["description", "title", "$id", "$schema"]);
+  const ignoreKeys = new Set(['description', 'title', '$id', '$schema']);
 
-  const keys = new Set([
-    ...Object.keys(obj1 || {}),
-    ...Object.keys(obj2 || {}),
-  ]);
+  const keys = new Set([...Object.keys(obj1 || {}), ...Object.keys(obj2 || {})]);
 
   for (const key of keys) {
     if (ignoreKeys.has(key)) continue;
@@ -75,20 +66,13 @@ function getObjectDiff(obj1: any, obj2: any, path = ""): Record<string, any> {
     let val2 = obj2 ? obj2[key] : undefined;
 
     // Zod emits `type: "string"` for consts, whereas JSON Schema infers it.
-    if (
-      path.endsWith("version") &&
-      key === "type" &&
-      val1 === "string" &&
-      val2 === undefined
-    ) {
+    if (path.endsWith('version') && key === 'type' && val1 === 'string' && val2 === undefined) {
       continue;
     }
 
     // Zod doesn't emit additionalProperties: true by default, but it's the default
     if (
-      currentPath.endsWith(
-        "updateDataModel.properties.value.additionalProperties",
-      ) &&
+      currentPath.endsWith('updateDataModel.properties.value.additionalProperties') &&
       val1 === undefined &&
       val2 === true
     ) {
@@ -97,37 +81,32 @@ function getObjectDiff(obj1: any, obj2: any, path = ""): Record<string, any> {
 
     // Zod resolves the AnyComponentSchema instead of preserving the $ref because we imported it.
     // The JSON spec uses a `$ref` to `catalog.json`
-    if (currentPath.includes("components.items")) {
+    if (currentPath.includes('components.items')) {
       continue;
     }
 
     // Zod defines theme as any (no validation), while JSON spec references catalog.json theme schema
     if (
-      currentPath.includes("theme.$ref") &&
+      currentPath.includes('theme.$ref') &&
       val1 === undefined &&
-      val2 === "catalog.json#/$defs/theme"
+      val2 === 'catalog.json#/$defs/theme'
     ) {
       continue;
     }
 
     // The A2UI v0.8 JSON spec inadvertently omitted recursion for valueMap,
     // but the runtime and agent examples rely on it. Skip this difference.
-    if (currentPath.includes("valueMap.items.properties.valueMap")) {
+    if (currentPath.includes('valueMap.items.properties.valueMap')) {
       continue;
     }
 
-    if (
-      typeof val1 === "object" &&
-      val1 !== null &&
-      typeof val2 === "object" &&
-      val2 !== null
-    ) {
+    if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
       if (Array.isArray(val1) && Array.isArray(val2)) {
         // Sort arrays to ignore order differences (like `required`)
         const sortedVal1 = [...val1].sort();
         const sortedVal2 = [...val2].sort();
         if (JSON.stringify(sortedVal1) !== JSON.stringify(sortedVal2)) {
-          diff[currentPath] = { zod: val1, json: val2 };
+          diff[currentPath] = {zod: val1, json: val2};
         }
       } else {
         const nestedDiff = getObjectDiff(val1, val2, currentPath);
@@ -136,7 +115,7 @@ function getObjectDiff(obj1: any, obj2: any, path = ""): Record<string, any> {
         }
       }
     } else if (val1 !== val2) {
-      diff[currentPath] = { zod: val1, json: val2 };
+      diff[currentPath] = {zod: val1, json: val2};
     }
   }
 
@@ -153,16 +132,16 @@ function verifySchema(
   // Generate JSON Schema from Zod
   const jsonSchemaString = JSON.stringify(
     zodToJsonSchema(zodSchemaSpec, {
-      target: "jsonSchema2019-09", // Better matches draft 2020-12
+      target: 'jsonSchema2019-09', // Better matches draft 2020-12
       definitions: definitionsMap || {},
-      name: "A2uiMessage",
+      name: 'A2uiMessage',
     }),
     null,
     2,
   );
 
   // Load the official schema
-  const officialSchemaString = readFileSync(jsonSpecPath, "utf-8");
+  const officialSchemaString = readFileSync(jsonSpecPath, 'utf-8');
 
   // Extract the definitions
   const generatedSchema = JSON.parse(jsonSchemaString);
@@ -184,15 +163,13 @@ function verifySchema(
   }
 
   const rootZodSchema =
-    (generatedSchema.definitions || generatedSchema.$defs || {})[
-      "A2uiMessage"
-    ] || {};
+    (generatedSchema.definitions || generatedSchema.$defs || {})['A2uiMessage'] || {};
 
   if (officialSchema.oneOf || officialSchema.anyOf) {
     const zodOneOf = rootZodSchema.anyOf || rootZodSchema.oneOf || [];
     const normalizedGeneratedOneOf = zodOneOf.map((schema: any) => {
-      if (schema.$ref && schema.$ref.startsWith("#/definitions/")) {
-        return { $ref: schema.$ref.replace("#/definitions/", "#/$defs/") };
+      if (schema.$ref && schema.$ref.startsWith('#/definitions/')) {
+        return {$ref: schema.$ref.replace('#/definitions/', '#/$defs/')};
       }
       return schema;
     });
@@ -209,10 +186,7 @@ function verifySchema(
       );
     }
   } else if (officialSchema.properties) {
-    const topLevelDiff = getObjectDiff(
-      rootZodSchema.properties,
-      officialSchema.properties,
-    );
+    const topLevelDiff = getObjectDiff(rootZodSchema.properties, officialSchema.properties);
     if (Object.keys(topLevelDiff).length > 0) {
       assert.deepStrictEqual(
         topLevelDiff,
@@ -225,12 +199,12 @@ function verifySchema(
   console.log(`Zod schema structurally matches the ${version} JSON spec!`);
 }
 
-describe("A2UI Schema Verification v0.8", () => {
-  it("verifies v0.8 schema", () => {
+describe('A2UI Schema Verification v0.8', () => {
+  it('verifies v0.8 schema', () => {
     verifySchema(
-      "v0.8",
+      'v0.8',
       V08A2uiMessageSchema,
-      join(SPEC_DIR_V0_8, "server_to_client_with_standard_catalog.json"),
+      join(SPEC_DIR_V0_8, 'server_to_client_with_standard_catalog.json'),
     );
   });
 });
diff --git a/renderers/web_core/src/v0_8/styles/behavior.ts b/renderers/web_core/src/v0_8/styles/behavior.ts
index ab5b4ace6..cccc4e02a 100644
--- a/renderers/web_core/src/v0_8/styles/behavior.ts
+++ b/renderers/web_core/src/v0_8/styles/behavior.ts
@@ -35,7 +35,7 @@ export const behavior = `
           ${opacityBehavior}
         }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   .behavior-o-s {
     overflow: scroll;
diff --git a/renderers/web_core/src/v0_8/styles/border.ts b/renderers/web_core/src/v0_8/styles/border.ts
index abdffb28e..7aaf9393a 100644
--- a/renderers/web_core/src/v0_8/styles/border.ts
+++ b/renderers/web_core/src/v0_8/styles/border.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { grid } from "./shared.js";
+import {grid} from './shared.js';
 
 export const border = `
   ${new Array(25)
@@ -30,7 +30,7 @@ export const border = `
         .border-ow-${idx} { outline-width: ${idx}px; }
         .border-br-${idx} { border-radius: ${idx * grid}px; overflow: hidden;}`;
     })
-    .join("\n")}
+    .join('\n')}
 
   .border-br-50pc {
     border-radius: 50%;
diff --git a/renderers/web_core/src/v0_8/styles/colors.ts b/renderers/web_core/src/v0_8/styles/colors.ts
index 73b943e40..4ca20fd62 100644
--- a/renderers/web_core/src/v0_8/styles/colors.ts
+++ b/renderers/web_core/src/v0_8/styles/colors.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { PaletteKey, PaletteKeyVals, shades } from "../types/colors.js";
-import { toProp } from "./utils.js";
+import {PaletteKey, PaletteKeyVals, shades} from '../types/colors.js';
+import {toProp} from './utils.js';
 
 const color = <C extends PaletteKeyVals>(src: PaletteKey<C>) =>
   `
@@ -26,7 +26,7 @@ const color = <C extends PaletteKeyVals>(src: PaletteKey<C>) =>
           key,
         )}), var(${toProp(inverseKey)})); }`;
       })
-      .join("\n")}
+      .join('\n')}
 
     ${src
       .map((key: string) => {
@@ -51,9 +51,9 @@ const color = <C extends PaletteKeyVals>(src: PaletteKey<C>) =>
         `);
         }
 
-        return vals.join("\n");
+        return vals.join('\n');
       })
-      .join("\n")}
+      .join('\n')}
 
   ${src
     .map((key: string) => {
@@ -62,7 +62,7 @@ const color = <C extends PaletteKeyVals>(src: PaletteKey<C>) =>
         key,
       )}), var(${toProp(inverseKey)})); }`;
     })
-    .join("\n")}
+    .join('\n')}
   `;
 
 const getInverseKey = (key: string): string => {
@@ -78,16 +78,16 @@ const getInverseKey = (key: string): string => {
 };
 
 const keyFactory = <K extends PaletteKeyVals>(prefix: K) => {
-  return shades.map((v) => `${prefix}${v}`) as PaletteKey<K>;
+  return shades.map(v => `${prefix}${v}`) as PaletteKey<K>;
 };
 
 export const colors = [
-  color(keyFactory("p")),
-  color(keyFactory("s")),
-  color(keyFactory("t")),
-  color(keyFactory("n")),
-  color(keyFactory("nv")),
-  color(keyFactory("e")),
+  color(keyFactory('p')),
+  color(keyFactory('s')),
+  color(keyFactory('t')),
+  color(keyFactory('n')),
+  color(keyFactory('nv')),
+  color(keyFactory('e')),
   `
     .color-bgc-transparent {
       background-color: transparent;
diff --git a/renderers/web_core/src/v0_8/styles/index.ts b/renderers/web_core/src/v0_8/styles/index.ts
index 50d72c801..512928d7a 100644
--- a/renderers/web_core/src/v0_8/styles/index.ts
+++ b/renderers/web_core/src/v0_8/styles/index.ts
@@ -14,24 +14,16 @@
  * limitations under the License.
  */
 
-import { behavior } from "./behavior.js";
-import { border } from "./border.js";
-import { colors } from "./colors.js";
-import { icons } from "./icons.js";
-import { layout } from "./layout.js";
-import { opacity } from "./opacity.js";
-import { type } from "./type.js";
+import {behavior} from './behavior.js';
+import {border} from './border.js';
+import {colors} from './colors.js';
+import {icons} from './icons.js';
+import {layout} from './layout.js';
+import {opacity} from './opacity.js';
+import {type} from './type.js';
 
-export * from "./utils.js";
+export * from './utils.js';
 
-export const structuralStyles: string = [
-  behavior,
-  border,
-  colors,
-  icons,
-  layout,
-  opacity,
-  type,
-]
+export const structuralStyles: string = [behavior, border, colors, icons, layout, opacity, type]
   .flat(Infinity)
-  .join("\n");
+  .join('\n');
diff --git a/renderers/web_core/src/v0_8/styles/layout.ts b/renderers/web_core/src/v0_8/styles/layout.ts
index 789a06d42..4c7268afe 100644
--- a/renderers/web_core/src/v0_8/styles/layout.ts
+++ b/renderers/web_core/src/v0_8/styles/layout.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { grid } from "./shared.js";
+import {grid} from './shared.js';
 
 export const layout = `
   :host {
@@ -23,7 +23,7 @@ export const layout = `
       .map((_, idx) => {
         return `--g-${idx + 1}: ${(idx + 1) * grid}px;`;
       })
-      .join("\n")}
+      .join('\n')}
   }
 
   ${new Array(49)
@@ -32,9 +32,7 @@ export const layout = `
       const idx = index - 24;
       const lbl = idx < 0 ? `n${Math.abs(idx)}` : idx.toString();
       return `
-        .layout-p-${lbl} { --padding: ${
-          idx * grid
-        }px; padding: var(--padding); }
+        .layout-p-${lbl} { --padding: ${idx * grid}px; padding: var(--padding); }
         .layout-pt-${lbl} { padding-top: ${idx * grid}px; }
         .layout-pr-${lbl} { padding-right: ${idx * grid}px; }
         .layout-pb-${lbl} { padding-bottom: ${idx * grid}px; }
@@ -51,7 +49,7 @@ export const layout = `
         .layout-b-${lbl} { bottom: ${idx * grid}px; }
         .layout-l-${lbl} { left: ${idx * grid}px; }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   ${new Array(25)
     .fill(0)
@@ -59,17 +57,15 @@ export const layout = `
       return `
         .layout-g-${idx} { gap: ${idx * grid}px; }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   ${new Array(8)
     .fill(0)
     .map((_, idx) => {
       return `
-        .layout-grd-col${idx + 1} { grid-template-columns: ${"1fr "
-          .repeat(idx + 1)
-          .trim()}; }`;
+        .layout-grd-col${idx + 1} { grid-template-columns: ${'1fr '.repeat(idx + 1).trim()}; }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   .layout-pos-a {
     position: absolute;
@@ -185,7 +181,7 @@ export const layout = `
       const weight = (idx + 1) * 10;
       return `.layout-w-${weight} { width: ${weight}%; max-width: ${weight}%; }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   ${new Array(16)
     .fill(0)
@@ -193,7 +189,7 @@ export const layout = `
       const weight = idx * grid;
       return `.layout-wp-${idx} { width: ${weight}px; }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   /** Heights **/
 
@@ -203,7 +199,7 @@ export const layout = `
       const height = (idx + 1) * 10;
       return `.layout-h-${height} { height: ${height}%; }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   ${new Array(16)
     .fill(0)
@@ -211,7 +207,7 @@ export const layout = `
       const height = idx * grid;
       return `.layout-hp-${idx} { height: ${height}px; }`;
     })
-    .join("\n")}
+    .join('\n')}
 
   .layout-el-cv {
     & img,
diff --git a/renderers/web_core/src/v0_8/styles/opacity.ts b/renderers/web_core/src/v0_8/styles/opacity.ts
index cba5bf774..cc90af4ce 100644
--- a/renderers/web_core/src/v0_8/styles/opacity.ts
+++ b/renderers/web_core/src/v0_8/styles/opacity.ts
@@ -20,5 +20,5 @@ export const opacity = `
     .map((_, idx) => {
       return `.opacity-el-${idx * 5} { opacity: ${idx / 20}; }`;
     })
-    .join("\n")}
+    .join('\n')}
 `;
diff --git a/renderers/web_core/src/v0_8/styles/styles.test.ts b/renderers/web_core/src/v0_8/styles/styles.test.ts
index 27ad860c0..d59cf8202 100644
--- a/renderers/web_core/src/v0_8/styles/styles.test.ts
+++ b/renderers/web_core/src/v0_8/styles/styles.test.ts
@@ -14,89 +14,89 @@
  * limitations under the License.
  */
 
-import { describe, it } from "node:test";
-import * as assert from "node:assert";
-import { merge, appendToAll, createThemeStyles, toProp } from "./utils.js";
-
-describe("Styles Utils", () => {
-  describe("merge", () => {
-    it("merges multiple class objects", () => {
-      const cls1 = { "text-red": true, "bg-blue": true };
-      const cls2 = { "text-green": true };
+import {describe, it} from 'node:test';
+import * as assert from 'node:assert';
+import {merge, appendToAll, createThemeStyles, toProp} from './utils.js';
+
+describe('Styles Utils', () => {
+  describe('merge', () => {
+    it('merges multiple class objects', () => {
+      const cls1 = {'text-red': true, 'bg-blue': true};
+      const cls2 = {'text-green': true};
       const result = merge(cls1, cls2);
 
       // text-red should be removed because text-green shares prefix 'text-'
-      assert.strictEqual(result["text-red"], undefined);
-      assert.strictEqual(result["text-green"], true);
-      assert.strictEqual(result["bg-blue"], true);
+      assert.strictEqual(result['text-red'], undefined);
+      assert.strictEqual(result['text-green'], true);
+      assert.strictEqual(result['bg-blue'], true);
     });
 
-    it("handles complex prefixes", () => {
-      const result = merge({ "border-t-2": true }, { "border-t-4": true });
-      assert.strictEqual(result["border-t-2"], undefined);
-      assert.strictEqual(result["border-t-4"], true);
+    it('handles complex prefixes', () => {
+      const result = merge({'border-t-2': true}, {'border-t-4': true});
+      assert.strictEqual(result['border-t-2'], undefined);
+      assert.strictEqual(result['border-t-4'], true);
     });
   });
 
-  describe("appendToAll", () => {
-    it("appends classes to target", () => {
+  describe('appendToAll', () => {
+    it('appends classes to target', () => {
       const target = {
-        div: ["base-class"],
-        span: ["other-class"],
+        div: ['base-class'],
+        span: ['other-class'],
       };
 
-      const result = appendToAll(target, [], { "text-red": true });
+      const result = appendToAll(target, [], {'text-red': true});
 
-      assert.deepStrictEqual(result["div"], ["base-class", "text-red"]);
-      assert.deepStrictEqual(result["span"], ["other-class", "text-red"]);
+      assert.deepStrictEqual(result['div'], ['base-class', 'text-red']);
+      assert.deepStrictEqual(result['span'], ['other-class', 'text-red']);
     });
 
-    it("replaces classes with same prefix", () => {
+    it('replaces classes with same prefix', () => {
       const target = {
-        div: ["text-blue"],
+        div: ['text-blue'],
       };
 
-      const result = appendToAll(target, [], { "text-red": true });
+      const result = appendToAll(target, [], {'text-red': true});
 
-      assert.deepStrictEqual(result["div"], ["text-red"]);
+      assert.deepStrictEqual(result['div'], ['text-red']);
     });
 
-    it("respects exclusions", () => {
+    it('respects exclusions', () => {
       const target = {
-        div: ["base"],
-        excluded: ["base"],
+        div: ['base'],
+        excluded: ['base'],
       };
 
-      const result = appendToAll(target, ["excluded"], { "new-class": true });
+      const result = appendToAll(target, ['excluded'], {'new-class': true});
 
-      assert.deepStrictEqual(result["div"], ["base", "new-class"]);
-      assert.deepStrictEqual(result["excluded"], ["base"]);
+      assert.deepStrictEqual(result['div'], ['base', 'new-class']);
+      assert.deepStrictEqual(result['excluded'], ['base']);
     });
   });
 
-  describe("toProp", () => {
-    it("converts nv- keys", () => {
-      assert.strictEqual(toProp("nv10"), "--nv-10");
+  describe('toProp', () => {
+    it('converts nv- keys', () => {
+      assert.strictEqual(toProp('nv10'), '--nv-10');
     });
 
-    it("converts other keys", () => {
+    it('converts other keys', () => {
       // p20 -> --p-20
-      assert.strictEqual(toProp("p20"), "--p-20");
+      assert.strictEqual(toProp('p20'), '--p-20');
     });
   });
 
-  describe("createThemeStyles", () => {
-    it("creates css variables from palette", () => {
+  describe('createThemeStyles', () => {
+    it('creates css variables from palette', () => {
       const palette = {
         primary: {
-          nv10: "red",
-          p20: "blue",
+          nv10: 'red',
+          p20: 'blue',
         },
       };
 
       const styles = createThemeStyles(palette as any);
-      assert.strictEqual(styles["--nv-10"], "red");
-      assert.strictEqual(styles["--p-20"], "blue");
+      assert.strictEqual(styles['--nv-10'], 'red');
+      assert.strictEqual(styles['--p-20'], 'blue');
     });
   });
 });
diff --git a/renderers/web_core/src/v0_8/styles/type.ts b/renderers/web_core/src/v0_8/styles/type.ts
index f605599f6..e23dafb56 100644
--- a/renderers/web_core/src/v0_8/styles/type.ts
+++ b/renderers/web_core/src/v0_8/styles/type.ts
@@ -152,5 +152,5 @@ export const type = `
       const weight = (idx + 1) * 100;
       return `.typography-w-${weight} { font-weight: ${weight}; }`;
     })
-    .join("\n")}
+    .join('\n')}
 `;
diff --git a/renderers/web_core/src/v0_8/styles/utils.ts b/renderers/web_core/src/v0_8/styles/utils.ts
index ce37d64fd..e2d3f2286 100644
--- a/renderers/web_core/src/v0_8/styles/utils.ts
+++ b/renderers/web_core/src/v0_8/styles/utils.ts
@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 
-import { ColorPalettes } from "../types/colors.js";
+import {ColorPalettes} from '../types/colors.js';
 
 export function merge(...classes: Array<Record<string, boolean>>) {
   const styles: Record<string, boolean> = {};
   for (const clazz of classes) {
     for (const [key, val] of Object.entries(clazz)) {
-      const prefix = key.split("-").with(-1, "").join("-");
-      const existingKeys = Object.keys(styles).filter((key) =>
-        key.startsWith(prefix),
-      );
+      const prefix = key.split('-').with(-1, '').join('-');
+      const existingKeys = Object.keys(styles).filter(key => key.startsWith(prefix));
 
       for (const existingKey of existingKeys) {
         delete styles[existingKey];
@@ -49,7 +47,7 @@ export function appendToAll(
     // and all matches across the target that have the same prefix and swap them
     // out for the updated item.
     for (const key of Object.keys(clazz)) {
-      const prefix = key.split("-").with(-1, "").join("-");
+      const prefix = key.split('-').with(-1, '').join('-');
 
       // Now we have the prefix step through all iteme in the target, and
       // replace the value in the array when we find it.
@@ -81,9 +79,7 @@ export function appendToAll(
   return updatedTarget;
 }
 
-export function createThemeStyles(
-  palettes: ColorPalettes,
-): Record<string, string> {
+export function createThemeStyles(palettes: ColorPalettes): Record<string, string> {
   const styles: Record<string, string> = {};
   for (const palette of Object.values(palettes)) {
     for (const [key, val] of Object.entries(palette)) {
@@ -96,7 +92,7 @@ export function createThemeStyles(
 }
 
 export function toProp(key: string) {
-  if (key.startsWith("nv")) {
+  if (key.startsWith('nv')) {
     return `--nv-${key.slice(2)}`;
   }
 
diff --git a/renderers/web_core/src/v0_8/types/client-event.ts b/renderers/web_core/src/v0_8/types/client-event.ts
index 8f03b4420..6e99db35a 100644
--- a/renderers/web_core/src/v0_8/types/client-event.ts
+++ b/renderers/web_core/src/v0_8/types/client-event.ts
@@ -22,8 +22,8 @@
 
 export type ClientCapabilitiesUri = string;
 export declare interface ClientCapabilitiesDynamic {
-  components: { [key: string]: unknown };
-  styles: { [key: string]: unknown };
+  components: {[key: string]: unknown};
+  styles: {[key: string]: unknown};
 }
 
 export declare interface ClientCapabilitiesCatalogUri {
@@ -34,9 +34,7 @@ export declare interface ClientCapabilitiesDynamicCatalog {
   dynamicCatalog: ClientCapabilitiesDynamic;
 }
 
-export type ClientCapabilities =
-  | ClientCapabilitiesCatalogUri
-  | ClientCapabilitiesDynamicCatalog;
+export type ClientCapabilities = ClientCapabilitiesCatalogUri | ClientCapabilitiesDynamicCatalog;
 
 /**
  * A message sent from the client to the server. Exactly ONE of the properties
diff --git a/renderers/web_core/src/v0_8/types/colors.ts b/renderers/web_core/src/v0_8/types/colors.ts
index 457fa796c..59fd81848 100644
--- a/renderers/web_core/src/v0_8/types/colors.ts
+++ b/renderers/web_core/src/v0_8/types/colors.ts
@@ -34,7 +34,7 @@ type ColorShade =
   | 99
   | 100;
 
-export type PaletteKeyVals = "n" | "nv" | "p" | "s" | "t" | "e";
+export type PaletteKeyVals = 'n' | 'nv' | 'p' | 's' | 't' | 'e';
 export const shades: ColorShade[] = [
   0, 5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100,
 ];
@@ -43,24 +43,22 @@ type CreatePalette<Prefix extends PaletteKeyVals> = {
   [Key in `${Prefix}${ColorShade}`]: string;
 };
 
-export type PaletteKey<Prefix extends PaletteKeyVals> = Array<
-  keyof CreatePalette<Prefix>
->;
+export type PaletteKey<Prefix extends PaletteKeyVals> = Array<keyof CreatePalette<Prefix>>;
 
 export type PaletteKeys = {
-  neutral: PaletteKey<"n">;
-  neutralVariant: PaletteKey<"nv">;
-  primary: PaletteKey<"p">;
-  secondary: PaletteKey<"s">;
-  tertiary: PaletteKey<"t">;
-  error: PaletteKey<"e">;
+  neutral: PaletteKey<'n'>;
+  neutralVariant: PaletteKey<'nv'>;
+  primary: PaletteKey<'p'>;
+  secondary: PaletteKey<'s'>;
+  tertiary: PaletteKey<'t'>;
+  error: PaletteKey<'e'>;
 };
 
 export type ColorPalettes = {
-  neutral: CreatePalette<"n">;
-  neutralVariant: CreatePalette<"nv">;
-  primary: CreatePalette<"p">;
-  secondary: CreatePalette<"s">;
-  tertiary: CreatePalette<"t">;
-  error: CreatePalette<"e">;
+  neutral: CreatePalette<'n'>;
+  neutralVariant: CreatePalette<'nv'>;
+  primary: CreatePalette<'p'>;
+  secondary: CreatePalette<'s'>;
+  tertiary: CreatePalette<'t'>;
+  error: CreatePalette<'e'>;
 };
diff --git a/renderers/web_core/src/v0_8/types/components.ts b/renderers/web_core/src/v0_8/types/components.ts
index 197016281..37271191a 100644
--- a/renderers/web_core/src/v0_8/types/components.ts
+++ b/renderers/web_core/src/v0_8/types/components.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { z } from "zod";
+import type {z} from 'zod';
 import type {
   ActionSchema,
   AudioPlayerSchema,
@@ -35,7 +35,7 @@ import type {
   TextFieldSchema,
   TextSchema,
   VideoSchema,
-} from "../schema/common-types.js";
+} from '../schema/common-types.js';
 
 export declare interface Action extends z.infer<typeof ActionSchema> {}
 export declare interface Text extends z.infer<typeof TextSchema> {}
diff --git a/renderers/web_core/src/v0_8/types/primitives.ts b/renderers/web_core/src/v0_8/types/primitives.ts
index de50b4962..5c8e028f1 100644
--- a/renderers/web_core/src/v0_8/types/primitives.ts
+++ b/renderers/web_core/src/v0_8/types/primitives.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import type { z } from "zod";
+import type {z} from 'zod';
 import type {
   StringValueSchema,
   NumberValueSchema,
   BooleanValueSchema,
-} from "../schema/common-types.js";
+} from '../schema/common-types.js';
 
 export declare interface StringValue extends z.infer<typeof StringValueSchema> {}
 export declare interface NumberValue extends z.infer<typeof NumberValueSchema> {}
diff --git a/renderers/web_core/src/v0_8/types/types.ts b/renderers/web_core/src/v0_8/types/types.ts
index 31b33843e..2fbbdd55b 100644
--- a/renderers/web_core/src/v0_8/types/types.ts
+++ b/renderers/web_core/src/v0_8/types/types.ts
@@ -17,8 +17,8 @@
 export {
   type ClientToServerMessage as A2UIClientEventMessage,
   type ClientCapabilitiesDynamic,
-} from "./client-event.js";
-export { type Action } from "./components.js";
+} from './client-event.js';
+export {type Action} from './components.js';
 
 import {
   AudioPlayer,
@@ -39,9 +39,9 @@ import {
   Text,
   TextField,
   Video,
-} from "./components";
+} from './components';
 
-import type { z } from "zod";
+import type {z} from 'zod';
 import type {
   A2uiMessageSchema,
   BeginRenderingMessageSchema,
@@ -51,13 +51,13 @@ import type {
   DeleteSurfaceMessageSchema,
   SurfaceUpdateMessageSchema,
   ValueMapSchema,
-} from "../schema/server-to-client.js";
+} from '../schema/server-to-client.js';
 import type {
   ComponentArrayReferenceSchema,
   ComponentArrayTemplateSchema,
-} from "../schema/common-types.js";
-import { StringValue, NumberValue, BooleanValue } from "./primitives";
-export type { StringValue, NumberValue, BooleanValue };
+} from '../schema/common-types.js';
+import {StringValue, NumberValue, BooleanValue} from './primitives';
+export type {StringValue, NumberValue, BooleanValue};
 
 export type MessageProcessor = {
   getSurfaces(): ReadonlyMap<string, Surface>;
@@ -69,11 +69,7 @@ export type MessageProcessor = {
    * This correctly handles the special `.` path, which refers to the node's
    * own data context.
    */
-  getData(
-    node: AnyComponentNode,
-    relativePath: string,
-    surfaceId: string,
-  ): DataValue | null;
+  getData(node: AnyComponentNode, relativePath: string, surfaceId: string): DataValue | null;
 
   setData(
     node: AnyComponentNode | null,
@@ -244,28 +240,23 @@ export declare interface UserAction {
 }
 
 /** A recursive type for any valid JSON-like value in the data model. */
-export declare type DataValue =
-  | string
-  | number
-  | boolean
-  | null
-  | DataMap
-  | DataObject
-  | DataArray;
-export declare type DataObject = { [key: string]: DataValue };
+export declare type DataValue = string | number | boolean | null | DataMap | DataObject | DataArray;
+export declare type DataObject = {[key: string]: DataValue};
 export declare type DataMap = Map<string, DataValue>;
 export declare type DataArray = DataValue[];
 
 /** A template for creating components from a list in the data model. */
-export declare interface ComponentArrayTemplate
-  extends z.infer<typeof ComponentArrayTemplateSchema> {
+export declare interface ComponentArrayTemplate extends z.infer<
+  typeof ComponentArrayTemplateSchema
+> {
   componentId: string;
   dataBinding: string;
 }
 
 /** Defines a list of child components, either explicitly or via a template. */
-export declare interface ComponentArrayReference
-  extends z.infer<typeof ComponentArrayReferenceSchema> {
+export declare interface ComponentArrayReference extends z.infer<
+  typeof ComponentArrayReferenceSchema
+> {
   explicitList?: string[];
   template?: ComponentArrayTemplate;
 }
@@ -353,7 +344,7 @@ export declare type ResolvedValue =
   | ResolvedArray;
 
 /** A generic map where each value has been recursively resolved. */
-export declare type ResolvedMap = { [key: string]: ResolvedValue };
+export declare type ResolvedMap = {[key: string]: ResolvedValue};
 
 /** A generic array where each item has been recursively resolved. */
 export declare type ResolvedArray = ResolvedValue[];
@@ -369,92 +360,92 @@ interface BaseComponentNode {
 }
 
 export declare interface TextNode extends BaseComponentNode {
-  type: "Text";
+  type: 'Text';
   properties: ResolvedText;
 }
 
 export declare interface ImageNode extends BaseComponentNode {
-  type: "Image";
+  type: 'Image';
   properties: ResolvedImage;
 }
 
 export declare interface IconNode extends BaseComponentNode {
-  type: "Icon";
+  type: 'Icon';
   properties: ResolvedIcon;
 }
 
 export declare interface VideoNode extends BaseComponentNode {
-  type: "Video";
+  type: 'Video';
   properties: ResolvedVideo;
 }
 
 export declare interface AudioPlayerNode extends BaseComponentNode {
-  type: "AudioPlayer";
+  type: 'AudioPlayer';
   properties: ResolvedAudioPlayer;
 }
 
 export declare interface RowNode extends BaseComponentNode {
-  type: "Row";
+  type: 'Row';
   properties: ResolvedRow;
 }
 
 export declare interface ColumnNode extends BaseComponentNode {
-  type: "Column";
+  type: 'Column';
   properties: ResolvedColumn;
 }
 
 export declare interface ListNode extends BaseComponentNode {
-  type: "List";
+  type: 'List';
   properties: ResolvedList;
 }
 
 export declare interface CardNode extends BaseComponentNode {
-  type: "Card";
+  type: 'Card';
   properties: ResolvedCard;
 }
 
 export declare interface TabsNode extends BaseComponentNode {
-  type: "Tabs";
+  type: 'Tabs';
   properties: ResolvedTabs;
 }
 
 export declare interface DividerNode extends BaseComponentNode {
-  type: "Divider";
+  type: 'Divider';
   properties: ResolvedDivider;
 }
 
 export declare interface ModalNode extends BaseComponentNode {
-  type: "Modal";
+  type: 'Modal';
   properties: ResolvedModal;
 }
 
 export declare interface ButtonNode extends BaseComponentNode {
-  type: "Button";
+  type: 'Button';
   properties: ResolvedButton;
 }
 
 export declare interface CheckboxNode extends BaseComponentNode {
-  type: "CheckBox";
+  type: 'CheckBox';
   properties: ResolvedCheckbox;
 }
 
 export declare interface TextFieldNode extends BaseComponentNode {
-  type: "TextField";
+  type: 'TextField';
   properties: ResolvedTextField;
 }
 
 export declare interface DateTimeInputNode extends BaseComponentNode {
-  type: "DateTimeInput";
+  type: 'DateTimeInput';
   properties: ResolvedDateTimeInput;
 }
 
 export declare interface MultipleChoiceNode extends BaseComponentNode {
-  type: "MultipleChoice";
+  type: 'MultipleChoice';
   properties: ResolvedMultipleChoice;
 }
 
 export declare interface SliderNode extends BaseComponentNode {
-  type: "Slider";
+  type: 'Slider';
   properties: ResolvedSlider;
 }
 
@@ -505,38 +496,26 @@ export declare type ResolvedSlider = Slider;
 
 export declare interface ResolvedRow {
   children: AnyComponentNode[];
-  distribution?:
-    | "start"
-    | "center"
-    | "end"
-    | "spaceBetween"
-    | "spaceAround"
-    | "spaceEvenly";
-  alignment?: "start" | "center" | "end" | "stretch";
+  distribution?: 'start' | 'center' | 'end' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
+  alignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
 export declare interface ResolvedColumn {
   children: AnyComponentNode[];
-  distribution?:
-    | "start"
-    | "center"
-    | "end"
-    | "spaceBetween"
-    | "spaceAround"
-    | "spaceEvenly";
-  alignment?: "start" | "center" | "end" | "stretch";
+  distribution?: 'start' | 'center' | 'end' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
+  alignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
 export declare interface ResolvedButton {
   child: AnyComponentNode;
-  action: Button["action"];
+  action: Button['action'];
   primary?: boolean;
 }
 
 export declare interface ResolvedList {
   children: AnyComponentNode[];
-  direction?: "vertical" | "horizontal";
-  alignment?: "start" | "center" | "end" | "stretch";
+  direction?: 'vertical' | 'horizontal';
+  alignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
 export declare interface ResolvedCard {
diff --git a/renderers/web_core/src/v0_9/basic_catalog/components/basic_components.ts b/renderers/web_core/src/v0_9/basic_catalog/components/basic_components.ts
index dee9becda..ce1c4a385 100644
--- a/renderers/web_core/src/v0_9/basic_catalog/components/basic_components.ts
+++ b/renderers/web_core/src/v0_9/basic_catalog/components/basic_components.ts
@@ -72,14 +72,7 @@ export const ImageApi = {
         )
         .optional(),
       variant: z
-        .enum([
-          'icon',
-          'avatar',
-          'smallFeature',
-          'mediumFeature',
-          'largeFeature',
-          'header',
-        ])
+        .enum(['icon', 'avatar', 'smallFeature', 'mediumFeature', 'largeFeature', 'header'])
         .default('mediumFeature')
         .describe('A hint for the image size and style.')
         .optional(),
@@ -200,15 +193,7 @@ export const RowApi = {
         'Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID.',
       ),
       justify: z
-        .enum([
-          'center',
-          'end',
-          'spaceAround',
-          'spaceBetween',
-          'spaceEvenly',
-          'start',
-          'stretch',
-        ])
+        .enum(['center', 'end', 'spaceAround', 'spaceBetween', 'spaceEvenly', 'start', 'stretch'])
         .default('start')
         .describe(
           "Defines the arrangement of children along the main axis (horizontally). Use 'spaceBetween' to push items to the edges, or 'start'/'end'/'center' to pack them together.",
@@ -237,15 +222,7 @@ export const ColumnApi = {
         'Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID.',
       ),
       justify: z
-        .enum([
-          'start',
-          'center',
-          'end',
-          'spaceBetween',
-          'spaceAround',
-          'spaceEvenly',
-          'stretch',
-        ])
+        .enum(['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly', 'stretch'])
         .default('start')
         .describe(
           "Defines the arrangement of children along the main axis (vertically). Use 'spaceBetween' to push items to the edges (e.g. header at top, footer at bottom), or 'start'/'end'/'center' to pack them together.",
@@ -382,12 +359,8 @@ export const TextFieldApi = {
   schema: z
     .object({
       ...CommonProps,
-      label: DynamicStringSchema.describe(
-        'The text label for the input field.',
-      ),
-      value: DynamicStringSchema.describe(
-        'The value of the text field.',
-      ).optional(),
+      label: DynamicStringSchema.describe('The text label for the input field.'),
+      value: DynamicStringSchema.describe('The value of the text field.').optional(),
       variant: z
         .enum(['longText', 'number', 'shortText', 'obscured'])
         .default('shortText')
@@ -395,9 +368,7 @@ export const TextFieldApi = {
         .optional(),
       validationRegexp: z
         .string()
-        .describe(
-          'A regular expression used for client-side validation of the input.',
-        )
+        .describe('A regular expression used for client-side validation of the input.')
         .optional(),
       checks: CheckableSchema.shape.checks,
     })
@@ -409,9 +380,7 @@ export const CheckBoxApi = {
   schema: z
     .object({
       ...CommonProps,
-      label: DynamicStringSchema.describe(
-        'The text to display next to the checkbox.',
-      ),
+      label: DynamicStringSchema.describe('The text to display next to the checkbox.'),
       value: DynamicBooleanSchema.describe(
         'The current state of the checkbox (true for checked, false for unchecked).',
       ),
@@ -425,26 +394,18 @@ export const ChoicePickerApi = {
   schema: z
     .object({
       ...CommonProps,
-      label: DynamicStringSchema.describe(
-        'The label for the group of options.',
-      ).optional(),
+      label: DynamicStringSchema.describe('The label for the group of options.').optional(),
       variant: z
         .enum(['multipleSelection', 'mutuallyExclusive'])
         .default('mutuallyExclusive')
-        .describe(
-          'A hint for how the choice picker should be displayed and behave.',
-        )
+        .describe('A hint for how the choice picker should be displayed and behave.')
         .optional(),
       options: z
         .array(
           z
             .object({
-              label: DynamicStringSchema.describe(
-                'The text to display for this option.',
-              ),
-              value: z
-                .string()
-                .describe('The stable value associated with this option.'),
+              label: DynamicStringSchema.describe('The text to display for this option.'),
+              value: z.string().describe('The stable value associated with this option.'),
             })
             .strict(),
         )
@@ -465,9 +426,7 @@ export const ChoicePickerApi = {
       checks: CheckableSchema.shape.checks,
     })
     .strict()
-    .describe(
-      'A component that allows selecting one or more options from a list.',
-    ),
+    .describe('A component that allows selecting one or more options from a list.'),
 } satisfies ComponentApi;
 
 export const SliderApi = {
@@ -475,19 +434,10 @@ export const SliderApi = {
   schema: z
     .object({
       ...CommonProps,
-      label: DynamicStringSchema.describe(
-        'The label for the slider.',
-      ).optional(),
-      min: z
-        .number()
-        .default(0)
-        .describe('The minimum value of the slider.')
-        .optional(),
+      label: DynamicStringSchema.describe('The label for the slider.').optional(),
+      min: z.number().default(0).describe('The minimum value of the slider.').optional(),
       max: z.number().describe('The maximum value of the slider.'),
-      step: z
-        .number()
-        .describe('The granularity or step size of the slider.')
-        .optional(),
+      step: z.number().describe('The granularity or step size of the slider.').optional(),
       value: DynamicNumberSchema.describe('The current value of the slider.'),
       checks: CheckableSchema.shape.checks,
     })
@@ -513,26 +463,14 @@ export const DateTimeInputApi = {
         .describe('If true, allows the user to select a time.')
         .optional(),
       min: z
-        .union([
-          DynamicStringSchema,
-          z.string().date(),
-          z.string().time(),
-          z.string().datetime(),
-        ])
+        .union([DynamicStringSchema, z.string().date(), z.string().time(), z.string().datetime()])
         .describe('The minimum allowed date/time in ISO 8601 format.')
         .optional(),
       max: z
-        .union([
-          DynamicStringSchema,
-          z.string().date(),
-          z.string().time(),
-          z.string().datetime(),
-        ])
+        .union([DynamicStringSchema, z.string().date(), z.string().time(), z.string().datetime()])
         .describe('The maximum allowed date/time in ISO 8601 format.')
         .optional(),
-      label: DynamicStringSchema.describe(
-        'The text label for the input field.',
-      ).optional(),
+      label: DynamicStringSchema.describe('The text label for the input field.').optional(),
       checks: CheckableSchema.shape.checks,
     })
     .strict(),
diff --git a/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.test.ts b/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.test.ts
index 78b785593..aff500d3f 100644
--- a/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.test.ts
+++ b/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.test.ts
@@ -30,17 +30,11 @@ describe('ExpressionParser', () => {
   });
 
   it('parses simple interpolation', () => {
-    assert.deepStrictEqual(parser.parse('hello ${foo}'), [
-      'hello ',
-      {path: 'foo'},
-    ]);
+    assert.deepStrictEqual(parser.parse('hello ${foo}'), ['hello ', {path: 'foo'}]);
   });
 
   it('parses number interpolation', () => {
-    assert.deepStrictEqual(parser.parse('number is ${num}'), [
-      'number is ',
-      {path: 'num'},
-    ]);
+    assert.deepStrictEqual(parser.parse('number is ${num}'), ['number is ', {path: 'num'}]);
   });
 
   it('parses nested interpolation', () => {
@@ -48,18 +42,11 @@ describe('ExpressionParser', () => {
     // Wait, the parser extracts content. Let's see what `val is ${${nested}}` parses to:
     // It extracts `${nested}` and parses it. That evaluates to `{ path: "${nested}" }` or something.
     // Actually, `parseExpression("${nested}")` will recursively call `parseExpression("nested")` and return `{ path: "nested" }`.
-    assert.deepStrictEqual(parser.parse('val is ${${nested}}'), [
-      'val is ',
-      {path: 'nested'},
-    ]);
+    assert.deepStrictEqual(parser.parse('val is ${${nested}}'), ['val is ', {path: 'nested'}]);
   });
 
   it('handles escaped interpolation', () => {
-    assert.deepStrictEqual(parser.parse('escaped \\${foo}'), [
-      'escaped ',
-      '${',
-      'foo}',
-    ]);
+    assert.deepStrictEqual(parser.parse('escaped \\${foo}'), ['escaped ', '${', 'foo}']);
   });
 
   it('parses function calls', () => {
@@ -77,12 +64,7 @@ describe('ExpressionParser', () => {
   });
 
   it('parses keywords', () => {
-    assert.deepStrictEqual(parser.parse('${true} ${false} ${null}'), [
-      true,
-      ' ',
-      false,
-      ' ',
-    ]);
+    assert.deepStrictEqual(parser.parse('${true} ${false} ${null}'), [true, ' ', false, ' ']);
   });
 
   it('returns error on max depth exceeded', () => {
@@ -116,9 +98,7 @@ describe('ExpressionParser', () => {
   });
 
   it('handles empty identifiers', () => {
-    assert.deepStrictEqual(parser.parse('${()}'), [
-      {call: '', args: {}, returnType: 'any'},
-    ]);
+    assert.deepStrictEqual(parser.parse('${()}'), [{call: '', args: {}, returnType: 'any'}]);
     assert.deepStrictEqual(parser.parseExpression(''), '');
     assert.deepStrictEqual(parser.parseExpression('()'), {
       call: '',
diff --git a/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.ts b/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.ts
index f5779665a..5e7365c6a 100644
--- a/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.ts
+++ b/renderers/web_core/src/v0_9/basic_catalog/expressions/expression_parser.ts
@@ -51,11 +51,7 @@ export class ExpressionParser {
         if (parsed !== null) {
           parts.push(parsed);
         }
-      } else if (
-        scanner.peek() === '\\' &&
-        scanner.peek(1) === '$' &&
-        scanner.peek(2) === '{'
-      ) {
+      } else if (scanner.peek() === '\\' && scanner.peek(1) === '$' && scanner.peek(2) === '{') {
         scanner.advance();
         parts.push('${');
         scanner.advance(2);
@@ -65,11 +61,7 @@ export class ExpressionParser {
           if (scanner.matches('${')) {
             break;
           }
-          if (
-            scanner.peek() === '\\' &&
-            scanner.peek(1) === '$' &&
-            scanner.peek(2) === '{'
-          ) {
+          if (scanner.peek() === '\\' && scanner.peek(1) === '$' && scanner.peek(2) === '{') {
             break;
           }
           scanner.advance();
@@ -128,18 +120,13 @@ export class ExpressionParser {
     const result = this.parseExpressionInternal(scanner, depth);
     if (!scanner.isAtEnd()) {
       throw new A2uiExpressionError(
-        `Unexpected characters at end of expression: '${scanner.input.substring(
-          scanner.pos,
-        )}'`,
+        `Unexpected characters at end of expression: '${scanner.input.substring(scanner.pos)}'`,
       );
     }
     return result;
   }
 
-  private parseExpressionInternal(
-    scanner: Scanner,
-    depth: number,
-  ): DynamicValue {
+  private parseExpressionInternal(scanner: Scanner, depth: number): DynamicValue {
     scanner.skipWhitespace();
     if (scanner.isAtEnd()) return '';
 
@@ -218,9 +205,7 @@ export class ExpressionParser {
     }
 
     if (!scanner.match(')')) {
-      throw new A2uiExpressionError(
-        `Expected ')' after function arguments for '${funcName}'`,
-      );
+      throw new A2uiExpressionError(`Expected ')' after function arguments for '${funcName}'`);
     }
 
     return {call: funcName, args, returnType: 'any'};
@@ -228,10 +213,7 @@ export class ExpressionParser {
 
   private scanIdentifier(scanner: Scanner): string {
     const start = scanner.pos;
-    while (
-      !scanner.isAtEnd() &&
-      (this.isAlnum(scanner.peek()) || scanner.peek() === '_')
-    ) {
+    while (!scanner.isAtEnd() && (this.isAlnum(scanner.peek()) || scanner.peek() === '_')) {
       scanner.advance();
     }
     return scanner.input.substring(start, scanner.pos);
@@ -259,19 +241,14 @@ export class ExpressionParser {
 
   private parseNumberLiteral(scanner: Scanner): number {
     const start = scanner.pos;
-    while (
-      !scanner.isAtEnd() &&
-      (this.isDigit(scanner.peek()) || scanner.peek() === '.')
-    ) {
+    while (!scanner.isAtEnd() && (this.isDigit(scanner.peek()) || scanner.peek() === '.')) {
       scanner.advance();
     }
     return Number(scanner.input.substring(start, scanner.pos));
   }
 
   private isAlnum(c: string): boolean {
-    return (
-      (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9')
-    );
+    return (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || (c >= '0' && c <= '9');
   }
 
   private isDigit(c: string): boolean {
diff --git a/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.test.ts b/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.test.ts
index 925f692cf..6b6589605 100644
--- a/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.test.ts
+++ b/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.test.ts
@@ -51,57 +51,30 @@ describe('BASIC_FUNCTIONS', () => {
     it('add', () => {
       assert.strictEqual(invoke('add', {a: 1, b: 2}, context), 3);
       assert.strictEqual(invoke('add', {a: '1', b: '2'}, context), 3);
-      assert.throws(
-        () => invoke('add', {a: 10, b: undefined}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('add', {a: 10, b: undefined}, context), A2uiExpressionError);
       assert.throws(() => invoke('add', {a: 10}, context), A2uiExpressionError);
     });
     it('subtract', () => {
       assert.strictEqual(invoke('subtract', {a: 5, b: 3}, context), 2);
-      assert.throws(
-        () => invoke('subtract', {a: 10, b: undefined}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('subtract', {a: 10}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('subtract', {a: 10, b: undefined}, context), A2uiExpressionError);
+      assert.throws(() => invoke('subtract', {a: 10}, context), A2uiExpressionError);
     });
     it('multiply', () => {
       assert.strictEqual(invoke('multiply', {a: 4, b: 2}, context), 8);
-      assert.throws(
-        () => invoke('multiply', {a: 10, b: undefined}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('multiply', {a: 10}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('multiply', {a: 10, b: undefined}, context), A2uiExpressionError);
+      assert.throws(() => invoke('multiply', {a: 10}, context), A2uiExpressionError);
     });
     it('divide', () => {
       assert.strictEqual(invoke('divide', {a: 10, b: 2}, context), 5);
       assert.strictEqual(invoke('divide', {a: 10, b: 0}, context), Infinity);
-      assert.throws(
-        () => invoke('divide', {a: 10, b: undefined}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('divide', {a: undefined, b: 10}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('divide', {a: 10, b: undefined}, context), A2uiExpressionError);
+      assert.throws(() => invoke('divide', {a: undefined, b: 10}, context), A2uiExpressionError);
       assert.throws(
         () => invoke('divide', {a: undefined, b: undefined}, context),
         A2uiExpressionError,
       );
-      assert.throws(
-        () => invoke('divide', {a: 10, b: null}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('divide', {a: 10, b: 'invalid'}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('divide', {a: 10, b: null}, context), A2uiExpressionError);
+      assert.throws(() => invoke('divide', {a: 10, b: 'invalid'}, context), A2uiExpressionError);
       assert.strictEqual(invoke('divide', {a: 10, b: '2'}, context), 5);
       assert.strictEqual(invoke('divide', {a: '10', b: '2'}, context), 5);
     });
@@ -111,25 +84,13 @@ describe('BASIC_FUNCTIONS', () => {
     it('equals', () => {
       assert.strictEqual(invoke('equals', {a: 1, b: 1}, context), true);
       assert.strictEqual(invoke('equals', {a: 1, b: 2}, context), false);
-      assert.throws(
-        () => invoke('equals', {a: 1}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('equals', {b: 1}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('equals', {a: 1}, context), A2uiExpressionError);
+      assert.throws(() => invoke('equals', {b: 1}, context), A2uiExpressionError);
     });
     it('not_equals', () => {
       assert.strictEqual(invoke('not_equals', {a: 1, b: 2}, context), true);
-      assert.throws(
-        () => invoke('not_equals', {a: 1}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('not_equals', {b: 1}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('not_equals', {a: 1}, context), A2uiExpressionError);
+      assert.throws(() => invoke('not_equals', {b: 1}, context), A2uiExpressionError);
     });
     it('greater_than', () => {
       assert.strictEqual(invoke('greater_than', {a: 5, b: 3}, context), true);
@@ -138,45 +99,21 @@ describe('BASIC_FUNCTIONS', () => {
         () => invoke('greater_than', {a: 10, b: undefined}, context),
         A2uiExpressionError,
       );
-      assert.throws(
-        () => invoke('greater_than', {a: 10, b: null}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('greater_than', {a: 10, b: null}, context), A2uiExpressionError);
       assert.throws(
         () => invoke('greater_than', {a: 10, b: 'invalid'}, context),
         A2uiExpressionError,
       );
-      assert.throws(
-        () => invoke('greater_than', {a: 10}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('greater_than', {b: 10}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('greater_than', {a: 10}, context), A2uiExpressionError);
+      assert.throws(() => invoke('greater_than', {b: 10}, context), A2uiExpressionError);
     });
     it('less_than', () => {
       assert.strictEqual(invoke('less_than', {a: 3, b: 5}, context), true);
-      assert.throws(
-        () => invoke('less_than', {a: 3, b: undefined}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('less_than', {a: 3, b: null}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('less_than', {a: 3, b: 'invalid'}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('less_than', {a: 3}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('less_than', {b: 3}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('less_than', {a: 3, b: undefined}, context), A2uiExpressionError);
+      assert.throws(() => invoke('less_than', {a: 3, b: null}, context), A2uiExpressionError);
+      assert.throws(() => invoke('less_than', {a: 3, b: 'invalid'}, context), A2uiExpressionError);
+      assert.throws(() => invoke('less_than', {a: 3}, context), A2uiExpressionError);
+      assert.throws(() => invoke('less_than', {b: 3}, context), A2uiExpressionError);
     });
   });
 
@@ -184,26 +121,14 @@ describe('BASIC_FUNCTIONS', () => {
     it('and', () => {
       // Checks args['values'] array OR args['a'] && args['b'].
       assert.strictEqual(invoke('and', {values: [true, true]}, context), true);
-      assert.strictEqual(
-        invoke('and', {values: [true, false]}, context),
-        false,
-      );
-      assert.throws(
-        () => invoke('and', {values: [true]}, context),
-        A2uiExpressionError,
-      );
+      assert.strictEqual(invoke('and', {values: [true, false]}, context), false);
+      assert.throws(() => invoke('and', {values: [true]}, context), A2uiExpressionError);
       assert.throws(() => invoke('and', {}, context), A2uiExpressionError);
     });
     it('or', () => {
       assert.strictEqual(invoke('or', {values: [false, true]}, context), true);
-      assert.strictEqual(
-        invoke('or', {values: [false, false]}, context),
-        false,
-      );
-      assert.throws(
-        () => invoke('or', {values: [true]}, context),
-        A2uiExpressionError,
-      );
+      assert.strictEqual(invoke('or', {values: [false, false]}, context), false);
+      assert.throws(() => invoke('or', {values: [true]}, context), A2uiExpressionError);
       assert.throws(() => invoke('or', {}, context), A2uiExpressionError);
     });
     it('not', () => {
@@ -216,53 +141,25 @@ describe('BASIC_FUNCTIONS', () => {
   describe('String', () => {
     it('contains', () => {
       assert.strictEqual(
-        invoke(
-          'contains',
-          {string: 'hello world', substring: 'world'},
-          context,
-        ),
+        invoke('contains', {string: 'hello world', substring: 'world'}, context),
         true,
       );
       assert.strictEqual(
         invoke('contains', {string: 'hello world', substring: 'foo'}, context),
         false,
       );
-      assert.throws(
-        () => invoke('contains', {string: 'hello'}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('contains', {substring: 'hello'}, context),
-        A2uiExpressionError,
-      );
+      assert.throws(() => invoke('contains', {string: 'hello'}, context), A2uiExpressionError);
+      assert.throws(() => invoke('contains', {substring: 'hello'}, context), A2uiExpressionError);
     });
     it('starts_with', () => {
-      assert.strictEqual(
-        invoke('starts_with', {string: 'hello', prefix: 'he'}, context),
-        true,
-      );
-      assert.throws(
-        () => invoke('starts_with', {string: 'hello'}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('starts_with', {prefix: 'he'}, context),
-        A2uiExpressionError,
-      );
+      assert.strictEqual(invoke('starts_with', {string: 'hello', prefix: 'he'}, context), true);
+      assert.throws(() => invoke('starts_with', {string: 'hello'}, context), A2uiExpressionError);
+      assert.throws(() => invoke('starts_with', {prefix: 'he'}, context), A2uiExpressionError);
     });
     it('ends_with', () => {
-      assert.strictEqual(
-        invoke('ends_with', {string: 'hello', suffix: 'lo'}, context),
-        true,
-      );
-      assert.throws(
-        () => invoke('ends_with', {string: 'hello'}, context),
-        A2uiExpressionError,
-      );
-      assert.throws(
-        () => invoke('ends_with', {suffix: 'lo'}, context),
-        A2uiExpressionError,
-      );
+      assert.strictEqual(invoke('ends_with', {string: 'hello', suffix: 'lo'}, context), true);
+      assert.throws(() => invoke('ends_with', {string: 'hello'}, context), A2uiExpressionError);
+      assert.throws(() => invoke('ends_with', {suffix: 'lo'}, context), A2uiExpressionError);
     });
   });
 
@@ -275,64 +172,34 @@ describe('BASIC_FUNCTIONS', () => {
     });
 
     it('length', () => {
-      assert.strictEqual(
-        invoke('length', {value: 'abc', min: 2}, context),
-        true,
-      );
-      assert.strictEqual(
-        invoke('length', {value: 'abc', max: 2}, context),
-        false,
-      );
+      assert.strictEqual(invoke('length', {value: 'abc', min: 2}, context), true);
+      assert.strictEqual(invoke('length', {value: 'abc', max: 2}, context), false);
       assert.throws(() => invoke('length', {}, context), A2uiExpressionError);
     });
 
     it('numeric', () => {
-      assert.strictEqual(
-        invoke('numeric', {value: 10, min: 5, max: 15}, context),
-        true,
-      );
+      assert.strictEqual(invoke('numeric', {value: 10, min: 5, max: 15}, context), true);
       assert.strictEqual(invoke('numeric', {value: 3, min: 5}, context), false);
       assert.throws(() => invoke('numeric', {}, context), A2uiExpressionError);
     });
 
     it('email', () => {
-      assert.strictEqual(
-        invoke('email', {value: 'test@example.com'}, context),
-        true,
-      );
-      assert.strictEqual(
-        invoke('email', {value: 'test.name@example.com'}, context),
-        true,
-      );
-      assert.strictEqual(
-        invoke('email', {value: 'test+label@example.com'}, context),
-        true,
-      );
-      assert.strictEqual(
-        invoke('email', {value: 'test@example-domain.com'}, context),
-        true,
-      );
+      assert.strictEqual(invoke('email', {value: 'test@example.com'}, context), true);
+      assert.strictEqual(invoke('email', {value: 'test.name@example.com'}, context), true);
+      assert.strictEqual(invoke('email', {value: 'test+label@example.com'}, context), true);
+      assert.strictEqual(invoke('email', {value: 'test@example-domain.com'}, context), true);
 
       assert.strictEqual(invoke('email', {value: 'invalid'}, context), false);
       assert.strictEqual(invoke('email', {value: 'test@test'}, context), false);
-      assert.strictEqual(
-        invoke('email', {value: 'test@test.c'}, context),
-        false,
-      );
+      assert.strictEqual(invoke('email', {value: 'test@test.c'}, context), false);
       assert.strictEqual(invoke('email', {value: 'test@.com'}, context), false);
 
       assert.throws(() => invoke('email', {}, context), A2uiExpressionError);
     });
 
     it('regex', () => {
-      assert.strictEqual(
-        invoke('regex', {value: 'abc', pattern: '^[a-z]+$'}, context),
-        true,
-      );
-      assert.strictEqual(
-        invoke('regex', {value: '123', pattern: '^[a-z]+$'}, context),
-        false,
-      );
+      assert.strictEqual(invoke('regex', {value: 'abc', pattern: '^[a-z]+$'}, context), true);
+      assert.strictEqual(invoke('regex', {value: '123', pattern: '^[a-z]+$'}, context), false);
     });
 
     it('regex handles invalid pattern', () => {
@@ -403,16 +270,12 @@ describe('BASIC_FUNCTIONS', () => {
 
     it('formatString (with function call)', (_, done) => {
       // Need a functionInvoker for function calls
-      const ctxWithInvoker = createTestDataContext(
-        dataModel,
-        '/',
-        (name: string, args: any) => {
-          if (name === 'add') {
-            return Number(args['a']) + Number(args['b']);
-          }
-          return null;
-        },
-      );
+      const ctxWithInvoker = createTestDataContext(dataModel, '/', (name: string, args: any) => {
+        if (name === 'add') {
+          return Number(args['a']) + Number(args['b']);
+        }
+        return null;
+      });
 
       const result = invoke(
         'formatString',
@@ -436,25 +299,15 @@ describe('BASIC_FUNCTIONS', () => {
 
     it('formatNumber', () => {
       // Test basic output as Intl behavior varies by environment.
-      const result = invoke(
-        'formatNumber',
-        {value: 1234.56, decimals: 1},
-        context,
-      );
+      const result = invoke('formatNumber', {value: 1234.56, decimals: 1}, context);
       assert.ok(typeof result === 'string');
       assert.ok(
-        result.includes('1,234.6') ||
-          result.includes('1234.6') ||
-          result.includes('1 234,6'),
+        result.includes('1,234.6') || result.includes('1234.6') || result.includes('1 234,6'),
       );
     });
 
     it('formatCurrency', () => {
-      const result = invoke(
-        'formatCurrency',
-        {value: 1234.56, currency: 'USD'},
-        context,
-      );
+      const result = invoke('formatCurrency', {value: 1234.56, currency: 'USD'}, context);
       assert.ok(typeof result === 'string');
       assert.ok(result.includes('1,234.56') || result.includes('1234.56'));
       assert.ok(result.includes('$') || result.includes('USD'));
@@ -477,11 +330,7 @@ describe('BASIC_FUNCTIONS', () => {
     });
 
     it('formatDate handles invalid dates', () => {
-      const result = invoke(
-        'formatDate',
-        {value: 'invalid-date', format: 'yyyy'},
-        context,
-      );
+      const result = invoke('formatDate', {value: 'invalid-date', format: 'yyyy'}, context);
       assert.strictEqual(result, '');
     });
 
@@ -521,10 +370,7 @@ describe('BASIC_FUNCTIONS', () => {
       try {
         invoke('openUrl', {url: 'https://google.com'}, context);
         assert.strictEqual(openedUrl, 'https://google.com');
-        assert.throws(
-          () => invoke('openUrl', {}, context),
-          A2uiExpressionError,
-        );
+        assert.throws(() => invoke('openUrl', {}, context), A2uiExpressionError);
       } finally {
         (global as any).window = originalWindow;
       }
diff --git a/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.ts b/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.ts
index 402195c5d..d77169d5a 100644
--- a/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.ts
+++ b/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions.ts
@@ -56,10 +56,7 @@ import {A2uiExpressionError} from '../../errors.js';
  * Implementation of the addition function.
  * Adds two numbers 'a' and 'b'.
  */
-export const AddImplementation = createFunctionImplementation(
-  AddApi,
-  args => args.a + args.b,
-);
+export const AddImplementation = createFunctionImplementation(AddApi, args => args.a + args.b);
 /**
  * Implementation of the subtraction function.
  * Subtracts 'b' from 'a'.
@@ -80,25 +77,22 @@ export const MultiplyImplementation = createFunctionImplementation(
  * Implementation of the division function.
  * Divides 'a' by 'b'. Returns NaN if inputs are invalid, and Infinity if dividing by zero.
  */
-export const DivideImplementation = createFunctionImplementation(
-  DivideApi,
-  args => {
-    const a = args.a;
-    const b = args.b;
-    if (a === undefined || a === null || b === undefined || b === null) {
-      return NaN;
-    }
-    const numA = Number(a);
-    const numB = Number(b);
-    if (Number.isNaN(numA) || Number.isNaN(numB)) {
-      return NaN;
-    }
-    if (numB === 0) {
-      return Infinity;
-    }
-    return numA / numB;
-  },
-);
+export const DivideImplementation = createFunctionImplementation(DivideApi, args => {
+  const a = args.a;
+  const b = args.b;
+  if (a === undefined || a === null || b === undefined || b === null) {
+    return NaN;
+  }
+  const numA = Number(a);
+  const numB = Number(b);
+  if (Number.isNaN(numA) || Number.isNaN(numB)) {
+    return NaN;
+  }
+  if (numB === 0) {
+    return Infinity;
+  }
+  return numA / numB;
+});
 
 // Comparison
 /**
@@ -153,35 +147,29 @@ export const OrImplementation = createFunctionImplementation(OrApi, args => {
  * Implementation of the logical NOT function.
  * Returns the negation of the value.
  */
-export const NotImplementation = createFunctionImplementation(
-  NotApi,
-  args => !args.value,
-);
+export const NotImplementation = createFunctionImplementation(NotApi, args => !args.value);
 
 // String
 /**
  * Implementation of the string contains function.
  * Checks if 'string' contains 'substring'.
  */
-export const ContainsImplementation = createFunctionImplementation(
-  ContainsApi,
-  args => args.string.includes(args.substring),
+export const ContainsImplementation = createFunctionImplementation(ContainsApi, args =>
+  args.string.includes(args.substring),
 );
 /**
  * Implementation of the string starts-with function.
  * Checks if 'string' starts with 'prefix'.
  */
-export const StartsWithImplementation = createFunctionImplementation(
-  StartsWithApi,
-  args => args.string.startsWith(args.prefix),
+export const StartsWithImplementation = createFunctionImplementation(StartsWithApi, args =>
+  args.string.startsWith(args.prefix),
 );
 /**
  * Implementation of the string ends-with function.
  * Checks if 'string' ends with 'suffix'.
  */
-export const EndsWithImplementation = createFunctionImplementation(
-  EndsWithApi,
-  args => args.string.endsWith(args.suffix),
+export const EndsWithImplementation = createFunctionImplementation(EndsWithApi, args =>
+  args.string.endsWith(args.suffix),
 );
 
 // Validation
@@ -189,83 +177,60 @@ export const EndsWithImplementation = createFunctionImplementation(
  * Implementation of the required validation function.
  * Checks if the value is not null, undefined, empty string, or empty array.
  */
-export const RequiredImplementation = createFunctionImplementation(
-  RequiredApi,
-  args => {
-    const val = args.value;
-    if (val === null || val === undefined) return false;
-    if (typeof val === 'string' && val === '') return false;
-    if (Array.isArray(val) && val.length === 0) return false;
-    return true;
-  },
-);
+export const RequiredImplementation = createFunctionImplementation(RequiredApi, args => {
+  const val = args.value;
+  if (val === null || val === undefined) return false;
+  if (typeof val === 'string' && val === '') return false;
+  if (Array.isArray(val) && val.length === 0) return false;
+  return true;
+});
 /**
  * Implementation of the regex validation function.
  * Checks if the value matches the regular expression pattern.
  * Throws A2uiExpressionError if the pattern is invalid.
  */
-export const RegexImplementation = createFunctionImplementation(
-  RegexApi,
-  args => {
-    try {
-      return new RegExp(args.pattern).test(args.value);
-    } catch (e) {
-      throw new A2uiExpressionError(
-        `Invalid regex pattern: ${args.pattern}`,
-        'regex',
-        e,
-      );
-    }
-  },
-);
+export const RegexImplementation = createFunctionImplementation(RegexApi, args => {
+  try {
+    return new RegExp(args.pattern).test(args.value);
+  } catch (e) {
+    throw new A2uiExpressionError(`Invalid regex pattern: ${args.pattern}`, 'regex', e);
+  }
+});
 /**
  * Implementation of the length validation function.
  * Checks if the length of the string or array is within [min, max] range.
  */
-export const LengthImplementation = createFunctionImplementation(
-  LengthApi,
-  args => {
-    const val = args.value;
-    let len = 0;
-    if (typeof val === 'string' || Array.isArray(val)) {
-      len = val.length;
-    }
-    if (args.min !== undefined && !isNaN(args.min) && len < args.min)
-      return false;
-    if (args.max !== undefined && !isNaN(args.max) && len > args.max)
-      return false;
-    return true;
-  },
-);
+export const LengthImplementation = createFunctionImplementation(LengthApi, args => {
+  const val = args.value;
+  let len = 0;
+  if (typeof val === 'string' || Array.isArray(val)) {
+    len = val.length;
+  }
+  if (args.min !== undefined && !isNaN(args.min) && len < args.min) return false;
+  if (args.max !== undefined && !isNaN(args.max) && len > args.max) return false;
+  return true;
+});
 /**
  * Implementation of the numeric validation function.
  * Checks if the value is a number and within [min, max] range.
  */
-export const NumericImplementation = createFunctionImplementation(
-  NumericApi,
-  args => {
-    if (isNaN(args.value)) return false;
-    if (args.min !== undefined && !isNaN(args.min) && args.value < args.min)
-      return false;
-    if (args.max !== undefined && !isNaN(args.max) && args.value > args.max)
-      return false;
-    return true;
-  },
-);
+export const NumericImplementation = createFunctionImplementation(NumericApi, args => {
+  if (isNaN(args.value)) return false;
+  if (args.min !== undefined && !isNaN(args.min) && args.value < args.min) return false;
+  if (args.max !== undefined && !isNaN(args.max) && args.value > args.max) return false;
+  return true;
+});
 /**
  * Implementation of the email validation function.
  * Uses a simple regex to check if the value looks like an email address.
  * Note: This is a basic check and not fully compliant with all email standards.
  */
-export const EmailImplementation = createFunctionImplementation(
-  EmailApi,
-  args => {
-    // TODO(gspencergoog): Use a "real" email validation function, preferably
-    // from an existing package. This is woefully insufficient, real email
-    // validation can't be done with a regex.
-    return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(args.value);
-  },
-);
+export const EmailImplementation = createFunctionImplementation(EmailApi, args => {
+  // TODO(gspencergoog): Use a "real" email validation function, preferably
+  // from an existing package. This is woefully insufficient, real email
+  // validation can't be done with a regex.
+  return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(args.value);
+});
 
 // Formatting
 /**
@@ -306,17 +271,14 @@ export const FormatStringImplementation = createFunctionImplementation(
  * Implementation of the number formatting function.
  * Formats a number using Intl.NumberFormat with specified decimals and grouping.
  */
-export const FormatNumberImplementation = createFunctionImplementation(
-  FormatNumberApi,
-  args => {
-    if (isNaN(args.value)) return '';
-    return new Intl.NumberFormat('en-US', {
-      minimumFractionDigits: args.decimals,
-      maximumFractionDigits: args.decimals,
-      useGrouping: args.grouping,
-    }).format(args.value);
-  },
-);
+export const FormatNumberImplementation = createFunctionImplementation(FormatNumberApi, args => {
+  if (isNaN(args.value)) return '';
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: args.decimals,
+    maximumFractionDigits: args.decimals,
+    useGrouping: args.grouping,
+  }).format(args.value);
+});
 /**
  * Implementation of the currency formatting function.
  * Formats a number as currency using Intl.NumberFormat.
@@ -343,47 +305,38 @@ export const FormatCurrencyImplementation = createFunctionImplementation(
  * Implementation of the date formatting function.
  * Formats a date using date-fns or returns ISO string.
  */
-export const FormatDateImplementation = createFunctionImplementation(
-  FormatDateApi,
-  args => {
-    if (!args.value) return '';
-    const date = new Date(args.value as string | number | Date);
-    if (isNaN(date.getTime())) return '';
+export const FormatDateImplementation = createFunctionImplementation(FormatDateApi, args => {
+  if (!args.value) return '';
+  const date = new Date(args.value as string | number | Date);
+  if (isNaN(date.getTime())) return '';
 
-    try {
-      if (args.format === 'ISO') return date.toISOString();
-      return format(date, args.format);
-    } catch (e) {
-      console.warn('Error formatting date:', e);
-      return date.toISOString();
-    }
-  },
-);
+  try {
+    if (args.format === 'ISO') return date.toISOString();
+    return format(date, args.format);
+  } catch (e) {
+    console.warn('Error formatting date:', e);
+    return date.toISOString();
+  }
+});
 /**
  * Implementation of the pluralization function.
  * Selects the appropriate plural form based on the value using Intl.PluralRules.
  */
-export const PluralizeImplementation = createFunctionImplementation(
-  PluralizeApi,
-  args => {
-    const rule = new Intl.PluralRules('en-US').select(args.value);
-    return String((args as Record<string, unknown>)[rule] ?? args.other ?? '');
-  },
-);
+export const PluralizeImplementation = createFunctionImplementation(PluralizeApi, args => {
+  const rule = new Intl.PluralRules('en-US').select(args.value);
+  return String((args as Record<string, unknown>)[rule] ?? args.other ?? '');
+});
 
 // Actions
 /**
  * Implementation of the open URL action.
  * Opens the specified URL in a new window/tab.
  */
-export const OpenUrlImplementation = createFunctionImplementation(
-  OpenUrlApi,
-  args => {
-    if (args.url && typeof window !== 'undefined' && window.open) {
-      window.open(args.url, '_blank');
-    }
-  },
-);
+export const OpenUrlImplementation = createFunctionImplementation(OpenUrlApi, args => {
+  if (args.url && typeof window !== 'undefined' && window.open) {
+    window.open(args.url, '_blank');
+  }
+});
 
 /**
  * Standard function implementations for the Basic Catalog.
diff --git a/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions_api.ts b/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions_api.ts
index 688f236e4..e36cf22e2 100644
--- a/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions_api.ts
+++ b/renderers/web_core/src/v0_9/basic_catalog/functions/basic_functions_api.ts
@@ -201,14 +201,8 @@ export const ContainsApi = {
   name: 'contains' as const,
   returnType: 'boolean' as const,
   schema: z.object({
-    string: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
-    substring: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
+    string: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
+    substring: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
   }),
 };
 
@@ -223,14 +217,8 @@ export const StartsWithApi = {
   name: 'starts_with' as const,
   returnType: 'boolean' as const,
   schema: z.object({
-    string: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
-    prefix: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
+    string: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
+    prefix: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
   }),
 };
 
@@ -245,14 +233,8 @@ export const EndsWithApi = {
   name: 'ends_with' as const,
   returnType: 'boolean' as const,
   schema: z.object({
-    string: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
-    suffix: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
+    string: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
+    suffix: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
   }),
 };
 
@@ -282,14 +264,8 @@ export const RegexApi = {
   name: 'regex' as const,
   returnType: 'boolean' as const,
   schema: z.object({
-    value: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
-    pattern: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
+    value: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
+    pattern: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
   }),
 };
 
@@ -347,10 +323,7 @@ export const EmailApi = {
   name: 'email' as const,
   returnType: 'boolean' as const,
   schema: z.object({
-    value: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
+    value: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
   }),
 };
 
@@ -483,10 +456,7 @@ export const OpenUrlApi = {
   name: 'openUrl' as const,
   returnType: 'void' as const,
   schema: z.object({
-    url: z.preprocess(
-      v => (v === undefined ? undefined : String(v)),
-      z.string(),
-    ),
+    url: z.preprocess(v => (v === undefined ? undefined : String(v)), z.string()),
   }),
 };
 
diff --git a/renderers/web_core/src/v0_9/catalog/types.test.ts b/renderers/web_core/src/v0_9/catalog/types.test.ts
index 77ea8829f..f622ec723 100644
--- a/renderers/web_core/src/v0_9/catalog/types.test.ts
+++ b/renderers/web_core/src/v0_9/catalog/types.test.ts
@@ -128,8 +128,7 @@ describe('InferredComponentApiSchemaType', () => {
       : false;
 
     // typesMatchExact only accepts "true" if `TypesAreEquivalent`
-    const typesMatchExact: TypesAreEquivalent<ExpectedType, InferredType> =
-      true;
+    const typesMatchExact: TypesAreEquivalent<ExpectedType, InferredType> = true;
 
     // Appease linter by using the variables
     assert.ok(mockApi);
diff --git a/renderers/web_core/src/v0_9/catalog/types.ts b/renderers/web_core/src/v0_9/catalog/types.ts
index c4d6a6abf..6ccdfbaae 100644
--- a/renderers/web_core/src/v0_9/catalog/types.ts
+++ b/renderers/web_core/src/v0_9/catalog/types.ts
@@ -26,14 +26,7 @@ export function isSignal(val: any): val is Signal<any> {
   return val && typeof val === 'object' && 'value' in val && 'peek' in val;
 }
 
-export type A2uiReturnType =
-  | 'string'
-  | 'number'
-  | 'boolean'
-  | 'array'
-  | 'object'
-  | 'any'
-  | 'void';
+export type A2uiReturnType = 'string' | 'number' | 'boolean' | 'array' | 'object' | 'any' | 'void';
 
 export type InferA2uiReturnType<T extends A2uiReturnType> = T extends 'string'
   ? string
@@ -84,11 +77,7 @@ export function createFunctionImplementation<
     name: api.name,
     returnType: api.returnType,
     schema: api.schema,
-    execute: execute as (
-      args: Record<string, any>,
-      ctx: DataContext,
-      ab?: AbortSignal,
-    ) => unknown,
+    execute: execute as (args: Record<string, any>, ctx: DataContext, ab?: AbortSignal) => unknown,
   };
 }
 
@@ -120,9 +109,7 @@ export interface ComponentApi<Schema extends z.ZodTypeAny = z.ZodTypeAny> {
  * This type uses `z.infer` on the `schema` property of a `ComponentApi` object.
  * It is used to access the schema props of a component with type safety.
  */
-export type InferredComponentApiSchemaType<Api extends ComponentApi> = z.infer<
-  Api['schema']
->;
+export type InferredComponentApiSchemaType<Api extends ComponentApi> = z.infer<Api['schema']>;
 
 /**
  * A collection of available components and functions.
@@ -177,10 +164,7 @@ export class Catalog<T extends ComponentApi> {
     this.invoker = (name, rawArgs, ctx, abortSignal) => {
       const fn = this.functions.get(name);
       if (!fn) {
-        throw new A2uiExpressionError(
-          `Function not found in catalog '${this.id}': ${name}`,
-          name,
-        );
+        throw new A2uiExpressionError(`Function not found in catalog '${this.id}': ${name}`, name);
       }
 
       // Provides runtime safety: Coerces and strips invalid arguments before execute()
diff --git a/renderers/web_core/src/v0_9/processing/message-processor.test.ts b/renderers/web_core/src/v0_9/processing/message-processor.test.ts
index e02fa0b3d..3f3e1d35f 100644
--- a/renderers/web_core/src/v0_9/processing/message-processor.test.ts
+++ b/renderers/web_core/src/v0_9/processing/message-processor.test.ts
@@ -61,31 +61,17 @@ describe('MessageProcessor', () => {
       const buttonSchema = inlineCat.components!.Button;
 
       assert.ok(buttonSchema.allOf);
-      assert.strictEqual(
-        buttonSchema.allOf[0].$ref,
-        'common_types.json#/$defs/ComponentCommon',
-      );
-      assert.strictEqual(
-        buttonSchema.allOf[1].properties.component.const,
-        'Button',
-      );
-      assert.strictEqual(
-        buttonSchema.allOf[1].properties.label.description,
-        'The button label',
-      );
-      assert.deepStrictEqual(buttonSchema.allOf[1].required, [
-        'component',
-        'label',
-      ]);
+      assert.strictEqual(buttonSchema.allOf[0].$ref, 'common_types.json#/$defs/ComponentCommon');
+      assert.strictEqual(buttonSchema.allOf[1].properties.component.const, 'Button');
+      assert.strictEqual(buttonSchema.allOf[1].properties.label.description, 'The button label');
+      assert.deepStrictEqual(buttonSchema.allOf[1].required, ['component', 'label']);
     });
 
     it('transforms REF: descriptions into valid $ref nodes', () => {
       const customApi: ComponentApi = {
         name: 'Custom',
         schema: z.object({
-          title: z
-            .string()
-            .describe('REF:common_types.json#/$defs/DynamicString|The title'),
+          title: z.string().describe('REF:common_types.json#/$defs/DynamicString|The title'),
         }),
       };
       const cat = new Catalog('cat-ref', [customApi]);
@@ -93,13 +79,9 @@ describe('MessageProcessor', () => {
 
       const caps = proc.getClientCapabilities({includeInlineCatalogs: true});
       const titleSchema =
-        caps['v0.9'].inlineCatalogs![0].components!.Custom.allOf[1].properties
-          .title;
+        caps['v0.9'].inlineCatalogs![0].components!.Custom.allOf[1].properties.title;
 
-      assert.strictEqual(
-        titleSchema.$ref,
-        'common_types.json#/$defs/DynamicString',
-      );
+      assert.strictEqual(titleSchema.$ref, 'common_types.json#/$defs/DynamicString');
       assert.strictEqual(titleSchema.description, 'The title');
       // Ensure Zod's 'type: string' was removed
       assert.strictEqual(titleSchema.type, undefined);
@@ -123,9 +105,7 @@ describe('MessageProcessor', () => {
       };
 
       const themeSchema = z.object({
-        primaryColor: z
-          .string()
-          .describe('REF:common_types.json#/$defs/Color|The main color'),
+        primaryColor: z.string().describe('REF:common_types.json#/$defs/Color|The main color'),
       });
 
       const cat = new Catalog('cat-full', [buttonApi], [addFn], themeSchema);
@@ -142,22 +122,13 @@ describe('MessageProcessor', () => {
       const fn = inlineCat.functions[0];
       assert.strictEqual(fn.name, 'add');
       assert.strictEqual(fn.returnType, 'number');
-      assert.strictEqual(
-        fn.parameters.properties.a.description,
-        'First number',
-      );
+      assert.strictEqual(fn.parameters.properties.a.description, 'First number');
 
       // Verify Theme
       assert.ok(inlineCat.theme);
       assert.ok(inlineCat.theme.primaryColor);
-      assert.strictEqual(
-        inlineCat.theme.primaryColor.$ref,
-        'common_types.json#/$defs/Color',
-      );
-      assert.strictEqual(
-        inlineCat.theme.primaryColor.description,
-        'The main color',
-      );
+      assert.strictEqual(inlineCat.theme.primaryColor.$ref, 'common_types.json#/$defs/Color');
+      assert.strictEqual(inlineCat.theme.primaryColor.description, 'The main color');
     });
 
     it('omits functions and theme when catalog has none', () => {
@@ -180,9 +151,7 @@ describe('MessageProcessor', () => {
             z.object({
               action: z
                 .string()
-                .describe(
-                  'REF:common_types.json#/$defs/Action|The action to perform',
-                ),
+                .describe('REF:common_types.json#/$defs/Action|The action to perform'),
             }),
           ),
         }),
@@ -191,9 +160,7 @@ describe('MessageProcessor', () => {
       const proc = new MessageProcessor([cat]);
       const caps = proc.getClientCapabilities({includeInlineCatalogs: true});
 
-      const properties =
-        caps['v0.9'].inlineCatalogs![0].components!.DeepComp.allOf[1]
-          .properties;
+      const properties = caps['v0.9'].inlineCatalogs![0].components!.DeepComp.allOf[1].properties;
       const actionSchema = properties.items.items.properties.action;
 
       assert.strictEqual(actionSchema.$ref, 'common_types.json#/$defs/Action');
@@ -206,29 +173,19 @@ describe('MessageProcessor', () => {
         name: 'EdgeComp',
         schema: z.object({
           noPipe: z.string().describe('REF:common_types.json#/$defs/NoPipe'),
-          multiPipe: z
-            .string()
-            .describe('REF:common_types.json#/$defs/MultiPipe|First|Second'),
+          multiPipe: z.string().describe('REF:common_types.json#/$defs/MultiPipe|First|Second'),
         }),
       };
       const cat = new Catalog('cat-edge', [edgeApi]);
       const proc = new MessageProcessor([cat]);
       const caps = proc.getClientCapabilities({includeInlineCatalogs: true});
 
-      const properties =
-        caps['v0.9'].inlineCatalogs![0].components!.EdgeComp.allOf[1]
-          .properties;
+      const properties = caps['v0.9'].inlineCatalogs![0].components!.EdgeComp.allOf[1].properties;
 
-      assert.strictEqual(
-        properties.noPipe.$ref,
-        'common_types.json#/$defs/NoPipe',
-      );
+      assert.strictEqual(properties.noPipe.$ref, 'common_types.json#/$defs/NoPipe');
       assert.strictEqual(properties.noPipe.description, undefined);
 
-      assert.strictEqual(
-        properties.multiPipe.$ref,
-        'common_types.json#/$defs/MultiPipe',
-      );
+      assert.strictEqual(properties.multiPipe.$ref, 'common_types.json#/$defs/MultiPipe');
       assert.strictEqual(properties.multiPipe.description, 'First');
     });
 
diff --git a/renderers/web_core/src/v0_9/processing/message-processor.ts b/renderers/web_core/src/v0_9/processing/message-processor.ts
index a6e170926..31a9e2ada 100644
--- a/renderers/web_core/src/v0_9/processing/message-processor.ts
+++ b/renderers/web_core/src/v0_9/processing/message-processor.ts
@@ -29,10 +29,7 @@ import {
   DeleteSurfaceMessage,
   A2uiMessageListWrapper,
 } from '../schema/server-to-client.js';
-import {
-  A2uiClientCapabilities,
-  InlineCatalog,
-} from '../schema/client-capabilities.js';
+import {A2uiClientCapabilities, InlineCatalog} from '../schema/client-capabilities.js';
 import {A2uiClientDataModel} from '../schema/client-to-server.js';
 import {A2uiStateError, A2uiValidationError} from '../errors.js';
 
@@ -81,9 +78,7 @@ export class MessageProcessor<T extends ComponentApi> {
     };
 
     if (options?.includeInlineCatalogs) {
-      capabilities['v0.9'].inlineCatalogs = this.catalogs.map(c =>
-        this.generateInlineCatalog(c),
-      );
+      capabilities['v0.9'].inlineCatalogs = this.catalogs.map(c => this.generateInlineCatalog(c));
     }
 
     return capabilities;
@@ -153,10 +148,7 @@ export class MessageProcessor<T extends ComponentApi> {
     if (typeof node !== 'object' || node === null) return;
 
     // If the node itself is a REF target, transform it and stop recursion.
-    if (
-      typeof node.description === 'string' &&
-      node.description.startsWith('REF:')
-    ) {
+    if (typeof node.description === 'string' && node.description.startsWith('REF:')) {
       const parts = node.description.substring(4).split('|');
       const ref = parts[0];
       const desc = parts[1] || '';
@@ -283,12 +275,7 @@ export class MessageProcessor<T extends ComponentApi> {
       throw new A2uiStateError(`Surface ${surfaceId} already exists.`);
     }
 
-    const surface = new SurfaceModel<T>(
-      surfaceId,
-      catalog,
-      theme,
-      sendDataModel ?? false,
-    );
+    const surface = new SurfaceModel<T>(surfaceId, catalog, theme, sendDataModel ?? false);
     this.model.addSurface(surface);
   }
 
@@ -298,26 +285,20 @@ export class MessageProcessor<T extends ComponentApi> {
     this.model.deleteSurface(payload.surfaceId);
   }
 
-  private processUpdateComponentsMessage(
-    message: UpdateComponentsMessage,
-  ): void {
+  private processUpdateComponentsMessage(message: UpdateComponentsMessage): void {
     const payload = message.updateComponents;
     if (!payload.surfaceId) return;
 
     const surface = this.model.getSurface(payload.surfaceId);
     if (!surface) {
-      throw new A2uiStateError(
-        `Surface not found for message: ${payload.surfaceId}`,
-      );
+      throw new A2uiStateError(`Surface not found for message: ${payload.surfaceId}`);
     }
 
     for (const comp of payload.components) {
       const {id, component, ...properties} = comp;
 
       if (!id) {
-        throw new A2uiValidationError(
-          `Component '${component}' is missing an 'id'.`,
-        );
+        throw new A2uiValidationError(`Component '${component}' is missing an 'id'.`);
       }
 
       const existing = surface.componentsModel.get(id);
@@ -332,9 +313,7 @@ export class MessageProcessor<T extends ComponentApi> {
         }
       } else {
         if (!component) {
-          throw new A2uiValidationError(
-            `Cannot create component ${id} without a type.`,
-          );
+          throw new A2uiValidationError(`Cannot create component ${id} without a type.`);
         }
         const newComponent = new ComponentModel(id, component, properties);
         surface.componentsModel.addComponent(newComponent);
@@ -348,9 +327,7 @@ export class MessageProcessor<T extends ComponentApi> {
 
     const surface = this.model.getSurface(payload.surfaceId);
     if (!surface) {
-      throw new A2uiStateError(
-        `Surface not found for message: ${payload.surfaceId}`,
-      );
+      throw new A2uiStateError(`Surface not found for message: ${payload.surfaceId}`);
     }
 
     const path = payload.path || '/';
diff --git a/renderers/web_core/src/v0_9/reactivity/signals.test.ts b/renderers/web_core/src/v0_9/reactivity/signals.test.ts
index 31bd52934..e172a84a6 100644
--- a/renderers/web_core/src/v0_9/reactivity/signals.test.ts
+++ b/renderers/web_core/src/v0_9/reactivity/signals.test.ts
@@ -16,11 +16,7 @@
 
 import assert from 'node:assert';
 import {describe, it} from 'node:test';
-import {
-  Signal as PSignal,
-  computed as pComputed,
-  effect as pEffect,
-} from '@preact/signals-core';
+import {Signal as PSignal, computed as pComputed, effect as pEffect} from '@preact/signals-core';
 import {
   signal as aSignal,
   computed as aComputed,
diff --git a/renderers/web_core/src/v0_9/rendering/component-context.ts b/renderers/web_core/src/v0_9/rendering/component-context.ts
index 8866aae1b..28c3f2548 100644
--- a/renderers/web_core/src/v0_9/rendering/component-context.ts
+++ b/renderers/web_core/src/v0_9/rendering/component-context.ts
@@ -44,11 +44,7 @@ export class ComponentContext {
    * @param componentId The ID of the component.
    * @param dataModelBasePath The base path for data model access (default: '/').
    */
-  constructor(
-    surface: SurfaceModel<any>,
-    componentId: string,
-    dataModelBasePath: string = '/',
-  ) {
+  constructor(surface: SurfaceModel<any>, componentId: string, dataModelBasePath: string = '/') {
     const model = surface.componentsModel.get(componentId);
     if (!model) {
       throw new A2uiStateError(`Component not found: ${componentId}`);
@@ -58,8 +54,7 @@ export class ComponentContext {
     this.theme = surface.theme;
 
     this.dataContext = new DataContext(surface, dataModelBasePath);
-    this._actionDispatcher = action =>
-      surface.dispatchAction(action, this.componentModel.id);
+    this._actionDispatcher = action => surface.dispatchAction(action, this.componentModel.id);
   }
 
   private _actionDispatcher: (action: any) => Promise<void>;
diff --git a/renderers/web_core/src/v0_9/rendering/data-context.test.ts b/renderers/web_core/src/v0_9/rendering/data-context.test.ts
index 3dac94ae2..ba16417cc 100644
--- a/renderers/web_core/src/v0_9/rendering/data-context.test.ts
+++ b/renderers/web_core/src/v0_9/rendering/data-context.test.ts
@@ -62,10 +62,7 @@ describe('DataContext', () => {
   });
 
   it('resolves nested paths', () => {
-    assert.strictEqual(
-      context.resolveDynamicValue({path: 'address/city'}),
-      'Wonderland',
-    );
+    assert.strictEqual(context.resolveDynamicValue({path: 'address/city'}), 'Wonderland');
   });
 
   it('updates data via relative path', () => {
@@ -76,18 +73,12 @@ describe('DataContext', () => {
   it('creates nested context', () => {
     const addressContext = context.nested('address');
     assert.strictEqual(addressContext.path, '/user/address');
-    assert.strictEqual(
-      addressContext.resolveDynamicValue({path: 'city'}),
-      'Wonderland',
-    );
+    assert.strictEqual(addressContext.resolveDynamicValue({path: 'city'}), 'Wonderland');
   });
 
   it('handles root context', () => {
     const rootContext = createTestDataContext(model, '/');
-    assert.strictEqual(
-      rootContext.resolveDynamicValue({path: 'user/name'}),
-      'Alice',
-    );
+    assert.strictEqual(rootContext.resolveDynamicValue({path: 'user/name'}), 'Alice');
   });
 
   it('subscribes relative path', () => {
@@ -112,10 +103,7 @@ describe('DataContext', () => {
   });
 
   it('resolves literal arrays', () => {
-    assert.deepStrictEqual(context.resolveDynamicValue(['literal', 'array']), [
-      'literal',
-      'array',
-    ]);
+    assert.deepStrictEqual(context.resolveDynamicValue(['literal', 'array']), ['literal', 'array']);
   });
 
   it('subscribes literal arrays as static', () => {
@@ -195,12 +183,9 @@ describe('DataContext', () => {
     const ctx = createTestDataContext(model, '/', fnInvoker);
 
     let called = false;
-    ctx.subscribeDynamicValue(
-      {call: 'getPi', args: {}, returnType: 'any'},
-      () => {
-        called = true;
-      },
-    );
+    ctx.subscribeDynamicValue({call: 'getPi', args: {}, returnType: 'any'}, () => {
+      called = true;
+    });
     assert.strictEqual(called, false);
   });
 
@@ -208,10 +193,7 @@ describe('DataContext', () => {
     const ctx = createTestDataContext(model, '/user', () => {
       throw new Error('Function invoker is not configured');
     });
-    const sub = ctx.subscribeDynamicValue(
-      {call: 'add', args: {}, returnType: 'any'},
-      () => {},
-    );
+    const sub = ctx.subscribeDynamicValue({call: 'add', args: {}, returnType: 'any'}, () => {});
     assert.strictEqual(sub.value, undefined);
   });
 
@@ -323,14 +305,9 @@ describe('DataContext', () => {
         ]);
       };
       let dispatchedError: any = null;
-      const ctx = createTestDataContext(
-        model,
-        '/',
-        invokerWithZodError,
-        err => {
-          dispatchedError = err;
-        },
-      );
+      const ctx = createTestDataContext(model, '/', invokerWithZodError, err => {
+        dispatchedError = err;
+      });
 
       const result = ctx.resolveDynamicValue({
         call: 'fail',
@@ -351,14 +328,9 @@ describe('DataContext', () => {
         throw err;
       };
       let dispatchedError: any = null;
-      const ctx = createTestDataContext(
-        model,
-        '/',
-        invokerWithRegularError,
-        err => {
-          dispatchedError = err;
-        },
-      );
+      const ctx = createTestDataContext(model, '/', invokerWithRegularError, err => {
+        dispatchedError = err;
+      });
 
       const result = ctx.resolveDynamicValue({
         call: 'fail',
@@ -381,14 +353,9 @@ describe('DataContext', () => {
         throw new A2uiExpressionError('Custom expr error', 'custom_func');
       };
       let dispatchedError: any = null;
-      const ctx = createTestDataContext(
-        model,
-        '/',
-        invokerWithExpressionError,
-        err => {
-          dispatchedError = err;
-        },
-      );
+      const ctx = createTestDataContext(model, '/', invokerWithExpressionError, err => {
+        dispatchedError = err;
+      });
 
       const result = ctx.resolveDynamicValue({
         call: 'fail',
@@ -407,8 +374,7 @@ describe('DataContext', () => {
       const fnInvoker = (name: string) => {
         if (name === 'inner') {
           return computed(() => {
-            if (trigger.value)
-              throw new A2uiExpressionError('Inner failure', 'inner_func');
+            if (trigger.value) throw new A2uiExpressionError('Inner failure', 'inner_func');
             return 'ok';
           });
         }
@@ -476,10 +442,7 @@ describe('DataContext', () => {
       assert.strictEqual(sub.value, undefined);
       assert.ok(dispatchedError);
       assert.strictEqual((dispatchedError as any).code, 'EXPRESSION_ERROR');
-      assert.strictEqual(
-        (dispatchedError as any).message,
-        'Generic inner failure',
-      );
+      assert.strictEqual((dispatchedError as any).message, 'Generic inner failure');
     });
   });
 });
diff --git a/renderers/web_core/src/v0_9/rendering/data-context.ts b/renderers/web_core/src/v0_9/rendering/data-context.ts
index 7c22a370e..ea2f24723 100644
--- a/renderers/web_core/src/v0_9/rendering/data-context.ts
+++ b/renderers/web_core/src/v0_9/rendering/data-context.ts
@@ -18,12 +18,7 @@
 import {signal, computed, Signal, effect} from '@preact/signals-core';
 import {z} from 'zod';
 import {DataModel, DataSubscription} from '../state/data-model.js';
-import type {
-  DynamicValue,
-  DataBinding,
-  FunctionCall,
-  Action,
-} from '../schema/common-types.js';
+import type {DynamicValue, DataBinding, FunctionCall, Action} from '../schema/common-types.js';
 import {A2uiExpressionError} from '../errors.js';
 import {isSignal} from '../catalog/types.js';
 
@@ -106,11 +101,7 @@ export class DataContext {
 
       const abortController = new AbortController();
 
-      const result = this.evaluateFunctionReactive<V>(
-        call.call,
-        args,
-        abortController.signal,
-      );
+      const result = this.evaluateFunctionReactive<V>(call.call, args, abortController.signal);
 
       if (result === undefined) {
         return undefined as any;
@@ -198,11 +189,7 @@ export class DataContext {
 
       if (Object.keys(argSignals).length === 0) {
         const abortController = new AbortController();
-        const result = this.evaluateFunctionReactive<V>(
-          call.call,
-          {},
-          abortController.signal,
-        );
+        const result = this.evaluateFunctionReactive<V>(call.call, {}, abortController.signal);
         const sig = result instanceof Signal ? result : signal(result);
         (sig as any).unsubscribe = () => abortController.abort();
         return sig;
@@ -232,11 +219,7 @@ export class DataContext {
           }
           abortController = new AbortController();
 
-          const res = this.evaluateFunctionReactive<V>(
-            call.call,
-            args,
-            abortController.signal,
-          );
+          const res = this.evaluateFunctionReactive<V>(call.call, args, abortController.signal);
 
           if (isSignal(res)) {
             innerUnsubscribe = effect(() => {
@@ -337,8 +320,7 @@ export class DataContext {
     } else {
       this.surface.dispatchError({
         code: 'EXPRESSION_ERROR',
-        message:
-          e.message ?? `An unexpected error occurred in function ${name}.`,
+        message: e.message ?? `An unexpected error occurred in function ${name}.`,
         expression: name,
         details: {stack: e.stack},
       });
diff --git a/renderers/web_core/src/v0_9/rendering/generic-binder.test.ts b/renderers/web_core/src/v0_9/rendering/generic-binder.test.ts
index 73164755d..02c7621a7 100644
--- a/renderers/web_core/src/v0_9/rendering/generic-binder.test.ts
+++ b/renderers/web_core/src/v0_9/rendering/generic-binder.test.ts
@@ -42,8 +42,7 @@ describe('GenericBinder Checkable Trait', () => {
       [
         'min_length',
         {
-          execute: (args: any) =>
-            typeof args.value === 'string' && args.value.length >= args.min,
+          execute: (args: any) => typeof args.value === 'string' && args.value.length >= args.min,
           schema: z.object({value: z.any(), min: z.number()}),
         },
       ],
@@ -85,9 +84,7 @@ describe('GenericBinder Checkable Trait', () => {
 
     // Initial state: should be invalid
     assert.strictEqual(binder.snapshot.isValid, false);
-    assert.deepStrictEqual(binder.snapshot.validationErrors, [
-      'Value is required',
-    ]);
+    assert.deepStrictEqual(binder.snapshot.validationErrors, ['Value is required']);
 
     // Update data: should become valid
     surface.dataModel.set('/val', 'hello');
@@ -138,9 +135,7 @@ describe('GenericBinder Checkable Trait', () => {
     await new Promise(resolve => setTimeout(resolve, 0));
 
     assert.strictEqual(binder.snapshot.isValid, false);
-    assert.deepStrictEqual(binder.snapshot.validationErrors, [
-      'Must be at least 3 characters',
-    ]);
+    assert.deepStrictEqual(binder.snapshot.validationErrors, ['Must be at least 3 characters']);
 
     // Update data to satisfy all rules
     surface.dataModel.set('/val', 'hello');
@@ -171,9 +166,7 @@ describe('GenericBinder Checkable Trait', () => {
     const binder = new GenericBinder<any>(context, schema);
 
     assert.strictEqual(binder.snapshot.isValid, false);
-    assert.deepStrictEqual(binder.snapshot.validationErrors, [
-      'Validation failed',
-    ]);
+    assert.deepStrictEqual(binder.snapshot.validationErrors, ['Validation failed']);
   });
 
   it('should default to valid if checks array is empty or undefined', async () => {
diff --git a/renderers/web_core/src/v0_9/rendering/generic-binder.ts b/renderers/web_core/src/v0_9/rendering/generic-binder.ts
index 6bdb952b8..3dd24c471 100644
--- a/renderers/web_core/src/v0_9/rendering/generic-binder.ts
+++ b/renderers/web_core/src/v0_9/rendering/generic-binder.ts
@@ -16,12 +16,7 @@
 
 import {z} from 'zod';
 import {ComponentContext} from './component-context.js';
-import {
-  Action,
-  ChildList,
-  DataBinding,
-  FunctionCall,
-} from '../schema/common-types.js';
+import {Action, ChildList, DataBinding, FunctionCall} from '../schema/common-types.js';
 
 // --- Schema Scraping ---
 
@@ -60,10 +55,7 @@ export function scrapeSchemaBehavior(schema: z.ZodTypeAny): BehaviorNode {
   return getFieldBehavior(schema);
 }
 
-function getFieldBehavior(
-  type: z.ZodTypeAny,
-  propertyName?: string,
-): BehaviorNode {
+function getFieldBehavior(type: z.ZodTypeAny, propertyName?: string): BehaviorNode {
   let current = type;
 
   // Unwrap optionals/nullables/defaults
@@ -84,26 +76,18 @@ function getFieldBehavior(
     const options = current._def.options as z.ZodTypeAny[];
 
     // ActionSchema is a union containing { event: ... }
-    const isAction = options.some(
-      o => o._def.typeName === 'ZodObject' && o._def.shape().event,
-    );
+    const isAction = options.some(o => o._def.typeName === 'ZodObject' && o._def.shape().event);
     if (isAction) return {type: 'ACTION'};
 
     // Dynamic strings/values are unions containing DataBindingSchema { path: ... } but NOT { componentId: ... }
     const isDynamic = options.some(
-      o =>
-        o._def.typeName === 'ZodObject' &&
-        o._def.shape().path &&
-        !o._def.shape().componentId,
+      o => o._def.typeName === 'ZodObject' && o._def.shape().path && !o._def.shape().componentId,
     );
     if (isDynamic) return {type: 'DYNAMIC'};
 
     // ChildList is a union containing an array and an object with { componentId, path }
     const isChildList = options.some(
-      o =>
-        o._def.typeName === 'ZodObject' &&
-        o._def.shape().componentId &&
-        o._def.shape().path,
+      o => o._def.typeName === 'ZodObject' && o._def.shape().componentId && o._def.shape().path,
     );
     if (isChildList) return {type: 'STRUCTURAL'};
   } else if (current._def.typeName === 'ZodString') {
@@ -154,9 +138,9 @@ export type ResolveA2uiProp<T> = [NonNullable<T>] extends [Action]
  * If a schema has a `value: DynamicString`, this type generates a `setValue(val: string)` method.
  */
 export type GenerateSetters<T> = {
-  [K in keyof T as IsDynamic<T[K]> extends true
-    ? `set${Capitalize<string & K>}`
-    : never]-?: (value: Exclude<NonNullable<T[K]>, DynamicTypes>) => void;
+  [K in keyof T as IsDynamic<T[K]> extends true ? `set${Capitalize<string & K>}` : never]-?: (
+    value: Exclude<NonNullable<T[K]>, DynamicTypes>,
+  ) => void;
 };
 
 /**
@@ -238,23 +222,15 @@ export class GenericBinder<T> {
     this.notify();
   }
 
-  private resolveAndBind(
-    value: any,
-    behavior: BehaviorNode,
-    path: string[],
-    isSync: boolean,
-  ): any {
+  private resolveAndBind(value: any, behavior: BehaviorNode, path: string[], isSync: boolean): any {
     if (value === undefined || value === null) return value;
 
     switch (behavior.type) {
       case 'DYNAMIC': {
-        const bound = this.context.dataContext.subscribeDynamicValue(
-          value,
-          newVal => {
-            this.updateDeepValue(path, newVal);
-            this.notify();
-          },
-        );
+        const bound = this.context.dataContext.subscribeDynamicValue(value, newVal => {
+          this.updateDeepValue(path, newVal);
+          this.notify();
+        });
 
         if (!isSync) {
           this.dataListeners.push(() => bound.unsubscribe());
@@ -272,8 +248,7 @@ export class GenericBinder<T> {
               return this.context.dataContext.resolveDynamicValue(val);
             if (Array.isArray(val)) return val.map(resolveDeepSync);
             const res: any = {};
-            for (const [k, v] of Object.entries(val))
-              res[k] = resolveDeepSync(v);
+            for (const [k, v] of Object.entries(val)) res[k] = resolveDeepSync(v);
             return res;
           };
           this.context.dispatchAction(resolveDeepSync(value));
@@ -281,12 +256,7 @@ export class GenericBinder<T> {
       }
 
       case 'STRUCTURAL': {
-        if (
-          value &&
-          typeof value === 'object' &&
-          value.path &&
-          value.componentId
-        ) {
+        if (value && typeof value === 'object' && value.path && value.componentId) {
           const bound = this.context.dataContext.subscribeDynamicValue(
             {path: value.path},
             newVal => {
@@ -319,21 +289,16 @@ export class GenericBinder<T> {
 
       case 'CHECKABLE': {
         const rules = Array.isArray(value) ? value : [];
-        const ruleResults: {valid: boolean; message: string}[] = rules.map(
-          () => ({valid: true, message: ''}),
-        );
+        const ruleResults: {valid: boolean; message: string}[] = rules.map(() => ({
+          valid: true,
+          message: '',
+        }));
 
         const parentPath = path.slice(0, -1);
         const updateValidationState = () => {
           const errors = ruleResults.filter(r => !r.valid).map(r => r.message);
-          this.updateDeepValue(
-            [...parentPath, 'isValid' as any],
-            errors.length === 0,
-          );
-          this.updateDeepValue(
-            [...parentPath, 'validationErrors' as any],
-            errors,
-          );
+          this.updateDeepValue([...parentPath, 'isValid' as any], errors.length === 0);
+          this.updateDeepValue([...parentPath, 'validationErrors' as any], errors);
           this.notify();
         };
 
@@ -342,13 +307,10 @@ export class GenericBinder<T> {
           const message = rule.message || 'Validation failed';
           ruleResults[index].message = message;
 
-          const bound = this.context.dataContext.subscribeDynamicValue(
-            condition,
-            newVal => {
-              ruleResults[index].valid = !!newVal;
-              updateValidationState();
-            },
-          );
+          const bound = this.context.dataContext.subscribeDynamicValue(condition, newVal => {
+            ruleResults[index].valid = !!newVal;
+            updateValidationState();
+          });
 
           if (!isSync) {
             this.dataListeners.push(() => bound.unsubscribe());
@@ -359,17 +321,9 @@ export class GenericBinder<T> {
         });
 
         // Set initial state
-        const initialErrors = ruleResults
-          .filter(r => !r.valid)
-          .map(r => r.message);
-        this.updateDeepValue(
-          [...parentPath, 'isValid' as any],
-          initialErrors.length === 0,
-        );
-        this.updateDeepValue(
-          [...parentPath, 'validationErrors' as any],
-          initialErrors,
-        );
+        const initialErrors = ruleResults.filter(r => !r.valid).map(r => r.message);
+        this.updateDeepValue([...parentPath, 'isValid' as any], initialErrors.length === 0);
+        this.updateDeepValue([...parentPath, 'validationErrors' as any], initialErrors);
 
         return value; // The 'checks' property itself remains as the original rules array
       }
@@ -380,12 +334,7 @@ export class GenericBinder<T> {
       case 'ARRAY': {
         if (!Array.isArray(value)) return value;
         return value.map((item, index) =>
-          this.resolveAndBind(
-            item,
-            behavior.element,
-            [...path, index.toString()],
-            isSync,
-          ),
+          this.resolveAndBind(item, behavior.element, [...path, index.toString()], isSync),
         );
       }
 
@@ -396,12 +345,7 @@ export class GenericBinder<T> {
         // 1. Resolve all provided properties
         for (const [k, v] of Object.entries(value)) {
           const childBehavior = behavior.shape[k] || {type: 'STATIC'};
-          result[k] = this.resolveAndBind(
-            v,
-            childBehavior,
-            [...path, k],
-            isSync,
-          );
+          result[k] = this.resolveAndBind(v, childBehavior, [...path, k], isSync);
         }
 
         // 2. Ensure all dynamic setters exist, even if the property wasn't provided in the payload
@@ -410,15 +354,8 @@ export class GenericBinder<T> {
             const setterName = `set${k.charAt(0).toUpperCase() + k.slice(1)}`;
             const rawPropValue = value[k];
             result[setterName] = (newValue: any) => {
-              if (
-                rawPropValue &&
-                typeof rawPropValue === 'object' &&
-                'path' in rawPropValue
-              ) {
-                this.context.dataContext.set(
-                  (rawPropValue as any).path,
-                  newValue,
-                );
+              if (rawPropValue && typeof rawPropValue === 'object' && 'path' in rawPropValue) {
+                this.context.dataContext.set((rawPropValue as any).path, newValue);
               }
             };
           }
@@ -439,11 +376,7 @@ export class GenericBinder<T> {
 
     if (Array.isArray(obj)) {
       const newArr = [...obj];
-      newArr[Number(key)] = this.cloneAndUpdate(
-        newArr[Number(key)],
-        rest,
-        newValue,
-      );
+      newArr[Number(key)] = this.cloneAndUpdate(newArr[Number(key)], rest, newValue);
       return newArr;
     } else {
       return {
diff --git a/renderers/web_core/src/v0_9/schema/client-capabilities.ts b/renderers/web_core/src/v0_9/schema/client-capabilities.ts
index 0f99319a2..4a4a1965b 100644
--- a/renderers/web_core/src/v0_9/schema/client-capabilities.ts
+++ b/renderers/web_core/src/v0_9/schema/client-capabilities.ts
@@ -28,14 +28,7 @@ export interface FunctionDefinition {
   name: string;
   description?: string;
   parameters: JsonSchema;
-  returnType:
-    | 'string'
-    | 'number'
-    | 'boolean'
-    | 'array'
-    | 'object'
-    | 'any'
-    | 'void';
+  returnType: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'any' | 'void';
 }
 
 /**
diff --git a/renderers/web_core/src/v0_9/schema/client-to-server.test.ts b/renderers/web_core/src/v0_9/schema/client-to-server.test.ts
index 43bf7510e..2a52f9045 100644
--- a/renderers/web_core/src/v0_9/schema/client-to-server.test.ts
+++ b/renderers/web_core/src/v0_9/schema/client-to-server.test.ts
@@ -16,10 +16,7 @@
 
 import {describe, it} from 'node:test';
 import * as assert from 'node:assert';
-import {
-  A2uiClientMessageSchema,
-  A2uiClientDataModelSchema,
-} from './client-to-server.js';
+import {A2uiClientMessageSchema, A2uiClientDataModelSchema} from './client-to-server.js';
 
 describe('Client-to-Server Schema Verification', () => {
   it('validates a valid action message', () => {
diff --git a/renderers/web_core/src/v0_9/schema/client-to-server.ts b/renderers/web_core/src/v0_9/schema/client-to-server.ts
index 64ab184b6..9c18df2ff 100644
--- a/renderers/web_core/src/v0_9/schema/client-to-server.ts
+++ b/renderers/web_core/src/v0_9/schema/client-to-server.ts
@@ -24,19 +24,10 @@ export const A2uiClientActionSchema = z
   .object({
     name: z
       .string()
-      .describe(
-        "The name of the action, taken from the component's action.event.name property.",
-      ),
-    surfaceId: z
-      .string()
-      .describe('The id of the surface where the event originated.'),
-    sourceComponentId: z
-      .string()
-      .describe('The id of the component that triggered the event.'),
-    timestamp: z
-      .string()
-      .datetime()
-      .describe('An ISO 8601 timestamp of when the event occurred.'),
+      .describe("The name of the action, taken from the component's action.event.name property."),
+    surfaceId: z.string().describe('The id of the surface where the event originated.'),
+    sourceComponentId: z.string().describe('The id of the component that triggered the event.'),
+    timestamp: z.string().datetime().describe('An ISO 8601 timestamp of when the event occurred.'),
     context: z
       .record(z.any())
       .describe(
@@ -51,9 +42,7 @@ export const A2uiClientActionSchema = z
 export const A2uiValidationErrorSchema = z
   .object({
     code: z.literal('VALIDATION_FAILED'),
-    surfaceId: z
-      .string()
-      .describe('The id of the surface where the error occurred.'),
+    surfaceId: z.string().describe('The id of the surface where the error occurred.'),
     path: z
       .string()
       .describe(
@@ -61,9 +50,7 @@ export const A2uiValidationErrorSchema = z
       ),
     message: z
       .string()
-      .describe(
-        'A short one or two sentence description of why validation failed.',
-      ),
+      .describe('A short one or two sentence description of why validation failed.'),
   })
   .strict();
 
@@ -75,12 +62,8 @@ export const A2uiGenericErrorSchema = z
     code: z.string().refine(c => c !== 'VALIDATION_FAILED'),
     message: z
       .string()
-      .describe(
-        'A short one or two sentence description of why the error occurred.',
-      ),
-    surfaceId: z
-      .string()
-      .describe('The id of the surface where the error occurred.'),
+      .describe('A short one or two sentence description of why the error occurred.'),
+    surfaceId: z.string().describe('The id of the surface where the error occurred.'),
   })
   .passthrough();
 
@@ -88,10 +71,7 @@ export const A2uiGenericErrorSchema = z
  * Reports a client-side error.
  * Matches 'error' in specification/v0_9/json/client_to_server.json.
  */
-export const A2uiClientErrorSchema = z.union([
-  A2uiValidationErrorSchema,
-  A2uiGenericErrorSchema,
-]);
+export const A2uiClientErrorSchema = z.union([A2uiValidationErrorSchema, A2uiGenericErrorSchema]);
 
 /**
  * A message sent from the A2UI client to the server.
@@ -102,10 +82,7 @@ export const A2uiClientMessageSchema = z
     version: z.literal('v0.9'),
   })
   .and(
-    z.union([
-      z.object({action: A2uiClientActionSchema}),
-      z.object({error: A2uiClientErrorSchema}),
-    ]),
+    z.union([z.object({action: A2uiClientActionSchema}), z.object({error: A2uiClientErrorSchema})]),
   );
 
 /**
@@ -139,6 +116,4 @@ export const A2uiClientMessageListWrapperSchema = z
   .strict()
   .describe('An object wrapping a list of client messages.');
 
-export type A2uiClientMessageListWrapper = z.infer<
-  typeof A2uiClientMessageListWrapperSchema
->;
+export type A2uiClientMessageListWrapper = z.infer<typeof A2uiClientMessageListWrapperSchema>;
diff --git a/renderers/web_core/src/v0_9/schema/common-types.ts b/renderers/web_core/src/v0_9/schema/common-types.ts
index 6b8ccbf70..dde3f227b 100644
--- a/renderers/web_core/src/v0_9/schema/common-types.ts
+++ b/renderers/web_core/src/v0_9/schema/common-types.ts
@@ -18,9 +18,7 @@ import {z} from 'zod';
 
 export const DataBindingSchema = z
   .object({
-    path: z
-      .string()
-      .describe('A JSON Pointer path to a value in the data model.'),
+    path: z.string().describe('A JSON Pointer path to a value in the data model.'),
   })
   .describe(
     'REF:common_types.json#/$defs/DataBinding|A JSON Pointer path to a value in the data model.',
@@ -35,9 +33,7 @@ export const FunctionCallSchema = z
       .enum(['string', 'number', 'boolean', 'array', 'object', 'any', 'void'])
       .default('boolean'),
   })
-  .describe(
-    'REF:common_types.json#/$defs/FunctionCall|Invokes a named function on the client.',
-  );
+  .describe('REF:common_types.json#/$defs/FunctionCall|Invokes a named function on the client.');
 export type FunctionCallType = z.infer<typeof FunctionCallSchema>;
 
 export const DynamicBooleanSchema = z
@@ -97,25 +93,19 @@ export type DynamicValue = z.infer<typeof DynamicValueSchema>;
 
 export const ComponentIdSchema = z
   .string()
-  .describe(
-    'REF:common_types.json#/$defs/ComponentId|The unique identifier for a component.',
-  );
+  .describe('REF:common_types.json#/$defs/ComponentId|The unique identifier for a component.');
 /** The unique identifier for a component. */
 export type ComponentId = z.infer<typeof ComponentIdSchema>;
 
 export const ChildListSchema = z
   .union([
-    z
-      .array(ComponentIdSchema)
-      .describe('A static list of child component IDs.'),
+    z.array(ComponentIdSchema).describe('A static list of child component IDs.'),
     z
       .object({
         componentId: ComponentIdSchema,
         path: z
           .string()
-          .describe(
-            'The path to the list of component property objects in the data model.',
-          ),
+          .describe('The path to the list of component property objects in the data model.'),
       })
       .describe('A template for generating a dynamic list of children.'),
   ])
@@ -146,9 +136,7 @@ export type Action = z.infer<typeof ActionSchema>;
 export const CheckRuleSchema = z
   .object({
     condition: DynamicBooleanSchema,
-    message: z
-      .string()
-      .describe('The error message to display if the check fails.'),
+    message: z.string().describe('The error message to display if the check fails.'),
   })
   .describe(
     'REF:common_types.json#/$defs/CheckRule|A check rule consisting of a condition and an error message.',
@@ -158,10 +146,7 @@ export type CheckRule = z.infer<typeof CheckRuleSchema>;
 
 export const CheckableSchema = z
   .object({
-    checks: z
-      .array(CheckRuleSchema)
-      .optional()
-      .describe('A list of checks to perform.'),
+    checks: z.array(CheckRuleSchema).optional().describe('A list of checks to perform.'),
   })
   .describe(
     'REF:common_types.json#/$defs/Checkable|Properties for components that support client-side checks.',
@@ -183,9 +168,7 @@ export const AccessibilityAttributesSchema = z
   );
 
 /** Accessibility attributes like label and description. */
-export type AccessibilityAttributes = z.infer<
-  typeof AccessibilityAttributesSchema
->;
+export type AccessibilityAttributes = z.infer<typeof AccessibilityAttributesSchema>;
 
 export const AnyComponentSchema = z
   .object({
diff --git a/renderers/web_core/src/v0_9/schema/server-to-client.ts b/renderers/web_core/src/v0_9/schema/server-to-client.ts
index da360450e..e4a3c453c 100644
--- a/renderers/web_core/src/v0_9/schema/server-to-client.ts
+++ b/renderers/web_core/src/v0_9/schema/server-to-client.ts
@@ -22,12 +22,8 @@ export const CreateSurfaceMessageSchema = z
     version: z.literal('v0.9'),
     createSurface: z
       .object({
-        surfaceId: z
-          .string()
-          .describe('The unique identifier for the UI surface to be rendered.'),
-        catalogId: z
-          .string()
-          .describe('A string that uniquely identifies this catalog.'),
+        surfaceId: z.string().describe('The unique identifier for the UI surface to be rendered.'),
+        catalogId: z.string().describe('A string that uniquely identifies this catalog.'),
         theme: z.any().optional().describe('Theme parameters for the surface.'),
         sendDataModel: z
           .boolean()
@@ -43,9 +39,7 @@ export const UpdateComponentsMessageSchema = z
     version: z.literal('v0.9'),
     updateComponents: z
       .object({
-        surfaceId: z
-          .string()
-          .describe('The unique identifier for the UI surface to be updated.'),
+        surfaceId: z.string().describe('The unique identifier for the UI surface to be updated.'),
         components: z
           .array(AnyComponentSchema)
           .min(1)
@@ -62,17 +56,12 @@ export const UpdateDataModelMessageSchema = z
       .object({
         surfaceId: z
           .string()
-          .describe(
-            'The unique identifier for the UI surface this data model update applies to.',
-          ),
+          .describe('The unique identifier for the UI surface this data model update applies to.'),
         path: z
           .string()
           .optional()
           .describe('An optional path to a location within the data model.'),
-        value: z
-          .any()
-          .optional()
-          .describe('The data to be updated in the data model.'),
+        value: z.any().optional().describe('The data to be updated in the data model.'),
       })
       .strict(),
   })
@@ -83,17 +72,13 @@ export const DeleteSurfaceMessageSchema = z
     version: z.literal('v0.9'),
     deleteSurface: z
       .object({
-        surfaceId: z
-          .string()
-          .describe('The unique identifier for the UI surface to be deleted.'),
+        surfaceId: z.string().describe('The unique identifier for the UI surface to be deleted.'),
       })
       .strict(),
   })
   .strict();
 
-export declare interface CreateSurfaceMessage extends z.infer<
-  typeof CreateSurfaceMessageSchema
-> {
+export declare interface CreateSurfaceMessage extends z.infer<typeof CreateSurfaceMessageSchema> {
   version: 'v0.9';
   createSurface: {
     surfaceId: string;
@@ -121,9 +106,7 @@ export declare interface UpdateDataModelMessage extends z.infer<
     value?: any;
   };
 }
-export declare interface DeleteSurfaceMessage extends z.infer<
-  typeof DeleteSurfaceMessageSchema
-> {
+export declare interface DeleteSurfaceMessage extends z.infer<typeof DeleteSurfaceMessageSchema> {
   version: 'v0.9';
   deleteSurface: {
     surfaceId: string;
@@ -144,9 +127,7 @@ export type A2uiMessage =
   | UpdateDataModelMessage
   | DeleteSurfaceMessage;
 
-export const A2uiMessageListSchema = z
-  .array(A2uiMessageSchema)
-  .describe('A list of messages.');
+export const A2uiMessageListSchema = z.array(A2uiMessageSchema).describe('A list of messages.');
 
 export type A2uiMessageList = z.infer<typeof A2uiMessageListSchema>;
 
@@ -157,6 +138,4 @@ export const A2uiMessageListWrapperSchema = z
   .strict()
   .describe('An object wrapping a list of messages.');
 
-export type A2uiMessageListWrapper = z.infer<
-  typeof A2uiMessageListWrapperSchema
->;
+export type A2uiMessageListWrapper = z.infer<typeof A2uiMessageListWrapperSchema>;
diff --git a/renderers/web_core/src/v0_9/schema/verify-schema.test.ts b/renderers/web_core/src/v0_9/schema/verify-schema.test.ts
index 4fc766ef3..ab4b622db 100644
--- a/renderers/web_core/src/v0_9/schema/verify-schema.test.ts
+++ b/renderers/web_core/src/v0_9/schema/verify-schema.test.ts
@@ -32,19 +32,13 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 // `__dirname` will be `dist/src/v0_9/schema` when run via `node --test dist/**/*.test.js`
-const SPEC_DIR_V0_9 = resolve(
-  __dirname,
-  '../../../../../../specification/v0_9/json',
-);
+const SPEC_DIR_V0_9 = resolve(__dirname, '../../../../../../specification/v0_9/json');
 
 // Parse both so we can do structural comparison rather than formatting
 // Compare definitions specifically, ignoring descriptions
 function compareDefinitions(zodDefs: any, jsonDefs: any): Record<string, any> {
   const diff: Record<string, any> = {};
-  const keys = new Set([
-    ...Object.keys(zodDefs || {}),
-    ...Object.keys(jsonDefs || {}),
-  ]);
+  const keys = new Set([...Object.keys(zodDefs || {}), ...Object.keys(jsonDefs || {})]);
 
   for (const key of keys) {
     if (key === 'A2uiMessage') continue; // Zod wrapper artifact
@@ -67,10 +61,7 @@ function getObjectDiff(obj1: any, obj2: any, path = ''): Record<string, any> {
   // Ignore descriptions in strict structural comparison
   const ignoreKeys = new Set(['description', 'title', '$id', '$schema']);
 
-  const keys = new Set([
-    ...Object.keys(obj1 || {}),
-    ...Object.keys(obj2 || {}),
-  ]);
+  const keys = new Set([...Object.keys(obj1 || {}), ...Object.keys(obj2 || {})]);
 
   for (const key of keys) {
     if (ignoreKeys.has(key)) continue;
@@ -80,20 +71,13 @@ function getObjectDiff(obj1: any, obj2: any, path = ''): Record<string, any> {
     const val2 = obj2 ? obj2[key] : undefined;
 
     // Zod emits `type: "string"` for consts, whereas JSON Schema infers it.
-    if (
-      path.endsWith('version') &&
-      key === 'type' &&
-      val1 === 'string' &&
-      val2 === undefined
-    ) {
+    if (path.endsWith('version') && key === 'type' && val1 === 'string' && val2 === undefined) {
       continue;
     }
 
     // Zod doesn't emit additionalProperties: true by default, but it's the default
     if (
-      currentPath.endsWith(
-        'updateDataModel.properties.value.additionalProperties',
-      ) &&
+      currentPath.endsWith('updateDataModel.properties.value.additionalProperties') &&
       val1 === undefined &&
       val2 === true
     ) {
@@ -115,12 +99,7 @@ function getObjectDiff(obj1: any, obj2: any, path = ''): Record<string, any> {
       continue;
     }
 
-    if (
-      typeof val1 === 'object' &&
-      val1 !== null &&
-      typeof val2 === 'object' &&
-      val2 !== null
-    ) {
+    if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
       if (Array.isArray(val1) && Array.isArray(val2)) {
         // Sort arrays to ignore order differences (like `required`)
         const sortedVal1 = [...val1].sort();
@@ -183,9 +162,7 @@ function verifySchema(
   }
 
   const rootZodSchema =
-    (generatedSchema.definitions || generatedSchema.$defs || {})[
-      'A2uiMessage'
-    ] || {};
+    (generatedSchema.definitions || generatedSchema.$defs || {})['A2uiMessage'] || {};
 
   if (officialSchema.oneOf || officialSchema.anyOf) {
     const zodOneOf = rootZodSchema.anyOf || rootZodSchema.oneOf || [];
@@ -208,10 +185,7 @@ function verifySchema(
       );
     }
   } else if (officialSchema.properties) {
-    const topLevelDiff = getObjectDiff(
-      rootZodSchema.properties,
-      officialSchema.properties,
-    );
+    const topLevelDiff = getObjectDiff(rootZodSchema.properties, officialSchema.properties);
     if (Object.keys(topLevelDiff).length > 0) {
       assert.deepStrictEqual(
         topLevelDiff,
@@ -226,17 +200,12 @@ function verifySchema(
 
 describe('A2UI Schema Verification v0.9', () => {
   it('verifies v0.9 schema', () => {
-    verifySchema(
-      'v0.9',
-      A2uiMessageSchema,
-      join(SPEC_DIR_V0_9, 'server_to_client.json'),
-      {
-        CreateSurfaceMessage: CreateSurfaceMessageSchema,
-        UpdateComponentsMessage: UpdateComponentsMessageSchema,
-        UpdateDataModelMessage: UpdateDataModelMessageSchema,
-        DeleteSurfaceMessage: DeleteSurfaceMessageSchema,
-      },
-    );
+    verifySchema('v0.9', A2uiMessageSchema, join(SPEC_DIR_V0_9, 'server_to_client.json'), {
+      CreateSurfaceMessage: CreateSurfaceMessageSchema,
+      UpdateComponentsMessage: UpdateComponentsMessageSchema,
+      UpdateDataModelMessage: UpdateDataModelMessageSchema,
+      DeleteSurfaceMessage: DeleteSurfaceMessageSchema,
+    });
   });
 
   it('validates A2uiMessage wrapper', () => {
diff --git a/renderers/web_core/src/v0_9/state/data-model.test.ts b/renderers/web_core/src/v0_9/state/data-model.test.ts
index f29deb9da..43017fd2e 100644
--- a/renderers/web_core/src/v0_9/state/data-model.test.ts
+++ b/renderers/web_core/src/v0_9/state/data-model.test.ts
@@ -311,22 +311,10 @@ describe('DataModel', () => {
   });
 
   it('throws when path is null or undefined', () => {
-    assert.throws(
-      () => model.get(null as any),
-      /Path cannot be null or undefined/,
-    );
-    assert.throws(
-      () => model.get(undefined as any),
-      /Path cannot be null or undefined/,
-    );
-    assert.throws(
-      () => model.set(null as any, 'value'),
-      /Path cannot be null or undefined/,
-    );
-    assert.throws(
-      () => model.set(undefined as any, 'value'),
-      /Path cannot be null or undefined/,
-    );
+    assert.throws(() => model.get(null as any), /Path cannot be null or undefined/);
+    assert.throws(() => model.get(undefined as any), /Path cannot be null or undefined/);
+    assert.throws(() => model.set(null as any, 'value'), /Path cannot be null or undefined/);
+    assert.throws(() => model.set(undefined as any, 'value'), /Path cannot be null or undefined/);
   });
 
   it('calculates descendants against root path', () => {
diff --git a/renderers/web_core/src/v0_9/state/data-model.ts b/renderers/web_core/src/v0_9/state/data-model.ts
index 67de40e61..e7c7a7bcb 100644
--- a/renderers/web_core/src/v0_9/state/data-model.ts
+++ b/renderers/web_core/src/v0_9/state/data-model.ts
@@ -117,8 +117,7 @@ export class DataModel {
       }
 
       if (current[segment] === undefined || current[segment] === null) {
-        const nextSegment =
-          i < segments.length - 1 ? segments[i + 1] : lastSegment;
+        const nextSegment = i < segments.length - 1 ? segments[i + 1] : lastSegment;
         current[segment] = isNumeric(nextSegment) ? [] : {};
       }
       current = current[segment];
@@ -181,10 +180,7 @@ export class DataModel {
    * @param onChange A callback fired whenever the value changes.
    * @returns A `DataSubscription` containing the initial value and an `unsubscribe` method.
    */
-  subscribe<T>(
-    path: string,
-    onChange: (value: T | undefined) => void,
-  ): DataSubscription<T> {
+  subscribe<T>(path: string, onChange: (value: T | undefined) => void): DataSubscription<T> {
     const sig = this.getSignal<T>(path);
     let isSync = true;
     let currentValue = sig.peek();
@@ -242,8 +238,7 @@ export class DataModel {
       // Notify Ancestors
       let parentPath = normalizedPath;
       while (parentPath !== '/' && parentPath !== '') {
-        parentPath =
-          parentPath.substring(0, parentPath.lastIndexOf('/')) || '/';
+        parentPath = parentPath.substring(0, parentPath.lastIndexOf('/')) || '/';
         this.updateSignal(parentPath);
       }
 
diff --git a/renderers/web_core/src/v0_9/state/surface-components-model.ts b/renderers/web_core/src/v0_9/state/surface-components-model.ts
index 9805500fa..cb7803716 100644
--- a/renderers/web_core/src/v0_9/state/surface-components-model.ts
+++ b/renderers/web_core/src/v0_9/state/surface-components-model.ts
@@ -58,9 +58,7 @@ export class SurfaceComponentsModel {
    */
   addComponent(component: ComponentModel): void {
     if (this.components.has(component.id)) {
-      throw new A2uiStateError(
-        `Component with id '${component.id}' already exists.`,
-      );
+      throw new A2uiStateError(`Component with id '${component.id}' already exists.`);
     }
 
     this.components.set(component.id, component);
diff --git a/renderers/web_core/src/v0_9/state/surface-group-model.ts b/renderers/web_core/src/v0_9/state/surface-group-model.ts
index b8c02042d..5166f3573 100644
--- a/renderers/web_core/src/v0_9/state/surface-group-model.ts
+++ b/renderers/web_core/src/v0_9/state/surface-group-model.ts
@@ -32,8 +32,7 @@ export class SurfaceGroupModel<T extends ComponentApi> {
   private readonly _onAction = new EventEmitter<A2uiClientAction>();
 
   /** Fires when a new surface is added. */
-  readonly onSurfaceCreated: EventSource<SurfaceModel<T>> =
-    this._onSurfaceCreated;
+  readonly onSurfaceCreated: EventSource<SurfaceModel<T>> = this._onSurfaceCreated;
   /** Fires when a surface is removed. */
   readonly onSurfaceDeleted: EventSource<string> = this._onSurfaceDeleted;
   /** Fires when an action is dispatched from ANY surface in the group. */
@@ -54,9 +53,7 @@ export class SurfaceGroupModel<T extends ComponentApi> {
     this.surfaces.set(surface.id, surface);
 
     // Subscribe to surface actions and propagate
-    const sub = surface.onAction.subscribe(action =>
-      this._onAction.emit(action),
-    );
+    const sub = surface.onAction.subscribe(action => this._onAction.emit(action));
     this.surfaceUnsubscribers.set(surface.id, sub);
 
     this._onSurfaceCreated.emit(surface);
diff --git a/renderers/web_core/src/v0_9/state/surface-model.test.ts b/renderers/web_core/src/v0_9/state/surface-model.test.ts
index d785a774c..eb8c53310 100644
--- a/renderers/web_core/src/v0_9/state/surface-model.test.ts
+++ b/renderers/web_core/src/v0_9/state/surface-model.test.ts
@@ -45,17 +45,12 @@ describe('SurfaceModel', () => {
   });
 
   it('exposes components model', () => {
-    surface.componentsModel.addComponent(
-      new ComponentModel('c1', 'Button', {}),
-    );
+    surface.componentsModel.addComponent(new ComponentModel('c1', 'Button', {}));
     assert.ok(surface.componentsModel.get('c1'));
   });
 
   it('dispatches actions with metadata', async () => {
-    await surface.dispatchAction(
-      {event: {name: 'click', context: {foo: 'bar'}}},
-      'comp-1',
-    );
+    await surface.dispatchAction({event: {name: 'click', context: {foo: 'bar'}}}, 'comp-1');
     assert.strictEqual(actions.length, 1);
     const action = actions[0];
     assert.strictEqual(action.name, 'click');
@@ -105,10 +100,6 @@ describe('SurfaceModel', () => {
     // After dispose, no more actions should be emitted.
     // The EventEmitter.dispose method clears all listeners.
     surface.dispatchAction({event: {name: 'click'}}, 'c1');
-    assert.strictEqual(
-      actionReceived,
-      false,
-      'Should not receive actions after dispose',
-    );
+    assert.strictEqual(actionReceived, false, 'Should not receive actions after dispose');
   });
 });
diff --git a/renderers/web_core/src/v0_9/state/surface-model.ts b/renderers/web_core/src/v0_9/state/surface-model.ts
index 1d6befafa..cbb179eda 100644
--- a/renderers/web_core/src/v0_9/state/surface-model.ts
+++ b/renderers/web_core/src/v0_9/state/surface-model.ts
@@ -18,10 +18,7 @@ import {DataModel} from './data-model.js';
 import {Catalog, ComponentApi} from '../catalog/types.js';
 import {SurfaceComponentsModel} from './surface-components-model.js';
 import {EventEmitter, EventSource} from '../common/events.js';
-import {
-  A2uiClientAction,
-  A2uiClientActionSchema,
-} from '../schema/client-to-server.js';
+import {A2uiClientAction, A2uiClientActionSchema} from '../schema/client-to-server.js';
 
 /** A function that listens for actions emitted from a surface. */
 export type ActionListener = (action: A2uiClientAction) => void | Promise<void>;
@@ -74,12 +71,7 @@ export class SurfaceModel<T extends ComponentApi> {
    * @param sourceComponentId The ID of the component that triggered the action.
    */
   async dispatchAction(payload: any, sourceComponentId: string): Promise<void> {
-    if (
-      payload &&
-      typeof payload === 'object' &&
-      'event' in payload &&
-      payload.event
-    ) {
+    if (payload && typeof payload === 'object' && 'event' in payload && payload.event) {
       const actionToValidate = {
         name: payload.event.name,
         surfaceId: this.id,
@@ -88,15 +80,11 @@ export class SurfaceModel<T extends ComponentApi> {
         context: payload.event.context || {},
       };
 
-      const validationResult =
-        A2uiClientActionSchema.safeParse(actionToValidate);
+      const validationResult = A2uiClientActionSchema.safeParse(actionToValidate);
       if (validationResult.success) {
         await this._onAction.emit(validationResult.data);
       } else {
-        console.error(
-          'A2UI: Invalid action payload dispatched.',
-          validationResult.error.format(),
-        );
+        console.error('A2UI: Invalid action payload dispatched.', validationResult.error.format());
       }
     }
     // Note: local functionCall actions are currently handled by the renderer or binder
@@ -108,11 +96,7 @@ export class SurfaceModel<T extends ComponentApi> {
    *
    * @param error The error object to dispatch, conforming to client_to_server schema.
    */
-  async dispatchError(error: {
-    code: string;
-    message: string;
-    [key: string]: any;
-  }): Promise<void> {
+  async dispatchError(error: {code: string; message: string; [key: string]: any}): Promise<void> {
     await this._onError.emit({
       ...error,
       surfaceId: this.id,
diff --git a/renderers/web_core/src/v0_9/test/function_execution.spec.ts b/renderers/web_core/src/v0_9/test/function_execution.spec.ts
index 88f421c6d..265d0ab50 100644
--- a/renderers/web_core/src/v0_9/test/function_execution.spec.ts
+++ b/renderers/web_core/src/v0_9/test/function_execution.spec.ts
@@ -40,23 +40,20 @@ describe('Function Execution in DataContext', () => {
 
     const functions = new Map<string, Function>();
     // mimic metronome: returns a stream of ticks
-    functions.set(
-      'metronome',
-      (args: Record<string, any>, abortSignal?: AbortSignal) => {
-        const interval = Number(args['interval']) || 100;
-        const subj = signal<string>('tick 0');
-        let i = 1;
-        const timerId = setInterval(() => {
-          subj.value = `tick ${i++}`;
-        }, interval);
-
-        abortSignal?.addEventListener('abort', () => {
-          clearInterval(timerId);
-        });
-
-        return subj;
-      },
-    );
+    functions.set('metronome', (args: Record<string, any>, abortSignal?: AbortSignal) => {
+      const interval = Number(args['interval']) || 100;
+      const subj = signal<string>('tick 0');
+      let i = 1;
+      const timerId = setInterval(() => {
+        subj.value = `tick ${i++}`;
+      }, interval);
+
+      abortSignal?.addEventListener('abort', () => {
+        clearInterval(timerId);
+      });
+
+      return subj;
+    });
 
     const context = createTestDataContext(
       dataModel,
@@ -78,23 +75,20 @@ describe('Function Execution in DataContext', () => {
 
     const values: string[] = [];
     return new Promise<void>((resolve, reject) => {
-      const subscription = context.subscribeDynamicValue<string>(
-        dynamicValue,
-        val => {
-          if (val) values.push(val);
-          if (values.length >= 3) {
-            subscription.unsubscribe();
-            try {
-              assert.strictEqual(values[0], 'tick 0');
-              assert.strictEqual(values[1], 'tick 1');
-              assert.strictEqual(values[2], 'tick 2');
-              resolve();
-            } catch (e) {
-              reject(e);
-            }
+      const subscription = context.subscribeDynamicValue<string>(dynamicValue, val => {
+        if (val) values.push(val);
+        if (values.length >= 3) {
+          subscription.unsubscribe();
+          try {
+            assert.strictEqual(values[0], 'tick 0');
+            assert.strictEqual(values[1], 'tick 1');
+            assert.strictEqual(values[2], 'tick 2');
+            resolve();
+          } catch (e) {
+            reject(e);
           }
-        },
-      );
+        }
+      });
       if (subscription.value) {
         values.push(subscription.value);
       }
@@ -130,22 +124,19 @@ describe('Function Execution in DataContext', () => {
 
     const values: string[] = [];
     return new Promise<void>((resolve, reject) => {
-      const subscription = context.subscribeDynamicValue<string>(
-        dynamicValue,
-        val => {
-          if (val) values.push(val);
-          if (values.length === 2) {
-            subscription.unsubscribe();
-            try {
-              assert.strictEqual(values[0], 'echo: hello');
-              assert.strictEqual(values[1], 'echo: world');
-              resolve();
-            } catch (e) {
-              reject(e);
-            }
+      const subscription = context.subscribeDynamicValue<string>(dynamicValue, val => {
+        if (val) values.push(val);
+        if (values.length === 2) {
+          subscription.unsubscribe();
+          try {
+            assert.strictEqual(values[0], 'echo: hello');
+            assert.strictEqual(values[1], 'echo: world');
+            resolve();
+          } catch (e) {
+            reject(e);
           }
-        },
-      );
+        }
+      });
       if (subscription.value) {
         values.push(subscription.value);
       }
diff --git a/renderers/web_core/src/v0_9/test/test-utils.ts b/renderers/web_core/src/v0_9/test/test-utils.ts
index 87e148c26..ab9253549 100644
--- a/renderers/web_core/src/v0_9/test/test-utils.ts
+++ b/renderers/web_core/src/v0_9/test/test-utils.ts
@@ -26,10 +26,7 @@ export class TestSurfaceModel extends SurfaceModel<ComponentApi> {
   }
 }
 
-export function createTestContext(
-  properties: any,
-  actionHandler: any = async () => {},
-) {
+export function createTestContext(properties: any, actionHandler: any = async () => {}) {
   const surface = new TestSurfaceModel(actionHandler);
   const component = new ComponentModel('test-id', 'TestComponent', properties);
   surface.componentsModel.addComponent(component);
diff --git a/samples/agent/adk/custom-components-example/README.md b/samples/agent/adk/custom-components-example/README.md
index 2c6a763a4..9bace41df 100644
--- a/samples/agent/adk/custom-components-example/README.md
+++ b/samples/agent/adk/custom-components-example/README.md
@@ -12,9 +12,9 @@ This sample uses the Agent Development Kit (ADK) along with the A2A protocol to
 
 1. Navigate to the samples directory:
 
-    ```bash
-    cd samples/agent/adk/custom-components-example
-    ```
+   ```bash
+   cd samples/agent/adk/custom-components-example
+   ```
 
 2. Create an environment file with your API key:
 
@@ -34,11 +34,10 @@ This sample uses the Agent Development Kit (ADK) along with the A2A protocol to
    USE_MCP_SANDBOX=false uv run .
    ```
 
-
 ## Disclaimer
 
 Important: The sample code provided is for demonstration purposes and illustrates the mechanics of the Agent-to-Agent (A2A) protocol. When building production applications, it is critical to treat any agent operating outside of your direct control as a potentially untrusted entity.
 
-All data received from an external agent—including but not limited to its AgentCard, messages, artifacts, and task statuses—should be handled as untrusted input. For example, a malicious agent could provide an AgentCard containing crafted data in its fields (e.g., description, name, skills.description). If this data is used without sanitization to construct prompts for a Large Language Model (LLM), it could expose your application to prompt injection attacks.  Failure to properly validate and sanitize this data before use can introduce security vulnerabilities into your application.
+All data received from an external agent—including but not limited to its AgentCard, messages, artifacts, and task statuses—should be handled as untrusted input. For example, a malicious agent could provide an AgentCard containing crafted data in its fields (e.g., description, name, skills.description). If this data is used without sanitization to construct prompts for a Large Language Model (LLM), it could expose your application to prompt injection attacks. Failure to properly validate and sanitize this data before use can introduce security vulnerabilities into your application.
 
 Developers are responsible for implementing appropriate security measures, such as input validation and secure handling of credentials to protect their systems and users.
diff --git a/samples/agent/adk/custom-components-example/README_CUSTOM_COMPONENTS.md b/samples/agent/adk/custom-components-example/README_CUSTOM_COMPONENTS.md
index 8e29877fa..1639848c8 100644
--- a/samples/agent/adk/custom-components-example/README_CUSTOM_COMPONENTS.md
+++ b/samples/agent/adk/custom-components-example/README_CUSTOM_COMPONENTS.md
@@ -14,39 +14,47 @@ Unlike standard A2UI agents that rely solely on the core component library, this
 ## Key Features
 
 ### 1. Multiple Surfaces
+
 The agent manages multiple distinct UI areas ("surfaces") simultaneously:
--   **`contact-card`**: The main profile view validation.
--   **`org-chart-view`**: A side-by-side organizational chart.
--   **`location-surface`**: A transient modal/overlay for map views.
+
+- **`contact-card`**: The main profile view validation.
+- **`org-chart-view`**: A side-by-side organizational chart.
+- **`location-surface`**: A transient modal/overlay for map views.
 
 ### 2. Custom Components
 
 #### `OrgChart`
+
 A custom LitElement component created in the client that renders a hierarchical view.
--   **Schema**: Defined in `samples/client/lit/contact/ui/custom-components`.
--   **Usage**: The agent sends a JSON structure matching the schema, and the client renders it natively.
+
+- **Schema**: Defined in `samples/client/lit/contact/ui/custom-components`.
+- **Usage**: The agent sends a JSON structure matching the schema, and the client renders it natively.
 
 #### `WebFrame` (Iframe Component)
+
 A powerful component that allows embedding external web content or local static HTML files within the A2UI interface.
--   **Usage in Sample**: Used to render the "Office Floor Plan".
--   **Security**: Uses standard iframe sequencing and sandbox attributes.
--   **Interactivity**: Can communicate back to the parent A2UI application (e.g., clicking a desk on the map triggers an A2UI action `chart_node_click`).
+
+- **Usage in Sample**: Used to render the "Office Floor Plan".
+- **Security**: Uses standard iframe sequencing and sandbox attributes.
+- **Interactivity**: Can communicate back to the parent A2UI application (e.g., clicking a desk on the map triggers an A2UI action `chart_node_click`).
 
 ## How to Run in Tandem
 
 1.  **Start the Agent**:
+
     ```bash
     cd samples/agent/adk/custom-components-example
     uv run .
     ```
-    *Runs on port 10004.*
+
+    _Runs on port 10004._
 
 2.  **Start the Client**:
     ```bash
     cd samples/client/lit/contact
     npm run dev
     ```
-    *Configured to connect to localhost:10004.*
+    _Configured to connect to localhost:10004._
 
 ## Flow Example: "View Location"
 
diff --git a/samples/agent/adk/custom-components-example/contact_data.json b/samples/agent/adk/custom-components-example/contact_data.json
index 8cd7b5d07..85911e9e3 100644
--- a/samples/agent/adk/custom-components-example/contact_data.json
+++ b/samples/agent/adk/custom-components-example/contact_data.json
@@ -1,74 +1,74 @@
 [
-    {
-        "id": "1",
-        "name": "Alex Jordan",
-        "title": "Product Marketing Manager",
-        "team": "Team Macally",
-        "department": "Marketing",
-        "location": "New York",
-        "email": "alex.jordan@example.com",
-        "mobile": "+1 (415) 171-1080",
-        "calendar": "Free until 4:00 PM",
-        "imageUrl": "http://localhost:10004/static/profile1.png"
-    },
-    {
-        "id": "2",
-        "name": "Casey Smith",
-        "title": "Digital Marketing Specialist",
-        "team": "Growth Team",
-        "department": "Marketing",
-        "location": "New York",
-        "email": "casey.smith@example.com",
-        "mobile": "+1 (415) 222-3333",
-        "calendar": "In a meeting",
-        "imageUrl": "http://localhost:10004/static/profile2.png"
-    },
-    {
-        "id": "3",
-        "name": "Jordan Taylor",
-        "title": "Senior Software Engineer",
-        "team": "Core Platform",
-        "department": "Engineering",
-        "location": "San Francisco",
-        "email": "jordan.taylor@example.com",
-        "mobile": "+1 (650) 444-5555",
-        "calendar": "Focus time",
-        "imageUrl": "http://localhost:10004/static/profile3.png"
-    },
-    {
-        "id": "4",
-        "name": "Jane Doe",
-        "title": "CEO",
-        "team": "Executive",
-        "department": "Leadership",
-        "location": "New York",
-        "email": "jane.doe@example.com",
-        "mobile": "+1 (212) 555-0100",
-        "calendar": "Busy",
-        "imageUrl": "http://localhost:10004/static/profile4.png"
-    },
-    {
-        "id": "5",
-        "name": "John Smith",
-        "title": "VP Marketing",
-        "team": "Marketing",
-        "department": "Leadership",
-        "location": "New York",
-        "email": "john.smith@example.com",
-        "mobile": "+1 (212) 555-0101",
-        "calendar": "Free",
-        "imageUrl": "http://localhost:10004/static/profile1.png"
-    },
-    {
-        "id": "6",
-        "name": "Alice Johnson",
-        "title": "Director",
-        "team": "Marketing",
-        "department": "Leadership",
-        "location": "London",
-        "email": "alice.johnson@example.com",
-        "mobile": "+44 20 7946 0102",
-        "calendar": "Out of office",
-        "imageUrl": "http://localhost:10004/static/profile3.png"
-    }
+  {
+    "id": "1",
+    "name": "Alex Jordan",
+    "title": "Product Marketing Manager",
+    "team": "Team Macally",
+    "department": "Marketing",
+    "location": "New York",
+    "email": "alex.jordan@example.com",
+    "mobile": "+1 (415) 171-1080",
+    "calendar": "Free until 4:00 PM",
+    "imageUrl": "http://localhost:10004/static/profile1.png"
+  },
+  {
+    "id": "2",
+    "name": "Casey Smith",
+    "title": "Digital Marketing Specialist",
+    "team": "Growth Team",
+    "department": "Marketing",
+    "location": "New York",
+    "email": "casey.smith@example.com",
+    "mobile": "+1 (415) 222-3333",
+    "calendar": "In a meeting",
+    "imageUrl": "http://localhost:10004/static/profile2.png"
+  },
+  {
+    "id": "3",
+    "name": "Jordan Taylor",
+    "title": "Senior Software Engineer",
+    "team": "Core Platform",
+    "department": "Engineering",
+    "location": "San Francisco",
+    "email": "jordan.taylor@example.com",
+    "mobile": "+1 (650) 444-5555",
+    "calendar": "Focus time",
+    "imageUrl": "http://localhost:10004/static/profile3.png"
+  },
+  {
+    "id": "4",
+    "name": "Jane Doe",
+    "title": "CEO",
+    "team": "Executive",
+    "department": "Leadership",
+    "location": "New York",
+    "email": "jane.doe@example.com",
+    "mobile": "+1 (212) 555-0100",
+    "calendar": "Busy",
+    "imageUrl": "http://localhost:10004/static/profile4.png"
+  },
+  {
+    "id": "5",
+    "name": "John Smith",
+    "title": "VP Marketing",
+    "team": "Marketing",
+    "department": "Leadership",
+    "location": "New York",
+    "email": "john.smith@example.com",
+    "mobile": "+1 (212) 555-0101",
+    "calendar": "Free",
+    "imageUrl": "http://localhost:10004/static/profile1.png"
+  },
+  {
+    "id": "6",
+    "name": "Alice Johnson",
+    "title": "Director",
+    "team": "Marketing",
+    "department": "Leadership",
+    "location": "London",
+    "email": "alice.johnson@example.com",
+    "mobile": "+44 20 7946 0102",
+    "calendar": "Out of office",
+    "imageUrl": "http://localhost:10004/static/profile3.png"
+  }
 ]
diff --git a/samples/agent/adk/custom-components-example/examples/0.8/action_confirmation.json b/samples/agent/adk/custom-components-example/examples/0.8/action_confirmation.json
index e5fac8417..d2341116e 100644
--- a/samples/agent/adk/custom-components-example/examples/0.8/action_confirmation.json
+++ b/samples/agent/adk/custom-components-example/examples/0.8/action_confirmation.json
@@ -37,11 +37,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "modal-title",
-                  "modal-message",
-                  "dismiss-button"
-                ]
+                "explicitList": ["modal-title", "modal-message", "dismiss-button"]
               },
               "alignment": "center"
             }
@@ -109,4 +105,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.8/chart_node_click.json b/samples/agent/adk/custom-components-example/examples/0.8/chart_node_click.json
index c4c6bfb03..a3cd1b572 100644
--- a/samples/agent/adk/custom-components-example/examples/0.8/chart_node_click.json
+++ b/samples/agent/adk/custom-components-example/examples/0.8/chart_node_click.json
@@ -52,11 +52,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "user_heading",
-                  "description_text_1",
-                  "description_text_2"
-                ]
+                "explicitList": ["user_heading", "description_text_1", "description_text_2"]
               },
               "alignment": "center"
             }
@@ -98,10 +94,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calendar_primary_text",
-                  "calendar_secondary_text"
-                ]
+                "explicitList": ["calendar_primary_text", "calendar_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -113,10 +106,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "calendar_icon",
-                  "calendar_text_column"
-                ]
+                "explicitList": ["calendar_icon", "calendar_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -159,10 +149,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location_primary_text",
-                  "location_secondary_text"
-                ]
+                "explicitList": ["location_primary_text", "location_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -174,10 +161,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location_icon",
-                  "location_text_column"
-                ]
+                "explicitList": ["location_icon", "location_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -220,10 +204,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "mail_primary_text",
-                  "mail_secondary_text"
-                ]
+                "explicitList": ["mail_primary_text", "mail_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -235,10 +216,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "mail_icon",
-                  "mail_text_column"
-                ]
+                "explicitList": ["mail_icon", "mail_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -287,10 +265,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "call_primary_text",
-                  "call_secondary_text"
-                ]
+                "explicitList": ["call_primary_text", "call_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -302,10 +277,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "call_icon",
-                  "call_text_column"
-                ]
+                "explicitList": ["call_icon", "call_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -318,12 +290,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "info_row_1",
-                  "info_row_2",
-                  "info_row_3",
-                  "info_row_4"
-                ]
+                "explicitList": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"]
               },
               "alignment": "stretch"
             }
@@ -392,10 +359,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "message-button",
-                  "location-button"
-                ]
+                "explicitList": ["message-button", "location-button"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -514,4 +478,4 @@
       "surfaceId": "location-modal"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.8/contact_card.json b/samples/agent/adk/custom-components-example/examples/0.8/contact_card.json
index 164f49f55..806b46b17 100644
--- a/samples/agent/adk/custom-components-example/examples/0.8/contact_card.json
+++ b/samples/agent/adk/custom-components-example/examples/0.8/contact_card.json
@@ -52,11 +52,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "user_heading",
-                  "description_text_1",
-                  "description_text_2"
-                ]
+                "explicitList": ["user_heading", "description_text_1", "description_text_2"]
               },
               "alignment": "center"
             }
@@ -106,12 +102,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "info_row_1",
-                  "info_row_2",
-                  "info_row_3",
-                  "info_row_4"
-                ]
+                "explicitList": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"]
               },
               "alignment": "stretch"
             }
@@ -122,10 +113,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "calendar_icon",
-                  "calendar_text_column"
-                ]
+                "explicitList": ["calendar_icon", "calendar_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -147,10 +135,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calendar_primary_text",
-                  "calendar_secondary_text"
-                ]
+                "explicitList": ["calendar_primary_text", "calendar_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -183,10 +168,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location_icon",
-                  "location_text_column"
-                ]
+                "explicitList": ["location_icon", "location_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -208,10 +190,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location_primary_text",
-                  "location_secondary_text"
-                ]
+                "explicitList": ["location_primary_text", "location_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -244,10 +223,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "mail_icon",
-                  "mail_text_column"
-                ]
+                "explicitList": ["mail_icon", "mail_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -269,10 +245,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "mail_primary_text",
-                  "mail_secondary_text"
-                ]
+                "explicitList": ["mail_primary_text", "mail_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -305,10 +278,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "call_icon",
-                  "call_text_column"
-                ]
+                "explicitList": ["call_icon", "call_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -330,10 +300,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "call_primary_text",
-                  "call_secondary_text"
-                ]
+                "explicitList": ["call_primary_text", "call_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -366,10 +333,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "button_1",
-                  "button_2"
-                ]
+                "explicitList": ["button_1", "button_2"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -425,9 +389,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "link_text"
-                ]
+                "explicitList": ["link_text"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -491,4 +453,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.8/contact_list.json b/samples/agent/adk/custom-components-example/examples/0.8/contact_list.json
index e82450d10..4355224a7 100644
--- a/samples/agent/adk/custom-components-example/examples/0.8/contact_list.json
+++ b/samples/agent/adk/custom-components-example/examples/0.8/contact_list.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -64,11 +61,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details",
-                  "view-button"
-                ]
+                "explicitList": ["template-image", "card-details", "view-button"]
               },
               "alignment": "center"
             }
@@ -90,10 +83,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "template-name",
-                  "template-title"
-                ]
+                "explicitList": ["template-name", "template-title"]
               }
             }
           }
@@ -229,4 +219,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.8/floor_plan.json b/samples/agent/adk/custom-components-example/examples/0.8/floor_plan.json
index 70fbb3219..50ba88afa 100644
--- a/samples/agent/adk/custom-components-example/examples/0.8/floor_plan.json
+++ b/samples/agent/adk/custom-components-example/examples/0.8/floor_plan.json
@@ -22,11 +22,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "floor-plan-title",
-                  "floor-plan-comp",
-                  "dismiss-fp"
-                ]
+                "explicitList": ["floor-plan-title", "floor-plan-comp", "dismiss-fp"]
               }
             }
           }
@@ -49,9 +45,7 @@
               "url": "http://localhost:10004/static/floorplan.html?data=%7B%22mappings%22%3A%20%5B%7B%22deskId%22%3A%20%22desk-1%22%2C%20%22contactId%22%3A%20%224%22%2C%20%22contactName%22%3A%20%22Jane%20Doe%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-2%22%2C%20%22contactId%22%3A%20%221%22%2C%20%22contactName%22%3A%20%22Alex%20Jordan%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-3%22%2C%20%22contactId%22%3A%20%223%22%2C%20%22contactName%22%3A%20%22Jordan%20Taylor%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-4%22%2C%20%22contactId%22%3A%20%225%22%2C%20%22contactName%22%3A%20%22John%20Smith%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-5%22%2C%20%22contactId%22%3A%20%226%22%2C%20%22contactName%22%3A%20%22Alice%20Johnson%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-7%22%2C%20%22contactId%22%3A%20%222%22%2C%20%22contactName%22%3A%20%22Casey%20Smith%22%7D%5D%7D",
               "height": 400,
               "interactionMode": "interactive",
-              "allowedEvents": [
-                "chart_node_click"
-              ]
+              "allowedEvents": ["chart_node_click"]
             }
           }
         },
@@ -80,4 +74,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.8/multi_surface.json b/samples/agent/adk/custom-components-example/examples/0.8/multi_surface.json
index 49685d324..7dbda374e 100644
--- a/samples/agent/adk/custom-components-example/examples/0.8/multi_surface.json
+++ b/samples/agent/adk/custom-components-example/examples/0.8/multi_surface.json
@@ -57,11 +57,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "user_heading",
-                  "description_text_1",
-                  "description_text_2"
-                ]
+                "explicitList": ["user_heading", "description_text_1", "description_text_2"]
               },
               "alignment": "center"
             }
@@ -111,12 +107,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "info_row_1",
-                  "info_row_2",
-                  "info_row_3",
-                  "info_row_4"
-                ]
+                "explicitList": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"]
               },
               "alignment": "stretch"
             }
@@ -127,10 +118,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "calendar_icon",
-                  "calendar_text_column"
-                ]
+                "explicitList": ["calendar_icon", "calendar_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -152,10 +140,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calendar_primary_text",
-                  "calendar_secondary_text"
-                ]
+                "explicitList": ["calendar_primary_text", "calendar_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -188,10 +173,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location_icon",
-                  "location_text_column"
-                ]
+                "explicitList": ["location_icon", "location_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -213,10 +195,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location_primary_text",
-                  "location_secondary_text"
-                ]
+                "explicitList": ["location_primary_text", "location_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -249,10 +228,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "mail_icon",
-                  "mail_text_column"
-                ]
+                "explicitList": ["mail_icon", "mail_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -274,10 +250,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "mail_primary_text",
-                  "mail_secondary_text"
-                ]
+                "explicitList": ["mail_primary_text", "mail_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -310,10 +283,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "call_icon",
-                  "call_text_column"
-                ]
+                "explicitList": ["call_icon", "call_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -335,10 +305,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "call_primary_text",
-                  "call_secondary_text"
-                ]
+                "explicitList": ["call_primary_text", "call_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -371,10 +338,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "message-button",
-                  "location-button"
-                ]
+                "explicitList": ["message-button", "location-button"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -451,9 +415,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "org-chart"
-                ]
+                "explicitList": ["org-chart"]
               }
             }
           }
@@ -584,4 +546,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.8/org_chart.json b/samples/agent/adk/custom-components-example/examples/0.8/org_chart.json
index bc3c7f5fe..97225e2dd 100644
--- a/samples/agent/adk/custom-components-example/examples/0.8/org_chart.json
+++ b/samples/agent/adk/custom-components-example/examples/0.8/org_chart.json
@@ -14,10 +14,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title",
-                  "org-chart"
-                ]
+                "explicitList": ["title", "org-chart"]
               }
             }
           }
@@ -115,4 +112,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.9/action_confirmation.json b/samples/agent/adk/custom-components-example/examples/0.9/action_confirmation.json
index 98b6c85be..6168fc79f 100644
--- a/samples/agent/adk/custom-components-example/examples/0.9/action_confirmation.json
+++ b/samples/agent/adk/custom-components-example/examples/0.9/action_confirmation.json
@@ -29,11 +29,7 @@
         {
           "id": "modal-content-column",
           "component": "Column",
-          "children": [
-            "modal-title",
-            "modal-message",
-            "dismiss-button"
-          ],
+          "children": ["modal-title", "modal-message", "dismiss-button"],
           "align": "center"
         },
         {
@@ -81,4 +77,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.9/chart_node_click.json b/samples/agent/adk/custom-components-example/examples/0.9/chart_node_click.json
index b7c9dd3c5..d19db6017 100644
--- a/samples/agent/adk/custom-components-example/examples/0.9/chart_node_click.json
+++ b/samples/agent/adk/custom-components-example/examples/0.9/chart_node_click.json
@@ -33,11 +33,7 @@
         {
           "id": "description_column",
           "component": "Column",
-          "children": [
-            "user_heading",
-            "description_text_1",
-            "description_text_2"
-          ],
+          "children": ["user_heading", "description_text_1", "description_text_2"],
           "align": "center"
         },
         {
@@ -71,21 +67,13 @@
           "id": "info_rows_column",
           "component": "Column",
           "weight": 1,
-          "children": [
-            "info_row_1",
-            "info_row_2",
-            "info_row_3",
-            "info_row_4"
-          ],
+          "children": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"],
           "align": "stretch"
         },
         {
           "id": "info_row_1",
           "component": "Row",
-          "children": [
-            "calendar_icon",
-            "calendar_text_column"
-          ],
+          "children": ["calendar_icon", "calendar_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -97,10 +85,7 @@
         {
           "id": "calendar_text_column",
           "component": "Column",
-          "children": [
-            "calendar_primary_text",
-            "calendar_secondary_text"
-          ],
+          "children": ["calendar_primary_text", "calendar_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -120,10 +105,7 @@
         {
           "id": "info_row_2",
           "component": "Row",
-          "children": [
-            "location_icon",
-            "location_text_column"
-          ],
+          "children": ["location_icon", "location_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -135,10 +117,7 @@
         {
           "id": "location_text_column",
           "component": "Column",
-          "children": [
-            "location_primary_text",
-            "location_secondary_text"
-          ],
+          "children": ["location_primary_text", "location_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -158,10 +137,7 @@
         {
           "id": "info_row_3",
           "component": "Row",
-          "children": [
-            "mail_icon",
-            "mail_text_column"
-          ],
+          "children": ["mail_icon", "mail_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -173,10 +149,7 @@
         {
           "id": "mail_text_column",
           "component": "Column",
-          "children": [
-            "mail_primary_text",
-            "mail_secondary_text"
-          ],
+          "children": ["mail_primary_text", "mail_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -196,10 +169,7 @@
         {
           "id": "info_row_4",
           "component": "Row",
-          "children": [
-            "call_icon",
-            "call_text_column"
-          ],
+          "children": ["call_icon", "call_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -211,10 +181,7 @@
         {
           "id": "call_text_column",
           "component": "Column",
-          "children": [
-            "call_primary_text",
-            "call_secondary_text"
-          ],
+          "children": ["call_primary_text", "call_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -234,10 +201,7 @@
         {
           "id": "action_buttons_row",
           "component": "Row",
-          "children": [
-            "message-button",
-            "location-button"
-          ],
+          "children": ["message-button", "location-button"],
           "justify": "center",
           "align": "center"
         },
@@ -326,4 +290,4 @@
       "surfaceId": "location-modal"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.9/contact_card.json b/samples/agent/adk/custom-components-example/examples/0.9/contact_card.json
index 6d3d3aaf4..484d0d5b3 100644
--- a/samples/agent/adk/custom-components-example/examples/0.9/contact_card.json
+++ b/samples/agent/adk/custom-components-example/examples/0.9/contact_card.json
@@ -40,11 +40,7 @@
         {
           "id": "description_column",
           "component": "Column",
-          "children": [
-            "user_heading",
-            "description_text_1",
-            "description_text_2"
-          ],
+          "children": ["user_heading", "description_text_1", "description_text_2"],
           "align": "center"
         },
         {
@@ -78,21 +74,13 @@
           "id": "info_rows_column",
           "component": "Column",
           "weight": 1,
-          "children": [
-            "info_row_1",
-            "info_row_2",
-            "info_row_3",
-            "info_row_4"
-          ],
+          "children": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"],
           "align": "stretch"
         },
         {
           "id": "info_row_1",
           "component": "Row",
-          "children": [
-            "calendar_icon",
-            "calendar_text_column"
-          ],
+          "children": ["calendar_icon", "calendar_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -104,10 +92,7 @@
         {
           "id": "calendar_text_column",
           "component": "Column",
-          "children": [
-            "calendar_primary_text",
-            "calendar_secondary_text"
-          ],
+          "children": ["calendar_primary_text", "calendar_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -127,10 +112,7 @@
         {
           "id": "info_row_2",
           "component": "Row",
-          "children": [
-            "location_icon",
-            "location_text_column"
-          ],
+          "children": ["location_icon", "location_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -142,10 +124,7 @@
         {
           "id": "location_text_column",
           "component": "Column",
-          "children": [
-            "location_primary_text",
-            "location_secondary_text"
-          ],
+          "children": ["location_primary_text", "location_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -165,10 +144,7 @@
         {
           "id": "info_row_3",
           "component": "Row",
-          "children": [
-            "mail_icon",
-            "mail_text_column"
-          ],
+          "children": ["mail_icon", "mail_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -180,10 +156,7 @@
         {
           "id": "mail_text_column",
           "component": "Column",
-          "children": [
-            "mail_primary_text",
-            "mail_secondary_text"
-          ],
+          "children": ["mail_primary_text", "mail_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -203,10 +176,7 @@
         {
           "id": "info_row_4",
           "component": "Row",
-          "children": [
-            "call_icon",
-            "call_text_column"
-          ],
+          "children": ["call_icon", "call_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -218,10 +188,7 @@
         {
           "id": "call_text_column",
           "component": "Column",
-          "children": [
-            "call_primary_text",
-            "call_secondary_text"
-          ],
+          "children": ["call_primary_text", "call_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -241,10 +208,7 @@
         {
           "id": "action_buttons_row",
           "component": "Row",
-          "children": [
-            "message-button",
-            "location-button"
-          ],
+          "children": ["message-button", "location-button"],
           "justify": "center",
           "align": "center"
         },
@@ -308,4 +272,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.9/contact_list.json b/samples/agent/adk/custom-components-example/examples/0.9/contact_list.json
index fd2727da4..8517a36e4 100644
--- a/samples/agent/adk/custom-components-example/examples/0.9/contact_list.json
+++ b/samples/agent/adk/custom-components-example/examples/0.9/contact_list.json
@@ -18,10 +18,7 @@
         {
           "id": "root",
           "component": "Column",
-          "children": [
-            "title-heading",
-            "item-list"
-          ]
+          "children": ["title-heading", "item-list"]
         },
         {
           "id": "title-heading",
@@ -46,11 +43,7 @@
         {
           "id": "card-layout",
           "component": "Row",
-          "children": [
-            "template-image",
-            "card-details",
-            "view-button"
-          ],
+          "children": ["template-image", "card-details", "view-button"],
           "align": "center"
         },
         {
@@ -64,10 +57,7 @@
         {
           "id": "card-details",
           "component": "Column",
-          "children": [
-            "template-name",
-            "template-title"
-          ]
+          "children": ["template-name", "template-title"]
         },
         {
           "id": "template-name",
@@ -138,4 +128,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.9/floor_plan.json b/samples/agent/adk/custom-components-example/examples/0.9/floor_plan.json
index cc21bf4a6..a7d7d8e79 100644
--- a/samples/agent/adk/custom-components-example/examples/0.9/floor_plan.json
+++ b/samples/agent/adk/custom-components-example/examples/0.9/floor_plan.json
@@ -19,11 +19,7 @@
         {
           "id": "floor-plan-col",
           "component": "Column",
-          "children": [
-            "floor-plan-title",
-            "floor-plan-comp",
-            "dismiss-fp"
-          ]
+          "children": ["floor-plan-title", "floor-plan-comp", "dismiss-fp"]
         },
         {
           "id": "floor-plan-title",
@@ -37,9 +33,7 @@
           "url": "http://localhost:10004/static/floorplan.html?data=%7B%22mappings%22%3A%20%5B%7B%22deskId%22%3A%20%22desk-1%22%2C%20%22contactId%22%3A%20%224%22%2C%20%22contactName%22%3A%20%22Jane%20Doe%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-2%22%2C%20%22contactId%22%3A%20%221%22%2C%20%22contactName%22%3A%20%22Alex%20Jordan%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-3%22%2C%20%22contactId%22%3A%20%223%22%2C%20%22contactName%22%3A%20%22Jordan%20Taylor%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-4%22%2C%20%22contactId%22%3A%20%225%22%2C%20%22contactName%22%3A%20%22John%20Smith%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-5%22%2C%20%22contactId%22%3A%20%226%22%2C%20%22contactName%22%3A%20%22Alice%20Johnson%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-7%22%2C%20%22contactId%22%3A%20%222%22%2C%20%22contactName%22%3A%20%22Casey%20Smith%22%7D%5D%7D",
           "height": 400,
           "interactionMode": "interactive",
-          "allowedEvents": [
-            "chart_node_click"
-          ]
+          "allowedEvents": ["chart_node_click"]
         },
         {
           "id": "dismiss-fp-text",
@@ -60,4 +54,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.9/multi_surface.json b/samples/agent/adk/custom-components-example/examples/0.9/multi_surface.json
index f35fed05e..55a02ad6a 100644
--- a/samples/agent/adk/custom-components-example/examples/0.9/multi_surface.json
+++ b/samples/agent/adk/custom-components-example/examples/0.9/multi_surface.json
@@ -47,11 +47,7 @@
         {
           "id": "description_column",
           "component": "Column",
-          "children": [
-            "user_heading",
-            "description_text_1",
-            "description_text_2"
-          ],
+          "children": ["user_heading", "description_text_1", "description_text_2"],
           "align": "center"
         },
         {
@@ -85,21 +81,13 @@
           "id": "info_rows_column",
           "component": "Column",
           "weight": 1,
-          "children": [
-            "info_row_1",
-            "info_row_2",
-            "info_row_3",
-            "info_row_4"
-          ],
+          "children": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"],
           "align": "stretch"
         },
         {
           "id": "info_row_1",
           "component": "Row",
-          "children": [
-            "calendar_icon",
-            "calendar_text_column"
-          ],
+          "children": ["calendar_icon", "calendar_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -111,10 +99,7 @@
         {
           "id": "calendar_text_column",
           "component": "Column",
-          "children": [
-            "calendar_primary_text",
-            "calendar_secondary_text"
-          ],
+          "children": ["calendar_primary_text", "calendar_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -134,10 +119,7 @@
         {
           "id": "info_row_2",
           "component": "Row",
-          "children": [
-            "location_icon",
-            "location_text_column"
-          ],
+          "children": ["location_icon", "location_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -149,10 +131,7 @@
         {
           "id": "location_text_column",
           "component": "Column",
-          "children": [
-            "location_primary_text",
-            "location_secondary_text"
-          ],
+          "children": ["location_primary_text", "location_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -172,10 +151,7 @@
         {
           "id": "info_row_3",
           "component": "Row",
-          "children": [
-            "mail_icon",
-            "mail_text_column"
-          ],
+          "children": ["mail_icon", "mail_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -187,10 +163,7 @@
         {
           "id": "mail_text_column",
           "component": "Column",
-          "children": [
-            "mail_primary_text",
-            "mail_secondary_text"
-          ],
+          "children": ["mail_primary_text", "mail_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -210,10 +183,7 @@
         {
           "id": "info_row_4",
           "component": "Row",
-          "children": [
-            "call_icon",
-            "call_text_column"
-          ],
+          "children": ["call_icon", "call_text_column"],
           "justify": "start",
           "align": "start"
         },
@@ -225,10 +195,7 @@
         {
           "id": "call_text_column",
           "component": "Column",
-          "children": [
-            "call_primary_text",
-            "call_secondary_text"
-          ],
+          "children": ["call_primary_text", "call_secondary_text"],
           "justify": "start",
           "align": "start"
         },
@@ -248,10 +215,7 @@
         {
           "id": "action_buttons_row",
           "component": "Row",
-          "children": [
-            "message-button",
-            "location-button"
-          ],
+          "children": ["message-button", "location-button"],
           "justify": "center",
           "align": "center"
         },
@@ -306,9 +270,7 @@
         {
           "id": "root",
           "component": "Column",
-          "children": [
-            "org-chart"
-          ]
+          "children": ["org-chart"]
         },
         {
           "id": "org-chart",
@@ -370,4 +332,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/examples/0.9/org_chart.json b/samples/agent/adk/custom-components-example/examples/0.9/org_chart.json
index 3d46dddfe..8a8bc8eb1 100644
--- a/samples/agent/adk/custom-components-example/examples/0.9/org_chart.json
+++ b/samples/agent/adk/custom-components-example/examples/0.9/org_chart.json
@@ -14,10 +14,7 @@
         {
           "id": "root",
           "component": "Column",
-          "children": [
-            "title",
-            "org-chart"
-          ]
+          "children": ["title", "org-chart"]
         },
         {
           "id": "title",
@@ -68,4 +65,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/custom-components-example/floor_plan_template.html b/samples/agent/adk/custom-components-example/floor_plan_template.html
index cc9550a20..9ae3d8906 100644
--- a/samples/agent/adk/custom-components-example/floor_plan_template.html
+++ b/samples/agent/adk/custom-components-example/floor_plan_template.html
@@ -13,251 +13,270 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Floor Plan</title>
     <style>
-        body {
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #f5f5f5;
-            height: 100vh;
-            width: 100vw;
-        }
-
-        #container {
-            position: relative;
-            max-width: 100%;
-            max-height: 100%;
-            transform-origin: center center;
-            transition: transform 0.1s ease-out;
-            user-select: none;
-        }
-
-        #floorplan {
-            display: block;
-            max-width: 100%;
-            max-height: 100vh;
-            object-fit: contain;
-            -webkit-user-drag: none;
-        }
-
-        .hotspot {
-            position: absolute;
-            background-color: rgba(0, 128, 255, 0.2);
-            border: 2px solid rgba(0, 128, 255, 0.5);
-            cursor: pointer;
-            transition: background-color 0.2s;
-            border-radius: 4px;
-        }
-
-        .hotspot:hover {
-            background-color: rgba(0, 128, 255, 0.4);
-        }
-
-        .tooltip {
-            position: absolute;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-family: sans-serif;
-            font-size: 12px;
-            pointer-events: none;
-            display: none;
-            z-index: 10;
-            white-space: nowrap;
-        }
-
-        #viewport {
-            width: 100vw;
-            height: 100vh;
-            overflow: hidden;
-            cursor: grab;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #viewport.grabbing {
-            cursor: grabbing;
-        }
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f5f5f5;
+        height: 100vh;
+        width: 100vw;
+      }
+
+      #container {
+        position: relative;
+        max-width: 100%;
+        max-height: 100%;
+        transform-origin: center center;
+        transition: transform 0.1s ease-out;
+        user-select: none;
+      }
+
+      #floorplan {
+        display: block;
+        max-width: 100%;
+        max-height: 100vh;
+        object-fit: contain;
+        -webkit-user-drag: none;
+      }
+
+      .hotspot {
+        position: absolute;
+        background-color: rgba(0, 128, 255, 0.2);
+        border: 2px solid rgba(0, 128, 255, 0.5);
+        cursor: pointer;
+        transition: background-color 0.2s;
+        border-radius: 4px;
+      }
+
+      .hotspot:hover {
+        background-color: rgba(0, 128, 255, 0.4);
+      }
+
+      .tooltip {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-family: sans-serif;
+        font-size: 12px;
+        pointer-events: none;
+        display: none;
+        z-index: 10;
+        white-space: nowrap;
+      }
+
+      #viewport {
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        cursor: grab;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #viewport.grabbing {
+        cursor: grabbing;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="viewport">
-        <div id="container">
-            <img id="floorplan" src="__AGENT_STATIC_URL__/static/floorplan.png" alt="Office Floor Plan">
-            <div id="tooltip" class="tooltip"></div>
-        </div>
+      <div id="container">
+        <img
+          id="floorplan"
+          src="__AGENT_STATIC_URL__/static/floorplan.png"
+          alt="Office Floor Plan"
+        />
+        <div id="tooltip" class="tooltip"></div>
+      </div>
     </div>
 
     <script>
-        const viewport = document.getElementById('viewport');
-        const container = document.getElementById('container');
-        const tooltip = document.getElementById('tooltip');
-
-        // Initial mappings embedded from Python endpoint
-        const deskMappings = [
-            {deskId: "desk-1", contactId: "4", contactName: "Jane Doe"},
-            {deskId: "desk-2", contactId: "1", contactName: "Alex Jordan"},
-            {deskId: "desk-3", contactId: "3", contactName: "Jordan Taylor"},
-            {deskId: "desk-4", contactId: "5", contactName: "John Smith"},
-            {deskId: "desk-5", contactId: "6", contactName: "Alice Johnson"},
-            {deskId: "desk-7", contactId: "2", contactName: "Casey Smith"}
-        ];
-
-        let scale = 2.5;
-        let panning = false;
-        let pointX = 0;
-        let pointY = 0;
-        let startX = 0;
-        let startY = 0;
-        let hostOrigin = '*';
-
-        window.onload = () => { updateTransform(); };
-
-        viewport.onmousedown = function (e) {
-            e.preventDefault();
-            startX = e.clientX - pointX;
-            startY = e.clientY - pointY;
-            panning = true;
-            viewport.classList.add('grabbing');
-        }
-
-        viewport.onmouseup = function (e) { panning = false; viewport.classList.remove('grabbing'); }
-        viewport.onmouseleave = function (e) { panning = false; viewport.classList.remove('grabbing'); }
-
-        viewport.onmousemove = function (e) {
-            if (panning) {
-                e.preventDefault();
-                pointX = e.clientX - startX;
-                pointY = e.clientY - startY;
-                updateTransform();
-            }
-            updateTooltipPos(e);
+      const viewport = document.getElementById('viewport');
+      const container = document.getElementById('container');
+      const tooltip = document.getElementById('tooltip');
+
+      // Initial mappings embedded from Python endpoint
+      const deskMappings = [
+        {deskId: 'desk-1', contactId: '4', contactName: 'Jane Doe'},
+        {deskId: 'desk-2', contactId: '1', contactName: 'Alex Jordan'},
+        {deskId: 'desk-3', contactId: '3', contactName: 'Jordan Taylor'},
+        {deskId: 'desk-4', contactId: '5', contactName: 'John Smith'},
+        {deskId: 'desk-5', contactId: '6', contactName: 'Alice Johnson'},
+        {deskId: 'desk-7', contactId: '2', contactName: 'Casey Smith'},
+      ];
+
+      let scale = 2.5;
+      let panning = false;
+      let pointX = 0;
+      let pointY = 0;
+      let startX = 0;
+      let startY = 0;
+      let hostOrigin = '*';
+
+      window.onload = () => {
+        updateTransform();
+      };
+
+      viewport.onmousedown = function (e) {
+        e.preventDefault();
+        startX = e.clientX - pointX;
+        startY = e.clientY - pointY;
+        panning = true;
+        viewport.classList.add('grabbing');
+      };
+
+      viewport.onmouseup = function (e) {
+        panning = false;
+        viewport.classList.remove('grabbing');
+      };
+      viewport.onmouseleave = function (e) {
+        panning = false;
+        viewport.classList.remove('grabbing');
+      };
+
+      viewport.onmousemove = function (e) {
+        if (panning) {
+          e.preventDefault();
+          pointX = e.clientX - startX;
+          pointY = e.clientY - startY;
+          updateTransform();
         }
-
-        function zoom(factor) {
-            scale *= factor;
-            scale = Math.min(Math.max(0.5, scale), 6);
-            updateTransform();
-        }
-
-        function updateTransform() {
-            container.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale})`;
-        }
-
-        const clusters = [
-            { id: "desk-1", top: 10, left: 10, width: 8, height: 12 },
-            { id: "desk-2", top: 10, left: 18, width: 8, height: 12 },
-            { id: "desk-3", top: 22, left: 10, width: 8, height: 12 },
-            { id: "desk-4", top: 22, left: 18, width: 8, height: 12 },
-            { id: "desk-5", top: 10, left: 70, width: 10, height: 15 },
-            { id: "desk-6", top: 10, left: 80, width: 10, height: 15 },
-            { id: "desk-7", top: 40, left: 45, width: 10, height: 10 },
-            { id: "desk-8", top: 60, left: 10, width: 8, height: 12 },
-            { id: "desk-9", top: 60, left: 18, width: 8, height: 12 },
-            { id: "desk-10", top: 72, left: 10, width: 8, height: 12 },
-            { id: "desk-11", top: 72, left: 18, width: 8, height: 12 },
-            { id: "desk-12", top: 60, left: 75, width: 15, height: 10 }
-        ];
-
-        function createHotspots() {
-            document.querySelectorAll('.hotspot').forEach(el => el.remove());
-
-            clusters.forEach(desk => {
-                const mapping = deskMappings.find(m => m.deskId === desk.id);
-
-                const el = document.createElement('div');
-                el.className = 'hotspot';
-                el.style.top = desk.top + '%';
-                el.style.left = desk.left + '%';
-                el.style.width = desk.width + '%';
-                el.style.height = desk.height + '%';
-
-                if (mapping) {
-                    el.dataset.contactName = mapping.contactName;
-                    el.dataset.contactId = mapping.contactId;
-
-                    el.onmouseenter = (e) => {
-                        tooltip.innerText = mapping.contactName;
-                        tooltip.style.display = 'block';
-                        updateTooltipPos(e);
-                    };
-                    el.onmousemove = updateTooltipPos;
-                    el.onmouseleave = () => { tooltip.style.display = 'none'; };
-
-                    el.onclick = () => {
-                        // Protocol translation to MCP App standard
-                        window.parent.postMessage({
-                            jsonrpc: "2.0",
-                            id: Date.now(),
-                            method: "tools/call",
-                            params: {
-                                name: "chart_node_click",
-                                arguments: {
-                                    clickedNodeName: mapping.contactName,
-                                    contactId: mapping.contactId,
-                                    deskId: desk.id,
-                                    source: 'modal'
-                                }
-                            }
-                        }, hostOrigin);
-                    };
-                } else {
-                    el.style.borderColor = 'rgba(0,0,0,0.1)';
-                    el.style.backgroundColor = 'transparent';
-                    el.style.cursor = 'default';
-                    el.title = "Empty Desk";
-                }
-
-                container.appendChild(el);
-            });
+        updateTooltipPos(e);
+      };
+
+      function zoom(factor) {
+        scale *= factor;
+        scale = Math.min(Math.max(0.5, scale), 6);
+        updateTransform();
+      }
+
+      function updateTransform() {
+        container.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale})`;
+      }
+
+      const clusters = [
+        {id: 'desk-1', top: 10, left: 10, width: 8, height: 12},
+        {id: 'desk-2', top: 10, left: 18, width: 8, height: 12},
+        {id: 'desk-3', top: 22, left: 10, width: 8, height: 12},
+        {id: 'desk-4', top: 22, left: 18, width: 8, height: 12},
+        {id: 'desk-5', top: 10, left: 70, width: 10, height: 15},
+        {id: 'desk-6', top: 10, left: 80, width: 10, height: 15},
+        {id: 'desk-7', top: 40, left: 45, width: 10, height: 10},
+        {id: 'desk-8', top: 60, left: 10, width: 8, height: 12},
+        {id: 'desk-9', top: 60, left: 18, width: 8, height: 12},
+        {id: 'desk-10', top: 72, left: 10, width: 8, height: 12},
+        {id: 'desk-11', top: 72, left: 18, width: 8, height: 12},
+        {id: 'desk-12', top: 60, left: 75, width: 15, height: 10},
+      ];
+
+      function createHotspots() {
+        document.querySelectorAll('.hotspot').forEach(el => el.remove());
+
+        clusters.forEach(desk => {
+          const mapping = deskMappings.find(m => m.deskId === desk.id);
+
+          const el = document.createElement('div');
+          el.className = 'hotspot';
+          el.style.top = desk.top + '%';
+          el.style.left = desk.left + '%';
+          el.style.width = desk.width + '%';
+          el.style.height = desk.height + '%';
+
+          if (mapping) {
+            el.dataset.contactName = mapping.contactName;
+            el.dataset.contactId = mapping.contactId;
+
+            el.onmouseenter = e => {
+              tooltip.innerText = mapping.contactName;
+              tooltip.style.display = 'block';
+              updateTooltipPos(e);
+            };
+            el.onmousemove = updateTooltipPos;
+            el.onmouseleave = () => {
+              tooltip.style.display = 'none';
+            };
+
+            el.onclick = () => {
+              // Protocol translation to MCP App standard
+              window.parent.postMessage(
+                {
+                  jsonrpc: '2.0',
+                  id: Date.now(),
+                  method: 'tools/call',
+                  params: {
+                    name: 'chart_node_click',
+                    arguments: {
+                      clickedNodeName: mapping.contactName,
+                      contactId: mapping.contactId,
+                      deskId: desk.id,
+                      source: 'modal',
+                    },
+                  },
+                },
+                hostOrigin,
+              );
+            };
+          } else {
+            el.style.borderColor = 'rgba(0,0,0,0.1)';
+            el.style.backgroundColor = 'transparent';
+            el.style.cursor = 'default';
+            el.title = 'Empty Desk';
+          }
+
+          container.appendChild(el);
+        });
+      }
+
+      document.body.appendChild(tooltip);
+
+      function updateTooltipPos(e) {
+        if (tooltip.style.display === 'none') return;
+        tooltip.style.left = e.clientX + 15 + 'px';
+        tooltip.style.top = e.clientY + 15 + 'px';
+      }
+
+      window.addEventListener('message', event => {
+        // Capture the trusted host origin from the first incoming message
+        if (hostOrigin === '*' && event.source === window.parent) {
+          hostOrigin = event.origin;
+
+          // MCP Handshake AFTER getting the origin securely
+          window.parent.postMessage(
+            {
+              jsonrpc: '2.0',
+              id: Date.now(),
+              method: 'ui/initialize',
+              params: {
+                appCapabilities: {},
+                clientInfo: {name: 'Floor Plan App', version: '1.0.0'},
+                protocolVersion: '2026-01-26',
+              },
+            },
+            hostOrigin,
+          );
         }
 
-        document.body.appendChild(tooltip);
-
-        function updateTooltipPos(e) {
-            if (tooltip.style.display === 'none') return;
-            tooltip.style.left = (e.clientX + 15) + 'px';
-            tooltip.style.top = (e.clientY + 15) + 'px';
+        const data = event.data;
+        if (data && data.type === 'zoom') {
+          zoom(data.payload.factor);
         }
+      });
 
-        window.addEventListener('message', (event) => {
-            // Capture the trusted host origin from the first incoming message
-            if (hostOrigin === '*' && event.source === window.parent) {
-                hostOrigin = event.origin;
-
-                // MCP Handshake AFTER getting the origin securely
-                window.parent.postMessage({
-                    jsonrpc: "2.0",
-                    id: Date.now(),
-                    method: "ui/initialize",
-                    params: {
-                        appCapabilities: {},
-                        clientInfo: { name: "Floor Plan App", version: "1.0.0" },
-                        protocolVersion: "2026-01-26"
-                    }
-                }, hostOrigin);
-            }
-            
-            const data = event.data;
-            if (data && data.type === 'zoom') {
-                zoom(data.payload.factor);
-            }
-        });
-
-        createHotspots();
+      createHotspots();
     </script>
-</body>
+  </body>
 </html>
diff --git a/samples/agent/adk/custom-components-example/images/floorplan.html b/samples/agent/adk/custom-components-example/images/floorplan.html
index edd1360a1..f408d78fd 100644
--- a/samples/agent/adk/custom-components-example/images/floorplan.html
+++ b/samples/agent/adk/custom-components-example/images/floorplan.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,366 +16,381 @@
 -->
 
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Floor Plan</title>
     <style>
-        body {
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #f5f5f5;
-            height: 100vh;
-            width: 100vw;
-        }
-
-        #container {
-            position: relative;
-            max-width: 100%;
-            max-height: 100%;
-        }
-
-        #floorplan {
-            display: block;
-            max-width: 100%;
-            max-height: 100vh;
-            object-fit: contain;
-        }
-
-        .hotspot {
-            position: absolute;
-            background-color: rgba(0, 128, 255, 0.2);
-            border: 2px solid rgba(0, 128, 255, 0.5);
-            cursor: pointer;
-            transition: background-color 0.2s;
-            border-radius: 4px;
-        }
-
-        .hotspot:hover {
-            background-color: rgba(0, 128, 255, 0.4);
-        }
-
-        .tooltip {
-            position: absolute;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-family: sans-serif;
-            font-size: 12px;
-            pointer-events: none;
-            display: none;
-            z-index: 10;
-            white-space: nowrap;
-        }
-
-
-
-        #viewport {
-            width: 100vw;
-            height: 100vh;
-            overflow: hidden;
-            /* Hide scrollbars, we will use drag or just native? Let's use custom drag if strict. Or native if easier. */
-            /* Actually, for a "map" feel, simpler to have drag. */
-            cursor: grab;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #viewport.grabbing {
-            cursor: grabbing;
-        }
-
-        #container {
-            position: relative;
-            transform-origin: center center;
-            transition: transform 0.1s ease-out;
-            /* Prevent image dragging ghost */
-            user-select: none;
-        }
-
-        /* Disable native image drag */
-        img {
-            -webkit-user-drag: none;
-        }
+      body {
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f5f5f5;
+        height: 100vh;
+        width: 100vw;
+      }
+
+      #container {
+        position: relative;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      #floorplan {
+        display: block;
+        max-width: 100%;
+        max-height: 100vh;
+        object-fit: contain;
+      }
+
+      .hotspot {
+        position: absolute;
+        background-color: rgba(0, 128, 255, 0.2);
+        border: 2px solid rgba(0, 128, 255, 0.5);
+        cursor: pointer;
+        transition: background-color 0.2s;
+        border-radius: 4px;
+      }
+
+      .hotspot:hover {
+        background-color: rgba(0, 128, 255, 0.4);
+      }
+
+      .tooltip {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-family: sans-serif;
+        font-size: 12px;
+        pointer-events: none;
+        display: none;
+        z-index: 10;
+        white-space: nowrap;
+      }
+
+      #viewport {
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        /* Hide scrollbars, we will use drag or just native? Let's use custom drag if strict. Or native if easier. */
+        /* Actually, for a "map" feel, simpler to have drag. */
+        cursor: grab;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #viewport.grabbing {
+        cursor: grabbing;
+      }
+
+      #container {
+        position: relative;
+        transform-origin: center center;
+        transition: transform 0.1s ease-out;
+        /* Prevent image dragging ghost */
+        user-select: none;
+      }
+
+      /* Disable native image drag */
+      img {
+        -webkit-user-drag: none;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="viewport">
-
-        <div id="container">
-            <img id="floorplan" src="floorplan.png" alt="Office Floor Plan">
-            <div id="tooltip" class="tooltip"></div>
-        </div>
+      <div id="container">
+        <img id="floorplan" src="floorplan.png" alt="Office Floor Plan" />
+        <div id="tooltip" class="tooltip"></div>
+      </div>
     </div>
 
-
-
-    <script>const viewport = document.getElementById('viewport');
-        const container = document.getElementById('container');
-        const tooltip = document.getElementById('tooltip');
-        let deskMappings = [];
-
-        // Start Zoomed In
-        let scale = 2.5;
-
-        // Center the view initially? 
-        // We'll need to set pointX/Y to center relative to viewport.
-        // For now, let's just start with scale.
-
-        let panning = false;
-        let pointX = 0;
-        let pointY = 0;
-        let startX = 0;
-        let startY = 0;
-
-        // Ensure transform is applied on load
-        window.onload = () => {
-            updateTransform();
-        };
-
-        // Panning Logic
-        viewport.onmousedown = function (e) {
-            e.preventDefault();
-            startX = e.clientX - pointX;
-            startY = e.clientY - pointY;
-            panning = true;
-            viewport.classList.add('grabbing');
-        }
-
-        viewport.onmouseup = function (e) {
-            panning = false;
-            viewport.classList.remove('grabbing');
-        }
-
-        viewport.onmouseleave = function (e) {
-            panning = false;
-            viewport.classList.remove('grabbing');
-        }
-
-        viewport.onmousemove = function (e) {
-            if (panning) {
-                e.preventDefault();
-                pointX = e.clientX - startX;
-                pointY = e.clientY - startY;
-                updateTransform();
-            }
-
-            // Tooltip logic needs to account for zoom if we want it to follow mouse accurately?
-            // Actually existing tooltip uses container relative? 
-            // `updateTooltipPos` relied on container.getBoundingClientRect.
-            // If container is transformed, that logic might need adjustment or it might just work if event is relative.
-            updateTooltipPos(e);
-        }
-
-        function zoom(factor) {
-            console.log("Zooming by factor:", factor);
-            scale *= factor;
-            scale = Math.min(Math.max(0.5, scale), 6); // Allow up to 6x
-            console.log("New scale:", scale);
-            updateTransform();
+    <script>
+      const viewport = document.getElementById('viewport');
+      const container = document.getElementById('container');
+      const tooltip = document.getElementById('tooltip');
+      let deskMappings = [];
+
+      // Start Zoomed In
+      let scale = 2.5;
+
+      // Center the view initially?
+      // We'll need to set pointX/Y to center relative to viewport.
+      // For now, let's just start with scale.
+
+      let panning = false;
+      let pointX = 0;
+      let pointY = 0;
+      let startX = 0;
+      let startY = 0;
+
+      // Ensure transform is applied on load
+      window.onload = () => {
+        updateTransform();
+      };
+
+      // Panning Logic
+      viewport.onmousedown = function (e) {
+        e.preventDefault();
+        startX = e.clientX - pointX;
+        startY = e.clientY - pointY;
+        panning = true;
+        viewport.classList.add('grabbing');
+      };
+
+      viewport.onmouseup = function (e) {
+        panning = false;
+        viewport.classList.remove('grabbing');
+      };
+
+      viewport.onmouseleave = function (e) {
+        panning = false;
+        viewport.classList.remove('grabbing');
+      };
+
+      viewport.onmousemove = function (e) {
+        if (panning) {
+          e.preventDefault();
+          pointX = e.clientX - startX;
+          pointY = e.clientY - startY;
+          updateTransform();
         }
 
-        function updateTransform() {
-            container.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale})`;
-        }
-
-        // Define generic desk locations (percentages to be responsive)
-        // These are approximations based on the visual layout of typical 4-desk clusters
-        const clusters = [ // Top Left Cluster
-
-            {
-                id: "desk-1", top: 10, left: 10, width: 8, height: 12
-            }
-
-            ,
-            {
-                id: "desk-2", top: 10, left: 18, width: 8, height: 12
-            }
-
-            ,
-            {
-                id: "desk-3", top: 22, left: 10, width: 8, height: 12
-            }
-
-            ,
-            {
-                id: "desk-4", top: 22, left: 18, width: 8, height: 12
-            }
-
-            ,
-
-            // Top Right Cluster (rotated?) - simpler rects for now
-            {
-                id: "desk-5", top: 10, left: 70, width: 10, height: 15
-            }
-
-            ,
-            {
-                id: "desk-6", top: 10, left: 80, width: 10, height: 15
-            }
-
-            ,
-
-            // Center Cluster (Diamond)
-            {
-                id: "desk-7", top: 40, left: 45, width: 10, height: 10
-            }
-
-            ,
-
-            // Bottom Left Cluster
-            {
-                id: "desk-8", top: 60, left: 10, width: 8, height: 12
-            }
-
-            ,
-            {
-                id: "desk-9", top: 60, left: 18, width: 8, height: 12
-            }
+        // Tooltip logic needs to account for zoom if we want it to follow mouse accurately?
+        // Actually existing tooltip uses container relative?
+        // `updateTooltipPos` relied on container.getBoundingClientRect.
+        // If container is transformed, that logic might need adjustment or it might just work if event is relative.
+        updateTooltipPos(e);
+      };
+
+      function zoom(factor) {
+        console.log('Zooming by factor:', factor);
+        scale *= factor;
+        scale = Math.min(Math.max(0.5, scale), 6); // Allow up to 6x
+        console.log('New scale:', scale);
+        updateTransform();
+      }
+
+      function updateTransform() {
+        container.style.transform = `translate(${pointX}px, ${pointY}px) scale(${scale})`;
+      }
+
+      // Define generic desk locations (percentages to be responsive)
+      // These are approximations based on the visual layout of typical 4-desk clusters
+      const clusters = [
+        // Top Left Cluster
+
+        {
+          id: 'desk-1',
+          top: 10,
+          left: 10,
+          width: 8,
+          height: 12,
+        },
+        {
+          id: 'desk-2',
+          top: 10,
+          left: 18,
+          width: 8,
+          height: 12,
+        },
+        {
+          id: 'desk-3',
+          top: 22,
+          left: 10,
+          width: 8,
+          height: 12,
+        },
+        {
+          id: 'desk-4',
+          top: 22,
+          left: 18,
+          width: 8,
+          height: 12,
+        },
+
+        // Top Right Cluster (rotated?) - simpler rects for now
+        {
+          id: 'desk-5',
+          top: 10,
+          left: 70,
+          width: 10,
+          height: 15,
+        },
+        {
+          id: 'desk-6',
+          top: 10,
+          left: 80,
+          width: 10,
+          height: 15,
+        },
+
+        // Center Cluster (Diamond)
+        {
+          id: 'desk-7',
+          top: 40,
+          left: 45,
+          width: 10,
+          height: 10,
+        },
+
+        // Bottom Left Cluster
+        {
+          id: 'desk-8',
+          top: 60,
+          left: 10,
+          width: 8,
+          height: 12,
+        },
+        {
+          id: 'desk-9',
+          top: 60,
+          left: 18,
+          width: 8,
+          height: 12,
+        },
+        {
+          id: 'desk-10',
+          top: 72,
+          left: 10,
+          width: 8,
+          height: 12,
+        },
+        {
+          id: 'desk-11',
+          top: 72,
+          left: 18,
+          width: 8,
+          height: 12,
+        },
+
+        // Bottom Right Cluster
+        {
+          id: 'desk-12',
+          top: 60,
+          left: 75,
+          width: 15,
+          height: 10,
+        },
+      ];
+
+      function createHotspots() {
+        // Clear existing
+        document.querySelectorAll('.hotspot').forEach(el => el.remove());
+
+        clusters.forEach(desk => {
+          const mapping = deskMappings.find(m => m.deskId === desk.id);
+          // Only create hotspots for mapped desks? Or all? Let's do all but only interact if mapped.
+
+          const el = document.createElement('div');
+          el.className = 'hotspot';
+          el.style.top = desk.top + '%';
+          el.style.left = desk.left + '%';
+          el.style.width = desk.width + '%';
+          el.style.height = desk.height + '%';
+
+          if (mapping) {
+            el.dataset.contactName = mapping.contactName;
+            el.dataset.contactId = mapping.contactId;
+
+            el.onmouseenter = e => {
+              tooltip.innerText = mapping.contactName;
+              tooltip.style.display = 'block';
+              updateTooltipPos(e);
+            };
+            el.onmousemove = updateTooltipPos;
+
+            el.onmouseleave = () => {
+              tooltip.style.display = 'none';
+            };
+
+            el.onclick = () => {
+              // sendMessage('deskSelected', { contactId: mapping.contactId, deskId: desk.id });
+              console.log('[FloorPlan Iframe] Clicking desk:', desk.id);
+
+              window.parent.postMessage(
+                {
+                  type: 'a2ui_action',
+                  action: 'chart_node_click',
+                  data: {
+                    clickedNodeName: mapping.contactName,
+                    contactId: mapping.contactId,
+                    deskId: desk.id,
+                    source: 'modal',
+                  },
+                },
+                '*',
+              );
+            };
+          } else {
+            el.style.borderColor = 'rgba(0,0,0,0.1)';
+            el.style.backgroundColor = 'transparent';
+            el.style.cursor = 'default';
+            el.title = 'Empty Desk';
+          }
+
+          container.appendChild(el);
+        });
+      }
 
-            ,
-            {
-                id: "desk-10", top: 72, left: 10, width: 8, height: 12
-            }
+      function updateTooltipPos(e) {
+        if (tooltip.style.display === 'none') return;
 
-            ,
-            {
-                id: "desk-11", top: 72, left: 18, width: 8, height: 12
-            }
+        // To position tooltip correctly near mouse, we can just use fixed page coordinates
+        // since the tooltip is inside the container, we need to counter-scale it or just put it in body?
+        // Currently tooltip is inside #container. If #container scales, tooltip scales too (gets huge/tiny).
+        // BETTER: Move tooltip to body and use e.clientX/Y.
+      }
 
-            ,
+      // Move tooltip to body for consistent sizing
+      document.body.appendChild(tooltip);
 
-            // Bottom Right Cluster
-            {
-                id: "desk-12", top: 60, left: 75, width: 15, height: 10
-            }
+      function updateTooltipPos(e) {
+        if (tooltip.style.display === 'none') return;
+        tooltip.style.left = e.clientX + 15 + 'px';
+        tooltip.style.top = e.clientY + 15 + 'px';
+      }
 
-        ];
-
-        function createHotspots() {
-            // Clear existing
-            document.querySelectorAll('.hotspot').forEach(el => el.remove());
-
-            clusters.forEach(desk => {
-                const mapping = deskMappings.find(m => m.deskId === desk.id);
-                // Only create hotspots for mapped desks? Or all? Let's do all but only interact if mapped.
-
-                const el = document.createElement('div');
-                el.className = 'hotspot';
-                el.style.top = desk.top + '%';
-                el.style.left = desk.left + '%';
-                el.style.width = desk.width + '%';
-                el.style.height = desk.height + '%';
-
-                if (mapping) {
-                    el.dataset.contactName = mapping.contactName;
-                    el.dataset.contactId = mapping.contactId;
-
-                    el.onmouseenter = (e) => {
-                        tooltip.innerText = mapping.contactName;
-                        tooltip.style.display = 'block';
-                        updateTooltipPos(e);
-                    }
-
-                        ;
-                    el.onmousemove = updateTooltipPos;
-
-                    el.onmouseleave = () => {
-                        tooltip.style.display = 'none';
-                    }
-
-                        ;
-
-                    el.onclick = () => {
-                        // sendMessage('deskSelected', { contactId: mapping.contactId, deskId: desk.id });
-                        console.log("[FloorPlan Iframe] Clicking desk:", desk.id);
-
-                        window.parent.postMessage({
-                            type: 'a2ui_action',
-                            action: 'chart_node_click',
-                            data: {
-                                clickedNodeName: mapping.contactName,
-                                contactId: mapping.contactId,
-                                deskId: desk.id,
-                                source: 'modal'
-                            }
-                        }, '*');
-                    }
-
-                        ;
-                }
-
-                else {
-                    el.style.borderColor = 'rgba(0,0,0,0.1)';
-                    el.style.backgroundColor = 'transparent';
-                    el.style.cursor = 'default';
-                    el.title = "Empty Desk";
-                }
-
-                container.appendChild(el);
-            });
-        }
+      function sendMessage(method, params) {
+        // Legacy support if needed, or just switch
+        // window.parent.postMessage({ jsonrpc: "2.0", method: method, params: params }, "*");
+      }
 
-        function updateTooltipPos(e) {
-            if (tooltip.style.display === 'none') return;
+      window.addEventListener('message', event => {
+        const data = event.data;
 
-            // To position tooltip correctly near mouse, we can just use fixed page coordinates 
-            // since the tooltip is inside the container, we need to counter-scale it or just put it in body?
-            // Currently tooltip is inside #container. If #container scales, tooltip scales too (gets huge/tiny).
-            // BETTER: Move tooltip to body and use e.clientX/Y.
+        // Only 'zoom' needed from parent now.
+        if (data.type === 'zoom') {
+          zoom(data.payload.factor);
         }
-
-        // Move tooltip to body for consistent sizing
-        document.body.appendChild(tooltip);
-
-        function updateTooltipPos(e) {
-            if (tooltip.style.display === 'none') return;
-            tooltip.style.left = (e.clientX + 15) + 'px';
-            tooltip.style.top = (e.clientY + 15) + 'px';
-        }
-
-        function sendMessage(method, params) {
-            // Legacy support if needed, or just switch
-            // window.parent.postMessage({ jsonrpc: "2.0", method: method, params: params }, "*");
-        }
-
-        window.addEventListener('message', (event) => {
-            const data = event.data;
-
-            // Only 'zoom' needed from parent now.
-            if (data.type === 'zoom') {
-                zoom(data.payload.factor);
+      });
+
+      function getMappingsFromUrl() {
+        try {
+          const params = new URLSearchParams(window.location.search);
+          const dataStr = params.get('data');
+          if (dataStr) {
+            const data = JSON.parse(dataStr);
+            if (data.mappings) {
+              return data.mappings;
             }
-        });
-
-        function getMappingsFromUrl() {
-            try {
-                const params = new URLSearchParams(window.location.search);
-                const dataStr = params.get('data');
-                if (dataStr) {
-                    const data = JSON.parse(dataStr);
-                    if (data.mappings) {
-                        return data.mappings;
-                    }
-                }
-            } catch (e) {
-                console.error("Failed to parse mappings from URL:", e);
-            }
-            return [];
+          }
+        } catch (e) {
+          console.error('Failed to parse mappings from URL:', e);
         }
+        return [];
+      }
 
-        // Initialize
-        deskMappings = getMappingsFromUrl();
-        createHotspots();
+      // Initialize
+      deskMappings = getMappingsFromUrl();
+      createHotspots();
     </script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/samples/agent/adk/custom-components-example/inline_catalog_0.9.json b/samples/agent/adk/custom-components-example/inline_catalog_0.9.json
index 465193a9d..35d1e92cc 100644
--- a/samples/agent/adk/custom-components-example/inline_catalog_0.9.json
+++ b/samples/agent/adk/custom-components-example/inline_catalog_0.9.json
@@ -24,22 +24,11 @@
             "variant": {
               "type": "string",
               "description": "A hint for the base text style.",
-              "enum": [
-                "h1",
-                "h2",
-                "h3",
-                "h4",
-                "h5",
-                "caption",
-                "body"
-              ],
+              "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"],
               "default": "body"
             }
           },
-          "required": [
-            "component",
-            "text"
-          ]
+          "required": ["component", "text"]
         }
       ],
       "unevaluatedProperties": false
@@ -66,33 +55,17 @@
             "fit": {
               "type": "string",
               "description": "Specifies how the image should be resized to fit its container. This corresponds to the CSS 'object-fit' property.",
-              "enum": [
-                "contain",
-                "cover",
-                "fill",
-                "none",
-                "scaleDown"
-              ],
+              "enum": ["contain", "cover", "fill", "none", "scaleDown"],
               "default": "fill"
             },
             "variant": {
               "type": "string",
               "description": "A hint for the image size and style.",
-              "enum": [
-                "icon",
-                "avatar",
-                "smallFeature",
-                "mediumFeature",
-                "largeFeature",
-                "header"
-              ],
+              "enum": ["icon", "avatar", "smallFeature", "mediumFeature", "largeFeature", "header"],
               "default": "mediumFeature"
             }
           },
-          "required": [
-            "component",
-            "url"
-          ]
+          "required": ["component", "url"]
         }
       ],
       "unevaluatedProperties": false
@@ -186,18 +159,13 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "path"
-                  ],
+                  "required": ["path"],
                   "additionalProperties": false
                 }
               ]
             }
           },
-          "required": [
-            "component",
-            "name"
-          ]
+          "required": ["component", "name"]
         }
       ],
       "unevaluatedProperties": false
@@ -222,10 +190,7 @@
               "description": "The URL of the video to display."
             }
           },
-          "required": [
-            "component",
-            "url"
-          ]
+          "required": ["component", "url"]
         }
       ],
       "unevaluatedProperties": false
@@ -254,10 +219,7 @@
               "$ref": "common_types.json#/$defs/DynamicString"
             }
           },
-          "required": [
-            "component",
-            "url"
-          ]
+          "required": ["component", "url"]
         }
       ],
       "unevaluatedProperties": false
@@ -299,19 +261,11 @@
             "align": {
               "type": "string",
               "description": "Defines the alignment of children along the cross axis (vertically). This is similar to the CSS 'align-items' property, but uses camelCase values (e.g., 'start').",
-              "enum": [
-                "start",
-                "center",
-                "end",
-                "stretch"
-              ],
+              "enum": ["start", "center", "end", "stretch"],
               "default": "stretch"
             }
           },
-          "required": [
-            "component",
-            "children"
-          ]
+          "required": ["component", "children"]
         }
       ],
       "unevaluatedProperties": false
@@ -353,19 +307,11 @@
             "align": {
               "type": "string",
               "description": "Defines the alignment of children along the cross axis (horizontally). This is similar to the CSS 'align-items' property.",
-              "enum": [
-                "center",
-                "end",
-                "start",
-                "stretch"
-              ],
+              "enum": ["center", "end", "start", "stretch"],
               "default": "stretch"
             }
           },
-          "required": [
-            "component",
-            "children"
-          ]
+          "required": ["component", "children"]
         }
       ],
       "unevaluatedProperties": false
@@ -392,28 +338,17 @@
             "direction": {
               "type": "string",
               "description": "The direction in which the list items are laid out.",
-              "enum": [
-                "vertical",
-                "horizontal"
-              ],
+              "enum": ["vertical", "horizontal"],
               "default": "vertical"
             },
             "align": {
               "type": "string",
               "description": "Defines the alignment of children along the cross axis.",
-              "enum": [
-                "start",
-                "center",
-                "end",
-                "stretch"
-              ],
+              "enum": ["start", "center", "end", "stretch"],
               "default": "stretch"
             }
           },
-          "required": [
-            "component",
-            "children"
-          ]
+          "required": ["component", "children"]
         }
       ],
       "unevaluatedProperties": false
@@ -438,10 +373,7 @@
               "description": "The ID of the single child component to be rendered inside the card. To display multiple elements, you MUST wrap them in a layout component (like Column or Row) and pass that container's ID here. Do NOT pass multiple IDs or a non-existent ID. Do NOT define the child component inline."
             }
           },
-          "required": [
-            "component",
-            "child"
-          ]
+          "required": ["component", "child"]
         }
       ],
       "unevaluatedProperties": false
@@ -476,18 +408,12 @@
                     "description": "The ID of the child component. Do NOT define the component inline."
                   }
                 },
-                "required": [
-                  "title",
-                  "child"
-                ],
+                "required": ["title", "child"],
                 "additionalProperties": false
               }
             }
           },
-          "required": [
-            "component",
-            "tabs"
-          ]
+          "required": ["component", "tabs"]
         }
       ],
       "unevaluatedProperties": false
@@ -516,11 +442,7 @@
               "description": "The ID of the component to be displayed inside the modal. Do NOT define the component inline."
             }
           },
-          "required": [
-            "component",
-            "trigger",
-            "content"
-          ]
+          "required": ["component", "trigger", "content"]
         }
       ],
       "unevaluatedProperties": false
@@ -543,16 +465,11 @@
             "axis": {
               "type": "string",
               "description": "The orientation of the divider.",
-              "enum": [
-                "horizontal",
-                "vertical"
-              ],
+              "enum": ["horizontal", "vertical"],
               "default": "horizontal"
             }
           },
-          "required": [
-            "component"
-          ]
+          "required": ["component"]
         }
       ],
       "unevaluatedProperties": false
@@ -582,22 +499,14 @@
             "variant": {
               "type": "string",
               "description": "A hint for the button style. If omitted, a default button style is used. 'primary' indicates this is the main call-to-action button. 'borderless' means the button has no visual border or background, making its child content appear like a clickable link.",
-              "enum": [
-                "default",
-                "primary",
-                "borderless"
-              ],
+              "enum": ["default", "primary", "borderless"],
               "default": "default"
             },
             "action": {
               "$ref": "common_types.json#/$defs/Action"
             }
           },
-          "required": [
-            "component",
-            "child",
-            "action"
-          ]
+          "required": ["component", "child", "action"]
         }
       ],
       "unevaluatedProperties": false
@@ -631,12 +540,7 @@
             "variant": {
               "type": "string",
               "description": "The type of input field to display.",
-              "enum": [
-                "longText",
-                "number",
-                "shortText",
-                "obscured"
-              ],
+              "enum": ["longText", "number", "shortText", "obscured"],
               "default": "shortText"
             },
             "validationRegexp": {
@@ -644,10 +548,7 @@
               "description": "A regular expression used for client-side validation of the input."
             }
           },
-          "required": [
-            "component",
-            "label"
-          ]
+          "required": ["component", "label"]
         }
       ],
       "unevaluatedProperties": false
@@ -679,11 +580,7 @@
               "description": "The current state of the checkbox (true for checked, false for unchecked)."
             }
           },
-          "required": [
-            "component",
-            "label",
-            "value"
-          ]
+          "required": ["component", "label", "value"]
         }
       ],
       "unevaluatedProperties": false
@@ -714,10 +611,7 @@
             "variant": {
               "type": "string",
               "description": "A hint for how the choice picker should be displayed and behave.",
-              "enum": [
-                "multipleSelection",
-                "mutuallyExclusive"
-              ],
+              "enum": ["multipleSelection", "mutuallyExclusive"],
               "default": "mutuallyExclusive"
             },
             "options": {
@@ -735,10 +629,7 @@
                     "description": "The stable value associated with this option."
                   }
                 },
-                "required": [
-                  "label",
-                  "value"
-                ],
+                "required": ["label", "value"],
                 "additionalProperties": false
               }
             },
@@ -749,10 +640,7 @@
             "displayStyle": {
               "type": "string",
               "description": "The display style of the component.",
-              "enum": [
-                "checkbox",
-                "chips"
-              ],
+              "enum": ["checkbox", "chips"],
               "default": "checkbox"
             },
             "filterable": {
@@ -761,11 +649,7 @@
               "default": false
             }
           },
-          "required": [
-            "component",
-            "options",
-            "value"
-          ]
+          "required": ["component", "options", "value"]
         }
       ],
       "unevaluatedProperties": false
@@ -806,11 +690,7 @@
               "description": "The current value of the slider."
             }
           },
-          "required": [
-            "component",
-            "value",
-            "max"
-          ]
+          "required": ["component", "value", "max"]
         }
       ],
       "unevaluatedProperties": false
@@ -904,10 +784,7 @@
               "description": "The text label for the input field."
             }
           },
-          "required": [
-            "component",
-            "value"
-          ]
+          "required": ["component", "value"]
         }
       ],
       "unevaluatedProperties": false
@@ -941,10 +818,7 @@
                         "type": "string"
                       }
                     },
-                    "required": [
-                      "title",
-                      "name"
-                    ]
+                    "required": ["title", "name"]
                   }
                 },
                 {
@@ -956,10 +830,7 @@
               "$ref": "common_types.json#/$defs/Action"
             }
           },
-          "required": [
-            "component",
-            "chain"
-          ]
+          "required": ["component", "chain"]
         }
       ],
       "unevaluatedProperties": false
@@ -990,10 +861,7 @@
             },
             "interactionMode": {
               "type": "string",
-              "enum": [
-                "readOnly",
-                "interactive"
-              ]
+              "enum": ["readOnly", "interactive"]
             },
             "allowedEvents": {
               "type": "array",
@@ -1002,10 +870,7 @@
               }
             }
           },
-          "required": [
-            "component",
-            "url"
-          ]
+          "required": ["component", "url"]
         }
       ],
       "unevaluatedProperties": false
@@ -1170,18 +1035,13 @@
               "$ref": "common_types.json#/$defs/DynamicValue"
             }
           },
-          "required": [
-            "value"
-          ]
+          "required": ["value"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "regex": {
@@ -1201,19 +1061,13 @@
               "type": "string"
             }
           },
-          "required": [
-            "value",
-            "pattern"
-          ]
+          "required": ["value", "pattern"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "length": {
@@ -1236,18 +1090,13 @@
               "type": "number"
             }
           },
-          "required": [
-            "value"
-          ]
+          "required": ["value"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "numeric": {
@@ -1270,18 +1119,13 @@
               "type": "number"
             }
           },
-          "required": [
-            "value"
-          ]
+          "required": ["value"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "email": {
@@ -1298,18 +1142,13 @@
               "$ref": "common_types.json#/$defs/DynamicString"
             }
           },
-          "required": [
-            "value"
-          ]
+          "required": ["value"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "formatString": {
@@ -1332,19 +1171,13 @@
               }
             }
           },
-          "required": [
-            "template",
-            "values"
-          ]
+          "required": ["template", "values"]
         },
         "returnType": {
           "const": "string"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "formatNumber": {
@@ -1367,18 +1200,13 @@
               "$ref": "common_types.json#/$defs/DynamicBoolean"
             }
           },
-          "required": [
-            "value"
-          ]
+          "required": ["value"]
         },
         "returnType": {
           "const": "string"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "formatCurrency": {
@@ -1404,19 +1232,13 @@
               "$ref": "common_types.json#/$defs/DynamicBoolean"
             }
           },
-          "required": [
-            "currency",
-            "value"
-          ]
+          "required": ["currency", "value"]
         },
         "returnType": {
           "const": "string"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "formatDate": {
@@ -1436,19 +1258,13 @@
               "$ref": "common_types.json#/$defs/DynamicString"
             }
           },
-          "required": [
-            "format",
-            "value"
-          ]
+          "required": ["format", "value"]
         },
         "returnType": {
           "const": "string"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "pluralize": {
@@ -1483,19 +1299,13 @@
               "$ref": "common_types.json#/$defs/DynamicString"
             }
           },
-          "required": [
-            "value",
-            "other"
-          ]
+          "required": ["value", "other"]
         },
         "returnType": {
           "const": "string"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "openUrl": {
@@ -1512,18 +1322,13 @@
               "type": "string"
             }
           },
-          "required": [
-            "url"
-          ]
+          "required": ["url"]
         },
         "returnType": {
           "const": "void"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "and": {
@@ -1543,18 +1348,13 @@
               }
             }
           },
-          "required": [
-            "values"
-          ]
+          "required": ["values"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "or": {
@@ -1574,18 +1374,13 @@
               }
             }
           },
-          "required": [
-            "values"
-          ]
+          "required": ["values"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     },
     "not": {
@@ -1602,18 +1397,13 @@
               "$ref": "common_types.json#/$defs/DynamicBoolean"
             }
           },
-          "required": [
-            "value"
-          ]
+          "required": ["value"]
         },
         "returnType": {
           "const": "boolean"
         }
       },
-      "required": [
-        "call",
-        "args"
-      ],
+      "required": ["call", "args"],
       "unevaluatedProperties": false
     }
   }
diff --git a/samples/agent/adk/gemini_enterprise/README.md b/samples/agent/adk/gemini_enterprise/README.md
index 0e9ae31a3..510687b49 100644
--- a/samples/agent/adk/gemini_enterprise/README.md
+++ b/samples/agent/adk/gemini_enterprise/README.md
@@ -8,30 +8,28 @@ This folder contains examples and scripts to develop and use A2UI agents on
 This directory is organized into two sub-folders depending the deployment
 methods:
 
--   `cloud_run`: Contains scripts and configuration to deploy an agent to
-    **Cloud Run**. This is suitable for building and deploying AI agents
-    quickly, leveraging its speed and simplicity.
+- `cloud_run`: Contains scripts and configuration to deploy an agent to
+  **Cloud Run**. This is suitable for building and deploying AI agents
+  quickly, leveraging its speed and simplicity.
+  - Starts with `cloud_run/README.md`.
 
-    -   Starts with `cloud_run/README.md`.
-
--   `agent_engine`: Contains code to deploy to **Vertex AI Agent Engine**. Agent
-    Engine provides additional features like agent context management, agent
-    evaluation, agent lifecycle management, model-based conversation quality
-    monitoring, and model tuning with context data.
-
-    -   Starts with `agent_engine/README.md`.
+- `agent_engine`: Contains code to deploy to **Vertex AI Agent Engine**. Agent
+  Engine provides additional features like agent context management, agent
+  evaluation, agent lifecycle management, model-based conversation quality
+  monitoring, and model tuning with context data.
+  - Starts with `agent_engine/README.md`.
 
 ## Shared Resources
 
--   `agent.py`: Contains the JSON schema for A2UI messages, used for validation
-    during development and at runtime.
--   `prompt_builder.py`: Provides prompts including Role, Workflow, and UI
-    descriptions.
--   `agent_executor.py`: A base implementation of an A2A (Agent-to-Agent)
-    executor that handles A2UI validation and response formatting.
--   `contact_data.json`: Fake contact data for demo.
--   `tools.py`: A simple tools to find contact data.
--   `examples`: Examples for A2UI messages.
+- `agent.py`: Contains the JSON schema for A2UI messages, used for validation
+  during development and at runtime.
+- `prompt_builder.py`: Provides prompts including Role, Workflow, and UI
+  descriptions.
+- `agent_executor.py`: A base implementation of an A2A (Agent-to-Agent)
+  executor that handles A2UI validation and response formatting.
+- `contact_data.json`: Fake contact data for demo.
+- `tools.py`: A simple tools to find contact data.
+- `examples`: Examples for A2UI messages.
 
 ## Registration in Gemini Enterprise
 
diff --git a/samples/agent/adk/gemini_enterprise/agent_engine/README.md b/samples/agent/adk/gemini_enterprise/agent_engine/README.md
index 4546db6ea..231a186df 100644
--- a/samples/agent/adk/gemini_enterprise/agent_engine/README.md
+++ b/samples/agent/adk/gemini_enterprise/agent_engine/README.md
@@ -7,11 +7,11 @@ register on **Gemini Enterprise**.
 
 High level steps:
 
--   Config Authorization
--   Setup environment variables
--   Develop A2UI agent with ADK + A2A (sample code provided)
--   Deploy the agent to Agent Engine
--   Register the agent on Gemini Enterprise
+- Config Authorization
+- Setup environment variables
+- Develop A2UI agent with ADK + A2A (sample code provided)
+- Deploy the agent to Agent Engine
+- Register the agent on Gemini Enterprise
 
 ## Config Authorization
 
@@ -68,21 +68,21 @@ curl -X POST \
 
 Replace the following:
 
--   **YOUR_PROJECT_ID**: the ID of your project. There are 3 occasions
--   **ENDPOINT_LOCATION**: the multi-region for your API request. Specify one of
-    the following values:
-    -   *us* for the US multi-region
-    -   *eu* for the EU multi-region
-    -   *global* for the Global location
--   **LOCATION**: the multi-region of your data store: *global*, *us*, or *eu*.
-    There are 2 occasions
--   **AUTH_ID**: The ID of the authorization resource. This is an arbitrary
-    alphanumeric ID that you define. You need to reference this ID later when
-    registering an Agent that requires OAuth support. There are 2 occasions.
--   **OAUTH_CLIENT_ID**: copy `client_id` from the downloaded JSON.
--   **OAUTH_CLIENT_SECRET**: copy `client_secret` from the downloaded JSON.
--   **OAUTH_AUTH_URI**: the value of **authorizationUri**. See above.
--   **OAUTH_TOKEN_URI**: copy `token_uri` from the downloaded JSON.
+- **YOUR_PROJECT_ID**: the ID of your project. There are 3 occasions
+- **ENDPOINT_LOCATION**: the multi-region for your API request. Specify one of
+  the following values:
+  - _us_ for the US multi-region
+  - _eu_ for the EU multi-region
+  - _global_ for the Global location
+- **LOCATION**: the multi-region of your data store: _global_, _us_, or _eu_.
+  There are 2 occasions
+- **AUTH_ID**: The ID of the authorization resource. This is an arbitrary
+  alphanumeric ID that you define. You need to reference this ID later when
+  registering an Agent that requires OAuth support. There are 2 occasions.
+- **OAUTH_CLIENT_ID**: copy `client_id` from the downloaded JSON.
+- **OAUTH_CLIENT_SECRET**: copy `client_secret` from the downloaded JSON.
+- **OAUTH_AUTH_URI**: the value of **authorizationUri**. See above.
+- **OAUTH_TOKEN_URI**: copy `token_uri` from the downloaded JSON.
 
 NOTE: if `$(gcloud auth print-access-token)` does not work for you, replace it
 with `$(gcloud auth application-default print-access-token)` and try again.
@@ -102,20 +102,20 @@ NOTE: if you already have an agent that is deployed to Agent Engine, skip to
 
 1.  **Copy `.env.example`:** Duplicate the `.env.example` file and rename it to
     `.env`.
-    -   `cd /path/to/agent_engine`
-    -   `cp .env.example .env`
+    - `cd /path/to/agent_engine`
+    - `cp .env.example .env`
 2.  **Fill `.env`:** Update the `.env` file with your specific Google Cloud
     project details:
-    *   `PROJECT_ID`: Your Google Cloud Project ID.
-    *   `LOCATION`: The Google Cloud region you want to deploy the agent in
-        (e.g., `us-central1`). This location is **not** the same as the
-        *location* used in the command above.
-    *   `STORAGE_BUCKET`: A Google Cloud Storage bucket name for staging. It
-        starts with **"gs://"**.
-    *   `GEMINI_ENTERPRISE_APP_ID`: Your Gemini Enterprise Application ID. You
-        can create a new App or use an existing one on Google Cloud Gemini
-        Enterprise.
-    *   `AGENT_AUTHORIZATION`: the value **AGENT_AUTHORIZATION** obtained above.
+    - `PROJECT_ID`: Your Google Cloud Project ID.
+    - `LOCATION`: The Google Cloud region you want to deploy the agent in
+      (e.g., `us-central1`). This location is **not** the same as the
+      _location_ used in the command above.
+    - `STORAGE_BUCKET`: A Google Cloud Storage bucket name for staging. It
+      starts with **"gs://"**.
+    - `GEMINI_ENTERPRISE_APP_ID`: Your Gemini Enterprise Application ID. You
+      can create a new App or use an existing one on Google Cloud Gemini
+      Enterprise.
+    - `AGENT_AUTHORIZATION`: the value **AGENT_AUTHORIZATION** obtained above.
 
 ## Running the Script
 
@@ -131,15 +131,15 @@ The `main.py` script performs the following actions:
 To run the script using `uv`:
 
 1.  **Navigate to the script directory:**
-    -   `cd /path/to/agent_engine`
+    - `cd /path/to/agent_engine`
 2.  **Create and activate a virtual environment:**
-    -   `uv venv`
-    -   `source .venv/bin/activate`
+    - `uv venv`
+    - `source .venv/bin/activate`
 3.  **Install dependencies:**
-    -   `uv sync --locked`
+    - `uv sync --locked`
 4.  **Run the script:**
-    -   `uv run deploy.py`
-    -   It may take 5-10 minutes to finish.
+    - `uv run deploy.py`
+    - It may take 5-10 minutes to finish.
 
 ## Manually Register An Agent
 
@@ -149,7 +149,7 @@ register it on Gemini Enterprise without running "main.py" script.
 1.  Complete **Config Authorization** section above.
 2.  Open Google Cloud **Gemini Enterprise**.
 3.  Click on the **App** you want to register your agent.
-    -   If you don't see the app being listed, click **Edit** to switch location
+    - If you don't see the app being listed, click **Edit** to switch location
 4.  Select **Agents** from the left nav bar.
 5.  Click **Add agent** and select **Add** on **A2A** card.
 6.  Copy this following JSON to the "Agent Card JSON" input box.
@@ -202,13 +202,12 @@ register it on Gemini Enterprise without running "main.py" script.
     ```
 
     Replace **LOCATION** and **RESOURCE_NAME**.
+    - LOCATION is where you deploy your agent. For example; us-central1.
+    - RESOURCE_NAME can be found on Google Cloud **Agent Engine**: click the
+      agent; click **Service Configuration**; select **Deployment details**;
+      copy **Resource name**.
 
-    -   LOCATION is where you deploy your agent. For example; us-central1.
-    -   RESOURCE_NAME can be found on Google Cloud **Agent Engine**: click the
-        agent; click **Service Configuration**; select **Deployment details**;
-        copy **Resource name**.
-
-    Update *name*, *description*, *skills*, *version* as needed. Leave other
+    Update _name_, _description_, _skills_, _version_ as needed. Leave other
     values unchanged.
 
 7.  Click **Preview Agent Details**
@@ -216,11 +215,10 @@ register it on Gemini Enterprise without running "main.py" script.
 8.  Click **Next**
 
 9.  Fill the **Agent authorization** form:
-
-    -   Copy `client_id`, `client_secret`, `token_uri` from the downloaded JSON.
-    -   Copy **authorizationUri** value from the above to **Authorization URL**.
-    -   Leave **Scopes** field empty.
-    -   Click **Finish**
+    - Copy `client_id`, `client_secret`, `token_uri` from the downloaded JSON.
+    - Copy **authorizationUri** value from the above to **Authorization URL**.
+    - Leave **Scopes** field empty.
+    - Click **Finish**
 
 ## Test Your Agent
 
@@ -228,13 +226,13 @@ register it on Gemini Enterprise without running "main.py" script.
     on it.
 2.  Open the project you used in the above setting.
 3.  Click on the **App** you used to register your agent.
-    -   If you don't see your app being listed, click **"Edit"** to switch
-        location
+    - If you don't see your app being listed, click **"Edit"** to switch
+      location
 4.  Select **"Agents"** from the left nav bar.
 5.  Click the three-dot button on the **"Actions"** column and select
     **"Previwe"** menu.
 6.  It will open Gemini Enterprise Agent page.
-7.  Try queries like *"Find contact card of Sarah"*.
-    -   If this is the first time you start a chat with the agent, it will ask
-        for manual authorization.
+7.  Try queries like _"Find contact card of Sarah"_.
+    - If this is the first time you start a chat with the agent, it will ask
+      for manual authorization.
 8.  You should see a Contact Card being rendered on Gemini Enterprise.
diff --git a/samples/agent/adk/gemini_enterprise/agent_engine/contact_data.json b/samples/agent/adk/gemini_enterprise/agent_engine/contact_data.json
index 83d85e472..9015e8bb0 100644
--- a/samples/agent/adk/gemini_enterprise/agent_engine/contact_data.json
+++ b/samples/agent/adk/gemini_enterprise/agent_engine/contact_data.json
@@ -1,38 +1,38 @@
 [
-    {
-        "id": "1",
-        "name": "Alex Li",
-        "title": "Product Marketing Manager",
-        "team": "Team Macally",
-        "department": "Marketing",
-        "location": "New York",
-        "email": "alex.li@example.com",
-        "mobile": "+1 (415) 171-1080",
-        "calendar": "Free until 4:00 PM",
-        "imageUrl": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
-    },
-    {
-        "id": "2",
-        "name": "Casey Smith",
-        "title": "Digital Marketing Specialist",
-        "team": "Growth Team",
-        "department": "Marketing",
-        "location": "New York",
-        "email": "casey.smith@example.com",
-        "mobile": "+1 (415) 222-3333",
-        "calendar": "In a meeting",
-        "imageUrl": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-    },
-    {
-        "id": "3",
-        "name": "Jordan Taylor",
-        "title": "Senior Software Engineer",
-        "team": "Core Platform",
-        "department": "Engineering",
-        "location": "San Francisco",
-        "email": "jordan.taylor@example.com",
-        "mobile": "+1 (650) 444-5555",
-        "calendar": "Focus time",
-        "imageUrl": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"
-    }
+  {
+    "id": "1",
+    "name": "Alex Li",
+    "title": "Product Marketing Manager",
+    "team": "Team Macally",
+    "department": "Marketing",
+    "location": "New York",
+    "email": "alex.li@example.com",
+    "mobile": "+1 (415) 171-1080",
+    "calendar": "Free until 4:00 PM",
+    "imageUrl": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
+  },
+  {
+    "id": "2",
+    "name": "Casey Smith",
+    "title": "Digital Marketing Specialist",
+    "team": "Growth Team",
+    "department": "Marketing",
+    "location": "New York",
+    "email": "casey.smith@example.com",
+    "mobile": "+1 (415) 222-3333",
+    "calendar": "In a meeting",
+    "imageUrl": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+  },
+  {
+    "id": "3",
+    "name": "Jordan Taylor",
+    "title": "Senior Software Engineer",
+    "team": "Core Platform",
+    "department": "Engineering",
+    "location": "San Francisco",
+    "email": "jordan.taylor@example.com",
+    "mobile": "+1 (650) 444-5555",
+    "calendar": "Focus time",
+    "imageUrl": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"
+  }
 ]
diff --git a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/action_confirmation.json b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/action_confirmation.json
index 74a665a04..b2b1da92e 100644
--- a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/action_confirmation.json
+++ b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/action_confirmation.json
@@ -37,11 +37,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "modal-title",
-                  "modal-message",
-                  "dismiss-button"
-                ]
+                "explicitList": ["modal-title", "modal-message", "dismiss-button"]
               },
               "alignment": "center"
             }
@@ -109,4 +105,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_card.json b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_card.json
index c783dce5e..ddb2df13c 100644
--- a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_card.json
+++ b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_card.json
@@ -40,9 +40,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "profile_image"
-                ]
+                "explicitList": ["profile_image"]
               },
               "alignment": "center"
             }
@@ -99,11 +97,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "user_heading",
-                  "description_text_1",
-                  "description_text_2"
-                ]
+                "explicitList": ["user_heading", "description_text_1", "description_text_2"]
               },
               "alignment": "center"
             }
@@ -146,10 +140,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calendar_primary_text",
-                  "calendar_secondary_text"
-                ]
+                "explicitList": ["calendar_primary_text", "calendar_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -161,10 +152,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "calendar_icon",
-                  "calendar_text_column"
-                ]
+                "explicitList": ["calendar_icon", "calendar_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -208,10 +196,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location_primary_text",
-                  "location_secondary_text"
-                ]
+                "explicitList": ["location_primary_text", "location_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -223,10 +208,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location_icon",
-                  "location_text_column"
-                ]
+                "explicitList": ["location_icon", "location_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -270,10 +252,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "mail_primary_text",
-                  "mail_secondary_text"
-                ]
+                "explicitList": ["mail_primary_text", "mail_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -285,10 +264,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "mail_icon",
-                  "mail_text_column"
-                ]
+                "explicitList": ["mail_icon", "mail_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -338,10 +314,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "call_primary_text",
-                  "call_secondary_text"
-                ]
+                "explicitList": ["call_primary_text", "call_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -353,10 +326,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "call_icon",
-                  "call_text_column"
-                ]
+                "explicitList": ["call_icon", "call_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -369,12 +339,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "info_row_1",
-                  "info_row_2",
-                  "info_row_3",
-                  "info_row_4"
-                ]
+                "explicitList": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"]
               },
               "alignment": "stretch"
             }
@@ -429,10 +394,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "button_1",
-                  "button_2"
-                ]
+                "explicitList": ["button_1", "button_2"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -454,9 +416,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "link_text"
-                ]
+                "explicitList": ["link_text"]
               },
               "distribution": "center",
               "alignment": "center"
diff --git a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_list.json b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_list.json
index 2cf52bede..48ea65125 100644
--- a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_list.json
+++ b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/contact_list.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -64,11 +61,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details",
-                  "view-button"
-                ]
+                "explicitList": ["template-image", "card-details", "view-button"]
               },
               "alignment": "center"
             }
@@ -90,10 +83,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "template-name",
-                  "template-title"
-                ]
+                "explicitList": ["template-name", "template-title"]
               }
             }
           }
@@ -229,4 +219,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/follow_success.json b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/follow_success.json
index bfc866e91..7adfe16df 100644
--- a/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/follow_success.json
+++ b/samples/agent/adk/gemini_enterprise/agent_engine/examples/0.8/follow_success.json
@@ -22,10 +22,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "success_icon",
-                  "success_text"
-                ]
+                "explicitList": ["success_icon", "success_text"]
               },
               "alignment": "center"
             }
@@ -55,4 +52,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/gemini_enterprise/cloud_run/README.md b/samples/agent/adk/gemini_enterprise/cloud_run/README.md
index 387b8d806..124b189ab 100644
--- a/samples/agent/adk/gemini_enterprise/cloud_run/README.md
+++ b/samples/agent/adk/gemini_enterprise/cloud_run/README.md
@@ -33,8 +33,8 @@ chmod +x deploy.sh
 ./deploy.sh <YOUR_PROJECT_ID> <YOUR_SERVICE_NAME> [MODEL_NAME]
 ```
 
-*   `MODEL_NAME`: Optional. Can be `gemini-2.5-pro` or `gemini-2.5-flash`.
-    Defaults to `gemini-2.5-flash` if not specified.
+- `MODEL_NAME`: Optional. Can be `gemini-2.5-pro` or `gemini-2.5-flash`.
+  Defaults to `gemini-2.5-flash` if not specified.
 
 For example:
 
diff --git a/samples/agent/adk/gemini_enterprise/cloud_run/contact_data.json b/samples/agent/adk/gemini_enterprise/cloud_run/contact_data.json
index 83d85e472..9015e8bb0 100644
--- a/samples/agent/adk/gemini_enterprise/cloud_run/contact_data.json
+++ b/samples/agent/adk/gemini_enterprise/cloud_run/contact_data.json
@@ -1,38 +1,38 @@
 [
-    {
-        "id": "1",
-        "name": "Alex Li",
-        "title": "Product Marketing Manager",
-        "team": "Team Macally",
-        "department": "Marketing",
-        "location": "New York",
-        "email": "alex.li@example.com",
-        "mobile": "+1 (415) 171-1080",
-        "calendar": "Free until 4:00 PM",
-        "imageUrl": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
-    },
-    {
-        "id": "2",
-        "name": "Casey Smith",
-        "title": "Digital Marketing Specialist",
-        "team": "Growth Team",
-        "department": "Marketing",
-        "location": "New York",
-        "email": "casey.smith@example.com",
-        "mobile": "+1 (415) 222-3333",
-        "calendar": "In a meeting",
-        "imageUrl": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
-    },
-    {
-        "id": "3",
-        "name": "Jordan Taylor",
-        "title": "Senior Software Engineer",
-        "team": "Core Platform",
-        "department": "Engineering",
-        "location": "San Francisco",
-        "email": "jordan.taylor@example.com",
-        "mobile": "+1 (650) 444-5555",
-        "calendar": "Focus time",
-        "imageUrl": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"
-    }
+  {
+    "id": "1",
+    "name": "Alex Li",
+    "title": "Product Marketing Manager",
+    "team": "Team Macally",
+    "department": "Marketing",
+    "location": "New York",
+    "email": "alex.li@example.com",
+    "mobile": "+1 (415) 171-1080",
+    "calendar": "Free until 4:00 PM",
+    "imageUrl": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop"
+  },
+  {
+    "id": "2",
+    "name": "Casey Smith",
+    "title": "Digital Marketing Specialist",
+    "team": "Growth Team",
+    "department": "Marketing",
+    "location": "New York",
+    "email": "casey.smith@example.com",
+    "mobile": "+1 (415) 222-3333",
+    "calendar": "In a meeting",
+    "imageUrl": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop"
+  },
+  {
+    "id": "3",
+    "name": "Jordan Taylor",
+    "title": "Senior Software Engineer",
+    "team": "Core Platform",
+    "department": "Engineering",
+    "location": "San Francisco",
+    "email": "jordan.taylor@example.com",
+    "mobile": "+1 (650) 444-5555",
+    "calendar": "Focus time",
+    "imageUrl": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop"
+  }
 ]
diff --git a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/action_confirmation.json b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/action_confirmation.json
index 74a665a04..b2b1da92e 100644
--- a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/action_confirmation.json
+++ b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/action_confirmation.json
@@ -37,11 +37,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "modal-title",
-                  "modal-message",
-                  "dismiss-button"
-                ]
+                "explicitList": ["modal-title", "modal-message", "dismiss-button"]
               },
               "alignment": "center"
             }
@@ -109,4 +105,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_card.json b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_card.json
index c783dce5e..ddb2df13c 100644
--- a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_card.json
+++ b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_card.json
@@ -40,9 +40,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "profile_image"
-                ]
+                "explicitList": ["profile_image"]
               },
               "alignment": "center"
             }
@@ -99,11 +97,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "user_heading",
-                  "description_text_1",
-                  "description_text_2"
-                ]
+                "explicitList": ["user_heading", "description_text_1", "description_text_2"]
               },
               "alignment": "center"
             }
@@ -146,10 +140,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calendar_primary_text",
-                  "calendar_secondary_text"
-                ]
+                "explicitList": ["calendar_primary_text", "calendar_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -161,10 +152,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "calendar_icon",
-                  "calendar_text_column"
-                ]
+                "explicitList": ["calendar_icon", "calendar_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -208,10 +196,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location_primary_text",
-                  "location_secondary_text"
-                ]
+                "explicitList": ["location_primary_text", "location_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -223,10 +208,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location_icon",
-                  "location_text_column"
-                ]
+                "explicitList": ["location_icon", "location_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -270,10 +252,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "mail_primary_text",
-                  "mail_secondary_text"
-                ]
+                "explicitList": ["mail_primary_text", "mail_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -285,10 +264,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "mail_icon",
-                  "mail_text_column"
-                ]
+                "explicitList": ["mail_icon", "mail_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -338,10 +314,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "call_primary_text",
-                  "call_secondary_text"
-                ]
+                "explicitList": ["call_primary_text", "call_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -353,10 +326,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "call_icon",
-                  "call_text_column"
-                ]
+                "explicitList": ["call_icon", "call_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -369,12 +339,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "info_row_1",
-                  "info_row_2",
-                  "info_row_3",
-                  "info_row_4"
-                ]
+                "explicitList": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"]
               },
               "alignment": "stretch"
             }
@@ -429,10 +394,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "button_1",
-                  "button_2"
-                ]
+                "explicitList": ["button_1", "button_2"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -454,9 +416,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "link_text"
-                ]
+                "explicitList": ["link_text"]
               },
               "distribution": "center",
               "alignment": "center"
diff --git a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_list.json b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_list.json
index 2cf52bede..48ea65125 100644
--- a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_list.json
+++ b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/contact_list.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -64,11 +61,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details",
-                  "view-button"
-                ]
+                "explicitList": ["template-image", "card-details", "view-button"]
               },
               "alignment": "center"
             }
@@ -90,10 +83,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "template-name",
-                  "template-title"
-                ]
+                "explicitList": ["template-name", "template-title"]
               }
             }
           }
@@ -229,4 +219,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/follow_success.json b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/follow_success.json
index bfc866e91..7adfe16df 100644
--- a/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/follow_success.json
+++ b/samples/agent/adk/gemini_enterprise/cloud_run/examples/0.8/follow_success.json
@@ -22,10 +22,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "success_icon",
-                  "success_text"
-                ]
+                "explicitList": ["success_icon", "success_text"]
               },
               "alignment": "center"
             }
@@ -55,4 +52,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/mcp-apps-in-a2ui-sample/README.md b/samples/agent/adk/mcp-apps-in-a2ui-sample/README.md
index d41431bfa..5394fec9d 100644
--- a/samples/agent/adk/mcp-apps-in-a2ui-sample/README.md
+++ b/samples/agent/adk/mcp-apps-in-a2ui-sample/README.md
@@ -5,22 +5,24 @@ This sample demonstrates how to integrate an **MCP (Model Context Protocol) App*
 ## Overview
 
 The sample consists of:
+
 1.  **Agent** (`agent.py`): A Python FastAPI server that acts as the agent. It serves the UI manifest containing the `McpApp` component and handles tool calls forwarded by the client.
 2.  **Client** (`samples/client/lit/mcp-apps-in-a2ui-sample`): A Lit-based client application that renders the A2UI interface and the `McpApp` component.
 
 ## Architecture
 
 To ensure security when running untrusted third-party widget code, this sample uses a **double-iframe isolation** model:
-*   **Host Page**: The main A2UI application.
-*   **Sandbox Proxy**: An iframe hosted on a separate origin (`127.0.0.1`) to enforce origin isolation.
-*   **Untrusted App**: The actual MCP app content, injected dynamically into an inner iframe with restricted permissions.
+
+- **Host Page**: The main A2UI application.
+- **Sandbox Proxy**: An iframe hosted on a separate origin (`127.0.0.1`) to enforce origin isolation.
+- **Untrusted App**: The actual MCP app content, injected dynamically into an inner iframe with restricted permissions.
 
 Communication between the host and the app is handled via the `@modelcontextprotocol/ext-apps` package using standard `postMessage` channels.
 
 ## Prerequisites
 
-*   Node.js (v18+ recommended)
-*   Python 3.10+ with `uv` package manager
+- Node.js (v18+ recommended)
+- Python 3.10+ with `uv` package manager
 
 ## How to Run
 
@@ -52,9 +54,9 @@ Open your browser and navigate to `http://localhost:5173`. You should see the A2
 
 ## Development Notes
 
-*   **Module Resolution**: Because this is a development environment, the iframe dynamically loads the `app-with-deps.js` bundle from the workspace's `node_modules` via Vite's `/@fs/` prefix. An `importmap` is used to resolve the bare imports inside that bundle.
-*   **CORS**: The iframe must be loaded from `127.0.0.1` to match the origin expected by the sandbox proxy and avoid CORS blocks.
-*   **Content Security Policy (CSP)**: This sample uses a static CSP in `sandbox.html` that allows `'unsafe-inline'` and `'unsafe-eval'` for compatibility with development tools. For production deployments, it is recommended to remove these relaxed settings and implement a dynamic CSP derived from app metadata as recommended by the MCP Apps spec.
+- **Module Resolution**: Because this is a development environment, the iframe dynamically loads the `app-with-deps.js` bundle from the workspace's `node_modules` via Vite's `/@fs/` prefix. An `importmap` is used to resolve the bare imports inside that bundle.
+- **CORS**: The iframe must be loaded from `127.0.0.1` to match the origin expected by the sandbox proxy and avoid CORS blocks.
+- **Content Security Policy (CSP)**: This sample uses a static CSP in `sandbox.html` that allows `'unsafe-inline'` and `'unsafe-eval'` for compatibility with development tools. For production deployments, it is recommended to remove these relaxed settings and implement a dynamic CSP derived from app metadata as recommended by the MCP Apps spec.
 
 ## Disclaimer
 
diff --git a/samples/agent/adk/mcp-apps-in-a2ui-sample/catalog-schema.json b/samples/agent/adk/mcp-apps-in-a2ui-sample/catalog-schema.json
index dc1a2165a..17e434ac6 100644
--- a/samples/agent/adk/mcp-apps-in-a2ui-sample/catalog-schema.json
+++ b/samples/agent/adk/mcp-apps-in-a2ui-sample/catalog-schema.json
@@ -17,10 +17,7 @@
           }
         }
       },
-      "required": [
-        "resourceUri",
-        "htmlContent"
-      ]
+      "required": ["resourceUri", "htmlContent"]
     }
   }
 }
diff --git a/samples/agent/adk/mcp-apps-in-a2ui-sample/mcp_app.html b/samples/agent/adk/mcp-apps-in-a2ui-sample/mcp_app.html
index 6689a9bb0..942354a59 100644
--- a/samples/agent/adk/mcp-apps-in-a2ui-sample/mcp_app.html
+++ b/samples/agent/adk/mcp-apps-in-a2ui-sample/mcp_app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,68 +16,80 @@
 -->
 
 <html>
-<head>
+  <head>
     <title>MCP Sample App</title>
     <style>
-        body { font-family: sans-serif; padding: 10px; }
-        button { padding: 8px 16px; background: #137fec; color: white; border: none; border-radius: 4px; cursor: pointer; }
-        #status { margin-top: 10px; color: green; }
+      body {
+        font-family: sans-serif;
+        padding: 10px;
+      }
+      button {
+        padding: 8px 16px;
+        background: #137fec;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      #status {
+        margin-top: 10px;
+        color: green;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <h3>MCP Sandboxed App</h3>
     <div id="data">Initial Data: <span id="val">None</span></div>
-    <br/>
+    <br />
     <button id="actionBtn">Call Agent Tool</button>
     <div id="status"></div>
 
     <script type="importmap">
-    {
-      "imports": {
-        "@modelcontextprotocol/sdk/types.js": "../../lit/node_modules/@modelcontextprotocol/sdk/dist/esm/types.js",
-        "@modelcontextprotocol/sdk/shared/protocol.js": "../../lit/node_modules/@modelcontextprotocol/sdk/dist/esm/shared/protocol.js"
+      {
+        "imports": {
+          "@modelcontextprotocol/sdk/types.js": "../../lit/node_modules/@modelcontextprotocol/sdk/dist/esm/types.js",
+          "@modelcontextprotocol/sdk/shared/protocol.js": "../../lit/node_modules/@modelcontextprotocol/sdk/dist/esm/shared/protocol.js"
+        }
       }
-    }
     </script>
     <script type="module">
-        import { App as AppBridge } from '../../lit/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-with-deps.js';
+      import {App as AppBridge} from '../../lit/node_modules/@modelcontextprotocol/ext-apps/dist/src/app-with-deps.js';
 
-        const bridge = new AppBridge({ name: "mcp-apps-in-a2ui-sample", version: "1.0.0" });
+      const bridge = new AppBridge({name: 'mcp-apps-in-a2ui-sample', version: '1.0.0'});
 
-        async function init() {
-            const statusEl = document.getElementById('status');
-            console.log("[MCP App Iframe] init() started");
-            statusEl.innerText = "Initializing bridge...";
-            try {
-                console.log("[MCP App Iframe] Calling bridge.connect()...");
-                await bridge.connect();
-                console.log("[MCP App Iframe] bridge.connect() resolved!");
-                statusEl.innerText = "Connected to host!";
-
-                document.getElementById('actionBtn').addEventListener('click', async () => {
-                    console.log("[MCP App Iframe] Button clicked!");
-                    statusEl.innerText = "Calling tool...";
-                    try {
-                        console.log("[MCP App Iframe] Calling bridge.callServerTool...");
-                        const res = await bridge.callServerTool({
-                            name: "trigger_agent_action",
-                            arguments: { foo: 'bar' }
-                        });
-                        console.log("[MCP App Iframe] Tool response:", res);
-                        statusEl.innerText = "Tool response received!";
-                    } catch (err) {
-                        console.error("[MCP App Iframe] Tool error:", err);
-                        statusEl.innerText = "Error: " + err.message;
-                    }
-                });
+      async function init() {
+        const statusEl = document.getElementById('status');
+        console.log('[MCP App Iframe] init() started');
+        statusEl.innerText = 'Initializing bridge...';
+        try {
+          console.log('[MCP App Iframe] Calling bridge.connect()...');
+          await bridge.connect();
+          console.log('[MCP App Iframe] bridge.connect() resolved!');
+          statusEl.innerText = 'Connected to host!';
 
+          document.getElementById('actionBtn').addEventListener('click', async () => {
+            console.log('[MCP App Iframe] Button clicked!');
+            statusEl.innerText = 'Calling tool...';
+            try {
+              console.log('[MCP App Iframe] Calling bridge.callServerTool...');
+              const res = await bridge.callServerTool({
+                name: 'trigger_agent_action',
+                arguments: {foo: 'bar'},
+              });
+              console.log('[MCP App Iframe] Tool response:', res);
+              statusEl.innerText = 'Tool response received!';
             } catch (err) {
-                console.error("[MCP App Iframe] Connection failed:", err);
-                statusEl.innerText = "Connection failed: " + err.message;
+              console.error('[MCP App Iframe] Tool error:', err);
+              statusEl.innerText = 'Error: ' + err.message;
             }
+          });
+        } catch (err) {
+          console.error('[MCP App Iframe] Connection failed:', err);
+          statusEl.innerText = 'Connection failed: ' + err.message;
         }
+      }
 
-        init();
+      init();
     </script>
-</body>
+  </body>
 </html>
diff --git a/samples/agent/adk/mcp_app_proxy/README.md b/samples/agent/adk/mcp_app_proxy/README.md
index a905e56d2..af8b59ae2 100644
--- a/samples/agent/adk/mcp_app_proxy/README.md
+++ b/samples/agent/adk/mcp_app_proxy/README.md
@@ -14,27 +14,25 @@ create a simple "MCP Apps Proxy" agent that is hosted as an A2A server.
 1. Run the MCP Server that serves the MCP Apps. ([Link to
    instructions](../../mcp/mcp-apps-calculator/README.md))
 
-
 2. Navigate to the samples directory:
 
-    ```bash
-    cd samples/agent/adk/mcp_app_proxy
-    ```
+   ```bash
+   cd samples/agent/adk/mcp_app_proxy
+   ```
 
-2. Create an environment file with your API key:
+3. Create an environment file with your API key:
 
    ```bash
    cp .env.example .env
    # Edit .env with your actual API key (do not commit .env)
    ```
 
-3. Run the server:
+4. Run the server:
 
    ```bash
    uv run .
    ```
 
-
 ## Disclaimer
 
 Important: The sample code provided is for demonstration purposes and
diff --git a/samples/agent/adk/mcp_app_proxy/catalogs/0.8/mcp_app_catalog.json b/samples/agent/adk/mcp_app_proxy/catalogs/0.8/mcp_app_catalog.json
index 788e37fa7..e2d79f8ae 100644
--- a/samples/agent/adk/mcp_app_proxy/catalogs/0.8/mcp_app_catalog.json
+++ b/samples/agent/adk/mcp_app_proxy/catalogs/0.8/mcp_app_catalog.json
@@ -39,19 +39,17 @@
           }
         }
       },
-      "required": [
-        "content"
-      ]
+      "required": ["content"]
     },
     "Column": {
       "type": "object",
       "additionalProperties": false,
       "properties": {
-        "alignment": { "type": "string" },
-        "distribution": { "type": "string" },
+        "alignment": {"type": "string"},
+        "distribution": {"type": "string"},
         "children": {
           "type": "array",
-          "items": { "type": "object" }
+          "items": {"type": "object"}
         }
       }
     },
@@ -64,9 +62,9 @@
           "description": "Player score value or path.",
           "additionalProperties": false,
           "properties": {
-            "literalNumber": { "type": "number" },
-            "literalString": { "type": "string" },
-            "path": { "type": "string" }
+            "literalNumber": {"type": "number"},
+            "literalString": {"type": "string"},
+            "path": {"type": "string"}
           }
         },
         "cpuScore": {
@@ -74,9 +72,9 @@
           "description": "CPU score value or path.",
           "additionalProperties": false,
           "properties": {
-            "literalNumber": { "type": "number" },
-            "literalString": { "type": "string" },
-            "path": { "type": "string" }
+            "literalNumber": {"type": "number"},
+            "literalString": {"type": "string"},
+            "path": {"type": "string"}
           }
         }
       }
diff --git a/samples/agent/adk/mcp_app_proxy/catalogs/0.9/mcp_app_catalog.json b/samples/agent/adk/mcp_app_proxy/catalogs/0.9/mcp_app_catalog.json
index 7cc1d7f1d..ead596eaf 100644
--- a/samples/agent/adk/mcp_app_proxy/catalogs/0.9/mcp_app_catalog.json
+++ b/samples/agent/adk/mcp_app_proxy/catalogs/0.9/mcp_app_catalog.json
@@ -26,9 +26,7 @@
               }
             }
           },
-          "required": [
-            "component"
-          ],
+          "required": ["component"],
           "additionalProperties": false
         }
       ]
@@ -61,10 +59,7 @@
               }
             }
           },
-          "required": [
-            "component",
-            "content"
-          ],
+          "required": ["component", "content"],
           "additionalProperties": false
         }
       ]
@@ -90,9 +85,7 @@
               "description": "CPU score value or path."
             }
           },
-          "required": [
-            "component"
-          ],
+          "required": ["component"],
           "additionalProperties": false
         }
       ]
@@ -116,9 +109,7 @@
               "$ref": "#/$defs/PongScoreBoard"
             }
           },
-          "required": [
-            "component"
-          ],
+          "required": ["component"],
           "additionalProperties": false
         }
       ]
diff --git a/samples/agent/adk/mcp_app_proxy/pong_app.html b/samples/agent/adk/mcp_app_proxy/pong_app.html
index 255256b83..db42bff43 100644
--- a/samples/agent/adk/mcp_app_proxy/pong_app.html
+++ b/samples/agent/adk/mcp_app_proxy/pong_app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,560 +16,592 @@
 -->
 
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Neon Pong - A2UI Demo</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&family=Space+Grotesk:wght@300;500;700&display=swap"
+      rel="stylesheet"
+    />
     <style>
-        :root {
-            --primary: #00f2ff;
-            --secondary: #ff00ff;
-            --bg: #0a0b1e;
-            --card-bg: rgba(255, 255, 255, 0.05);
-            --text: #ffffff;
-            --glow: 0 0 15px rgba(0, 242, 255, 0.5);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Outfit', sans-serif;
-            background: var(--bg);
-            color: var(--text);
-            height: 100vh;
-            width: 100vw;
-            margin: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: stretch;
-            overflow: hidden;
-            background: radial-gradient(circle at center, #1a1b3a 0%, #0a0b1e 100%);
-        }
-
-        .container {
-            position: relative;
-            background: transparent;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            align-items: stretch;
-            flex: 1;
-            min-height: 0;
-            padding: 1.5rem;
-            box-sizing: border-box;
-        }
-
-        .header {
-            text-align: center;
-            position: relative;
-        }
-
-        .mcp-badge {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            background: rgba(255, 0, 255, 0.15);
-            color: #ff88ff;
-            border: 1px solid rgba(255, 0, 255, 0.4);
-            font-size: 0.65rem;
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            font-weight: 600;
-            white-space: nowrap;
-            margin-bottom: 0.5rem;
-        }
-
-        canvas {
-            position: absolute;
-            top: 0;
-            left: 0;
-            background: #000;
-            border-radius: 12px;
-            border: 2px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
-            cursor: none;
-            width: 100%;
-            height: 100%;
-            display: block;
-            box-sizing: border-box;
-        }
-
-        .controls {
-            font-size: 0.9rem;
-            opacity: 0.7;
-            display: flex;
-            gap: 1rem;
-        }
-
-        .key {
-            padding: 0.2rem 0.5rem;
-            background: rgba(255, 255, 255, 0.12);
-            border-radius: 4px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            font-family: monospace;
-        }
-
-        /* Overlay for start/pause */
-        #game-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(10, 11, 30, 0.85);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            border-radius: 12px;
-            z-index: 10;
-            transition: opacity 0.3s ease;
-        }
-
-        .btn {
-            padding: 0.8rem 1.5rem;
-            background: linear-gradient(135deg, var(--primary), #00d2ff);
-            color: #000;
-            text-decoration: none;
-            border-radius: 8px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            border: none;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            box-shadow: 0 4px 15px rgba(0, 242, 255, 0.4);
-        }
-
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0, 242, 255, 0.6);
-            filter: brightness(1.1);
-        }
-
-        .hidden {
-            display: none !important;
-        }
-
-        .pause-btn {
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            padding: 0.5rem 1rem;
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 8px;
-            color: white;
-            cursor: pointer;
-            z-index: 20;
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            transition: all 0.2s;
-        }
-
-        .pause-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-        }
-
-        /* Decorative blobs */
-        .blob {
-            position: absolute;
-            width: 300px;
-            height: 300px;
-            border-radius: 50%;
-            filter: blur(80px);
-            z-index: -1;
-            opacity: 0.15;
-        }
-
-        .blob-1 { top: -100px; left: -100px; background: var(--primary); }
-        .blob-2 { bottom: -100px; right: -100px; background: var(--secondary); }
+      :root {
+        --primary: #00f2ff;
+        --secondary: #ff00ff;
+        --bg: #0a0b1e;
+        --card-bg: rgba(255, 255, 255, 0.05);
+        --text: #ffffff;
+        --glow: 0 0 15px rgba(0, 242, 255, 0.5);
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: 'Outfit', sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        height: 100vh;
+        width: 100vw;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: stretch;
+        overflow: hidden;
+        background: radial-gradient(circle at center, #1a1b3a 0%, #0a0b1e 100%);
+      }
+
+      .container {
+        position: relative;
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+        flex: 1;
+        min-height: 0;
+        padding: 1.5rem;
+        box-sizing: border-box;
+      }
+
+      .header {
+        text-align: center;
+        position: relative;
+      }
+
+      .mcp-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        background: rgba(255, 0, 255, 0.15);
+        color: #ff88ff;
+        border: 1px solid rgba(255, 0, 255, 0.4);
+        font-size: 0.65rem;
+        padding: 0.25rem 0.75rem;
+        border-radius: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-weight: 600;
+        white-space: nowrap;
+        margin-bottom: 0.5rem;
+      }
+
+      canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #000;
+        border-radius: 12px;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+        cursor: none;
+        width: 100%;
+        height: 100%;
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .controls {
+        font-size: 0.9rem;
+        opacity: 0.7;
+        display: flex;
+        gap: 1rem;
+      }
+
+      .key {
+        padding: 0.2rem 0.5rem;
+        background: rgba(255, 255, 255, 0.12);
+        border-radius: 4px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        font-family: monospace;
+      }
+
+      /* Overlay for start/pause */
+      #game-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(10, 11, 30, 0.85);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12px;
+        z-index: 10;
+        transition: opacity 0.3s ease;
+      }
+
+      .btn {
+        padding: 0.8rem 1.5rem;
+        background: linear-gradient(135deg, var(--primary), #00d2ff);
+        color: #000;
+        text-decoration: none;
+        border-radius: 8px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        box-shadow: 0 4px 15px rgba(0, 242, 255, 0.4);
+      }
+
+      .btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 242, 255, 0.6);
+        filter: brightness(1.1);
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      .pause-btn {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        padding: 0.5rem 1rem;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
+        color: white;
+        cursor: pointer;
+        z-index: 20;
+        font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        transition: all 0.2s;
+      }
+
+      .pause-btn:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
+
+      /* Decorative blobs */
+      .blob {
+        position: absolute;
+        width: 300px;
+        height: 300px;
+        border-radius: 50%;
+        filter: blur(80px);
+        z-index: -1;
+        opacity: 0.15;
+      }
+
+      .blob-1 {
+        top: -100px;
+        left: -100px;
+        background: var(--primary);
+      }
+      .blob-2 {
+        bottom: -100px;
+        right: -100px;
+        background: var(--secondary);
+      }
     </style>
     <script>
-        /**
-         * MCP Communication Layer
-         * Handles bidirectional JSON-RPC communication using the Model Context Protocol (MCP)
-         * over the Window.postMessage API. This allows the embedded app to send requests 
-         * (like tool calls) to the parent proxy agent and handle framework-level initialization 
-         * and state updates.
-         */
-        let nextId = 1;
-
-        function sendRequest(method, params) {
-            const id = nextId++;
-            window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, '*');
-            return new Promise((resolve, reject) => {
-                const listener = (event) => {
-                    if (event.data?.id === id) {
-                        window.removeEventListener('message', listener);
-                        if (event.data?.result) {
-                            resolve(event.data.result);
-                        } else if (event.data?.error) {
-                            reject(new Error(event.data.error.message || JSON.stringify(event.data.error)));
-                        }
-                    }
-                };
-                window.addEventListener('message', listener);
-            });
-        }
-
-        function sendNotification(method, params) {
-            window.parent.postMessage({ jsonrpc: "2.0", method, params }, '*');
-        }
-
-        window.addEventListener('message', (event) => {
-            const data = event.data;
-            if (data?.method === 'ping') {
-                if (data.id) {
-                    window.parent.postMessage({ jsonrpc: "2.0", id: data.id, result: {} }, '*');
-                }
-            } else if (data === 'unpause' || data?.type === 'unpause') {
-                if (typeof unpauseGame === 'function') {
-                    unpauseGame();
-                } else {
-                    console.warn("unpauseGame is not defined yet");
-                }
+      /**
+       * MCP Communication Layer
+       * Handles bidirectional JSON-RPC communication using the Model Context Protocol (MCP)
+       * over the Window.postMessage API. This allows the embedded app to send requests
+       * (like tool calls) to the parent proxy agent and handle framework-level initialization
+       * and state updates.
+       */
+      let nextId = 1;
+
+      function sendRequest(method, params) {
+        const id = nextId++;
+        window.parent.postMessage({jsonrpc: '2.0', id, method, params}, '*');
+        return new Promise((resolve, reject) => {
+          const listener = event => {
+            if (event.data?.id === id) {
+              window.removeEventListener('message', listener);
+              if (event.data?.result) {
+                resolve(event.data.result);
+              } else if (event.data?.error) {
+                reject(new Error(event.data.error.message || JSON.stringify(event.data.error)));
+              }
             }
+          };
+          window.addEventListener('message', listener);
         });
-
-        // Initialize
-        sendRequest("ui/initialize", {
-            appCapabilities: {
-                experimental: {},
-                tools: { listChanged: false },
-                availableDisplayModes: ["inline"]
-            }
-        }).then((result) => {
-            console.log("Initialized with host:", result);
-            sendNotification("ui/notifications/initialized", {});
-        }).catch(err => {
-            console.error("Initialization failed:", err);
+      }
+
+      function sendNotification(method, params) {
+        window.parent.postMessage({jsonrpc: '2.0', method, params}, '*');
+      }
+
+      window.addEventListener('message', event => {
+        const data = event.data;
+        if (data?.method === 'ping') {
+          if (data.id) {
+            window.parent.postMessage({jsonrpc: '2.0', id: data.id, result: {}}, '*');
+          }
+        } else if (data === 'unpause' || data?.type === 'unpause') {
+          if (typeof unpauseGame === 'function') {
+            unpauseGame();
+          } else {
+            console.warn('unpauseGame is not defined yet');
+          }
+        }
+      });
+
+      // Initialize
+      sendRequest('ui/initialize', {
+        appCapabilities: {
+          experimental: {},
+          tools: {listChanged: false},
+          availableDisplayModes: ['inline'],
+        },
+      })
+        .then(result => {
+          console.log('Initialized with host:', result);
+          sendNotification('ui/notifications/initialized', {});
+        })
+        .catch(err => {
+          console.error('Initialization failed:', err);
         });
     </script>
-</head>
-<body>
+  </head>
+  <body>
     <div class="blob blob-1"></div>
     <div class="blob blob-2"></div>
 
     <div class="container" id="container">
-        <div class="header">
-            <div class="mcp-badge">🔌 Embedded MCP App</div>
-        </div>
-
-        <div style="position: relative; width: 100%; display: flex; justify-content: center; flex: 1; min-height: 0;">
-            <canvas id="pong"></canvas>
-            <div id="game-overlay">
-                <h2 id="overlay-text" style="font-family: 'Space Grotesk', sans-serif; font-size: 2rem; margin-bottom: 2rem;">NEON PONG</h2>
-                <button id="start-btn" class="btn" onclick="startGame()">Start Game</button>
-            </div>
-            <button id="pause-btn" class="pause-btn hidden" onclick="togglePause()">Pause</button>
-        </div>
-
-        <div class="controls">
-            <span>Move: <span class="key">W</span> / <span class="key">S</span> or <span class="key">Mouse</span></span>
+      <div class="header">
+        <div class="mcp-badge">🔌 Embedded MCP App</div>
+      </div>
+
+      <div
+        style="
+          position: relative;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          flex: 1;
+          min-height: 0;
+        "
+      >
+        <canvas id="pong"></canvas>
+        <div id="game-overlay">
+          <h2
+            id="overlay-text"
+            style="font-family: 'Space Grotesk', sans-serif; font-size: 2rem; margin-bottom: 2rem"
+          >
+            NEON PONG
+          </h2>
+          <button id="start-btn" class="btn" onclick="startGame()">Start Game</button>
         </div>
+        <button id="pause-btn" class="pause-btn hidden" onclick="togglePause()">Pause</button>
+      </div>
+
+      <div class="controls">
+        <span
+          >Move: <span class="key">W</span> / <span class="key">S</span> or
+          <span class="key">Mouse</span></span
+        >
+      </div>
     </div>
 
     <script>
-        /**
-         * Game Engine & Rendering Logic
-         * Manages game state (ball, paddles), user inputs, physics (collision, movement velocity), 
-         * and the canvas rendering loop. This script encapsulates the core Pong mechanics and interfaces
-         * with the MCP layer to synchronize critical game state like scores with the backend agent.
-         */
-        const canvas = document.getElementById('pong');
-        const context = canvas.getContext('2d');
-        const container = document.getElementById('container');
-
-        function displayOverlay(text = "", buttonText = null) {
-            const overlayEl = document.getElementById('game-overlay');
-            const overlayText = document.getElementById('overlay-text');
-            const startBtn = document.getElementById('start-btn');
-
-            overlayEl.classList.remove('hidden');
-            if (text) overlayText.textContent = text;
-            
-            if (buttonText) {
-                startBtn.textContent = buttonText;
-                startBtn.classList.remove('hidden');
-            } else {
-                startBtn.classList.add('hidden');
-            }
-        }
-
-        function hideOverlay() {
-            const overlayEl = document.getElementById('game-overlay');
-            overlayEl.classList.add('hidden');
-        }
-
-        // Reference dimensions for scaling
-        const REF_WIDTH = 600;
-        const REF_HEIGHT = 400;
-        let scale = 1;
-
-        const ball = {
-            x: 0,
-            y: 0,
-            radius: 8,
-            speed: 5,
-            velocityX: 5,
-            velocityY: 5,
-            color: "#00f2ff"
-        };
-
-        const user = {
-            x: 0,
-            y: 0,
-            width: 10,
-            height: 100,
-            color: "#00f2ff"
-        };
-
-        const cpu = {
-            x: 0,
-            y: 0,
-            width: 10,
-            height: 100,
-            color: "#ff00ff"
-        };
-
-        const net = {
-            x: 0,
-            y: 0,
-            width: 2,
-            height: 10,
-            color: "rgba(255, 255, 255, 0.1)"
-        };
-
-        let isRunning = false;
-        let isPaused = false;
-
-        function resize() {
-            // Update canvas resolution to match display size
-            const rect = canvas.getBoundingClientRect();
-            canvas.width = rect.width;
-            canvas.height = rect.height;
-
-            // Calculate scale factor relative to reference 600x400
-            scale = canvas.width / REF_WIDTH;
-
-            // Update object dimensions
-            ball.radius = 8 * scale;
-            user.width = 10 * scale;
-            user.height = 100 * scale;
-            cpu.width = 10 * scale;
-            cpu.height = 100 * scale;
-            cpu.x = canvas.width - cpu.width;
-            
-            net.width = 2 * scale;
-            net.height = 10 * scale;
-            net.x = canvas.width / 2 - net.width / 2;
-
-            // Reset positions if game hasn't started
-            if (!isRunning) {
-                user.y = canvas.height / 2 - user.height / 2;
-                cpu.y = canvas.height / 2 - cpu.height / 2;
-                ball.x = canvas.width / 2;
-                ball.y = canvas.height / 2;
-            }
-        }
-
-        const resizeObserver = new ResizeObserver(() => resize());
-        resizeObserver.observe(canvas);
-
-        function drawRect(x, y, w, h, color, glow = false) {
-            context.fillStyle = color;
-            if (glow) {
-                context.shadowBlur = 15 * scale;
-                context.shadowColor = color;
-            } else {
-                context.shadowBlur = 0;
-            }
-            context.fillRect(x, y, w, h);
-            context.shadowBlur = 0;
-        }
-
-        function drawCircle(x, y, r, color) {
-            context.fillStyle = color;
-            context.beginPath();
-            context.arc(x, y, r, 0, Math.PI * 2, false);
-            context.closePath();
-            context.shadowBlur = 15 * scale;
-            context.shadowColor = color;
-            context.fill();
-            context.shadowBlur = 0;
-        }
-
-        function drawNet() {
-            for (let i = 0; i <= canvas.height; i += 15 * scale) {
-                drawRect(net.x, net.y + i, net.width, net.height, net.color);
-            }
-        }
-
-        function resetBall() {
-            ball.x = canvas.width / 2;
-            ball.y = canvas.height / 2;
-            ball.speed = 5 * scale;
-            // Maintain direction but scale magnitude
-            const dirX = ball.velocityX > 0 ? 1 : -1;
-            const dirY = ball.velocityY > 0 ? 1 : -1;
-            ball.velocityX = -dirX * ball.speed;
-            ball.velocityY = dirY * ball.speed * (Math.random() * 2 - 1);
-        }
-
-        function collision(b, p) {
-            return b.x + b.radius > p.x && 
-                   b.x - b.radius < p.x + p.width && 
-                   b.y + b.radius > p.y && 
-                   b.y - b.radius < p.y + p.height;
-        }
-
-        function update() {
-            if (!isRunning || isPaused) return;
-
-            // CPU AI
-            let targetY = ball.y - cpu.height / 2;
-            cpu.y += (targetY - cpu.y) * 0.1;
-
-            // Ball movement
-            ball.x += ball.velocityX;
-            ball.y += ball.velocityY;
-
-            // Wall collision
-            if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
-                ball.velocityY = -ball.velocityY;
-            }
-
-            // Paddle collision
-            let player = (ball.x < canvas.width / 2) ? user : cpu;
-
-            if (collision(ball, player)) {
-                let collidePoint = ball.y - (player.y + player.height / 2);
-                collidePoint = collidePoint / (player.height / 2);
-
-                let angleRad = collidePoint * (Math.PI / 4);
-                let direction = (ball.x < canvas.width / 2) ? 1 : -1;
-
-                ball.velocityX = direction * ball.speed * Math.cos(angleRad);
-                ball.velocityY = ball.speed * Math.sin(angleRad);
-
-                ball.speed += 0.2 * scale;
-            }
-
-            // Check if there is a winner, and update the score via MCP tool call.
-            let winner = null;
-            if (ball.x - ball.radius < 0) {
-                winner = 'cpu';
-            } else if (ball.x + ball.radius > canvas.width) {
-                winner = 'player';
-            }
-            
-            if (winner) {
-                syncScore(winner);
-                resetBall();
-            }
-        }
-
-        function syncScore(player) {
-            isPaused = true; // Local pause
-            displayOverlay("SYNCING SCORE...");
-            
-            sendRequest('tools/call', {
-                name: 'score_update',
-                arguments: { player: player, silent: true }
-            }).catch(e => console.error("Failed to send score update:", e)).finally(() => unpauseGame());
-        }
-
-        function unpauseGame() {
-            isPaused = false;
-            hideOverlay();
-            if (isRunning) {
-                document.getElementById('pause-btn').textContent = "Pause";
-            }
-        }
-
-
-
-        function render() {
-            drawRect(0, 0, canvas.width, canvas.height, "#000");
-            drawNet();
-            drawRect(user.x, user.y, user.width, user.height, user.color, true);
-            drawRect(cpu.x, cpu.y, cpu.width, cpu.height, cpu.color, true);
-            drawCircle(ball.x, ball.y, ball.radius, ball.color);
-        }
-
-        function game() {
-            update();
-            render();
-        }
-
-        canvas.addEventListener('mousemove', (evt) => {
-            let rect = canvas.getBoundingClientRect();
-            let mouseY = evt.clientY - rect.top - user.height / 2;
-            if (mouseY >= 0 && mouseY <= canvas.height - user.height) {
-                user.y = mouseY;
-            }
-        });
-
-        window.addEventListener('keydown', (evt) => {
-            if (evt.key === 'w' || evt.key === 'W') {
-                user.y -= 20 * scale;
-            } else if (evt.key === 's' || evt.key === 'S') {
-                user.y += 20 * scale;
-            } else if (evt.key === 'p' || evt.key === 'P' || evt.key === 'Escape') {
-                togglePause();
-            } else if (evt.key === ' ' && !isRunning) {
-                startGame();
-            } else if (evt.key === ' ' && isRunning) {
-                togglePause();
-            }
-            if (user.y < 0) user.y = 0;
-            if (user.y > canvas.height - user.height) user.y = canvas.height - user.height;
-        });
-
-        function togglePause() {
-            if (!isRunning) return;
-            isPaused = !isPaused;
-            const pauseBtn = document.getElementById('pause-btn');
-
-            if (isPaused) {
-                displayOverlay("PAUSED", "Resume");
-                pauseBtn.textContent = "Resume";
-            } else {
-                hideOverlay();
-                pauseBtn.textContent = "Pause";
-            }
-        }
-
-        function startGame() {
-            if (isPaused) {
-                togglePause();
-                return;
-            }
-            hideOverlay();
-            document.getElementById('pause-btn').classList.remove('hidden');
-            isRunning = true;
-            isPaused = false;
-            resetBall();
-        }
+      /**
+       * Game Engine & Rendering Logic
+       * Manages game state (ball, paddles), user inputs, physics (collision, movement velocity),
+       * and the canvas rendering loop. This script encapsulates the core Pong mechanics and interfaces
+       * with the MCP layer to synchronize critical game state like scores with the backend agent.
+       */
+      const canvas = document.getElementById('pong');
+      const context = canvas.getContext('2d');
+      const container = document.getElementById('container');
+
+      function displayOverlay(text = '', buttonText = null) {
+        const overlayEl = document.getElementById('game-overlay');
+        const overlayText = document.getElementById('overlay-text');
+        const startBtn = document.getElementById('start-btn');
+
+        overlayEl.classList.remove('hidden');
+        if (text) overlayText.textContent = text;
+
+        if (buttonText) {
+          startBtn.textContent = buttonText;
+          startBtn.classList.remove('hidden');
+        } else {
+          startBtn.classList.add('hidden');
+        }
+      }
+
+      function hideOverlay() {
+        const overlayEl = document.getElementById('game-overlay');
+        overlayEl.classList.add('hidden');
+      }
+
+      // Reference dimensions for scaling
+      const REF_WIDTH = 600;
+      const REF_HEIGHT = 400;
+      let scale = 1;
+
+      const ball = {
+        x: 0,
+        y: 0,
+        radius: 8,
+        speed: 5,
+        velocityX: 5,
+        velocityY: 5,
+        color: '#00f2ff',
+      };
+
+      const user = {
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 100,
+        color: '#00f2ff',
+      };
+
+      const cpu = {
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 100,
+        color: '#ff00ff',
+      };
+
+      const net = {
+        x: 0,
+        y: 0,
+        width: 2,
+        height: 10,
+        color: 'rgba(255, 255, 255, 0.1)',
+      };
+
+      let isRunning = false;
+      let isPaused = false;
+
+      function resize() {
+        // Update canvas resolution to match display size
+        const rect = canvas.getBoundingClientRect();
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+
+        // Calculate scale factor relative to reference 600x400
+        scale = canvas.width / REF_WIDTH;
+
+        // Update object dimensions
+        ball.radius = 8 * scale;
+        user.width = 10 * scale;
+        user.height = 100 * scale;
+        cpu.width = 10 * scale;
+        cpu.height = 100 * scale;
+        cpu.x = canvas.width - cpu.width;
+
+        net.width = 2 * scale;
+        net.height = 10 * scale;
+        net.x = canvas.width / 2 - net.width / 2;
+
+        // Reset positions if game hasn't started
+        if (!isRunning) {
+          user.y = canvas.height / 2 - user.height / 2;
+          cpu.y = canvas.height / 2 - cpu.height / 2;
+          ball.x = canvas.width / 2;
+          ball.y = canvas.height / 2;
+        }
+      }
+
+      const resizeObserver = new ResizeObserver(() => resize());
+      resizeObserver.observe(canvas);
+
+      function drawRect(x, y, w, h, color, glow = false) {
+        context.fillStyle = color;
+        if (glow) {
+          context.shadowBlur = 15 * scale;
+          context.shadowColor = color;
+        } else {
+          context.shadowBlur = 0;
+        }
+        context.fillRect(x, y, w, h);
+        context.shadowBlur = 0;
+      }
+
+      function drawCircle(x, y, r, color) {
+        context.fillStyle = color;
+        context.beginPath();
+        context.arc(x, y, r, 0, Math.PI * 2, false);
+        context.closePath();
+        context.shadowBlur = 15 * scale;
+        context.shadowColor = color;
+        context.fill();
+        context.shadowBlur = 0;
+      }
+
+      function drawNet() {
+        for (let i = 0; i <= canvas.height; i += 15 * scale) {
+          drawRect(net.x, net.y + i, net.width, net.height, net.color);
+        }
+      }
+
+      function resetBall() {
+        ball.x = canvas.width / 2;
+        ball.y = canvas.height / 2;
+        ball.speed = 5 * scale;
+        // Maintain direction but scale magnitude
+        const dirX = ball.velocityX > 0 ? 1 : -1;
+        const dirY = ball.velocityY > 0 ? 1 : -1;
+        ball.velocityX = -dirX * ball.speed;
+        ball.velocityY = dirY * ball.speed * (Math.random() * 2 - 1);
+      }
+
+      function collision(b, p) {
+        return (
+          b.x + b.radius > p.x &&
+          b.x - b.radius < p.x + p.width &&
+          b.y + b.radius > p.y &&
+          b.y - b.radius < p.y + p.height
+        );
+      }
+
+      function update() {
+        if (!isRunning || isPaused) return;
+
+        // CPU AI
+        let targetY = ball.y - cpu.height / 2;
+        cpu.y += (targetY - cpu.y) * 0.1;
+
+        // Ball movement
+        ball.x += ball.velocityX;
+        ball.y += ball.velocityY;
+
+        // Wall collision
+        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
+          ball.velocityY = -ball.velocityY;
+        }
+
+        // Paddle collision
+        let player = ball.x < canvas.width / 2 ? user : cpu;
+
+        if (collision(ball, player)) {
+          let collidePoint = ball.y - (player.y + player.height / 2);
+          collidePoint = collidePoint / (player.height / 2);
+
+          let angleRad = collidePoint * (Math.PI / 4);
+          let direction = ball.x < canvas.width / 2 ? 1 : -1;
+
+          ball.velocityX = direction * ball.speed * Math.cos(angleRad);
+          ball.velocityY = ball.speed * Math.sin(angleRad);
+
+          ball.speed += 0.2 * scale;
+        }
+
+        // Check if there is a winner, and update the score via MCP tool call.
+        let winner = null;
+        if (ball.x - ball.radius < 0) {
+          winner = 'cpu';
+        } else if (ball.x + ball.radius > canvas.width) {
+          winner = 'player';
+        }
+
+        if (winner) {
+          syncScore(winner);
+          resetBall();
+        }
+      }
+
+      function syncScore(player) {
+        isPaused = true; // Local pause
+        displayOverlay('SYNCING SCORE...');
+
+        sendRequest('tools/call', {
+          name: 'score_update',
+          arguments: {player: player, silent: true},
+        })
+          .catch(e => console.error('Failed to send score update:', e))
+          .finally(() => unpauseGame());
+      }
+
+      function unpauseGame() {
+        isPaused = false;
+        hideOverlay();
+        if (isRunning) {
+          document.getElementById('pause-btn').textContent = 'Pause';
+        }
+      }
+
+      function render() {
+        drawRect(0, 0, canvas.width, canvas.height, '#000');
+        drawNet();
+        drawRect(user.x, user.y, user.width, user.height, user.color, true);
+        drawRect(cpu.x, cpu.y, cpu.width, cpu.height, cpu.color, true);
+        drawCircle(ball.x, ball.y, ball.radius, ball.color);
+      }
 
-        // Initialize
-        resize();
-        const framePerSecond = 50;
-        setInterval(game, 1000 / framePerSecond);
+      function game() {
+        update();
         render();
+      }
+
+      canvas.addEventListener('mousemove', evt => {
+        let rect = canvas.getBoundingClientRect();
+        let mouseY = evt.clientY - rect.top - user.height / 2;
+        if (mouseY >= 0 && mouseY <= canvas.height - user.height) {
+          user.y = mouseY;
+        }
+      });
+
+      window.addEventListener('keydown', evt => {
+        if (evt.key === 'w' || evt.key === 'W') {
+          user.y -= 20 * scale;
+        } else if (evt.key === 's' || evt.key === 'S') {
+          user.y += 20 * scale;
+        } else if (evt.key === 'p' || evt.key === 'P' || evt.key === 'Escape') {
+          togglePause();
+        } else if (evt.key === ' ' && !isRunning) {
+          startGame();
+        } else if (evt.key === ' ' && isRunning) {
+          togglePause();
+        }
+        if (user.y < 0) user.y = 0;
+        if (user.y > canvas.height - user.height) user.y = canvas.height - user.height;
+      });
+
+      function togglePause() {
+        if (!isRunning) return;
+        isPaused = !isPaused;
+        const pauseBtn = document.getElementById('pause-btn');
+
+        if (isPaused) {
+          displayOverlay('PAUSED', 'Resume');
+          pauseBtn.textContent = 'Resume';
+        } else {
+          hideOverlay();
+          pauseBtn.textContent = 'Pause';
+        }
+      }
+
+      function startGame() {
+        if (isPaused) {
+          togglePause();
+          return;
+        }
+        hideOverlay();
+        document.getElementById('pause-btn').classList.remove('hidden');
+        isRunning = true;
+        isPaused = false;
+        resetBall();
+      }
+
+      // Initialize
+      resize();
+      const framePerSecond = 50;
+      setInterval(game, 1000 / framePerSecond);
+      render();
     </script>
-</body>
+  </body>
 </html>
diff --git a/samples/agent/adk/orchestrator/README.md b/samples/agent/adk/orchestrator/README.md
index 99bee26b5..4baf4a955 100644
--- a/samples/agent/adk/orchestrator/README.md
+++ b/samples/agent/adk/orchestrator/README.md
@@ -32,7 +32,6 @@ Subagents are configured using RemoteA2aAgent which translates ADK events to A2A
    uv run . --port=10003
    ```
 
-
    ```bash
    cd samples/agent/adk/rizzcharts/python
    uv run . --port=10005
@@ -45,7 +44,7 @@ Subagents are configured using RemoteA2aAgent which translates ADK events to A2A
    uv run . --port=10002 --subagent_urls=http://localhost:10003 --subagent_urls=http://localhost:10005
    ```
 
-4. Try commands that work with any agent: 
+4. Try commands that work with any agent:
    a. "Show me chinese food restaurants in NYC" (routed to restaurant finder agent)
    b. "Show my sales data for Q4" (routed to rizzcharts)
 
diff --git a/samples/agent/adk/restaurant_finder/README.md b/samples/agent/adk/restaurant_finder/README.md
index f1b620074..6fec0ec59 100644
--- a/samples/agent/adk/restaurant_finder/README.md
+++ b/samples/agent/adk/restaurant_finder/README.md
@@ -12,9 +12,9 @@ This sample uses the Agent Development Kit (ADK) along with the A2A protocol to
 
 1. Navigate to the samples directory:
 
-    ```bash
-    cd samples/agent/adk/restaurant_finder
-    ```
+   ```bash
+   cd samples/agent/adk/restaurant_finder
+   ```
 
 2. Create an environment file with your API key:
 
@@ -25,36 +25,35 @@ This sample uses the Agent Development Kit (ADK) along with the A2A protocol to
 
 3. Run the agent server:
 
-    ```bash
-    uv run .
-    ```
+   ```bash
+   uv run .
+   ```
 
 4. In another terminal window:
-
-    * verify that the agent is available via A2A:
-
-        ```bash
-        curl http://localhost:10002/.well-known/agent-card.json
-        ```
-    
-    * send a message to the agent:
-
-        ```bash
-        curl http://localhost:10002 \
-          -H 'Content-Type: application/json' \
-          -d '{
-            "jsonrpc": "2.0",
-            "id": 1,
-            "method": "message/send",
-            "params": {
-              "message": {
-                "role": "user",
-                "parts": [{"text": "Find me an Italian restaurant"}],
-                "messageId": "1"
-              }
-            }
-          }'
-        ```
+   - verify that the agent is available via A2A:
+
+     ```bash
+     curl http://localhost:10002/.well-known/agent-card.json
+     ```
+
+   - send a message to the agent:
+
+     ```bash
+     curl http://localhost:10002 \
+       -H 'Content-Type: application/json' \
+       -d '{
+         "jsonrpc": "2.0",
+         "id": 1,
+         "method": "message/send",
+         "params": {
+           "message": {
+             "role": "user",
+             "parts": [{"text": "Find me an Italian restaurant"}],
+             "messageId": "1"
+           }
+         }
+       }'
+     ```
 
 ## Disclaimer
 
@@ -64,4 +63,4 @@ All operational data received from an external agent—including its AgentCard,
 
 Similarly, any UI definition or data stream received must be treated as untrusted. Malicious agents could attempt to spoof legitimate interfaces to deceive users (phishing), inject malicious scripts via property values (XSS), or generate excessive layout complexity to degrade client performance (DoS). If your application supports optional embedded content (such as iframes or web views), additional care must be taken to prevent exposure to malicious external sites.
 
-Developer Responsibility: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.
\ No newline at end of file
+Developer Responsibility: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.
diff --git a/samples/agent/adk/restaurant_finder/examples/0.8/booking_form.json b/samples/agent/adk/restaurant_finder/examples/0.8/booking_form.json
index 69c805857..76554f3d6 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.8/booking_form.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.8/booking_form.json
@@ -196,4 +196,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/examples/0.8/confirmation.json b/samples/agent/adk/restaurant_finder/examples/0.8/confirmation.json
index eabc3fac1..fb49cebeb 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.8/confirmation.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.8/confirmation.json
@@ -137,4 +137,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/examples/0.8/single_column_list.json b/samples/agent/adk/restaurant_finder/examples/0.8/single_column_list.json
index a9d0f272d..3c953749f 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.8/single_column_list.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.8/single_column_list.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -64,10 +61,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -257,4 +251,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/examples/0.8/two_column_list.json b/samples/agent/adk/restaurant_finder/examples/0.8/two_column_list.json
index 25cae4845..2a7c5c3aa 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.8/two_column_list.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.8/two_column_list.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "restaurant-row-1"
-                ]
+                "explicitList": ["title-heading", "restaurant-row-1"]
               }
             }
           }
@@ -42,10 +39,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "item-card-1",
-                  "item-card-2"
-                ]
+                "explicitList": ["item-card-1", "item-card-2"]
               }
             }
           }
@@ -64,10 +58,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "template-image-1",
-                  "card-details-1"
-                ]
+                "explicitList": ["template-image-1", "card-details-1"]
               }
             }
           }
@@ -195,10 +186,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "template-image-2",
-                  "card-details-2"
-                ]
+                "explicitList": ["template-image-2", "card-details-2"]
               }
             }
           }
@@ -390,4 +378,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/examples/0.9/booking_form.json b/samples/agent/adk/restaurant_finder/examples/0.9/booking_form.json
index 62ef5ce54..33a50bc7a 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.9/booking_form.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.9/booking_form.json
@@ -128,4 +128,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/examples/0.9/confirmation.json b/samples/agent/adk/restaurant_finder/examples/0.9/confirmation.json
index 219002b46..ebae746e4 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.9/confirmation.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.9/confirmation.json
@@ -97,4 +97,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/examples/0.9/single_column_list.json b/samples/agent/adk/restaurant_finder/examples/0.9/single_column_list.json
index e48fa84a5..392261da2 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.9/single_column_list.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.9/single_column_list.json
@@ -18,10 +18,7 @@
         {
           "id": "root",
           "component": "Column",
-          "children": [
-            "title-heading",
-            "item-list"
-          ]
+          "children": ["title-heading", "item-list"]
         },
         {
           "id": "title-heading",
@@ -48,10 +45,7 @@
         {
           "id": "card-layout",
           "component": "Row",
-          "children": [
-            "card-image",
-            "card-details"
-          ]
+          "children": ["card-image", "card-details"]
         },
         {
           "id": "card-image",
@@ -166,4 +160,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/examples/0.9/two_column_list.json b/samples/agent/adk/restaurant_finder/examples/0.9/two_column_list.json
index 92c8c82e4..e9b4d9962 100644
--- a/samples/agent/adk/restaurant_finder/examples/0.9/two_column_list.json
+++ b/samples/agent/adk/restaurant_finder/examples/0.9/two_column_list.json
@@ -18,10 +18,7 @@
         {
           "id": "root",
           "component": "Column",
-          "children": [
-            "title-heading",
-            "restaurant-list"
-          ]
+          "children": ["title-heading", "restaurant-list"]
         },
         {
           "id": "title-heading",
@@ -43,10 +40,7 @@
         {
           "id": "row-template",
           "component": "Row",
-          "children": [
-            "card-template-left",
-            "card-template-right"
-          ]
+          "children": ["card-template-left", "card-template-right"]
         },
         {
           "id": "card-template-left",
@@ -57,10 +51,7 @@
         {
           "id": "card-layout-left",
           "component": "Column",
-          "children": [
-            "template-image-left",
-            "card-details-left"
-          ]
+          "children": ["template-image-left", "card-details-left"]
         },
         {
           "id": "template-image-left",
@@ -137,10 +128,7 @@
         {
           "id": "card-layout-right",
           "component": "Column",
-          "children": [
-            "template-image-right",
-            "card-details-right"
-          ]
+          "children": ["template-image-right", "card-details-right"]
         },
         {
           "id": "template-image-right",
@@ -239,4 +227,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/restaurant_finder/restaurant_data.json b/samples/agent/adk/restaurant_finder/restaurant_data.json
index 371131210..e354d145e 100644
--- a/samples/agent/adk/restaurant_finder/restaurant_data.json
+++ b/samples/agent/adk/restaurant_finder/restaurant_data.json
@@ -1,66 +1,66 @@
 [
-    {
-        "name": "Xi'an Famous Foods",
-        "detail": "Spicy and savory hand-pulled noodles.",
-        "imageUrl": "http://localhost:10002/static/shrimpchowmein.jpeg",
-        "rating": "★★★★☆",
-        "infoLink": "[More Info](https://www.xianfoods.com/)",
-        "address": "81 St Marks Pl, New York, NY 10003"
-    },
-    {
-        "name": "Han Dynasty",
-        "detail": "Authentic Szechuan cuisine.",
-        "imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
-        "rating": "★★★★☆",
-        "infoLink": "[More Info](https://www.handynasty.net/)",
-        "address": "90 3rd Ave, New York, NY 10003"
-    },
-    {
-        "name": "RedFarm",
-        "detail": "Modern Chinese with a farm-to-table approach.",
-        "imageUrl": "http://localhost:10002/static/beefbroccoli.jpeg",
-        "rating": "★★★★☆",
-        "infoLink": "[More Info](https://www.redfarmnyc.com/)",
-        "address": "529 Hudson St, New York, NY 10014"
-    },
-    {
-        "name": "Mott 32",
-        "detail": "Upscale Cantonese dining.",
-        "imageUrl": "http://localhost:10002/static/springrolls.jpeg",
-        "rating": "★★★★★",
-        "infoLink": "[More Info](https://mott32.com/newyork/)",
-        "address": "111 W 57th St, New York, NY 10019"
-    },
-    {
-        "name": "Hwa Yuan Szechuan",
-        "detail": "Famous for its cold noodles with sesame sauce.",
-        "imageUrl": "http://localhost:10002/static/kungpao.jpeg",
-        "rating": "★★★★☆",
-        "infoLink": "[More Info](https://hwayuannyc.com/)",
-        "address": "40 E Broadway, New York, NY 10002"
-    },
-    {
-        "name": "Cafe China",
-        "detail": "Szechuan food in a 1930s Shanghai setting.",
-        "imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
-        "rating": "★★★★☆",
-        "infoLink": "[More Info](https://www.cafechinanyc.com/)",
-        "address": "59 W 37th St, New York, NY 10018"
-    },
-    {
-        "name": "Philippe Chow",
-        "detail": "High-end Beijing-style cuisine.",
-        "imageUrl": "http://localhost:10002/static/beefbroccoli.jpeg",
-        "rating": "★★★★☆",
-        "infoLink": "[More Info](https://www.philippechow.com/)",
-        "address": "33 E 60th St, New York, NY 10022"
-    },
-    {
-        "name": "Chinese Tuxedo",
-        "detail": "Contemporary Chinese in a former opera house.",
-        "imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
-        "rating": "★★★★☆",
-        "infoLink": "[More Info](https://chinesetuxedo.com/)",
-        "address": "5 Doyers St, New York, NY 10013"
-    }
-]
\ No newline at end of file
+  {
+    "name": "Xi'an Famous Foods",
+    "detail": "Spicy and savory hand-pulled noodles.",
+    "imageUrl": "http://localhost:10002/static/shrimpchowmein.jpeg",
+    "rating": "★★★★☆",
+    "infoLink": "[More Info](https://www.xianfoods.com/)",
+    "address": "81 St Marks Pl, New York, NY 10003"
+  },
+  {
+    "name": "Han Dynasty",
+    "detail": "Authentic Szechuan cuisine.",
+    "imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
+    "rating": "★★★★☆",
+    "infoLink": "[More Info](https://www.handynasty.net/)",
+    "address": "90 3rd Ave, New York, NY 10003"
+  },
+  {
+    "name": "RedFarm",
+    "detail": "Modern Chinese with a farm-to-table approach.",
+    "imageUrl": "http://localhost:10002/static/beefbroccoli.jpeg",
+    "rating": "★★★★☆",
+    "infoLink": "[More Info](https://www.redfarmnyc.com/)",
+    "address": "529 Hudson St, New York, NY 10014"
+  },
+  {
+    "name": "Mott 32",
+    "detail": "Upscale Cantonese dining.",
+    "imageUrl": "http://localhost:10002/static/springrolls.jpeg",
+    "rating": "★★★★★",
+    "infoLink": "[More Info](https://mott32.com/newyork/)",
+    "address": "111 W 57th St, New York, NY 10019"
+  },
+  {
+    "name": "Hwa Yuan Szechuan",
+    "detail": "Famous for its cold noodles with sesame sauce.",
+    "imageUrl": "http://localhost:10002/static/kungpao.jpeg",
+    "rating": "★★★★☆",
+    "infoLink": "[More Info](https://hwayuannyc.com/)",
+    "address": "40 E Broadway, New York, NY 10002"
+  },
+  {
+    "name": "Cafe China",
+    "detail": "Szechuan food in a 1930s Shanghai setting.",
+    "imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
+    "rating": "★★★★☆",
+    "infoLink": "[More Info](https://www.cafechinanyc.com/)",
+    "address": "59 W 37th St, New York, NY 10018"
+  },
+  {
+    "name": "Philippe Chow",
+    "detail": "High-end Beijing-style cuisine.",
+    "imageUrl": "http://localhost:10002/static/beefbroccoli.jpeg",
+    "rating": "★★★★☆",
+    "infoLink": "[More Info](https://www.philippechow.com/)",
+    "address": "33 E 60th St, New York, NY 10022"
+  },
+  {
+    "name": "Chinese Tuxedo",
+    "detail": "Contemporary Chinese in a former opera house.",
+    "imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
+    "rating": "★★★★☆",
+    "infoLink": "[More Info](https://chinesetuxedo.com/)",
+    "address": "5 Doyers St, New York, NY 10013"
+  }
+]
diff --git a/samples/agent/adk/rizzcharts/catalog_schemas/0.8/rizzcharts_catalog_definition.json b/samples/agent/adk/rizzcharts/catalog_schemas/0.8/rizzcharts_catalog_definition.json
index e7ccff637..0f1c0b635 100644
--- a/samples/agent/adk/rizzcharts/catalog_schemas/0.8/rizzcharts_catalog_definition.json
+++ b/samples/agent/adk/rizzcharts/catalog_schemas/0.8/rizzcharts_catalog_definition.json
@@ -21,20 +21,10 @@
         "usageHint": {
           "type": "string",
           "description": "A hint for the base text style. One of:\n- `h1`: Largest heading.\n- `h2`: Second largest heading.\n- `h3`: Third largest heading.\n- `h4`: Fourth largest heading.\n- `h5`: Fifth largest heading.\n- `caption`: Small text for captions.\n- `body`: Standard body text.",
-          "enum": [
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "caption",
-            "body"
-          ]
+          "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"]
         }
       },
-      "required": [
-        "text"
-      ]
+      "required": ["text"]
     },
     "Image": {
       "type": "object",
@@ -56,30 +46,15 @@
         "fit": {
           "type": "string",
           "description": "Specifies how the image should be resized to fit its container. This corresponds to the CSS 'object-fit' property.",
-          "enum": [
-            "contain",
-            "cover",
-            "fill",
-            "none",
-            "scale-down"
-          ]
+          "enum": ["contain", "cover", "fill", "none", "scale-down"]
         },
         "usageHint": {
           "type": "string",
           "description": "A hint for the image size and style. One of:\n- `icon`: Small square icon.\n- `avatar`: Circular avatar image.\n- `smallFeature`: Small feature image.\n- `mediumFeature`: Medium feature image.\n- `largeFeature`: Large feature image.\n- `header`: Full-width, full bleed, header image.",
-          "enum": [
-            "icon",
-            "avatar",
-            "smallFeature",
-            "mediumFeature",
-            "largeFeature",
-            "header"
-          ]
+          "enum": ["icon", "avatar", "smallFeature", "mediumFeature", "largeFeature", "header"]
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "Icon": {
       "type": "object",
@@ -149,9 +124,7 @@
           }
         }
       },
-      "required": [
-        "name"
-      ]
+      "required": ["name"]
     },
     "Video": {
       "type": "object",
@@ -171,9 +144,7 @@
           }
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "AudioPlayer": {
       "type": "object",
@@ -206,9 +177,7 @@
           }
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "Row": {
       "type": "object",
@@ -237,39 +206,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (horizontally). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "center",
-            "end",
-            "spaceAround",
-            "spaceBetween",
-            "spaceEvenly",
-            "start"
-          ]
+          "enum": ["center", "end", "spaceAround", "spaceBetween", "spaceEvenly", "start"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (vertically). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "stretch"
-          ]
+          "enum": ["start", "center", "end", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Column": {
       "type": "object",
@@ -298,39 +250,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (vertically). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "spaceBetween",
-            "spaceAround",
-            "spaceEvenly"
-          ]
+          "enum": ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (horizontally). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "center",
-            "end",
-            "start",
-            "stretch"
-          ]
+          "enum": ["center", "end", "start", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "List": {
       "type": "object",
@@ -359,35 +294,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "direction": {
           "type": "string",
           "description": "The direction in which the list items are laid out.",
-          "enum": [
-            "vertical",
-            "horizontal"
-          ]
+          "enum": ["vertical", "horizontal"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "stretch"
-          ]
+          "enum": ["start", "center", "end", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Card": {
       "type": "object",
@@ -398,9 +320,7 @@
           "description": "The ID of the component to be rendered inside the card."
         }
       },
-      "required": [
-        "child"
-      ]
+      "required": ["child"]
     },
     "Tabs": {
       "type": "object",
@@ -430,16 +350,11 @@
                 "type": "string"
               }
             },
-            "required": [
-              "title",
-              "child"
-            ]
+            "required": ["title", "child"]
           }
         }
       },
-      "required": [
-        "tabItems"
-      ]
+      "required": ["tabItems"]
     },
     "Divider": {
       "type": "object",
@@ -448,10 +363,7 @@
         "axis": {
           "type": "string",
           "description": "The orientation of the divider.",
-          "enum": [
-            "horizontal",
-            "vertical"
-          ]
+          "enum": ["horizontal", "vertical"]
         }
       }
     },
@@ -468,10 +380,7 @@
           "description": "The ID of the component to be displayed inside the modal."
         }
       },
-      "required": [
-        "entryPointChild",
-        "contentChild"
-      ]
+      "required": ["entryPointChild", "contentChild"]
     },
     "Button": {
       "type": "object",
@@ -522,22 +431,14 @@
                     }
                   }
                 },
-                "required": [
-                  "key",
-                  "value"
-                ]
+                "required": ["key", "value"]
               }
             }
           },
-          "required": [
-            "name"
-          ]
+          "required": ["name"]
         }
       },
-      "required": [
-        "child",
-        "action"
-      ]
+      "required": ["child", "action"]
     },
     "CheckBox": {
       "type": "object",
@@ -570,10 +471,7 @@
           }
         }
       },
-      "required": [
-        "label",
-        "value"
-      ]
+      "required": ["label", "value"]
     },
     "TextField": {
       "type": "object",
@@ -608,22 +506,14 @@
         "textFieldType": {
           "type": "string",
           "description": "The type of input field to display.",
-          "enum": [
-            "date",
-            "longText",
-            "number",
-            "shortText",
-            "obscured"
-          ]
+          "enum": ["date", "longText", "number", "shortText", "obscured"]
         },
         "validationRegexp": {
           "type": "string",
           "description": "A regular expression used for client-side validation of the input."
         }
       },
-      "required": [
-        "label"
-      ]
+      "required": ["label"]
     },
     "DateTimeInput": {
       "type": "object",
@@ -651,17 +541,12 @@
           "description": "If true, allows the user to select a time."
         }
       },
-      "required": [
-        "value"
-      ]
+      "required": ["value"]
     },
     "MultipleChoice": {
       "type": "object",
       "additionalProperties": false,
-      "required": [
-        "selections",
-        "options"
-      ],
+      "required": ["selections", "options"],
       "properties": {
         "selections": {
           "type": "object",
@@ -704,10 +589,7 @@
                 "description": "The value to be associated with this option when selected."
               }
             },
-            "required": [
-              "label",
-              "value"
-            ]
+            "required": ["label", "value"]
           }
         },
         "maxAllowedSelections": {
@@ -717,10 +599,7 @@
         "variant": {
           "type": "string",
           "description": "The display style of the component.",
-          "enum": [
-            "checkbox",
-            "chips"
-          ]
+          "enum": ["checkbox", "chips"]
         },
         "filterable": {
           "type": "boolean",
@@ -754,9 +633,7 @@
           "description": "The maximum value of the slider."
         }
       },
-      "required": [
-        "value"
-      ]
+      "required": ["value"]
     },
     "Canvas": {
       "type": "object",
@@ -775,9 +652,7 @@
           }
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Chart": {
       "type": "object",
@@ -786,10 +661,7 @@
         "type": {
           "type": "string",
           "description": "The type of chart to render.",
-          "enum": [
-            "doughnut",
-            "pie"
-          ]
+          "enum": ["doughnut", "pie"]
         },
         "title": {
           "type": "object",
@@ -831,17 +703,11 @@
                           "type": "number"
                         }
                       },
-                      "required": [
-                        "label",
-                        "value"
-                      ]
+                      "required": ["label", "value"]
                     }
                   }
                 },
-                "required": [
-                  "label",
-                  "value"
-                ]
+                "required": ["label", "value"]
               }
             },
             "path": {
@@ -850,10 +716,7 @@
           }
         }
       },
-      "required": [
-        "type",
-        "chartData"
-      ]
+      "required": ["type", "chartData"]
     },
     "GoogleMap": {
       "type": "object",
@@ -873,10 +736,7 @@
                   "type": "number"
                 }
               },
-              "required": [
-                "lat",
-                "lng"
-              ]
+              "required": ["lat", "lng"]
             },
             "path": {
               "type": "string"
@@ -929,11 +789,7 @@
                     "description": "Hex color code for the pin's glyph/icon (e.g., '#000000')."
                   }
                 },
-                "required": [
-                  "lat",
-                  "lng",
-                  "name"
-                ]
+                "required": ["lat", "lng", "name"]
               }
             },
             "path": {
@@ -942,10 +798,7 @@
           }
         }
       },
-      "required": [
-        "center",
-        "zoom"
-      ]
+      "required": ["center", "zoom"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/samples/agent/adk/rizzcharts/catalog_schemas/0.9/rizzcharts_catalog_definition.json b/samples/agent/adk/rizzcharts/catalog_schemas/0.9/rizzcharts_catalog_definition.json
index 7f5bc5f0c..9024b5935 100644
--- a/samples/agent/adk/rizzcharts/catalog_schemas/0.9/rizzcharts_catalog_definition.json
+++ b/samples/agent/adk/rizzcharts/catalog_schemas/0.9/rizzcharts_catalog_definition.json
@@ -23,22 +23,11 @@
             "variant": {
               "type": "string",
               "description": "A hint for the base text style.",
-              "enum": [
-                "h1",
-                "h2",
-                "h3",
-                "h4",
-                "h5",
-                "caption",
-                "body"
-              ],
+              "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"],
               "default": "body"
             }
           },
-          "required": [
-            "component",
-            "text"
-          ]
+          "required": ["component", "text"]
         }
       ],
       "unevaluatedProperties": false
@@ -65,33 +54,17 @@
             "fit": {
               "type": "string",
               "description": "Specifies how the image should be resized to fit its container. This corresponds to the CSS 'object-fit' property.",
-              "enum": [
-                "contain",
-                "cover",
-                "fill",
-                "none",
-                "scaleDown"
-              ],
+              "enum": ["contain", "cover", "fill", "none", "scaleDown"],
               "default": "fill"
             },
             "variant": {
               "type": "string",
               "description": "A hint for the image size and style.",
-              "enum": [
-                "icon",
-                "avatar",
-                "smallFeature",
-                "mediumFeature",
-                "largeFeature",
-                "header"
-              ],
+              "enum": ["icon", "avatar", "smallFeature", "mediumFeature", "largeFeature", "header"],
               "default": "mediumFeature"
             }
           },
-          "required": [
-            "component",
-            "url"
-          ]
+          "required": ["component", "url"]
         }
       ],
       "unevaluatedProperties": false
@@ -185,18 +158,13 @@
                       "type": "string"
                     }
                   },
-                  "required": [
-                    "path"
-                  ],
+                  "required": ["path"],
                   "additionalProperties": false
                 }
               ]
             }
           },
-          "required": [
-            "component",
-            "name"
-          ]
+          "required": ["component", "name"]
         }
       ],
       "unevaluatedProperties": false
@@ -221,10 +189,7 @@
               "description": "The URL of the video to display."
             }
           },
-          "required": [
-            "component",
-            "url"
-          ]
+          "required": ["component", "url"]
         }
       ],
       "unevaluatedProperties": false
@@ -253,10 +218,7 @@
               "$ref": "common_types.json#/$defs/DynamicString"
             }
           },
-          "required": [
-            "component",
-            "url"
-          ]
+          "required": ["component", "url"]
         }
       ],
       "unevaluatedProperties": false
@@ -298,19 +260,11 @@
             "align": {
               "type": "string",
               "description": "Defines the alignment of children along the cross axis (vertically). This is similar to the CSS 'align-items' property, but uses camelCase values (e.g., 'start').",
-              "enum": [
-                "start",
-                "center",
-                "end",
-                "stretch"
-              ],
+              "enum": ["start", "center", "end", "stretch"],
               "default": "stretch"
             }
           },
-          "required": [
-            "component",
-            "children"
-          ]
+          "required": ["component", "children"]
         }
       ],
       "unevaluatedProperties": false
@@ -352,19 +306,11 @@
             "align": {
               "type": "string",
               "description": "Defines the alignment of children along the cross axis (horizontally). This is similar to the CSS 'align-items' property.",
-              "enum": [
-                "center",
-                "end",
-                "start",
-                "stretch"
-              ],
+              "enum": ["center", "end", "start", "stretch"],
               "default": "stretch"
             }
           },
-          "required": [
-            "component",
-            "children"
-          ]
+          "required": ["component", "children"]
         }
       ],
       "unevaluatedProperties": false
@@ -391,28 +337,17 @@
             "direction": {
               "type": "string",
               "description": "The direction in which the list items are laid out.",
-              "enum": [
-                "vertical",
-                "horizontal"
-              ],
+              "enum": ["vertical", "horizontal"],
               "default": "vertical"
             },
             "align": {
               "type": "string",
               "description": "Defines the alignment of children along the cross axis.",
-              "enum": [
-                "start",
-                "center",
-                "end",
-                "stretch"
-              ],
+              "enum": ["start", "center", "end", "stretch"],
               "default": "stretch"
             }
           },
-          "required": [
-            "component",
-            "children"
-          ]
+          "required": ["component", "children"]
         }
       ],
       "unevaluatedProperties": false
@@ -437,10 +372,7 @@
               "description": "The ID of the single child component to be rendered inside the card. To display multiple elements, you MUST wrap them in a layout component (like Column or Row) and pass that container's ID here. Do NOT pass multiple IDs or a non-existent ID. Do NOT define the child component inline."
             }
           },
-          "required": [
-            "component",
-            "child"
-          ]
+          "required": ["component", "child"]
         }
       ],
       "unevaluatedProperties": false
@@ -475,18 +407,12 @@
                     "description": "The ID of the child component. Do NOT define the component inline."
                   }
                 },
-                "required": [
-                  "title",
-                  "child"
-                ],
+                "required": ["title", "child"],
                 "additionalProperties": false
               }
             }
           },
-          "required": [
-            "component",
-            "tabs"
-          ]
+          "required": ["component", "tabs"]
         }
       ],
       "unevaluatedProperties": false
@@ -515,11 +441,7 @@
               "description": "The ID of the component to be displayed inside the modal. Do NOT define the component inline."
             }
           },
-          "required": [
-            "component",
-            "trigger",
-            "content"
-          ]
+          "required": ["component", "trigger", "content"]
         }
       ],
       "unevaluatedProperties": false
@@ -542,16 +464,11 @@
             "axis": {
               "type": "string",
               "description": "The orientation of the divider.",
-              "enum": [
-                "horizontal",
-                "vertical"
-              ],
+              "enum": ["horizontal", "vertical"],
               "default": "horizontal"
             }
           },
-          "required": [
-            "component"
-          ]
+          "required": ["component"]
         }
       ],
       "unevaluatedProperties": false
@@ -581,22 +498,14 @@
             "variant": {
               "type": "string",
               "description": "A hint for the button style. If omitted, a default button style is used. 'primary' indicates this is the main call-to-action button. 'borderless' means the button has no visual border or background, making its child content appear like a clickable link.",
-              "enum": [
-                "default",
-                "primary",
-                "borderless"
-              ],
+              "enum": ["default", "primary", "borderless"],
               "default": "default"
             },
             "action": {
               "$ref": "common_types.json#/$defs/Action"
             }
           },
-          "required": [
-            "component",
-            "child",
-            "action"
-          ]
+          "required": ["component", "child", "action"]
         }
       ],
       "unevaluatedProperties": false
@@ -630,12 +539,7 @@
             "variant": {
               "type": "string",
               "description": "The type of input field to display.",
-              "enum": [
-                "longText",
-                "number",
-                "shortText",
-                "obscured"
-              ],
+              "enum": ["longText", "number", "shortText", "obscured"],
               "default": "shortText"
             },
             "validationRegexp": {
@@ -643,10 +547,7 @@
               "description": "A regular expression used for client-side validation of the input."
             }
           },
-          "required": [
-            "component",
-            "label"
-          ]
+          "required": ["component", "label"]
         }
       ],
       "unevaluatedProperties": false
@@ -678,11 +579,7 @@
               "description": "The current state of the checkbox (true for checked, false for unchecked)."
             }
           },
-          "required": [
-            "component",
-            "label",
-            "value"
-          ]
+          "required": ["component", "label", "value"]
         }
       ],
       "unevaluatedProperties": false
@@ -713,10 +610,7 @@
             "variant": {
               "type": "string",
               "description": "A hint for how the choice picker should be displayed and behave.",
-              "enum": [
-                "multipleSelection",
-                "mutuallyExclusive"
-              ],
+              "enum": ["multipleSelection", "mutuallyExclusive"],
               "default": "mutuallyExclusive"
             },
             "options": {
@@ -734,10 +628,7 @@
                     "description": "The stable value associated with this option."
                   }
                 },
-                "required": [
-                  "label",
-                  "value"
-                ],
+                "required": ["label", "value"],
                 "additionalProperties": false
               }
             },
@@ -748,10 +639,7 @@
             "displayStyle": {
               "type": "string",
               "description": "The display style of the component.",
-              "enum": [
-                "checkbox",
-                "chips"
-              ],
+              "enum": ["checkbox", "chips"],
               "default": "checkbox"
             },
             "filterable": {
@@ -760,11 +648,7 @@
               "default": false
             }
           },
-          "required": [
-            "component",
-            "options",
-            "value"
-          ]
+          "required": ["component", "options", "value"]
         }
       ],
       "unevaluatedProperties": false
@@ -805,11 +689,7 @@
               "description": "The current value of the slider."
             }
           },
-          "required": [
-            "component",
-            "value",
-            "max"
-          ]
+          "required": ["component", "value", "max"]
         }
       ],
       "unevaluatedProperties": false
@@ -903,10 +783,7 @@
               "description": "The text label for the input field."
             }
           },
-          "required": [
-            "component",
-            "value"
-          ]
+          "required": ["component", "value"]
         }
       ],
       "unevaluatedProperties": false
@@ -932,10 +809,7 @@
               "description": "Defines the children of the canvas."
             }
           },
-          "required": [
-            "component",
-            "children"
-          ]
+          "required": ["component", "children"]
         }
       ],
       "unevaluatedProperties": false
@@ -959,10 +833,7 @@
             "type": {
               "type": "string",
               "description": "The type of chart to render.",
-              "enum": [
-                "doughnut",
-                "pie"
-              ]
+              "enum": ["doughnut", "pie"]
             },
             "title": {
               "$ref": "common_types.json#/$defs/DynamicString",
@@ -983,11 +854,7 @@
               ]
             }
           },
-          "required": [
-            "component",
-            "type",
-            "chartData"
-          ]
+          "required": ["component", "type", "chartData"]
         }
       ],
       "unevaluatedProperties": false
@@ -1031,11 +898,7 @@
               ]
             }
           },
-          "required": [
-            "component",
-            "center",
-            "zoom"
-          ]
+          "required": ["component", "center", "zoom"]
         }
       ],
       "unevaluatedProperties": false
@@ -1072,17 +935,11 @@
                 "type": "number"
               }
             },
-            "required": [
-              "label",
-              "value"
-            ]
+            "required": ["label", "value"]
           }
         }
       },
-      "required": [
-        "label",
-        "value"
-      ]
+      "required": ["label", "value"]
     },
     "DynamicLatLng": {
       "oneOf": [
@@ -1096,10 +953,7 @@
               "type": "number"
             }
           },
-          "required": [
-            "lat",
-            "lng"
-          ],
+          "required": ["lat", "lng"],
           "additionalProperties": false
         },
         {
@@ -1135,11 +989,7 @@
           "description": "Hex color code for the pin's glyph/icon (e.g., '#000000')."
         }
       },
-      "required": [
-        "lat",
-        "lng",
-        "name"
-      ],
+      "required": ["lat", "lng", "name"],
       "additionalProperties": false
     },
     "anyComponent": {
@@ -1210,9 +1060,7 @@
       ]
     },
     "anyFunction": {
-      "enum": [
-        "none"
-      ]
+      "enum": ["none"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/chart.json b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/chart.json
index 9fec64ba3..daa222d55 100644
--- a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/chart.json
+++ b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/chart.json
@@ -14,9 +14,7 @@
           "component": {
             "Canvas": {
               "children": {
-                "explicitList": [
-                  "chart-container"
-                ]
+                "explicitList": ["chart-container"]
               }
             }
           }
@@ -26,9 +24,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "sales-chart"
-                ]
+                "explicitList": ["sales-chart"]
               },
               "alignment": "center"
             }
@@ -199,4 +195,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/map.json b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/map.json
index 08530a89b..3aa27392b 100644
--- a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/map.json
+++ b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.8/map.json
@@ -14,9 +14,7 @@
           "component": {
             "Canvas": {
               "children": {
-                "explicitList": [
-                  "map-layout-container"
-                ]
+                "explicitList": ["map-layout-container"]
               }
             }
           }
@@ -26,10 +24,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "map-header",
-                  "location-map"
-                ]
+                "explicitList": ["map-header", "location-map"]
               },
               "alignment": "stretch"
             }
@@ -124,7 +119,7 @@
         },
         {
           "key": "mapConfig.locations[2].lat",
-          "valueNumber": 34.1340
+          "valueNumber": 34.134
         },
         {
           "key": "mapConfig.locations[2].lng",
@@ -160,7 +155,7 @@
         },
         {
           "key": "mapConfig.locations[5].lat",
-          "valueNumber": 33.9850
+          "valueNumber": 33.985
         },
         {
           "key": "mapConfig.locations[5].lng",
@@ -173,4 +168,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/chart.json b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/chart.json
index 655c08f6c..454ae9710 100644
--- a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/chart.json
+++ b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/chart.json
@@ -14,16 +14,12 @@
         {
           "id": "root",
           "component": "Canvas",
-          "children": [
-            "chart-container"
-          ]
+          "children": ["chart-container"]
         },
         {
           "id": "chart-container",
           "component": "Column",
-          "children": [
-            "sales-chart"
-          ],
+          "children": ["sales-chart"],
           "align": "center"
         },
         {
@@ -84,4 +80,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/map.json b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/map.json
index a403a461f..ed94a0108 100644
--- a/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/map.json
+++ b/samples/agent/adk/rizzcharts/examples/rizzcharts_catalog/0.9/map.json
@@ -14,17 +14,12 @@
         {
           "id": "root",
           "component": "Canvas",
-          "children": [
-            "map-layout-container"
-          ]
+          "children": ["map-layout-container"]
         },
         {
           "id": "map-layout-container",
           "component": "Column",
-          "children": [
-            "map-header",
-            "location-map"
-          ],
+          "children": ["map-header", "location-map"],
           "align": "stretch"
         },
         {
@@ -83,4 +78,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/chart.json b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/chart.json
index 76169f133..8189f80a6 100644
--- a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/chart.json
+++ b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/chart.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "chart-title",
-                  "category-list"
-                ]
+                "explicitList": ["chart-title", "category-list"]
               }
             }
           }
@@ -65,10 +62,7 @@
             "Row": {
               "distribution": "spaceBetween",
               "children": {
-                "explicitList": [
-                  "item-label",
-                  "item-value"
-                ]
+                "explicitList": ["item-label", "item-value"]
               }
             }
           }
@@ -148,4 +142,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/map.json b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/map.json
index a0b4300f7..ac04b8575 100644
--- a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/map.json
+++ b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.8/map.json
@@ -18,11 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "map-header",
-                  "map-image",
-                  "location-list"
-                ]
+                "explicitList": ["map-header", "map-image", "location-list"]
               },
               "alignment": "stretch"
             }
@@ -76,10 +72,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location-name",
-                  "location-description"
-                ]
+                "explicitList": ["location-name", "location-description"]
               }
             }
           }
@@ -164,4 +157,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/chart.json b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/chart.json
index e6517ae65..cbb76a43a 100644
--- a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/chart.json
+++ b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/chart.json
@@ -18,10 +18,7 @@
         {
           "id": "root",
           "component": "Column",
-          "children": [
-            "chart-title",
-            "category-list"
-          ]
+          "children": ["chart-title", "category-list"]
         },
         {
           "id": "chart-title",
@@ -49,10 +46,7 @@
           "id": "item-row",
           "component": "Row",
           "justify": "spaceBetween",
-          "children": [
-            "item-label",
-            "item-value"
-          ]
+          "children": ["item-label", "item-value"]
         },
         {
           "id": "item-label",
@@ -91,4 +85,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/map.json b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/map.json
index d1c1521c3..5a13e1058 100644
--- a/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/map.json
+++ b/samples/agent/adk/rizzcharts/examples/standard_catalog/0.9/map.json
@@ -18,11 +18,7 @@
         {
           "id": "root",
           "component": "Column",
-          "children": [
-            "map-header",
-            "map-image",
-            "location-list"
-          ],
+          "children": ["map-header", "map-image", "location-list"],
           "align": "stretch"
         },
         {
@@ -54,10 +50,7 @@
         {
           "id": "location-details",
           "component": "Column",
-          "children": [
-            "location-name",
-            "location-description"
-          ]
+          "children": ["location-name", "location-description"]
         },
         {
           "id": "location-name",
@@ -98,4 +91,4 @@
       }
     }
   }
-]
\ No newline at end of file
+]
diff --git a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/chart.json b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/chart.json
index c20111fb9..daa222d55 100644
--- a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/chart.json
+++ b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/chart.json
@@ -14,9 +14,7 @@
           "component": {
             "Canvas": {
               "children": {
-                "explicitList": [
-                  "chart-container"
-                ]
+                "explicitList": ["chart-container"]
               }
             }
           }
@@ -26,9 +24,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "sales-chart"
-                ]
+                "explicitList": ["sales-chart"]
               },
               "alignment": "center"
             }
diff --git a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/map.json b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/map.json
index 4c7555b6e..3aa27392b 100644
--- a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/map.json
+++ b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/rizzcharts_catalog/map.json
@@ -14,9 +14,7 @@
           "component": {
             "Canvas": {
               "children": {
-                "explicitList": [
-                  "map-layout-container"
-                ]
+                "explicitList": ["map-layout-container"]
               }
             }
           }
@@ -26,10 +24,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "map-header",
-                  "location-map"
-                ]
+                "explicitList": ["map-header", "location-map"]
               },
               "alignment": "stretch"
             }
@@ -124,7 +119,7 @@
         },
         {
           "key": "mapConfig.locations[2].lat",
-          "valueNumber": 34.1340
+          "valueNumber": 34.134
         },
         {
           "key": "mapConfig.locations[2].lng",
@@ -160,7 +155,7 @@
         },
         {
           "key": "mapConfig.locations[5].lat",
-          "valueNumber": 33.9850
+          "valueNumber": 33.985
         },
         {
           "key": "mapConfig.locations[5].lng",
diff --git a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/chart.json b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/chart.json
index 90de550ed..8189f80a6 100644
--- a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/chart.json
+++ b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/chart.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "chart-title",
-                  "category-list"
-                ]
+                "explicitList": ["chart-title", "category-list"]
               }
             }
           }
@@ -65,10 +62,7 @@
             "Row": {
               "distribution": "spaceBetween",
               "children": {
-                "explicitList": [
-                  "item-label",
-                  "item-value"
-                ]
+                "explicitList": ["item-label", "item-value"]
               }
             }
           }
diff --git a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/map.json b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/map.json
index 7a77d5708..ab07ea8fc 100644
--- a/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/map.json
+++ b/samples/agent/adk/rizzcharts/java/src/main/resources/examples/standard_catalog/map.json
@@ -18,11 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "map-header",
-                  "map-image",
-                  "location-list"
-                ]
+                "explicitList": ["map-header", "map-image", "location-list"]
               },
               "alignment": "stretch"
             }
@@ -66,10 +62,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location-name",
-                  "location-description"
-                ]
+                "explicitList": ["location-name", "location-description"]
               }
             }
           }
diff --git a/samples/agent/adk/rizzcharts/java/src/main/resources/rizzcharts_catalog_definition.json b/samples/agent/adk/rizzcharts/java/src/main/resources/rizzcharts_catalog_definition.json
index 9c79f3468..0f1c0b635 100644
--- a/samples/agent/adk/rizzcharts/java/src/main/resources/rizzcharts_catalog_definition.json
+++ b/samples/agent/adk/rizzcharts/java/src/main/resources/rizzcharts_catalog_definition.json
@@ -21,20 +21,10 @@
         "usageHint": {
           "type": "string",
           "description": "A hint for the base text style. One of:\n- `h1`: Largest heading.\n- `h2`: Second largest heading.\n- `h3`: Third largest heading.\n- `h4`: Fourth largest heading.\n- `h5`: Fifth largest heading.\n- `caption`: Small text for captions.\n- `body`: Standard body text.",
-          "enum": [
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "caption",
-            "body"
-          ]
+          "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"]
         }
       },
-      "required": [
-        "text"
-      ]
+      "required": ["text"]
     },
     "Image": {
       "type": "object",
@@ -56,30 +46,15 @@
         "fit": {
           "type": "string",
           "description": "Specifies how the image should be resized to fit its container. This corresponds to the CSS 'object-fit' property.",
-          "enum": [
-            "contain",
-            "cover",
-            "fill",
-            "none",
-            "scale-down"
-          ]
+          "enum": ["contain", "cover", "fill", "none", "scale-down"]
         },
         "usageHint": {
           "type": "string",
           "description": "A hint for the image size and style. One of:\n- `icon`: Small square icon.\n- `avatar`: Circular avatar image.\n- `smallFeature`: Small feature image.\n- `mediumFeature`: Medium feature image.\n- `largeFeature`: Large feature image.\n- `header`: Full-width, full bleed, header image.",
-          "enum": [
-            "icon",
-            "avatar",
-            "smallFeature",
-            "mediumFeature",
-            "largeFeature",
-            "header"
-          ]
+          "enum": ["icon", "avatar", "smallFeature", "mediumFeature", "largeFeature", "header"]
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "Icon": {
       "type": "object",
@@ -149,9 +124,7 @@
           }
         }
       },
-      "required": [
-        "name"
-      ]
+      "required": ["name"]
     },
     "Video": {
       "type": "object",
@@ -171,9 +144,7 @@
           }
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "AudioPlayer": {
       "type": "object",
@@ -206,9 +177,7 @@
           }
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "Row": {
       "type": "object",
@@ -237,39 +206,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (horizontally). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "center",
-            "end",
-            "spaceAround",
-            "spaceBetween",
-            "spaceEvenly",
-            "start"
-          ]
+          "enum": ["center", "end", "spaceAround", "spaceBetween", "spaceEvenly", "start"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (vertically). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "stretch"
-          ]
+          "enum": ["start", "center", "end", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Column": {
       "type": "object",
@@ -298,39 +250,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (vertically). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "spaceBetween",
-            "spaceAround",
-            "spaceEvenly"
-          ]
+          "enum": ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (horizontally). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "center",
-            "end",
-            "start",
-            "stretch"
-          ]
+          "enum": ["center", "end", "start", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "List": {
       "type": "object",
@@ -359,35 +294,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "direction": {
           "type": "string",
           "description": "The direction in which the list items are laid out.",
-          "enum": [
-            "vertical",
-            "horizontal"
-          ]
+          "enum": ["vertical", "horizontal"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "stretch"
-          ]
+          "enum": ["start", "center", "end", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Card": {
       "type": "object",
@@ -398,9 +320,7 @@
           "description": "The ID of the component to be rendered inside the card."
         }
       },
-      "required": [
-        "child"
-      ]
+      "required": ["child"]
     },
     "Tabs": {
       "type": "object",
@@ -430,16 +350,11 @@
                 "type": "string"
               }
             },
-            "required": [
-              "title",
-              "child"
-            ]
+            "required": ["title", "child"]
           }
         }
       },
-      "required": [
-        "tabItems"
-      ]
+      "required": ["tabItems"]
     },
     "Divider": {
       "type": "object",
@@ -448,10 +363,7 @@
         "axis": {
           "type": "string",
           "description": "The orientation of the divider.",
-          "enum": [
-            "horizontal",
-            "vertical"
-          ]
+          "enum": ["horizontal", "vertical"]
         }
       }
     },
@@ -468,10 +380,7 @@
           "description": "The ID of the component to be displayed inside the modal."
         }
       },
-      "required": [
-        "entryPointChild",
-        "contentChild"
-      ]
+      "required": ["entryPointChild", "contentChild"]
     },
     "Button": {
       "type": "object",
@@ -522,22 +431,14 @@
                     }
                   }
                 },
-                "required": [
-                  "key",
-                  "value"
-                ]
+                "required": ["key", "value"]
               }
             }
           },
-          "required": [
-            "name"
-          ]
+          "required": ["name"]
         }
       },
-      "required": [
-        "child",
-        "action"
-      ]
+      "required": ["child", "action"]
     },
     "CheckBox": {
       "type": "object",
@@ -570,10 +471,7 @@
           }
         }
       },
-      "required": [
-        "label",
-        "value"
-      ]
+      "required": ["label", "value"]
     },
     "TextField": {
       "type": "object",
@@ -608,22 +506,14 @@
         "textFieldType": {
           "type": "string",
           "description": "The type of input field to display.",
-          "enum": [
-            "date",
-            "longText",
-            "number",
-            "shortText",
-            "obscured"
-          ]
+          "enum": ["date", "longText", "number", "shortText", "obscured"]
         },
         "validationRegexp": {
           "type": "string",
           "description": "A regular expression used for client-side validation of the input."
         }
       },
-      "required": [
-        "label"
-      ]
+      "required": ["label"]
     },
     "DateTimeInput": {
       "type": "object",
@@ -651,17 +541,12 @@
           "description": "If true, allows the user to select a time."
         }
       },
-      "required": [
-        "value"
-      ]
+      "required": ["value"]
     },
     "MultipleChoice": {
       "type": "object",
       "additionalProperties": false,
-      "required": [
-        "selections",
-        "options"
-      ],
+      "required": ["selections", "options"],
       "properties": {
         "selections": {
           "type": "object",
@@ -704,10 +589,7 @@
                 "description": "The value to be associated with this option when selected."
               }
             },
-            "required": [
-              "label",
-              "value"
-            ]
+            "required": ["label", "value"]
           }
         },
         "maxAllowedSelections": {
@@ -717,10 +599,7 @@
         "variant": {
           "type": "string",
           "description": "The display style of the component.",
-          "enum": [
-            "checkbox",
-            "chips"
-          ]
+          "enum": ["checkbox", "chips"]
         },
         "filterable": {
           "type": "boolean",
@@ -754,9 +633,7 @@
           "description": "The maximum value of the slider."
         }
       },
-      "required": [
-        "value"
-      ]
+      "required": ["value"]
     },
     "Canvas": {
       "type": "object",
@@ -775,9 +652,7 @@
           }
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Chart": {
       "type": "object",
@@ -786,10 +661,7 @@
         "type": {
           "type": "string",
           "description": "The type of chart to render.",
-          "enum": [
-            "doughnut",
-            "pie"
-          ]
+          "enum": ["doughnut", "pie"]
         },
         "title": {
           "type": "object",
@@ -831,17 +703,11 @@
                           "type": "number"
                         }
                       },
-                      "required": [
-                        "label",
-                        "value"
-                      ]
+                      "required": ["label", "value"]
                     }
                   }
                 },
-                "required": [
-                  "label",
-                  "value"
-                ]
+                "required": ["label", "value"]
               }
             },
             "path": {
@@ -850,10 +716,7 @@
           }
         }
       },
-      "required": [
-        "type",
-        "chartData"
-      ]
+      "required": ["type", "chartData"]
     },
     "GoogleMap": {
       "type": "object",
@@ -873,10 +736,7 @@
                   "type": "number"
                 }
               },
-              "required": [
-                "lat",
-                "lng"
-              ]
+              "required": ["lat", "lng"]
             },
             "path": {
               "type": "string"
@@ -929,11 +789,7 @@
                     "description": "Hex color code for the pin's glyph/icon (e.g., '#000000')."
                   }
                 },
-                "required": [
-                  "lat",
-                  "lng",
-                  "name"
-                ]
+                "required": ["lat", "lng", "name"]
               }
             },
             "path": {
@@ -942,10 +798,7 @@
           }
         }
       },
-      "required": [
-        "center",
-        "zoom"
-      ]
+      "required": ["center", "zoom"]
     }
   }
 }
diff --git a/samples/client/angular/README.md b/samples/client/angular/README.md
index 02d544d64..3f4849f06 100644
--- a/samples/client/angular/README.md
+++ b/samples/client/angular/README.md
@@ -19,27 +19,27 @@ cp ../../agent/adk/restaurant_finder/.env.example ../../agent/adk/restaurant_fin
 # Edit the .env file with your actual API key (do not commit .env)
 
 # Start the restaurant app frontend
-npm install 
-npm run demo:restaurant 
+npm install
+npm run demo:restaurant
 ```
 
-Here are the instructions if you want to do each step manually. 
+Here are the instructions if you want to do each step manually.
 
 1. **Install dependencies:** `npm install`
 2. **Run the relevant client app (also requires running the relevant backend A2A service):**
-   * **Restaurant app:**
-     * Run backend server in [restaurant_finder](../../agent/adk/restaurant_finder/README.md)
-     * Run client: `npm start -- restaurant`
-   * **Rizzcharts app:**
-     * Run backend server in [rizzcharts](../../agent/adk/rizzcharts/python/README.md)
-     * Run client: `npm start -- rizzcharts`
-   * **Orchestrator app:**
-     * Run backend server in [orchestrator](../../agent/adk/orchestrator/README.md)
-     * Run client: `npm start -- orchestrator`
-   * **MCP Calculator app:**
-     * Run client: `npm run build:sandbox && npm start -- mcp_calculator`
-   * **Gallery app:** (Client-only, no server required)
-     * Run client: `npm start -- gallery`
+   - **Restaurant app:**
+     - Run backend server in [restaurant_finder](../../agent/adk/restaurant_finder/README.md)
+     - Run client: `npm start -- restaurant`
+   - **Rizzcharts app:**
+     - Run backend server in [rizzcharts](../../agent/adk/rizzcharts/python/README.md)
+     - Run client: `npm start -- rizzcharts`
+   - **Orchestrator app:**
+     - Run backend server in [orchestrator](../../agent/adk/orchestrator/README.md)
+     - Run client: `npm start -- orchestrator`
+   - **MCP Calculator app:**
+     - Run client: `npm run build:sandbox && npm start -- mcp_calculator`
+   - **Gallery app:** (Client-only, no server required)
+     - Run client: `npm start -- gallery`
 3. **Open** http://localhost:4200/
 
 ## Streaming
diff --git a/samples/client/angular/angular.json b/samples/client/angular/angular.json
index ac9c6e7a3..ed3652f7c 100644
--- a/samples/client/angular/angular.json
+++ b/samples/client/angular/angular.json
@@ -122,9 +122,7 @@
                 "input": "projects/rizzcharts/public"
               }
             ],
-            "styles": [
-              "projects/rizzcharts/src/styles.scss"
-            ],
+            "styles": ["projects/rizzcharts/src/styles.scss"],
             "server": "projects/rizzcharts/src/main.server.ts",
             "outputMode": "server",
             "ssr": {
@@ -180,16 +178,14 @@
                 "input": "projects/rizzcharts/public"
               }
             ],
-            "styles": [
-              "projects/rizzcharts/src/styles.css"
-            ]
+            "styles": ["projects/rizzcharts/src/styles.css"]
           }
         }
       }
     },
     "gallery": {
       "projectType": "application",
-      "schematics": { },
+      "schematics": {},
       "root": "projects/gallery",
       "sourceRoot": "projects/gallery/src",
       "prefix": "app",
@@ -206,9 +202,7 @@
                 "input": "projects/gallery/public"
               }
             ],
-            "styles": [
-              "projects/gallery/src/styles.css"
-            ]
+            "styles": ["projects/gallery/src/styles.css"]
           },
           "configurations": {
             "production": {
@@ -259,9 +253,7 @@
                 "input": "projects/gallery/public"
               }
             ],
-            "styles": [
-              "projects/gallery/src/styles.css"
-            ]
+            "styles": ["projects/gallery/src/styles.css"]
           }
         }
       }
@@ -345,9 +337,7 @@
                 "input": "projects/orchestrator/public"
               }
             ],
-            "styles": [
-              "projects/orchestrator/src/styles.scss"
-            ],
+            "styles": ["projects/orchestrator/src/styles.scss"],
             "server": "projects/orchestrator/src/main.server.ts",
             "outputMode": "server",
             "ssr": {
@@ -405,9 +395,7 @@
                 "input": "projects/orchestrator/public"
               }
             ],
-            "styles": [
-              "projects/orchestrator/src/styles.scss"
-            ]
+            "styles": ["projects/orchestrator/src/styles.scss"]
           }
         }
       }
@@ -458,9 +446,7 @@
                 "input": "projects/mcp_calculator/public"
               }
             ],
-            "styles": [
-              "projects/mcp_calculator/src/styles.scss"
-            ],
+            "styles": ["projects/mcp_calculator/src/styles.scss"],
             "server": "projects/mcp_calculator/src/main.server.ts",
             "outputMode": "server",
             "ssr": {
@@ -515,9 +501,7 @@
                 "input": "projects/mcp_calculator/public"
               }
             ],
-            "styles": [
-              "projects/mcp_calculator/src/styles.scss"
-            ]
+            "styles": ["projects/mcp_calculator/src/styles.scss"]
           }
         }
       }
diff --git a/samples/client/angular/package.json b/samples/client/angular/package.json
index ee90cdf4d..5c96bf896 100644
--- a/samples/client/angular/package.json
+++ b/samples/client/angular/package.json
@@ -16,18 +16,6 @@
     "postinstall": "npm run build:renderer",
     "build:sandbox": "esbuild ../shared/mcp_apps_inner_iframe/sandbox.ts --bundle --outfile=projects/mcp_calculator/public/mcp_apps_inner_iframe/sandbox.js --format=esm --platform=browser --alias:@modelcontextprotocol/ext-apps/app-bridge=./node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js && cp ../shared/mcp_apps_inner_iframe/sandbox.html projects/mcp_calculator/public/mcp_apps_inner_iframe/sandbox.html"
   },
-  "prettier": {
-    "printWidth": 100,
-    "singleQuote": true,
-    "overrides": [
-      {
-        "files": "*.html",
-        "options": {
-          "parser": "angular"
-        }
-      }
-    ]
-  },
   "private": true,
   "dependencies": {
     "@a2a-js/sdk": "^0.3.4",
diff --git a/samples/client/angular/projects/a2a-chat-canvas/README.md b/samples/client/angular/projects/a2a-chat-canvas/README.md
index 1a78723ba..8b8c59503 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/README.md
+++ b/samples/client/angular/projects/a2a-chat-canvas/README.md
@@ -24,7 +24,7 @@ All functionality to communicate with an agent service goes through the UI
 Create a new class which implements the `A2aService` interface.
 
 ```ts
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class MyA2aService implements A2aService {
   sendMessage(parts: Part[], signal?: AbortSignal): Promise<SendMessageSuccessResponse> {
     // ...
@@ -51,8 +51,8 @@ function to get providers to pass into ApplicationConfig.
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingA2aService } from 'src/lib/config';
-import { A2aServiceImpl } from 'path/to/code';
+import {configureChatCanvasFeatures, usingA2aService} from 'src/lib/config';
+import {A2aServiceImpl} from 'path/to/code';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -75,8 +75,8 @@ Use the `usingA2aService` function to bind the custom service implementation.
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingA2aService } from 'src/lib/config';
-import { A2aServiceImpl } from 'path/to/code';
+import {configureChatCanvasFeatures, usingA2aService} from 'src/lib/config';
+import {A2aServiceImpl} from 'path/to/code';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -97,8 +97,8 @@ The `usingA2uiRenderers` function configures the A2UI library. It accepts an opt
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingA2uiRenderers } from 'src/lib/config';
-import { MY_CUSTOM_CATALOG, MY_CUSTOM_THEME } from 'path/to/code';
+import {configureChatCanvasFeatures, usingA2uiRenderers} from 'src/lib/config';
+import {MY_CUSTOM_CATALOG, MY_CUSTOM_THEME} from 'path/to/code';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -124,7 +124,7 @@ A custom implementation of `MarkdownRenderer` can be provided to allow full
 control over how Markdown is converted to HTML.
 
 ```ts
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class MyMarkdownRendererService implements MarkdownRendererService {
   // ...
 }
@@ -132,8 +132,8 @@ export class MyMarkdownRendererService implements MarkdownRendererService {
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingMarkdownRenderer } from 'src/lib/config';
-import { MyMarkdownRendererService } from 'path/to/code';
+import {configureChatCanvasFeatures, usingMarkdownRenderer} from 'src/lib/config';
+import {MyMarkdownRendererService} from 'path/to/code';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -155,7 +155,7 @@ markdown renderer is supplied.
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingDefaultSanitizerMarkdownRenderer } from 'src/lib/config';
+import {configureChatCanvasFeatures, usingDefaultSanitizerMarkdownRenderer} from 'src/lib/config';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -186,8 +186,8 @@ artifacts in agent responses to an ID for rendering.
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingArtifactResolvers } from 'src/lib/config';
-import { ARTIFACT_RESOLVER_1, ARTIFACT_RESOLVER_2 } from 'path/to/code';
+import {configureChatCanvasFeatures, usingArtifactResolvers} from 'src/lib/config';
+import {ARTIFACT_RESOLVER_1, ARTIFACT_RESOLVER_2} from 'path/to/code';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -218,8 +218,8 @@ artifacts in agent responses to an ID for rendering.
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingPartResolvers } from 'src/lib/config';
-import { PART_RESOLVER_1, PART_RESOLVER_2 } from 'path/to/code';
+import {configureChatCanvasFeatures, usingPartResolvers} from 'src/lib/config';
+import {PART_RESOLVER_1, PART_RESOLVER_2} from 'path/to/code';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -252,8 +252,8 @@ used.
 
 ```ts
 // app.config.ts
-import { configureChatCanvasFeatures, usingRenderers } from 'src/lib/config';
-import { RENDERER_ENTRY_1, RENDERER_ENTRY_2 } from 'path/to/code';
+import {configureChatCanvasFeatures, usingRenderers} from 'src/lib/config';
+import {RENDERER_ENTRY_1, RENDERER_ENTRY_2} from 'path/to/code';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -281,9 +281,9 @@ Promise of the Component class.
 1.  Create a Component implementing `RendererComponent`:
 
     ```ts
-    import { Component, input, output, Type } from '@angular/core';
-    import { UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-    import { Part } from '@a2a-js/sdk';
+    import {Component, input, output, Type} from '@angular/core';
+    import {UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+    import {Part} from '@a2a-js/sdk';
 
     @Component({
       /* ... */
@@ -298,7 +298,7 @@ Promise of the Component class.
     [`RendererEntry`](src/lib/a2a-renderer/types.ts)
 
     ```ts
-    import { RendererEntry } from '@a2a_chat_canvas/a2a-renderer/types';
+    import {RendererEntry} from '@a2a_chat_canvas/a2a-renderer/types';
 
     export const MY_RENDERER_ENTRY: RendererEntry = [
       'my_variant_name',
@@ -308,7 +308,7 @@ Promise of the Component class.
       // a legacy surface that does not use MSS) then import the component class
       // above and return it from this async function directly.
       async () => {
-        const { MyRendererComponent } = await import('./path/to/code');
+        const {MyRendererComponent} = await import('./path/to/code');
         return MyRendererComponent;
       },
     ];
@@ -366,9 +366,9 @@ Include the `a2a-chat-canvas` in the template passing inputs as desired
   [`NgTemplateOutlet`](https://angular.dev/api/common/NgTemplateOutlet)
 
   ```ts
-  import { Component, input, TemplateRef } from '@angular/core';
-  import { UiMessage } from '@a2a_chat_canvas/types/ui_message';
-  import { MessageDecoratorComponent } from '@a2a_chat_canvas/components/chat/chat_history/message_decorator/types';
+  import {Component, input, TemplateRef} from '@angular/core';
+  import {UiMessage} from '@a2a_chat_canvas/types/ui_message';
+  import {MessageDecoratorComponent} from '@a2a_chat_canvas/components/chat/chat_history/message_decorator/types';
 
   @Component({
     /* ... */
diff --git a/samples/client/angular/projects/a2a-chat-canvas/ng-package.json b/samples/client/angular/projects/a2a-chat-canvas/ng-package.json
index b794aec17..697ac5ce2 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/ng-package.json
+++ b/samples/client/angular/projects/a2a-chat-canvas/ng-package.json
@@ -4,4 +4,4 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.html b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.html
index b11f769e6..f2acbdd04 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.html
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.html
@@ -14,7 +14,10 @@
  limitations under the License.
 -->
 
-<chat [emptyHistoryTemplate]="emptyHistoryTemplate()" [messageDecorator]="messageDecorator()"></chat>
+<chat
+  [emptyHistoryTemplate]="emptyHistoryTemplate()"
+  [messageDecorator]="messageDecorator()"
+></chat>
 
 @if (isCanvasOpened()) {
   <app-canvas></app-canvas>
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.spec.ts
index 6057cb7b9..7a54394bf 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { A2aChatCanvas } from './a2a-chat-canvas';
+import {A2aChatCanvas} from './a2a-chat-canvas';
 
 describe('A2aChatCanvas', () => {
   let component: A2aChatCanvas;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.ts
index 6fbff7d46..191e8650b 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-chat-canvas.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Canvas } from '@a2a_chat_canvas/components/canvas/canvas';
-import { Chat } from '@a2a_chat_canvas/components/chat/chat';
-import { MessageDecorator } from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
+import {Canvas} from '@a2a_chat_canvas/components/canvas/canvas';
+import {Chat} from '@a2a_chat_canvas/components/chat/chat';
+import {MessageDecorator} from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -25,7 +25,7 @@ import {
   input,
   TemplateRef,
 } from '@angular/core';
-import { CanvasService } from './services/canvas-service';
+import {CanvasService} from './services/canvas-service';
 
 /**
  * The main component for the A2A Chat Canvas library.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.html b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.html
index 9fbd6327a..e15d7a008 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.html
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.html
@@ -19,7 +19,7 @@
 
   @if (componentClass) {
     <ng-container
-      *ngComponentOutlet="componentClass; inputs: { uiMessageContent: uiMessageContent() }"
+      *ngComponentOutlet="componentClass; inputs: {uiMessageContent: uiMessageContent()}"
     ></ng-container>
   }
 }
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.spec.ts
index 0b3bd20f3..6b01b0eb5 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { A2aRenderer } from './a2a-renderer';
+import {A2aRenderer} from './a2a-renderer';
 
 describe('A2aRenderer', () => {
   let component: A2aRenderer;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.ts
index 0931b449c..0cc7486b1 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/a2a-renderer.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { RENDERERS_MAP } from '@a2a_chat_canvas/a2a-renderer/tokens';
-import { UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-import { NgComponentOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, input, resource } from '@angular/core';
+import {RENDERERS_MAP} from '@a2a_chat_canvas/a2a-renderer/tokens';
+import {UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+import {NgComponentOutlet} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, input, resource} from '@angular/core';
 
 /**
  * Dynamically renders a component based on the provided UiMessageContent and variant.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.scss
index 14850bfea..48127a794 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.scss
@@ -10,4 +10,4 @@
 // distributed under the License is distributed on an "AS IS" BASIS,
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
-// limitations under the License.
\ No newline at end of file
+// limitations under the License.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.spec.ts
index 1eb1873bb..e533915a2 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { A2uiDataPart } from './a2ui-data-part';
+import {A2uiDataPart} from './a2ui-data-part';
 
 describe('A2uiDataPart', () => {
   let component: A2uiDataPart;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.ts
index 47e1dab67..04efa9040 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { Part } from '@a2a-js/sdk';
-import { RendererComponent } from '@a2a_chat_canvas/a2a-renderer/types';
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
-import { UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-import { isA2aDataPart } from '@a2a_chat_canvas/utils/type-guards';
-import { Surface } from '@a2ui/angular';
+import {Part} from '@a2a-js/sdk';
+import {RendererComponent} from '@a2a_chat_canvas/a2a-renderer/types';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
+import {UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+import {isA2aDataPart} from '@a2a_chat_canvas/utils/type-guards';
+import {Surface} from '@a2ui/angular';
 import * as Types from '@a2ui/web_core/types/types';
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';
 
 /**
  * Component responsible for rendering an A2UI surface embedded within an A2A message part.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/renderer-config.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/renderer-config.ts
index c1dfd8e2e..69c98c310 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/renderer-config.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/renderer-config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { RendererEntry } from '@a2a_chat_canvas/a2a-renderer/types';
+import {RendererEntry} from '@a2a_chat_canvas/a2a-renderer/types';
 
 /**
  * Renderer catalog entry for the 'a2ui_data_part' variant.
@@ -29,9 +29,8 @@ import { RendererEntry } from '@a2a_chat_canvas/a2a-renderer/types';
 export const A2UI_DATA_PART_RENDERER_ENTRY: RendererEntry = [
   'a2ui_data_part',
   async () => {
-    const { A2uiDataPart } = await import(
-      '@a2a_chat_canvas/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part'
-    );
+    const {A2uiDataPart} =
+      await import('@a2a_chat_canvas/a2a-renderer/catalog/a2ui-data-part/a2ui-data-part');
     return A2uiDataPart;
   },
 ];
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/resolver.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/resolver.ts
index 22a0285f2..24d752dfb 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/resolver.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/a2ui-data-part/resolver.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Part } from '@a2a-js/sdk';
-import { type PartResolver } from '@a2a_chat_canvas/a2a-renderer/types';
+import {Part} from '@a2a-js/sdk';
+import {type PartResolver} from '@a2a_chat_canvas/a2a-renderer/types';
 
 /**
  * A PartResolver for identifying A2UI data parts within an A2A message.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.scss
index a580bb9d5..704a2cbff 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.scss
@@ -22,4 +22,4 @@
       margin: 0;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.spec.ts
index 12364067f..70c080b38 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { DefaultTextPart } from './default-text-part';
+import {DefaultTextPart} from './default-text-part';
 
 describe('DefaultTextPart', () => {
   let component: DefaultTextPart;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.ts
index dc9845780..2b6d5472b 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/default-text-part.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { TextPart } from '@a2a-js/sdk';
-import { RendererComponent } from '@a2a_chat_canvas/a2a-renderer/types';
-import { MARKDOWN_RENDERER_SERVICE } from '@a2a_chat_canvas/interfaces/markdown-renderer-service';
-import { UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
+import {TextPart} from '@a2a-js/sdk';
+import {RendererComponent} from '@a2a_chat_canvas/a2a-renderer/types';
+import {MARKDOWN_RENDERER_SERVICE} from '@a2a_chat_canvas/interfaces/markdown-renderer-service';
+import {UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -28,7 +28,7 @@ import {
   input,
   signal,
 } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
+import {SafeHtml} from '@angular/platform-browser';
 
 /**
  * Default component for rendering a simple text part from an A2A message.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/renderer-config.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/renderer-config.ts
index e7c8a29d2..57a9dbef5 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/renderer-config.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/renderer-config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { RendererEntry } from '@a2a_chat_canvas/a2a-renderer/types';
+import {RendererEntry} from '@a2a_chat_canvas/a2a-renderer/types';
 
 /**
  * Renderer catalog entry for the 'default_text_part' variant.
@@ -29,9 +29,8 @@ import { RendererEntry } from '@a2a_chat_canvas/a2a-renderer/types';
 export const DEFAULT_TEXT_PART_RENDERER_ENTRY: RendererEntry = [
   'default_text_part',
   async () => {
-    const { DefaultTextPart } = await import(
-      '@a2a_chat_canvas/a2a-renderer/catalog/default-text-part/default-text-part'
-    );
+    const {DefaultTextPart} =
+      await import('@a2a_chat_canvas/a2a-renderer/catalog/default-text-part/default-text-part');
     return DefaultTextPart;
   },
 ];
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/resolver.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/resolver.ts
index 47bc29259..e4081c500 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/resolver.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/catalog/default-text-part/resolver.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Part } from '@a2a-js/sdk';
-import { type PartResolver } from '@a2a_chat_canvas/a2a-renderer/types';
+import {Part} from '@a2a-js/sdk';
+import {type PartResolver} from '@a2a_chat_canvas/a2a-renderer/types';
 
 /**
  * A PartResolver for identifying basic text parts within an A2A message.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/tokens.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/tokens.ts
index e292d1204..fc4a5398e 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/tokens.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/tokens.ts
@@ -14,13 +14,8 @@
  * limitations under the License.
  */
 
-import { InjectionToken, inject } from '@angular/core';
-import {
-  ArtifactResolver,
-  PartResolver,
-  RendererComponentClassLoader,
-  RendererEntry,
-} from './types';
+import {InjectionToken, inject} from '@angular/core';
+import {ArtifactResolver, PartResolver, RendererComponentClassLoader, RendererEntry} from './types';
 
 /** Injection token for the {@link PartResolver}s for parts. */
 export const PART_RESOLVERS = new InjectionToken<readonly PartResolver[]>('PART_RESOLVERS', {
@@ -47,7 +42,7 @@ export const RENDERERS_MAP = new InjectionToken<ReadonlyMap<string, RendererComp
 /** Injection token for the {@link ArtifactResolver}s for artifacts. */
 export const ARTIFACT_RESOLVERS = new InjectionToken<readonly ArtifactResolver[]>(
   'ARTIFACT_RESOLVERS',
-  { providedIn: 'root', factory: () => [] },
+  {providedIn: 'root', factory: () => []},
 );
 
 function renderersToMap(
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/types.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/types.ts
index 2e752e151..ea1c654e1 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/types.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2a-renderer/types.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Artifact, Part } from '@a2a-js/sdk';
-import { UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-import { InputSignal, Type } from '@angular/core';
+import {Artifact, Part} from '@a2a-js/sdk';
+import {UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+import {InputSignal, Type} from '@angular/core';
 
 /**
  * Contextual information for rendering UI components.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/a2a-chat-canvas-catalog.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/a2a-chat-canvas-catalog.ts
index cf7b3c7b4..5b48445a6 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/a2a-chat-canvas-catalog.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/a2a-chat-canvas-catalog.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { DEFAULT_CATALOG } from '@a2ui/angular';
+import {DEFAULT_CATALOG} from '@a2ui/angular';
 
 export const DEFAULT_A2UI_CATALOG = {
   ...DEFAULT_CATALOG,
-  Canvas: () => import('./canvas/canvas').then((r) => r.Canvas),
+  Canvas: () => import('./canvas/canvas').then(r => r.Canvas),
 };
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.scss
index 15b89a243..78e93427f 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.scss
@@ -29,4 +29,4 @@ mat-card-content {
   justify-content: space-between;
   align-items: center;
   padding: 0 16px;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.spec.ts
index 9a2cfeeeb..36c7285fa 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { Canvas } from './canvas';
+import {Canvas} from './canvas';
 
 describe('A2uiCanvas', () => {
   let component: Canvas;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.ts
index 4324bccf6..3e050ccf2 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/canvas/canvas.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { CanvasService } from '@a2a_chat_canvas/services/canvas-service';
-import { DynamicComponent } from '@a2ui/angular';
+import {CanvasService} from '@a2a_chat_canvas/services/canvas-service';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Types from '@a2ui/web_core/types/types';
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-import { MatCard, MatCardContent } from '@angular/material/card';
+import {ChangeDetectionStrategy, Component, computed, inject, OnInit} from '@angular/core';
+import {MatButton} from '@angular/material/button';
+import {MatCard, MatCardContent} from '@angular/material/card';
 
 /**
  * A2UI custom component for a Canvas.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/theme.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/theme.ts
index 037c2221f..54f1d383d 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/theme.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/a2ui-catalog/theme.ts
@@ -160,16 +160,16 @@ const video = {
   'layout-el-cv': true,
 };
 
-const aLight = Styles.merge(a, { 'color-c-n5': true });
-const inputLight = Styles.merge(input, { 'color-c-n5': true });
-const textareaLight = Styles.merge(textarea, { 'color-c-n5': true });
-const buttonLight = Styles.merge(button, { 'color-c-n100': true });
-const h1Light = Styles.merge(h1, { 'color-c-n5': true });
-const h2Light = Styles.merge(h2, { 'color-c-n5': true });
-const h3Light = Styles.merge(h3, { 'color-c-n5': true });
-const bodyLight = Styles.merge(body, { 'color-c-n5': true });
-const pLight = Styles.merge(p, { 'color-c-n35': true });
-const preLight = Styles.merge(pre, { 'color-c-n35': true });
+const aLight = Styles.merge(a, {'color-c-n5': true});
+const inputLight = Styles.merge(input, {'color-c-n5': true});
+const textareaLight = Styles.merge(textarea, {'color-c-n5': true});
+const buttonLight = Styles.merge(button, {'color-c-n100': true});
+const h1Light = Styles.merge(h1, {'color-c-n5': true});
+const h2Light = Styles.merge(h2, {'color-c-n5': true});
+const h3Light = Styles.merge(h3, {'color-c-n5': true});
+const bodyLight = Styles.merge(body, {'color-c-n5': true});
+const pLight = Styles.merge(p, {'color-c-n35': true});
+const preLight = Styles.merge(pre, {'color-c-n35': true});
 const orderedListLight = Styles.merge(orderedList, {
   'color-c-n35': true,
 });
@@ -200,7 +200,7 @@ export const theme: Types.Theme = {
       'color-c-n100': true,
       'behavior-ho-70': true,
     },
-    Card: { 'border-br-9': true, 'color-bgc-p100': true, 'layout-p-4': true },
+    Card: {'border-br-9': true, 'color-bgc-p100': true, 'layout-p-4': true},
     CheckBox: {
       element: {
         'layout-m-0': true,
@@ -268,7 +268,7 @@ export const theme: Types.Theme = {
       'layout-p-2': true,
     },
     Modal: {
-      backdrop: { 'color-bbgc-p60_20': true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
         'border-br-2': true,
         'color-bgc-p100': true,
@@ -293,7 +293,7 @@ export const theme: Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.scss
index 2a0c1d1eb..edc67de5e 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.scss
@@ -13,10 +13,10 @@
 // limitations under the License.
 
 :host {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .canvas {
-    width: 100%;
-}
\ No newline at end of file
+  width: 100%;
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.spec.ts
index 159bcdbd1..aa597f469 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { Canvas } from './canvas';
+import {Canvas} from './canvas';
 
 describe('Canvas', () => {
   let component: Canvas;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.ts
index 0d3d293d6..e4b1c576a 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/canvas/canvas.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Renderer } from '@a2ui/angular';
-import { InteractivityChecker } from '@angular/cdk/a11y';
+import {Renderer} from '@a2ui/angular';
+import {InteractivityChecker} from '@angular/cdk/a11y';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -24,7 +24,7 @@ import {
   inject,
   viewChild,
 } from '@angular/core';
-import { CanvasService } from '../../services/canvas-service';
+import {CanvasService} from '../../services/canvas-service';
 
 /**
  * Component responsible for rendering A2UI content on a canvas.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.scss
index 916b7db3c..f95724ad1 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.scss
@@ -60,4 +60,4 @@
   visibility: hidden;
   max-height: 0;
   overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.spec.ts
index b64b38e84..0d1192ef3 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { AgentHeader } from './agent-header';
+import {AgentHeader} from './agent-header';
 
 describe('AgentHeader', () => {
   let component: AgentHeader;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.ts
index 5346e3741..292b3aa72 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/agent-header/agent-header.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { A2aRenderer } from '@a2a_chat_canvas/a2a-renderer/a2a-renderer';
-import { Avatar } from '@a2a_chat_canvas/components/chat/avatar/avatar';
-import { UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-import { ChangeDetectionStrategy, Component, computed, input, signal } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { SafeUrl } from '@angular/platform-browser';
+import {A2aRenderer} from '@a2a_chat_canvas/a2a-renderer/a2a-renderer';
+import {Avatar} from '@a2a_chat_canvas/components/chat/avatar/avatar';
+import {UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+import {ChangeDetectionStrategy, Component, computed, input, signal} from '@angular/core';
+import {MatButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
+import {SafeUrl} from '@angular/platform-browser';
 
 /** Header for the agent. */
 @Component({
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.scss
index 52fcd78c4..906b96c3d 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.scss
@@ -15,63 +15,63 @@
 @use '@angular/material' as mat;
 
 :host {
-    display: inline-block;
+  display: inline-block;
 }
 
 .agent-icon-container {
-    height: 20px;
-    width: 20px;
-    padding: 6px;
-    font-size: 20px;
+  height: 20px;
+  width: 20px;
+  padding: 6px;
+  font-size: 20px;
 }
 
 .icon {
-    width: 20px;
-    height: 20px;
-    // The icon isn't so much of a font than a graphic, so we use px instead of
-    // rem.
-    font-size: 20px;
-    border-radius: var(--mat-sys-corner-extra-large);
-    vertical-align: top;
+  width: 20px;
+  height: 20px;
+  // The icon isn't so much of a font than a graphic, so we use px instead of
+  // rem.
+  font-size: 20px;
+  border-radius: var(--mat-sys-corner-extra-large);
+  vertical-align: top;
 }
 
 .large-icon {
-    width: 32px;
-    height: 32px;
-    font-size: 32px;
-    border-radius: var(--mat-sys-corner-extra-large);
-    vertical-align: top;
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+  border-radius: var(--mat-sys-corner-extra-large);
+  vertical-align: top;
 }
 
 .large-icon-container {
-    height: 32px;
-    width: 32px;
-    font-size: 32px;
-    padding: 0;
+  height: 32px;
+  width: 32px;
+  font-size: 32px;
+  padding: 0;
 }
 
 .container {
-    position: relative;
-    height: 32px;
-    font-size: 32px;
-    display: inline-block;
-    vertical-align: middle;
+  position: relative;
+  height: 32px;
+  font-size: 32px;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .progress-indicator-wrapper {
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    height: 32px;
-    width: 60px;
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  height: 32px;
+  width: 60px;
 }
 
 .progress-indicator {
-    @include mat.progress-spinner-density(-2);
+  @include mat.progress-spinner-density(-2);
 
-    z-index: 500;
+  z-index: 500;
 }
 
 .agent-icon {
-    display: contents;
-}
\ No newline at end of file
+  display: contents;
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.spec.ts
index d599b824c..675a4d418 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { Avatar } from './avatar';
+import {Avatar} from './avatar';
 
 describe('Avatar', () => {
   let component: Avatar;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.ts
index 20383dd63..0e1a65501 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/avatar/avatar.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { SafeUrl } from '@angular/platform-browser';
+import {NgTemplateOutlet} from '@angular/common';
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
+import {MatProgressSpinner} from '@angular/material/progress-spinner';
+import {SafeUrl} from '@angular/platform-browser';
 
 /** Avatar component. */
 @Component({
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.html b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.html
index bfba42204..fb5784e48 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.html
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.html
@@ -38,7 +38,7 @@
                 <ng-container
                   *ngComponentOutlet="
                     resolvedMessageDecorator.value();
-                    inputs: { message: message, coreContentTemplateRef: coreContentTemplateRef }
+                    inputs: {message: message, coreContentTemplateRef: coreContentTemplateRef}
                   "
                 ></ng-container>
               } @else {
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.scss
index f8ab7ffeb..4ac6bfea1 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.scss
@@ -32,12 +32,7 @@
 .empty-history-text {
   margin: 0;
   font: var(--mat-sys-display-small);
-  background: linear-gradient(
-    90deg,
-    #217bfe 28.03%,
-    #078efb 49.56%,
-    #ac87eb 71.1%
-  );
+  background: linear-gradient(90deg, #217bfe 28.03%, #078efb 49.56%, #ac87eb 71.1%);
   background-clip: text;
   color: transparent;
 }
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.spec.ts
index a85a6aded..ad4393c36 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ChatHistory } from './chat-history';
+import {ChatHistory} from './chat-history';
 
 describe('ChatHistory', () => {
   let component: ChatHistory;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.ts
index a3c4795e4..714b313c7 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/chat-history.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { MessageDecorator } from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
-import { Message } from '@a2a_chat_canvas/components/chat/message/message';
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
-import { UiMessage } from '@a2a_chat_canvas/types/ui-message';
-import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import {MessageDecorator} from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
+import {Message} from '@a2a_chat_canvas/components/chat/message/message';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
+import {UiMessage} from '@a2a_chat_canvas/types/ui-message';
+import {NgComponentOutlet, NgTemplateOutlet} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -88,7 +88,7 @@ export class ChatHistory {
   /** Resolves the message decorator component. */
   protected readonly resolvedMessageDecorator = resource({
     params: this.messageDecorator,
-    loader: async ({ params }) => {
+    loader: async ({params}) => {
       if (!params) {
         return null;
       }
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/message-decorator/types.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/message-decorator/types.ts
index 056a2d6b3..7baf7fba8 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/message-decorator/types.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat-history/message-decorator/types.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { UiMessage } from '@a2a_chat_canvas/types/ui-message';
-import { InputSignal, TemplateRef, Type } from '@angular/core';
+import {UiMessage} from '@a2a_chat_canvas/types/ui-message';
+import {InputSignal, TemplateRef, Type} from '@angular/core';
 
 /** Interface for a component that decorates a message. */
 export interface MessageDecoratorComponent {
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.scss
index a258eac33..53788f7b7 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.scss
@@ -24,4 +24,4 @@
   overflow-y: auto;
   flex: 1;
   padding: 0 16px;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.spec.ts
index f8e7b112e..3fb0e586e 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { Chat } from './chat';
+import {Chat} from './chat';
 
 describe('Chat', () => {
   let component: Chat;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.ts
index d97c34bc1..219d45d34 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/chat.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ChatHistory } from '@a2a_chat_canvas/components/chat/chat-history/chat-history';
-import { MessageDecorator } from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
-import { InputArea } from '@a2a_chat_canvas/components/chat/input-area/input-area';
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
+import {ChatHistory} from '@a2a_chat_canvas/components/chat/chat-history/chat-history';
+import {MessageDecorator} from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
+import {InputArea} from '@a2a_chat_canvas/components/chat/input-area/input-area';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
 import {
   ChangeDetectionStrategy,
   Component,
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.scss
index cfd5c2168..e55936ab2 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.scss
@@ -90,4 +90,4 @@
   .stop-button.mat-mdc-icon-button {
     background-color: var(--mat-sys-secondary-container);
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.spec.ts
index cc61d34db..729e8d016 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { InputArea } from './input-area';
+import {InputArea} from './input-area';
 
 describe('InputArea', () => {
   let component: InputArea;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.ts
index 3c1feb989..9b2bdfa05 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/input-area/input-area.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
-import { CdkTextareaAutosize } from '@angular/cdk/text-field';
-import { ChangeDetectionStrategy, Component, ElementRef, inject, viewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatIconButton } from '@angular/material/button';
-import { MatFormField } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { MatInput } from '@angular/material/input';
-import { MatTooltip } from '@angular/material/tooltip';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
+import {CdkTextareaAutosize} from '@angular/cdk/text-field';
+import {ChangeDetectionStrategy, Component, ElementRef, inject, viewChild} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {MatIconButton} from '@angular/material/button';
+import {MatFormField} from '@angular/material/form-field';
+import {MatIcon} from '@angular/material/icon';
+import {MatInput} from '@angular/material/input';
+import {MatTooltip} from '@angular/material/tooltip';
 
 /** Input area for the user to enter text. */
 @Component({
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.scss b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.scss
index d25999261..16a2cd3ea 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.scss
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.scss
@@ -43,9 +43,8 @@
 .user-message-container {
   background-color: var(--mat-sys-surface-container-high);
   color: var(--mat-sys-on-surface);
-  border-radius: var(--mat-sys-corner-extra-large)
-    var(--mat-sys-corner-extra-small) var(--mat-sys-corner-extra-large)
-    var(--mat-sys-corner-extra-large);
+  border-radius: var(--mat-sys-corner-extra-large) var(--mat-sys-corner-extra-small)
+    var(--mat-sys-corner-extra-large) var(--mat-sys-corner-extra-large);
   max-width: fit-content;
   padding: 0.75rem;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.spec.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.spec.ts
index c8e7cb3e6..9693351d7 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.spec.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { Message } from './message';
+import {Message} from './message';
 
 describe('Message', () => {
   let component: Message;
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.ts
index a8adc4932..09b482957 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/components/chat/message/message.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { A2aRenderer } from '@a2a_chat_canvas/a2a-renderer/a2a-renderer';
-import { AgentHeader } from '@a2a_chat_canvas/components/chat/agent-header/agent-header';
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
-import { Role, UiAgent, UiMessage, UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-import { isAgentThought } from '@a2a_chat_canvas/utils/a2a';
-import { isA2aPart } from '@a2a_chat_canvas/utils/type-guards';
-import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import {A2aRenderer} from '@a2a_chat_canvas/a2a-renderer/a2a-renderer';
+import {AgentHeader} from '@a2a_chat_canvas/components/chat/agent-header/agent-header';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
+import {Role, UiAgent, UiMessage, UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+import {isAgentThought} from '@a2a_chat_canvas/utils/a2a';
+import {isA2aPart} from '@a2a_chat_canvas/utils/type-guards';
+import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';
 
 /** UI message component. */
 @Component({
@@ -44,11 +44,11 @@ export class Message {
 
   /** Agent thought contents. */
   protected readonly agentThoughts = computed(() =>
-    this.message().contents.filter((content) => containsAgentThought(content)),
+    this.message().contents.filter(content => containsAgentThought(content)),
   );
   /** Agent non-thought contents. */
   protected readonly messageContents = computed(() =>
-    this.message().contents.filter((content) => !containsAgentThought(content)),
+    this.message().contents.filter(content => !containsAgentThought(content)),
   );
   /** Whether the message is pending. */
   protected readonly showProgressIndicator = computed(() => {
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/config.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/config.ts
index f7c46398e..ccf648d00 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/config.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/config.ts
@@ -14,26 +14,22 @@
  * limitations under the License.
  */
 
-import { A2UI_DATA_PART_RENDERER_ENTRY } from '@a2a_chat_canvas/a2a-renderer/catalog/a2ui-data-part/renderer-config';
-import { A2UI_DATA_PART_RESOLVER } from '@a2a_chat_canvas/a2a-renderer/catalog/a2ui-data-part/resolver';
-import { DEFAULT_TEXT_PART_RENDERER_ENTRY } from '@a2a_chat_canvas/a2a-renderer/catalog/default-text-part/renderer-config';
-import { DEFAULT_TEXT_PART_RESOLVER } from '@a2a_chat_canvas/a2a-renderer/catalog/default-text-part/resolver';
-import {
-  ARTIFACT_RESOLVERS,
-  PART_RESOLVERS,
-  RENDERERS,
-} from '@a2a_chat_canvas/a2a-renderer/tokens';
-import { ArtifactResolver, PartResolver, RendererEntry } from '@a2a_chat_canvas/a2a-renderer/types';
-import { theme as a2uiTheme } from '@a2a_chat_canvas/a2ui-catalog/theme';
-import { A2A_SERVICE, A2aService } from '@a2a_chat_canvas/interfaces/a2a-service';
+import {A2UI_DATA_PART_RENDERER_ENTRY} from '@a2a_chat_canvas/a2a-renderer/catalog/a2ui-data-part/renderer-config';
+import {A2UI_DATA_PART_RESOLVER} from '@a2a_chat_canvas/a2a-renderer/catalog/a2ui-data-part/resolver';
+import {DEFAULT_TEXT_PART_RENDERER_ENTRY} from '@a2a_chat_canvas/a2a-renderer/catalog/default-text-part/renderer-config';
+import {DEFAULT_TEXT_PART_RESOLVER} from '@a2a_chat_canvas/a2a-renderer/catalog/default-text-part/resolver';
+import {ARTIFACT_RESOLVERS, PART_RESOLVERS, RENDERERS} from '@a2a_chat_canvas/a2a-renderer/tokens';
+import {ArtifactResolver, PartResolver, RendererEntry} from '@a2a_chat_canvas/a2a-renderer/types';
+import {theme as a2uiTheme} from '@a2a_chat_canvas/a2ui-catalog/theme';
+import {A2A_SERVICE, A2aService} from '@a2a_chat_canvas/interfaces/a2a-service';
 import {
   MARKDOWN_RENDERER_SERVICE,
   MarkdownRendererService,
 } from '@a2a_chat_canvas/interfaces/markdown-renderer-service';
-import { SanitizerMarkdownRendererService } from '@a2a_chat_canvas/services/sanitizer-markdown-renderer-service';
-import { Catalog, Theme } from '@a2ui/angular';
-import { EnvironmentProviders, Provider, Type, makeEnvironmentProviders } from '@angular/core';
-import { DEFAULT_A2UI_CATALOG } from './a2ui-catalog/a2a-chat-canvas-catalog';
+import {SanitizerMarkdownRendererService} from '@a2a_chat_canvas/services/sanitizer-markdown-renderer-service';
+import {Catalog, Theme} from '@a2ui/angular';
+import {EnvironmentProviders, Provider, Type, makeEnvironmentProviders} from '@angular/core';
+import {DEFAULT_A2UI_CATALOG} from './a2ui-catalog/a2a-chat-canvas-catalog';
 
 const DEFAULT_RENDERERS: readonly RendererEntry[] = [
   A2UI_DATA_PART_RENDERER_ENTRY,
@@ -65,7 +61,7 @@ export function configureChatCanvasFeatures(
       defaultPartResolversFeature,
       defaultRenderersFeature,
       ...additionalFeatures,
-    ].map((feature) => feature.providers),
+    ].map(feature => feature.providers),
   ]);
 }
 
@@ -75,7 +71,7 @@ export function configureChatCanvasFeatures(
 export function usingA2aService<T extends A2aService>(a2aServiceClass: Type<T>): A2aFeature {
   return {
     kind: ChatCanvasFeatureKind.A2A_FEATURE,
-    providers: [{ provide: A2A_SERVICE, useClass: a2aServiceClass }],
+    providers: [{provide: A2A_SERVICE, useClass: a2aServiceClass}],
   };
 }
 
@@ -87,7 +83,7 @@ export function usingMarkdownRenderer<T extends MarkdownRendererService>(
 ): MarkdownFeature {
   return {
     kind: ChatCanvasFeatureKind.MARKDOWN_FEATURE,
-    providers: [{ provide: MARKDOWN_RENDERER_SERVICE, useClass: markdownRendererClass }],
+    providers: [{provide: MARKDOWN_RENDERER_SERVICE, useClass: markdownRendererClass}],
   };
 }
 
@@ -106,7 +102,7 @@ export function usingPartResolvers(...partResolvers: readonly PartResolver[]): P
   return {
     kind: ChatCanvasFeatureKind.PART_RESOLVER_FEATURE,
     providers: [
-      partResolvers.map((resolver) => ({
+      partResolvers.map(resolver => ({
         provide: PART_RESOLVERS,
         useValue: resolver,
         multi: true,
@@ -124,7 +120,7 @@ export function usingArtifactResolvers(
   return {
     kind: ChatCanvasFeatureKind.ARTIFACT_RESOLVER_FEATURE,
     providers: [
-      artifactResolvers.map((resolver) => ({
+      artifactResolvers.map(resolver => ({
         provide: ARTIFACT_RESOLVERS,
         useValue: resolver,
         multi: true,
@@ -140,7 +136,7 @@ export function usingRenderers(...renderers: readonly RendererEntry[]): Renderer
   return {
     kind: ChatCanvasFeatureKind.RENDERER_FEATURE,
     providers: [
-      renderers.map((renderer) => ({
+      renderers.map(renderer => ({
         provide: RENDERERS,
         useValue: renderer,
         multi: true,
@@ -163,7 +159,7 @@ export function usingA2uiRenderers(customCatalog?: any, theme?: any): A2uiFeatur
           ...(customCatalog ?? {}),
         },
       },
-      { provide: Theme, useValue: theme ?? a2uiTheme },
+      {provide: Theme, useValue: theme ?? a2uiTheme},
     ],
   };
 }
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/a2a-service.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/a2a-service.ts
index 478d52d22..c76bb0261 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/a2a-service.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/a2a-service.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { AgentCard, Part, SendMessageSuccessResponse } from '@a2a-js/sdk';
-import { InjectionToken } from '@angular/core';
+import {AgentCard, Part, SendMessageSuccessResponse} from '@a2a-js/sdk';
+import {InjectionToken} from '@angular/core';
 
 /**
  * Interface for the A2A (Agent-to-Agent) service.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/markdown-renderer-service.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/markdown-renderer-service.ts
index f2d3edb5b..3c803a8e1 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/markdown-renderer-service.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/interfaces/markdown-renderer-service.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { SanitizerMarkdownRendererService } from '@a2a_chat_canvas/services/sanitizer-markdown-renderer-service';
-import { InjectionToken } from '@angular/core';
-import { SafeHtml } from '@angular/platform-browser';
+import {SanitizerMarkdownRendererService} from '@a2a_chat_canvas/services/sanitizer-markdown-renderer-service';
+import {InjectionToken} from '@angular/core';
+import {SafeHtml} from '@angular/platform-browser';
 /**
  * Interface for a markdown renderer service.
  */
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/canvas-service.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/canvas-service.ts
index 26d1eaa9b..6a7af708b 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/canvas-service.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/canvas-service.ts
@@ -15,7 +15,7 @@
  */
 
 import * as Types from '@a2ui/web_core/types/types';
-import { Injectable, signal } from '@angular/core';
+import {Injectable, signal} from '@angular/core';
 
 /**
  * Service to manage the state of the canvas, which displays A2UI surfaces.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/chat-service.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/chat-service.ts
index 9031c98c3..4c56cf556 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/chat-service.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/chat-service.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { AgentCard, SendMessageSuccessResponse } from '@a2a-js/sdk';
-import { PART_RESOLVERS } from '@a2a_chat_canvas/a2a-renderer/tokens';
-import { A2A_SERVICE } from '@a2a_chat_canvas/interfaces/a2a-service';
-import { UiAgent, UiMessage, UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-import { extractA2aPartsFromResponse } from '@a2a_chat_canvas/utils/a2a';
-import { extractA2uiDataParts } from '@a2a_chat_canvas/utils/a2ui';
-import { convertPartToUiMessageContent } from '@a2a_chat_canvas/utils/ui-message-utils';
-import { MessageProcessor, DispatchedEvent } from '@a2ui/angular';
-import { inject, Injectable, resource, signal } from '@angular/core';
-import { v4 as uuid } from 'uuid';
+import {AgentCard, SendMessageSuccessResponse} from '@a2a-js/sdk';
+import {PART_RESOLVERS} from '@a2a_chat_canvas/a2a-renderer/tokens';
+import {A2A_SERVICE} from '@a2a_chat_canvas/interfaces/a2a-service';
+import {UiAgent, UiMessage, UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+import {extractA2aPartsFromResponse} from '@a2a_chat_canvas/utils/a2a';
+import {extractA2uiDataParts} from '@a2a_chat_canvas/utils/a2ui';
+import {convertPartToUiMessageContent} from '@a2a_chat_canvas/utils/ui-message-utils';
+import {MessageProcessor, DispatchedEvent} from '@a2ui/angular';
+import {inject, Injectable, resource, signal} from '@angular/core';
+import {v4 as uuid} from 'uuid';
 
 /**
  * Service responsible for managing chat interactions, including sending messages,
@@ -102,7 +102,7 @@ export class ChatService {
     try {
       this.abortController = new AbortController();
       const a2aResponse = await this.a2aService.sendMessage(
-        [{ kind: 'text', text }],
+        [{kind: 'text', text}],
         this.abortController.signal,
       );
       this.handleSuccess(a2aResponse, silent);
@@ -134,7 +134,7 @@ export class ChatService {
     const now = new Date().toISOString();
     const userMessage = this.createNewUserMessage(text, now);
     const agentMessage = this.createPendingAgentMessage(now);
-    this.history.update((curr) => [...curr, userMessage, agentMessage]);
+    this.history.update(curr => [...curr, userMessage, agentMessage]);
   }
 
   /**
@@ -150,7 +150,7 @@ export class ChatService {
     );
 
     if (!silent) {
-      this.updateLastMessage((msg) => ({
+      this.updateLastMessage(msg => ({
         ...msg,
         role: this.createRole(response),
         contents: [...msg.contents, ...newContents],
@@ -191,7 +191,7 @@ export class ChatService {
       variant: 'default_text_part',
     };
 
-    this.updateLastMessage((msg) => ({
+    this.updateLastMessage(msg => ({
       ...msg,
       contents: [...msg.contents, errorContent],
       status: 'completed',
@@ -206,7 +206,7 @@ export class ChatService {
    * @param updater A function that takes the current last message and returns the updated message.
    */
   private updateLastMessage(updater: (msg: UiMessage) => UiMessage) {
-    this.history.update((history) => {
+    this.history.update(history => {
       if (history.length === 0) return history;
       // New reference of the same object for OnPush ChangeDetectionStrategy.
       const lastMessage = history[history.length - 1];
@@ -285,7 +285,7 @@ export class ChatService {
     const agentRole: UiAgent = {
       ...rootagentRole,
       subagentName: (subagentCard as AgentCard).name,
-    }
+    };
 
     return agentRole;
   }
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/sanitizer-markdown-renderer-service.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/sanitizer-markdown-renderer-service.ts
index d5452a7e8..36c784240 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/sanitizer-markdown-renderer-service.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/services/sanitizer-markdown-renderer-service.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { inject } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { MarkdownRendererService } from '../interfaces/markdown-renderer-service';
+import {inject} from '@angular/core';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
+import {MarkdownRendererService} from '../interfaces/markdown-renderer-service';
 
 /**
  * A markdown renderer that uses a default sanitizer to convert the markdown
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/types/ui-message.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/types/ui-message.ts
index 4fa962105..4d79d1210 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/types/ui-message.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/types/ui-message.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Artifact, Part } from '@a2a-js/sdk';
+import {Artifact, Part} from '@a2a-js/sdk';
 
 /**
  * Represents a single message in the UI, either from the user or the agent.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2a.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2a.ts
index ea2b19cc7..27eeca9fb 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2a.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2a.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Artifact, Message, Part, SendMessageSuccessResponse, Task } from '@a2a-js/sdk';
+import {Artifact, Message, Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
 
 const ADK_A2A_THOUGHT_KEY = 'adk_thought';
 
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2ui.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2ui.ts
index 7d94bf13e..51577c568 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2ui.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/a2ui.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Part } from '@a2a-js/sdk';
+import {Part} from '@a2a-js/sdk';
 import * as Types from '@a2ui/web_core/types/types';
-import { isA2aDataPart } from './type-guards';
+import {isA2aDataPart} from './type-guards';
 
 /**
  * Extracts A2UI ServerToClientMessages from an array of A2A Parts.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/type-guards.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/type-guards.ts
index 9a17f31d5..64f1f9477 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/type-guards.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/type-guards.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DataPart, Part, TextPart } from '@a2a-js/sdk';
+import {DataPart, Part, TextPart} from '@a2a-js/sdk';
 
 /**
  * Type guard to check if an A2A Part is a TextPart.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/ui-message-utils.ts b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/ui-message-utils.ts
index 4e4f66ce3..1009d97b5 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/ui-message-utils.ts
+++ b/samples/client/angular/projects/a2a-chat-canvas/src/lib/utils/ui-message-utils.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { Part } from '@a2a-js/sdk';
-import { PartResolver, UNRESOLVED_PART_VARIANT } from '@a2a_chat_canvas/a2a-renderer/types';
-import { UiMessageContent } from '@a2a_chat_canvas/types/ui-message';
-import { v4 as uuid } from 'uuid';
+import {Part} from '@a2a-js/sdk';
+import {PartResolver, UNRESOLVED_PART_VARIANT} from '@a2a_chat_canvas/a2a-renderer/types';
+import {UiMessageContent} from '@a2a_chat_canvas/types/ui-message';
+import {v4 as uuid} from 'uuid';
 
 /**
  * Converts a Part to a UiMessageContent.
diff --git a/samples/client/angular/projects/a2a-chat-canvas/tsconfig.lib.json b/samples/client/angular/projects/a2a-chat-canvas/tsconfig.lib.json
index f9f17dcc3..10c65ffab 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/tsconfig.lib.json
+++ b/samples/client/angular/projects/a2a-chat-canvas/tsconfig.lib.json
@@ -10,10 +10,6 @@
     "inlineSourceMap": true,
     "types": []
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
 }
diff --git a/samples/client/angular/projects/a2a-chat-canvas/tsconfig.spec.json b/samples/client/angular/projects/a2a-chat-canvas/tsconfig.spec.json
index 0feea88ed..43ba0b186 100644
--- a/samples/client/angular/projects/a2a-chat-canvas/tsconfig.spec.json
+++ b/samples/client/angular/projects/a2a-chat-canvas/tsconfig.spec.json
@@ -4,11 +4,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.ts"]
 }
diff --git a/samples/client/angular/projects/gallery/src/app/app.config.ts b/samples/client/angular/projects/gallery/src/app/app.config.ts
index d4982406e..732ddd69a 100644
--- a/samples/client/angular/projects/gallery/src/app/app.config.ts
+++ b/samples/client/angular/projects/gallery/src/app/app.config.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { DEFAULT_CATALOG, provideA2UI } from '@a2ui/angular';
-import { IMAGE_CONFIG } from '@angular/common';
+import {DEFAULT_CATALOG, provideA2UI} from '@a2ui/angular';
+import {IMAGE_CONFIG} from '@angular/common';
 import {
   ApplicationConfig,
   provideBrowserGlobalErrorListeners,
   provideZonelessChangeDetection,
 } from '@angular/core';
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { theme } from './theme';
+import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
+import {theme} from './theme';
 
 export const appConfig: ApplicationConfig = {
   providers: [
diff --git a/samples/client/angular/projects/gallery/src/app/app.css b/samples/client/angular/projects/gallery/src/app/app.css
index 1e0db2c7f..3405a84bc 100644
--- a/samples/client/angular/projects/gallery/src/app/app.css
+++ b/samples/client/angular/projects/gallery/src/app/app.css
@@ -1,4 +1,4 @@
-  /*
+/*
  Copyright 2025 Google LLC
 
  Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,43 +14,43 @@
  limitations under the License.
 */
 
-  .home-page-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px;
-  }
+.home-page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+}
 
-  .app-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    gap: 16px; /* Space between items */
-  }
+.app-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 16px; /* Space between items */
+}
 
-  .app-nav li {
-    padding: 8px 12px;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: background-color 0.3s ease;
-  }
+.app-nav li {
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+}
 
-  .app-nav li:hover {
-    background-color: #eee;
-  }
-  .app-nav li a {
-    text-decoration:  none;
-    color: inherit;
-  }
-  .hero-message {
-    font-weight: bold;
-    text-align: center;
-  }
-  .hero-message h1 {
-    font-size: 3rem;
-  }
-  .hero-message p {
-    font-size: 1.5rem;
-    font-weight: lighter;
-  }
\ No newline at end of file
+.app-nav li:hover {
+  background-color: #eee;
+}
+.app-nav li a {
+  text-decoration: none;
+  color: inherit;
+}
+.hero-message {
+  font-weight: bold;
+  text-align: center;
+}
+.hero-message h1 {
+  font-size: 3rem;
+}
+.hero-message p {
+  font-size: 1.5rem;
+  font-weight: lighter;
+}
diff --git a/samples/client/angular/projects/gallery/src/app/app.html b/samples/client/angular/projects/gallery/src/app/app.html
index ef96b5218..503a3f576 100644
--- a/samples/client/angular/projects/gallery/src/app/app.html
+++ b/samples/client/angular/projects/gallery/src/app/app.html
@@ -30,10 +30,10 @@ <h1>A2UI Component Gallery</h1>
     <p>Building blocks and examples for Agent Driven UIs</p>
   </div>
   <section>
-    @if(currentView() === 'gallery') {
+    @if (currentView() === 'gallery') {
       <app-gallery />
     } @else {
       <app-library />
     }
   </section>
-</section>
\ No newline at end of file
+</section>
diff --git a/samples/client/angular/projects/gallery/src/app/app.ts b/samples/client/angular/projects/gallery/src/app/app.ts
index 0bb55c20c..04734cde4 100644
--- a/samples/client/angular/projects/gallery/src/app/app.ts
+++ b/samples/client/angular/projects/gallery/src/app/app.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LibraryComponent } from './features/library/library.component';
-import { GalleryComponent } from './features/gallery/gallery.component';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
+import {LibraryComponent} from './features/library/library.component';
+import {GalleryComponent} from './features/gallery/gallery.component';
 
 @Component({
   selector: 'app-root',
diff --git a/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.component.ts b/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.component.ts
index 1c83942a0..54971b39b 100644
--- a/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.component.ts
+++ b/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.component.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Surface } from '@a2ui/angular';
+import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Surface} from '@a2ui/angular';
 import * as Types from '@a2ui/web_core/types/types';
 
 interface GallerySample {
@@ -50,7 +50,7 @@ export class GalleryComponent {
             this.createComponent('Row', {
               children: [
                 this.createComponent('Image', {
-                  url: { literalString: 'https://picsum.photos/id/11/300/300' },
+                  url: {literalString: 'https://picsum.photos/id/11/300/300'},
                 }),
                 this.createComponent('Column', {
                   children: [
@@ -66,7 +66,7 @@ export class GalleryComponent {
             this.createComponent('Row', {
               children: [
                 this.createComponent('Image', {
-                  url: { literalString: 'https://picsum.photos/id/12/300/300' },
+                  url: {literalString: 'https://picsum.photos/id/12/300/300'},
                 }),
                 this.createComponent('Column', {
                   children: [
@@ -83,7 +83,7 @@ export class GalleryComponent {
             this.createComponent('Row', {
               children: [
                 this.createComponent('Image', {
-                  url: { literalString: 'https://picsum.photos/id/13/300/300' },
+                  url: {literalString: 'https://picsum.photos/id/13/300/300'},
                 }),
                 this.createComponent('Text', {
                   text: {
@@ -105,7 +105,7 @@ export class GalleryComponent {
         child: this.createComponent('Column', {
           children: [
             this.createComponent('Image', {
-              url: { literalString: 'https://picsum.photos/id/10/600/300' },
+              url: {literalString: 'https://picsum.photos/id/10/600/300'},
             }),
             this.createComponent('Text', {
               text: {
@@ -114,8 +114,8 @@ export class GalleryComponent {
               },
             }),
             this.createComponent('Button', {
-              action: { type: 'submit' },
-              child: this.createComponent('Text', { text: { literalString: 'Get Started' } }),
+              action: {type: 'submit'},
+              child: this.createComponent('Text', {text: {literalString: 'Get Started'}}),
             }),
           ],
           alignment: 'center',
@@ -132,32 +132,32 @@ export class GalleryComponent {
             this.createComponent('Row', {
               children: [
                 this.createComponent('TextField', {
-                  label: { literalString: 'Name' },
+                  label: {literalString: 'Name'},
                   type: 'text',
-                  text: { literalString: '' },
+                  text: {literalString: ''},
                 }),
               ],
             }),
             this.createComponent('Row', {
               children: [
                 this.createComponent('TextField', {
-                  label: { literalString: 'Email Address' },
+                  label: {literalString: 'Email Address'},
                   type: 'email',
-                  text: { literalString: '' },
+                  text: {literalString: ''},
                 }),
               ],
             }),
             this.createComponent('Row', {
               children: [
                 this.createComponent('TextField', {
-                  label: { literalString: 'Message' },
-                  text: { literalString: '' },
+                  label: {literalString: 'Message'},
+                  text: {literalString: ''},
                 }),
               ],
             }),
             this.createComponent('Button', {
-              action: { type: 'submit' },
-              child: this.createComponent('Text', { text: { literalString: 'Send Message' } }),
+              action: {type: 'submit'},
+              child: this.createComponent('Text', {text: {literalString: 'Send Message'}}),
             }),
           ],
         }),
@@ -178,7 +178,7 @@ export class GalleryComponent {
     this.activeSection = id;
     const element = document.getElementById('section-' + id);
     if (element) {
-      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      element.scrollIntoView({behavior: 'smooth', block: 'start'});
     }
   }
 
diff --git a/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.css b/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.css
index 4f1fb9ecd..003307e83 100644
--- a/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.css
+++ b/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.css
@@ -26,7 +26,7 @@ dialog {
   transition:
     opacity 0.2s ease-out,
     transform 0.2s ease-out;
-  display: flex; 
+  display: flex;
   flex-direction: column;
 }
 
@@ -48,8 +48,8 @@ dialog[open]::backdrop {
 }
 
 dialog article {
-  flex-grow: 1; 
-  display: flex; 
+  flex-grow: 1;
+  display: flex;
   flex-direction: column;
 }
 
@@ -78,8 +78,7 @@ dialog article {
 }
 
 .widget-gallery {
-
-    display: flex;
+  display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   margin: 0 2em;
@@ -89,8 +88,8 @@ dialog .dialog-content-grid {
   flex-grow: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1.5rem; 
-  height: 100%; 
+  gap: 1.5rem;
+  height: 100%;
   align-items: stretch;
 }
 
@@ -106,13 +105,13 @@ dialog .dialog-content-grid > .sample-surface {
 }
 
 .json-pane pre {
-  background-color: #272822; 
-  color: #f8f8f2;            
-  padding: 1em;              
-  border-radius: 4px;        
+  background-color: #272822;
+  color: #f8f8f2;
+  padding: 1em;
+  border-radius: 4px;
   flex-grow: 1;
-  overflow: auto; 
+  overflow: auto;
   height: 100%;
   white-space: pre-wrap;
-  word-break: break-word; 
-}
\ No newline at end of file
+  word-break: break-word;
+}
diff --git a/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.html b/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.html
index 388bd927b..a0bbbbfdc 100644
--- a/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.html
+++ b/samples/client/angular/projects/gallery/src/app/features/gallery/gallery.html
@@ -52,7 +52,7 @@ <h3>{{ sample.title }}</h3>
           />
         </section>
         <section class="json-pane">
-            <pre>{{ getJson(selectedSample.surface) }}</pre>
+          <pre>{{ getJson(selectedSample.surface) }}</pre>
         </section>
       </div>
     } @else {
diff --git a/samples/client/angular/projects/gallery/src/app/features/library/library.component.ts b/samples/client/angular/projects/gallery/src/app/features/library/library.component.ts
index 83da7962c..d1fdc914f 100644
--- a/samples/client/angular/projects/gallery/src/app/features/library/library.component.ts
+++ b/samples/client/angular/projects/gallery/src/app/features/library/library.component.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from '@angular/core';
-import { Surface } from '@a2ui/angular';
+import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core';
+import {Surface} from '@a2ui/angular';
 import * as Types from '@a2ui/web_core/types/types';
 
 @Component({
@@ -27,11 +27,11 @@ import * as Types from '@a2ui/web_core/types/types';
 })
 export class LibraryComponent {
   @ViewChild('dialog') dialog!: ElementRef<HTMLDialogElement>;
-  selectedBlock: { name: string; surface: Types.Surface } | null = null;
+  selectedBlock: {name: string; surface: Types.Surface} | null = null;
   activeSection = '';
   showJsonId: string | null = null;
 
-  openDialog(block: { name: string; surface: Types.Surface }) {
+  openDialog(block: {name: string; surface: Types.Surface}) {
     this.selectedBlock = block;
     this.dialog.nativeElement.showModal();
   }
@@ -44,7 +44,7 @@ export class LibraryComponent {
     this.activeSection = name;
     const element = document.getElementById('section-' + name);
     if (element) {
-      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      element.scrollIntoView({behavior: 'smooth', block: 'start'});
     }
   }
 
@@ -97,7 +97,7 @@ export class LibraryComponent {
       name: 'Card',
       tag: 'Layout',
       surface: this.createSingleComponentSurface('Card', {
-        child: this.createComponent('Text', { text: { literalString: 'Content inside a card' } }),
+        child: this.createComponent('Text', {text: {literalString: 'Content inside a card'}}),
       }),
     },
     {
@@ -105,9 +105,9 @@ export class LibraryComponent {
       tag: 'Layout',
       surface: this.createSingleComponentSurface('Column', {
         children: [
-          this.createComponent('Text', { text: { literalString: 'Item 1' } }),
-          this.createComponent('Text', { text: { literalString: 'Item 2' } }),
-          this.createComponent('Text', { text: { literalString: 'Item 3' } }),
+          this.createComponent('Text', {text: {literalString: 'Item 1'}}),
+          this.createComponent('Text', {text: {literalString: 'Item 2'}}),
+          this.createComponent('Text', {text: {literalString: 'Item 3'}}),
         ],
         alignment: 'center',
         distribution: 'space-around',
@@ -118,9 +118,9 @@ export class LibraryComponent {
       tag: 'Layout',
       surface: this.createSingleComponentSurface('Column', {
         children: [
-          this.createComponent('Text', { text: { literalString: 'Above Divider' } }),
+          this.createComponent('Text', {text: {literalString: 'Above Divider'}}),
           this.createComponent('Divider', {}),
-          this.createComponent('Text', { text: { literalString: 'Below Divider' } }),
+          this.createComponent('Text', {text: {literalString: 'Below Divider'}}),
         ],
       }),
     },
@@ -129,9 +129,9 @@ export class LibraryComponent {
       tag: 'Layout',
       surface: this.createSingleComponentSurface('List', {
         children: [
-          this.createComponent('Text', { text: { literalString: 'List Item 1' } }),
-          this.createComponent('Text', { text: { literalString: 'List Item 2' } }),
-          this.createComponent('Text', { text: { literalString: 'List Item 3' } }),
+          this.createComponent('Text', {text: {literalString: 'List Item 1'}}),
+          this.createComponent('Text', {text: {literalString: 'List Item 2'}}),
+          this.createComponent('Text', {text: {literalString: 'List Item 3'}}),
         ],
         direction: 'vertical',
       }),
@@ -141,12 +141,12 @@ export class LibraryComponent {
       tag: 'Layout',
       surface: this.createSingleComponentSurface('Modal', {
         entryPointChild: this.createComponent('Button', {
-          action: { type: 'none' },
-          child: this.createComponent('Text', { text: { literalString: 'Open Modal' } }),
+          action: {type: 'none'},
+          child: this.createComponent('Text', {text: {literalString: 'Open Modal'}}),
         }),
         contentChild: this.createComponent('Card', {
           child: this.createComponent('Text', {
-            text: { literalString: 'This is the modal content.' },
+            text: {literalString: 'This is the modal content.'},
           }),
         }),
       }),
@@ -156,9 +156,9 @@ export class LibraryComponent {
       tag: 'Layout',
       surface: this.createSingleComponentSurface('Row', {
         children: [
-          this.createComponent('Text', { text: { literalString: 'Left' } }),
-          this.createComponent('Text', { text: { literalString: 'Center' } }),
-          this.createComponent('Text', { text: { literalString: 'Right' } }),
+          this.createComponent('Text', {text: {literalString: 'Left'}}),
+          this.createComponent('Text', {text: {literalString: 'Center'}}),
+          this.createComponent('Text', {text: {literalString: 'Right'}}),
         ],
         alignment: 'center',
         distribution: 'space-between',
@@ -170,12 +170,12 @@ export class LibraryComponent {
       surface: this.createSingleComponentSurface('Tabs', {
         tabItems: [
           {
-            title: { literalString: 'Tab 1' },
-            child: this.createComponent('Text', { text: { literalString: 'Content for Tab 1' } }),
+            title: {literalString: 'Tab 1'},
+            child: this.createComponent('Text', {text: {literalString: 'Content for Tab 1'}}),
           },
           {
-            title: { literalString: 'Tab 2' },
-            child: this.createComponent('Text', { text: { literalString: 'Content for Tab 2' } }),
+            title: {literalString: 'Tab 2'},
+            child: this.createComponent('Text', {text: {literalString: 'Content for Tab 2'}}),
           },
         ],
       }),
@@ -185,10 +185,10 @@ export class LibraryComponent {
       tag: 'Layout',
       surface: this.createSingleComponentSurface('Column', {
         children: [
-          this.createComponent('Heading', { text: { literalString: 'Heading Text' } }),
-          this.createComponent('Text', { text: { literalString: 'Standard body text.' } }),
+          this.createComponent('Heading', {text: {literalString: 'Heading Text'}}),
+          this.createComponent('Text', {text: {literalString: 'Standard body text.'}}),
           this.createComponent('Text', {
-            text: { literalString: 'Caption text' },
+            text: {literalString: 'Caption text'},
             usageHint: 'caption',
           }),
         ],
@@ -199,7 +199,7 @@ export class LibraryComponent {
       name: 'AudioPlayer',
       tag: 'Media',
       surface: this.createSingleComponentSurface('AudioPlayer', {
-        url: { literalString: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' },
+        url: {literalString: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'},
       }),
     },
     {
@@ -207,9 +207,9 @@ export class LibraryComponent {
       tag: 'Media',
       surface: this.createSingleComponentSurface('Row', {
         children: [
-          this.createComponent('Icon', { name: { literalString: 'home' } }),
-          this.createComponent('Icon', { name: { literalString: 'favorite' } }),
-          this.createComponent('Icon', { name: { literalString: 'settings' } }),
+          this.createComponent('Icon', {name: {literalString: 'home'}}),
+          this.createComponent('Icon', {name: {literalString: 'favorite'}}),
+          this.createComponent('Icon', {name: {literalString: 'settings'}}),
         ],
         distribution: 'space-around',
       }),
@@ -218,7 +218,7 @@ export class LibraryComponent {
       name: 'Image',
       tag: 'Media',
       surface: this.createSingleComponentSurface('Image', {
-        url: { literalString: 'https://picsum.photos/id/10/300/200' },
+        url: {literalString: 'https://picsum.photos/id/10/300/200'},
       }),
     },
     {
@@ -237,14 +237,14 @@ export class LibraryComponent {
       surface: this.createSingleComponentSurface('Row', {
         children: [
           this.createComponent('Button', {
-            label: { literalString: 'Primary' },
-            action: { type: 'click' },
-            child: this.createComponent('Text', { text: { literalString: 'Primary' } }),
+            label: {literalString: 'Primary'},
+            action: {type: 'click'},
+            child: this.createComponent('Text', {text: {literalString: 'Primary'}}),
           }),
           this.createComponent('Button', {
-            label: { literalString: 'Secondary' },
-            action: { type: 'click' },
-            child: this.createComponent('Text', { text: { literalString: 'Secondary' } }),
+            label: {literalString: 'Secondary'},
+            action: {type: 'click'},
+            child: this.createComponent('Text', {text: {literalString: 'Secondary'}}),
           }),
         ],
         distribution: 'space-around',
@@ -256,12 +256,12 @@ export class LibraryComponent {
       surface: this.createSingleComponentSurface('Column', {
         children: [
           this.createComponent('CheckBox', {
-            label: { literalString: 'Unchecked' },
-            value: { literalBoolean: false },
+            label: {literalString: 'Unchecked'},
+            value: {literalBoolean: false},
           }),
           this.createComponent('CheckBox', {
-            label: { literalString: 'Checked' },
-            value: { literalBoolean: true },
+            label: {literalString: 'Checked'},
+            value: {literalBoolean: true},
           }),
         ],
       }),
@@ -274,12 +274,12 @@ export class LibraryComponent {
           this.createComponent('DateTimeInput', {
             enableDate: true,
             enableTime: false,
-            value: { literalString: '2025-12-09' },
+            value: {literalString: '2025-12-09'},
           }),
           this.createComponent('DateTimeInput', {
             enableDate: true,
             enableTime: true,
-            value: { literalString: '2025-12-09T12:00:00' },
+            value: {literalString: '2025-12-09T12:00:00'},
           }),
         ],
       }),
@@ -289,18 +289,18 @@ export class LibraryComponent {
       tag: 'Inputs',
       surface: this.createSingleComponentSurface('MultipleChoice', {
         options: [
-          { value: 'opt1', label: { literalString: 'Option 1' } },
-          { value: 'opt2', label: { literalString: 'Option 2' } },
-          { value: 'opt3', label: { literalString: 'Option 3' } },
+          {value: 'opt1', label: {literalString: 'Option 1'}},
+          {value: 'opt2', label: {literalString: 'Option 2'}},
+          {value: 'opt3', label: {literalString: 'Option 3'}},
         ],
-        selections: { literalString: 'opt1' },
+        selections: {literalString: 'opt1'},
       }),
     },
     {
       name: 'Slider',
       tag: 'Inputs',
       surface: this.createSingleComponentSurface('Slider', {
-        value: { literalNumber: 50 },
+        value: {literalNumber: 50},
         minValue: 0,
         maxValue: 100,
       }),
@@ -311,13 +311,13 @@ export class LibraryComponent {
       surface: this.createSingleComponentSurface('Column', {
         children: [
           this.createComponent('TextField', {
-            label: { literalString: 'Standard Input' },
-            text: { literalString: 'Some text' },
+            label: {literalString: 'Standard Input'},
+            text: {literalString: 'Some text'},
           }),
           this.createComponent('TextField', {
-            label: { literalString: 'Password' },
+            label: {literalString: 'Password'},
             type: 'password',
-            text: { literalString: '' },
+            text: {literalString: ''},
           }),
         ],
       }),
@@ -332,7 +332,7 @@ export class LibraryComponent {
           name: 'Card',
           surface: this.createSingleComponentSurface('Card', {
             child: this.createComponent('Text', {
-              text: { literalString: 'Content inside a card' },
+              text: {literalString: 'Content inside a card'},
             }),
           }),
         },
@@ -340,9 +340,9 @@ export class LibraryComponent {
           name: 'Column',
           surface: this.createSingleComponentSurface('Column', {
             children: [
-              this.createComponent('Text', { text: { literalString: 'Item 1' } }),
-              this.createComponent('Text', { text: { literalString: 'Item 2' } }),
-              this.createComponent('Text', { text: { literalString: 'Item 3' } }),
+              this.createComponent('Text', {text: {literalString: 'Item 1'}}),
+              this.createComponent('Text', {text: {literalString: 'Item 2'}}),
+              this.createComponent('Text', {text: {literalString: 'Item 3'}}),
             ],
             alignment: 'center',
             distribution: 'space-around',
@@ -352,9 +352,9 @@ export class LibraryComponent {
           name: 'Divider',
           surface: this.createSingleComponentSurface('Column', {
             children: [
-              this.createComponent('Text', { text: { literalString: 'Above Divider' } }),
+              this.createComponent('Text', {text: {literalString: 'Above Divider'}}),
               this.createComponent('Divider', {}),
-              this.createComponent('Text', { text: { literalString: 'Below Divider' } }),
+              this.createComponent('Text', {text: {literalString: 'Below Divider'}}),
             ],
           }),
         },
@@ -362,9 +362,9 @@ export class LibraryComponent {
           name: 'List',
           surface: this.createSingleComponentSurface('List', {
             children: [
-              this.createComponent('Text', { text: { literalString: 'List Item 1' } }),
-              this.createComponent('Text', { text: { literalString: 'List Item 2' } }),
-              this.createComponent('Text', { text: { literalString: 'List Item 3' } }),
+              this.createComponent('Text', {text: {literalString: 'List Item 1'}}),
+              this.createComponent('Text', {text: {literalString: 'List Item 2'}}),
+              this.createComponent('Text', {text: {literalString: 'List Item 3'}}),
             ],
             direction: 'vertical',
           }),
@@ -373,12 +373,12 @@ export class LibraryComponent {
           name: 'Modal',
           surface: this.createSingleComponentSurface('Modal', {
             entryPointChild: this.createComponent('Button', {
-              action: { type: 'none' },
-              child: this.createComponent('Text', { text: { literalString: 'Open Modal' } }),
+              action: {type: 'none'},
+              child: this.createComponent('Text', {text: {literalString: 'Open Modal'}}),
             }),
             contentChild: this.createComponent('Card', {
               child: this.createComponent('Text', {
-                text: { literalString: 'This is the modal content.' },
+                text: {literalString: 'This is the modal content.'},
               }),
             }),
           }),
@@ -387,9 +387,9 @@ export class LibraryComponent {
           name: 'Row',
           surface: this.createSingleComponentSurface('Row', {
             children: [
-              this.createComponent('Text', { text: { literalString: 'Left' } }),
-              this.createComponent('Text', { text: { literalString: 'Center' } }),
-              this.createComponent('Text', { text: { literalString: 'Right' } }),
+              this.createComponent('Text', {text: {literalString: 'Left'}}),
+              this.createComponent('Text', {text: {literalString: 'Center'}}),
+              this.createComponent('Text', {text: {literalString: 'Right'}}),
             ],
             alignment: 'center',
             distribution: 'space-between',
@@ -400,15 +400,15 @@ export class LibraryComponent {
           surface: this.createSingleComponentSurface('Tabs', {
             tabItems: [
               {
-                title: { literalString: 'Tab 1' },
+                title: {literalString: 'Tab 1'},
                 child: this.createComponent('Text', {
-                  text: { literalString: 'Content for Tab 1' },
+                  text: {literalString: 'Content for Tab 1'},
                 }),
               },
               {
-                title: { literalString: 'Tab 2' },
+                title: {literalString: 'Tab 2'},
                 child: this.createComponent('Text', {
-                  text: { literalString: 'Content for Tab 2' },
+                  text: {literalString: 'Content for Tab 2'},
                 }),
               },
             ],
@@ -418,10 +418,10 @@ export class LibraryComponent {
           name: 'Text',
           surface: this.createSingleComponentSurface('Column', {
             children: [
-              this.createComponent('Heading', { text: { literalString: 'Heading Text' } }),
-              this.createComponent('Text', { text: { literalString: 'Standard body text.' } }),
+              this.createComponent('Heading', {text: {literalString: 'Heading Text'}}),
+              this.createComponent('Text', {text: {literalString: 'Standard body text.'}}),
               this.createComponent('Text', {
-                text: { literalString: 'Caption text' },
+                text: {literalString: 'Caption text'},
                 usageHint: 'caption',
               }),
             ],
@@ -435,16 +435,16 @@ export class LibraryComponent {
         {
           name: 'AudioPlayer',
           surface: this.createSingleComponentSurface('AudioPlayer', {
-            url: { literalString: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3' },
+            url: {literalString: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'},
           }),
         },
         {
           name: 'Icon',
           surface: this.createSingleComponentSurface('Row', {
             children: [
-              this.createComponent('Icon', { name: { literalString: 'home' } }),
-              this.createComponent('Icon', { name: { literalString: 'favorite' } }),
-              this.createComponent('Icon', { name: { literalString: 'settings' } }),
+              this.createComponent('Icon', {name: {literalString: 'home'}}),
+              this.createComponent('Icon', {name: {literalString: 'favorite'}}),
+              this.createComponent('Icon', {name: {literalString: 'settings'}}),
             ],
             distribution: 'space-around',
           }),
@@ -452,7 +452,7 @@ export class LibraryComponent {
         {
           name: 'Image',
           surface: this.createSingleComponentSurface('Image', {
-            url: { literalString: 'https://picsum.photos/id/10/300/200' },
+            url: {literalString: 'https://picsum.photos/id/10/300/200'},
           }),
         },
         {
@@ -474,14 +474,14 @@ export class LibraryComponent {
           surface: this.createSingleComponentSurface('Row', {
             children: [
               this.createComponent('Button', {
-                label: { literalString: 'Primary' },
-                action: { type: 'click' },
-                child: this.createComponent('Text', { text: { literalString: 'Primary' } }),
+                label: {literalString: 'Primary'},
+                action: {type: 'click'},
+                child: this.createComponent('Text', {text: {literalString: 'Primary'}}),
               }),
               this.createComponent('Button', {
-                label: { literalString: 'Secondary' },
-                action: { type: 'click' },
-                child: this.createComponent('Text', { text: { literalString: 'Secondary' } }),
+                label: {literalString: 'Secondary'},
+                action: {type: 'click'},
+                child: this.createComponent('Text', {text: {literalString: 'Secondary'}}),
               }),
             ],
             distribution: 'space-around',
@@ -492,12 +492,12 @@ export class LibraryComponent {
           surface: this.createSingleComponentSurface('Column', {
             children: [
               this.createComponent('CheckBox', {
-                label: { literalString: 'Unchecked' },
-                value: { literalBoolean: false },
+                label: {literalString: 'Unchecked'},
+                value: {literalBoolean: false},
               }),
               this.createComponent('CheckBox', {
-                label: { literalString: 'Checked' },
-                value: { literalBoolean: true },
+                label: {literalString: 'Checked'},
+                value: {literalBoolean: true},
               }),
             ],
           }),
@@ -509,12 +509,12 @@ export class LibraryComponent {
               this.createComponent('DateTimeInput', {
                 enableDate: true,
                 enableTime: false,
-                value: { literalString: '2025-12-09' },
+                value: {literalString: '2025-12-09'},
               }),
               this.createComponent('DateTimeInput', {
                 enableDate: true,
                 enableTime: true,
-                value: { literalString: '2025-12-09T12:00:00' },
+                value: {literalString: '2025-12-09T12:00:00'},
               }),
             ],
           }),
@@ -523,17 +523,17 @@ export class LibraryComponent {
           name: 'MultipleChoice',
           surface: this.createSingleComponentSurface('MultipleChoice', {
             options: [
-              { value: 'opt1', label: { literalString: 'Option 1' } },
-              { value: 'opt2', label: { literalString: 'Option 2' } },
-              { value: 'opt3', label: { literalString: 'Option 3' } },
+              {value: 'opt1', label: {literalString: 'Option 1'}},
+              {value: 'opt2', label: {literalString: 'Option 2'}},
+              {value: 'opt3', label: {literalString: 'Option 3'}},
             ],
-            selections: { literalString: 'opt1' },
+            selections: {literalString: 'opt1'},
           }),
         },
         {
           name: 'Slider',
           surface: this.createSingleComponentSurface('Slider', {
-            value: { literalNumber: 50 },
+            value: {literalNumber: 50},
             minValue: 0,
             maxValue: 100,
           }),
@@ -543,13 +543,13 @@ export class LibraryComponent {
           surface: this.createSingleComponentSurface('Column', {
             children: [
               this.createComponent('TextField', {
-                label: { literalString: 'Standard Input' },
-                text: { literalString: 'Some text' },
+                label: {literalString: 'Standard Input'},
+                text: {literalString: 'Some text'},
               }),
               this.createComponent('TextField', {
-                label: { literalString: 'Password' },
+                label: {literalString: 'Password'},
                 type: 'password',
-                text: { literalString: '' },
+                text: {literalString: ''},
               }),
             ],
           }),
diff --git a/samples/client/angular/projects/gallery/src/app/features/library/library.css b/samples/client/angular/projects/gallery/src/app/features/library/library.css
index 42a31f7f6..f1e4e66d1 100644
--- a/samples/client/angular/projects/gallery/src/app/features/library/library.css
+++ b/samples/client/angular/projects/gallery/src/app/features/library/library.css
@@ -26,7 +26,7 @@ dialog {
   transition:
     opacity 0.2s ease-out,
     transform 0.2s ease-out;
-  display: flex; 
+  display: flex;
   flex-direction: column;
 }
 
@@ -48,8 +48,8 @@ dialog[open]::backdrop {
 }
 
 dialog article {
-  flex-grow: 1; 
-  display: flex; 
+  flex-grow: 1;
+  display: flex;
   flex-direction: column;
 }
 
@@ -87,8 +87,8 @@ dialog .dialog-content-grid {
   flex-grow: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1.5rem; 
-  height: 100%; 
+  gap: 1.5rem;
+  height: 100%;
   align-items: stretch;
 }
 
@@ -104,13 +104,13 @@ dialog .dialog-content-grid > .block-surface {
 }
 
 .json-pane pre {
-  background-color: #272822; 
-  color: #f8f8f2;            
-  padding: 1em;              
-  border-radius: 4px;        
+  background-color: #272822;
+  color: #f8f8f2;
+  padding: 1em;
+  border-radius: 4px;
   flex-grow: 1;
-  overflow: auto; 
+  overflow: auto;
   height: 100%;
   white-space: pre-wrap;
-  word-break: break-word; 
-}
\ No newline at end of file
+  word-break: break-word;
+}
diff --git a/samples/client/angular/projects/gallery/src/app/features/library/library.html b/samples/client/angular/projects/gallery/src/app/features/library/library.html
index 879c18f80..4a552744d 100644
--- a/samples/client/angular/projects/gallery/src/app/features/library/library.html
+++ b/samples/client/angular/projects/gallery/src/app/features/library/library.html
@@ -13,7 +13,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
- 
+
 <section class="block-gallery">
   @for (block of blocks; track block.name) {
     <article class="block-card" (click)="openDialog(block)" animate.enter="fade-in">
@@ -40,11 +40,11 @@
           />
         </section>
         <section class="json-pane">
-            <pre>{{ getJson(selectedBlock.surface) }}</pre>
+          <pre>{{ getJson(selectedBlock.surface) }}</pre>
         </section>
       </div>
     } @else {
       <h3>Please select a component from the gallery</h3>
     }
   </article>
-</dialog>
\ No newline at end of file
+</dialog>
diff --git a/samples/client/angular/projects/gallery/src/app/theme.ts b/samples/client/angular/projects/gallery/src/app/theme.ts
index 626adc0f5..a3454b821 100644
--- a/samples/client/angular/projects/gallery/src/app/theme.ts
+++ b/samples/client/angular/projects/gallery/src/app/theme.ts
@@ -160,16 +160,16 @@ const video = {
   'layout-el-cv': true,
 };
 
-const aLight = Styles.merge(a, { 'color-c-p30': true });
-const inputLight = Styles.merge(input, { 'color-c-n5': true });
-const textareaLight = Styles.merge(textarea, { 'color-c-n5': true });
-const buttonLight = Styles.merge(button, { 'color-c-n100': true });
-const h1Light = Styles.merge(h1, { 'color-c-n5': true });
-const h2Light = Styles.merge(h2, { 'color-c-n5': true });
-const h3Light = Styles.merge(h3, { 'color-c-n5': true });
-const bodyLight = Styles.merge(body, { 'color-c-n5': true });
-const pLight = Styles.merge(p, { 'color-c-n60': true });
-const preLight = Styles.merge(pre, { 'color-c-n35': true });
+const aLight = Styles.merge(a, {'color-c-p30': true});
+const inputLight = Styles.merge(input, {'color-c-n5': true});
+const textareaLight = Styles.merge(textarea, {'color-c-n5': true});
+const buttonLight = Styles.merge(button, {'color-c-n100': true});
+const h1Light = Styles.merge(h1, {'color-c-n5': true});
+const h2Light = Styles.merge(h2, {'color-c-n5': true});
+const h3Light = Styles.merge(h3, {'color-c-n5': true});
+const bodyLight = Styles.merge(body, {'color-c-n5': true});
+const pLight = Styles.merge(p, {'color-c-n60': true});
+const preLight = Styles.merge(pre, {'color-c-n35': true});
 const orderedListLight = Styles.merge(orderedList, {
   'color-c-n35': true,
 });
@@ -299,7 +299,7 @@ export const theme: Types.Theme = {
       'layout-p-2': true,
     },
     Modal: {
-      backdrop: { 'color-bbgc-p60_20': true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
         'border-br-2': true,
         'color-bgc-p100': true,
@@ -325,7 +325,7 @@ export const theme: Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
diff --git a/samples/client/angular/projects/gallery/src/main.ts b/samples/client/angular/projects/gallery/src/main.ts
index c1861c62b..3b5046207 100644
--- a/samples/client/angular/projects/gallery/src/main.ts
+++ b/samples/client/angular/projects/gallery/src/main.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {App} from './app/app';
 
-bootstrapApplication(App, appConfig).catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch(err => console.error(err));
diff --git a/samples/client/angular/projects/gallery/src/styles.css b/samples/client/angular/projects/gallery/src/styles.css
index ffb4234a4..06750be00 100644
--- a/samples/client/angular/projects/gallery/src/styles.css
+++ b/samples/client/angular/projects/gallery/src/styles.css
@@ -205,4 +205,4 @@ body {
 }
 .fade-in {
   animation: fade-in 0.2s ease-out forwards;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/gallery/tsconfig.app.json b/samples/client/angular/projects/gallery/tsconfig.app.json
index dedf218fb..76bbc3982 100644
--- a/samples/client/angular/projects/gallery/tsconfig.app.json
+++ b/samples/client/angular/projects/gallery/tsconfig.app.json
@@ -2,14 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }
diff --git a/samples/client/angular/projects/lib/ng-package.json b/samples/client/angular/projects/lib/ng-package.json
index bfd600420..a2d1bdda6 100644
--- a/samples/client/angular/projects/lib/ng-package.json
+++ b/samples/client/angular/projects/lib/ng-package.json
@@ -4,8 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "allowedNonPeerDependencies": [
-    "markdown-it",
-    "@a2ui/web_core"
-  ]
+  "allowedNonPeerDependencies": ["markdown-it", "@a2ui/web_core"]
 }
diff --git a/samples/client/angular/projects/lib/tsconfig.lib.json b/samples/client/angular/projects/lib/tsconfig.lib.json
index 7bd71c935..302c7bdc4 100644
--- a/samples/client/angular/projects/lib/tsconfig.lib.json
+++ b/samples/client/angular/projects/lib/tsconfig.lib.json
@@ -7,10 +7,6 @@
     "inlineSources": true,
     "types": []
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
 }
diff --git a/samples/client/angular/projects/mcp_calculator/README.md b/samples/client/angular/projects/mcp_calculator/README.md
index 498843813..7a79000e5 100644
--- a/samples/client/angular/projects/mcp_calculator/README.md
+++ b/samples/client/angular/projects/mcp_calculator/README.md
@@ -30,8 +30,8 @@ Once the application is running, open `http://localhost:4200/` in your browser.
 
 You can perform calculations using standard operations. When computing the expression, there are two different "equals" buttons:
 
--   **Local JavaScript Calculation (💻 =)**: Click this button to evaluate the expression immediately using standard JavaScript in the browser. The result will appear in the calculator display.
--   **MCP Agent Tool Call Calculation (🤖 =)**: Click this button to dispatch a tool call to the MCP server. The local display will reset, and the calculation will be handled by the agent asynchronously (the result will appear in the chat conversation).
+- **Local JavaScript Calculation (💻 =)**: Click this button to evaluate the expression immediately using standard JavaScript in the browser. The result will appear in the calculator display.
+- **MCP Agent Tool Call Calculation (🤖 =)**: Click this button to dispatch a tool call to the MCP server. The local display will reset, and the calculation will be handled by the agent asynchronously (the result will appear in the chat conversation).
 
 ## Features
 
diff --git a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/catalog.ts b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/catalog.ts
index 82f58fb61..f20087f16 100644
--- a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/catalog.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/catalog.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { Catalog } from '@a2ui/angular';
-import { inputBinding } from '@angular/core';
+import {Catalog} from '@a2ui/angular';
+import {inputBinding} from '@angular/core';
 
 export const DEMO_CATALOG = {
   McpApp: {
-    type: () => import('./mcp-app').then((r) => r.McpApp),
-    bindings: ({ properties }) => [
+    type: () => import('./mcp-app').then(r => r.McpApp),
+    bindings: ({properties}) => [
       inputBinding(
         'content',
         () => ('content' in properties && properties['content']) || undefined,
@@ -29,8 +29,8 @@ export const DEMO_CATALOG = {
     ],
   },
   PongScoreBoard: {
-    type: () => import('./pong-scoreboard').then((r) => r.PongScoreBoard),
-    bindings: ({ properties }) => [
+    type: () => import('./pong-scoreboard').then(r => r.PongScoreBoard),
+    bindings: ({properties}) => [
       inputBinding(
         'playerScore',
         () => ('playerScore' in properties && properties['playerScore']) || undefined,
@@ -42,21 +42,22 @@ export const DEMO_CATALOG = {
     ],
   },
   PongLayout: {
-    type: () => import('./pong-layout').then((r) => r.PongLayout),
-    bindings: ({ properties }) => [
+    type: () => import('./pong-layout').then(r => r.PongLayout),
+    bindings: ({properties}) => [
       inputBinding(
         'mcpComponent',
         () => ('mcpComponent' in properties && properties['mcpComponent']) || undefined,
       ),
       inputBinding(
         'scoreboardComponent',
-        () => ('scoreboardComponent' in properties && properties['scoreboardComponent']) || undefined,
+        () =>
+          ('scoreboardComponent' in properties && properties['scoreboardComponent']) || undefined,
       ),
     ],
   },
   Column: {
-    type: () => import('@a2ui/angular').then((r) => r.Column),
-    bindings: ({ properties }) => [
+    type: () => import('@a2ui/angular').then(r => r.Column),
+    bindings: ({properties}) => [
       inputBinding(
         'alignment',
         () => ('alignment' in properties && properties['alignment']) || undefined,
diff --git a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts
index 2b5f77815..02073b88c 100644
--- a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/mcp-app.ts
@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
 import {
@@ -36,7 +36,7 @@ import {
   Signal,
   viewChild,
 } from '@angular/core';
-import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';
+import {DomSanitizer, SafeHtml, SafeResourceUrl} from '@angular/platform-browser';
 
 @Component({
   selector: 'a2ui-mcp-app',
@@ -69,10 +69,7 @@ import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-brows
     }
   `,
 })
-export class McpApp
-  extends DynamicComponent<Types.CustomNode>
-  implements OnDestroy, OnInit
-{
+export class McpApp extends DynamicComponent<Types.CustomNode> implements OnDestroy, OnInit {
   private readonly sanitizer = inject(DomSanitizer);
 
   readonly content = input.required<Primitives.StringValue | null>();
@@ -88,10 +85,12 @@ export class McpApp
     const rawContent = this.resolvedContent();
     const bridge = this.appBridge();
     if (bridge && rawContent) {
-      bridge.sendSandboxResourceReady({
-        html: rawContent,
-        sandbox: 'allow-scripts',
-      }).catch(err => console.error('Failed to update sandbox content:', err));
+      bridge
+        .sendSandboxResourceReady({
+          html: rawContent,
+          sandbox: 'allow-scripts',
+        })
+        .catch(err => console.error('Failed to update sandbox content:', err));
     }
   });
 
@@ -102,7 +101,7 @@ export class McpApp
   );
 
   protected readonly iframeSrc = signal<SafeResourceUrl | null>(
-    this.sanitizer.bypassSecurityTrustResourceUrl('about:blank')
+    this.sanitizer.bypassSecurityTrustResourceUrl('about:blank'),
   );
 
   private iframe = viewChild.required<ElementRef<HTMLIFrameElement>>('iframe');
@@ -142,7 +141,6 @@ export class McpApp
 
     window.addEventListener('message', this.messageHandler);
 
-    
     // Check for query param to opt-out of origin toggle (for testing)
     const urlParams = new URLSearchParams(window.location.search);
     const disableSecuritySelfTest = urlParams.get('disable_security_self_test') === 'true';
@@ -152,9 +150,7 @@ export class McpApp
     if (disableSecuritySelfTest) {
       sandboxUrl += '?disable_security_self_test=true';
     }
-    this.iframeSrc.set(
-      this.sanitizer.bypassSecurityTrustResourceUrl(sandboxUrl),
-    );
+    this.iframeSrc.set(this.sanitizer.bypassSecurityTrustResourceUrl(sandboxUrl));
   }
 
   private async initializeBridge() {
@@ -169,7 +165,7 @@ export class McpApp
     const emptyMcpClient = null;
     const bridge = new AppBridge(
       emptyMcpClient,
-      { name: 'MCP Calculator', version: '1.0.0' },
+      {name: 'MCP Calculator', version: '1.0.0'},
       {
         openLinks: {},
         logging: {},
@@ -177,7 +173,7 @@ export class McpApp
       },
     );
 
-    bridge.onloggingmessage = (params) => {
+    bridge.onloggingmessage = params => {
       console.log(`[MCP App Log] ${params.level}:`, params.data);
     };
 
@@ -185,7 +181,7 @@ export class McpApp
       console.log('MCP App Initialized');
     };
 
-    bridge.onsizechange = ({ width, height }) => {
+    bridge.onsizechange = ({width, height}) => {
       // TODO: Implement dynamic resizing
       // Reference implementation in mcp-apps-custom-component.ts:
       // - Listen for size changes from the embedded app
@@ -199,7 +195,7 @@ export class McpApp
       console.log(`[MCP App] Resize requested: ${width}x${height}`);
     };
 
-    bridge.oncalltool = async (params) => {
+    bridge.oncalltool = async params => {
       console.log(`[MCP App] Tool call requested: ${params.name}`, params);
 
       if (!this.allowedTools().includes(params.name)) {
@@ -208,16 +204,16 @@ export class McpApp
       }
 
       const args = params.arguments || {};
-      
+
       // Map arguments to A2UI Action context
       const context: any[] = [];
       for (const [key, value] of Object.entries(args)) {
         if (typeof value === 'number') {
-          context.push({ key, value: { literalNumber: value } });
+          context.push({key, value: {literalNumber: value}});
         } else if (typeof value === 'string') {
-          context.push({ key, value: { literalString: value } });
+          context.push({key, value: {literalString: value}});
         } else if (typeof value === 'boolean') {
-          context.push({ key, value: { literalBoolean: value } });
+          context.push({key, value: {literalBoolean: value}});
         }
       }
 
@@ -229,12 +225,10 @@ export class McpApp
       console.log('Sending action:', action);
 
       // Dispatch action asynchronously to the host/agent
-      super.sendAction(action).catch((err) =>
-        console.error('Failed to send action:', err),
-      );
+      super.sendAction(action).catch(err => console.error('Failed to send action:', err));
 
       // Return empty result immediately (calculator UI can forget about it)
-      return { content: [] };
+      return {content: []};
     };
 
     // Connect the bridge
diff --git a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-layout.ts b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-layout.ts
index c7a2ff7c2..97a6b929f 100644
--- a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-layout.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-layout.ts
@@ -13,26 +13,38 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DynamicComponent } from '../../../../projects/lib/src/public-api';
-import { Renderer } from '../../../../projects/lib/src/v0_8/rendering/renderer';
-import { Component, input } from '@angular/core';
+import {DynamicComponent} from '../../../../projects/lib/src/public-api';
+import {Renderer} from '../../../../projects/lib/src/v0_8/rendering/renderer';
+import {Component, input} from '@angular/core';
 
 @Component({
   selector: 'a2ui-pong-layout',
   standalone: true,
   imports: [Renderer],
   template: `
-    <div style="display: flex; flex-direction: row; width: 100%; max-width: 900px; margin: 0 auto; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);">
-      <div style="width: 200px; border-right: 1px solid #e8eaed; display: flex; flex-direction: column; background: #ffffff; z-index: 1;">
-        <ng-container a2ui-renderer [component]="scoreboardComponent()" [surfaceId]="surfaceId()!"></ng-container>
+    <div
+      style="display: flex; flex-direction: row; width: 100%; max-width: 900px; margin: 0 auto; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1);"
+    >
+      <div
+        style="width: 200px; border-right: 1px solid #e8eaed; display: flex; flex-direction: column; background: #ffffff; z-index: 1;"
+      >
+        <ng-container
+          a2ui-renderer
+          [component]="scoreboardComponent()"
+          [surfaceId]="surfaceId()!"
+        ></ng-container>
       </div>
       <div style="flex: 1; min-height: 440px; position: relative;">
-        <ng-container a2ui-renderer [component]="mcpComponent()" [surfaceId]="surfaceId()!"></ng-container>
+        <ng-container
+          a2ui-renderer
+          [component]="mcpComponent()"
+          [surfaceId]="surfaceId()!"
+        ></ng-container>
       </div>
     </div>
   `,
 })
 export class PongLayout extends DynamicComponent<any> {
-    readonly mcpComponent = input<any>(null);
-    readonly scoreboardComponent = input<any>(null);
+  readonly mcpComponent = input<any>(null);
+  readonly scoreboardComponent = input<any>(null);
 }
diff --git a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-scoreboard.ts b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-scoreboard.ts
index 34bd0f9fa..fe8a461a7 100644
--- a/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-scoreboard.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/a2ui-catalog/pong-scoreboard.ts
@@ -14,15 +14,10 @@
  * limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
 
 @Component({
   selector: 'a2ui-pong-scoreboard',
@@ -85,12 +80,12 @@ import {
       padding: 1rem;
       border: 1px solid #e8eaed;
       transition: all 0.2s ease;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
       width: 100%;
       box-sizing: border-box;
     }
     .score-card:hover {
-      box-shadow: 0 4px 6px rgba(0,0,0,0.08);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
       transform: translateY(-2px);
       border-color: #d2e3fc;
     }
@@ -116,9 +111,7 @@ import {
     }
   `,
   template: `
-    <div class="a2ui-badge">
-      <span class="a2ui-icon">✦</span> A2UI Native
-    </div>
+    <div class="a2ui-badge"><span class="a2ui-icon">✦</span> A2UI Native</div>
     <div class="scores-wrapper">
       <div class="score-card player-card">
         <span class="score-label">Player</span>
@@ -131,16 +124,14 @@ import {
     </div>
   `,
 })
-export class PongScoreBoard
-  extends DynamicComponent<Types.CustomNode>
-{
+export class PongScoreBoard extends DynamicComponent<Types.CustomNode> {
   readonly playerScore = input<Primitives.NumberValue | null>();
-  protected readonly resolvedPlayerScore = computed<number>(() =>
-    super.resolvePrimitive(this.playerScore() ?? null) ?? 0
+  protected readonly resolvedPlayerScore = computed<number>(
+    () => super.resolvePrimitive(this.playerScore() ?? null) ?? 0,
   );
 
   readonly cpuScore = input<Primitives.NumberValue | null>();
-  protected readonly resolvedCpuScore = computed<number>(() =>
-    super.resolvePrimitive(this.cpuScore() ?? null) ?? 0
+  protected readonly resolvedCpuScore = computed<number>(
+    () => super.resolvePrimitive(this.cpuScore() ?? null) ?? 0,
   );
 }
diff --git a/samples/client/angular/projects/mcp_calculator/src/app/app.config.server.ts b/samples/client/angular/projects/mcp_calculator/src/app/app.config.server.ts
index 125e66bed..b27c47b15 100644
--- a/samples/client/angular/projects/mcp_calculator/src/app/app.config.server.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/app/app.config.server.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
-import { provideServerRendering, withRoutes } from '@angular/ssr';
-import { appConfig } from './app.config';
-import { serverRoutes } from './app.routes.server';
+import {ApplicationConfig, mergeApplicationConfig} from '@angular/core';
+import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {appConfig} from './app.config';
+import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
   providers: [provideServerRendering(withRoutes(serverRoutes))],
diff --git a/samples/client/angular/projects/mcp_calculator/src/app/app.config.ts b/samples/client/angular/projects/mcp_calculator/src/app/app.config.ts
index 60835c163..13e1ac720 100644
--- a/samples/client/angular/projects/mcp_calculator/src/app/app.config.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/app/app.config.ts
@@ -25,9 +25,9 @@ import {
   provideBrowserGlobalErrorListeners,
   provideZonelessChangeDetection,
 } from '@angular/core';
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { DEMO_CATALOG } from '../a2ui-catalog/catalog';
-import { A2aServiceImpl } from '../services/a2a-service-impl';
+import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
+import {DEMO_CATALOG} from '../a2ui-catalog/catalog';
+import {A2aServiceImpl} from '../services/a2a-service-impl';
 
 export const appConfig: ApplicationConfig = {
   providers: [
diff --git a/samples/client/angular/projects/mcp_calculator/src/app/app.html b/samples/client/angular/projects/mcp_calculator/src/app/app.html
index bdf5e9b3b..65fcee600 100644
--- a/samples/client/angular/projects/mcp_calculator/src/app/app.html
+++ b/samples/client/angular/projects/mcp_calculator/src/app/app.html
@@ -20,27 +20,23 @@
 
 <ng-template #welcomeMessage>
   <div class="empty-history">
-      <div class="agent-header">
-        <div class="agent-header-part agent-name">
-          <strong>{{ agentName() }}</strong>
-        </div>
-      </div>
-      <br />
-
-      <p class="empty-history-text">
-        I summon a calculator app served from an MCP server over A2UI.
-      </p>
-      <div class="suggestion-chips">
-        <button mat-stroked-button class="chip" (click)="sendMessage('Open Calculator')">
-          <span class="material-icons-outlined">calculate</span>
-          Open Calculator from MCP Server
-        </button>
-        <button mat-stroked-button class="chip" (click)="sendMessage('Open Pong')">
-          <span class="material-icons-outlined">videogame_asset</span>
-          Open Pong from HTML File
-        </button>
+    <div class="agent-header">
+      <div class="agent-header-part agent-name">
+        <strong>{{ agentName() }}</strong>
       </div>
+    </div>
+    <br />
+
+    <p class="empty-history-text">I summon a calculator app served from an MCP server over A2UI.</p>
+    <div class="suggestion-chips">
+      <button mat-stroked-button class="chip" (click)="sendMessage('Open Calculator')">
+        <span class="material-icons-outlined">calculate</span>
+        Open Calculator from MCP Server
+      </button>
+      <button mat-stroked-button class="chip" (click)="sendMessage('Open Pong')">
+        <span class="material-icons-outlined">videogame_asset</span>
+        Open Pong from HTML File
+      </button>
+    </div>
   </div>
 </ng-template>
-
-
diff --git a/samples/client/angular/projects/mcp_calculator/src/app/app.routes.server.ts b/samples/client/angular/projects/mcp_calculator/src/app/app.routes.server.ts
index 6e22a0113..417bd7b43 100644
--- a/samples/client/angular/projects/mcp_calculator/src/app/app.routes.server.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/app/app.routes.server.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { RenderMode, ServerRoute } from '@angular/ssr';
+import {RenderMode, ServerRoute} from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
   {
diff --git a/samples/client/angular/projects/mcp_calculator/src/app/app.scss b/samples/client/angular/projects/mcp_calculator/src/app/app.scss
index dff7732af..570c4fc61 100644
--- a/samples/client/angular/projects/mcp_calculator/src/app/app.scss
+++ b/samples/client/angular/projects/mcp_calculator/src/app/app.scss
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 main {
-    height: 100vh;
+  height: 100vh;
 }
 
 .empty-history {
@@ -44,12 +44,7 @@ main {
 }
 
 .agent-name {
-  background: linear-gradient(
-    90deg,
-    #217bfe 28.03%,
-    #078efb 49.56%,
-    #ac87eb 71.1%
-  );
+  background: linear-gradient(90deg, #217bfe 28.03%, #078efb 49.56%, #ac87eb 71.1%);
   background-clip: text;
   color: transparent;
 }
@@ -64,17 +59,17 @@ main {
 
 .chip {
   // Override Material button styles to look like a chip
-    border-radius: 100px !important; // Force pill shape
-    padding: 10px 16px !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    height: auto !important;
-    line-height: 25px !important; // Match icon height
+  border-radius: 100px !important; // Force pill shape
+  padding: 10px 16px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  height: auto !important;
+  line-height: 25px !important; // Match icon height
   .material-icons-outlined {
     font-size: 20px;
     margin-right: 8px;
-      line-height: 1; // Prevent icon from affecting line height
-      position: relative;
-      top: 4px; // Move icon down slightly to match text
+    line-height: 1; // Prevent icon from affecting line height
+    position: relative;
+    top: 4px; // Move icon down slightly to match text
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/mcp_calculator/src/app/app.ts b/samples/client/angular/projects/mcp_calculator/src/app/app.ts
index 2f91c641d..2ff7ad0cc 100644
--- a/samples/client/angular/projects/mcp_calculator/src/app/app.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/app/app.ts
@@ -14,16 +14,10 @@
  * limitations under the License.
  */
 
-import { A2aChatCanvas } from '@a2a_chat_canvas/a2a-chat-canvas';
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  signal,
-} from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-
+import {A2aChatCanvas} from '@a2a_chat_canvas/a2a-chat-canvas';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 
 @Component({
   selector: 'app-root',
@@ -34,11 +28,9 @@ import { MatButtonModule } from '@angular/material/button';
   changeDetection: ChangeDetectionStrategy.Eager,
 })
 export class App {
-
   protected readonly agentName = signal('MCP Calculator');
   private readonly chatService = inject(ChatService);
 
-
   sendMessage(text: string) {
     this.chatService.sendMessage(text);
   }
diff --git a/samples/client/angular/projects/mcp_calculator/src/main.server.ts b/samples/client/angular/projects/mcp_calculator/src/main.server.ts
index fcfe120c8..5bad09f44 100644
--- a/samples/client/angular/projects/mcp_calculator/src/main.server.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/main.server.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
-import { config } from './app/app.config.server';
+import {BootstrapContext, bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {config} from './app/app.config.server';
 
 const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
 
diff --git a/samples/client/angular/projects/mcp_calculator/src/main.ts b/samples/client/angular/projects/mcp_calculator/src/main.ts
index 3c4480110..98aa73d70 100644
--- a/samples/client/angular/projects/mcp_calculator/src/main.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/main.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
-import { appConfig } from './app/app.config';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {appConfig} from './app/app.config';
 
-bootstrapApplication(App, appConfig).catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch(err => console.error(err));
diff --git a/samples/client/angular/projects/mcp_calculator/src/server.ts b/samples/client/angular/projects/mcp_calculator/src/server.ts
index 3a15c8ec2..17a4c19cc 100644
--- a/samples/client/angular/projects/mcp_calculator/src/server.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/server.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { MessageSendParams, Part, SendMessageResponse } from '@a2a-js/sdk';
-import { A2AClient } from '@a2a-js/sdk/client';
+import {MessageSendParams, Part, SendMessageResponse} from '@a2a-js/sdk';
+import {A2AClient} from '@a2a-js/sdk/client';
 import {
   AngularNodeAppEngine,
   createNodeRequestHandler,
@@ -23,8 +23,8 @@ import {
   writeResponseToNodeResponse,
 } from '@angular/ssr/node';
 import express from 'express';
-import { join } from 'node:path';
-import { v4 as uuidv4 } from 'uuid';
+import {join} from 'node:path';
+import {v4 as uuidv4} from 'uuid';
 
 const browserDistFolder = join(import.meta.dirname, '../browser');
 const app = express();
@@ -42,7 +42,7 @@ app.use(
 app.post('/a2a', (req, res) => {
   let originalBody = '';
 
-  req.on('data', (chunk) => {
+  req.on('data', chunk => {
     originalBody += chunk.toString();
   });
 
@@ -74,7 +74,7 @@ app.post('/a2a', (req, res) => {
     try {
       client = await createOrGetClient();
     } catch (error) {
-      res.status(500).json({ error: 'Failed to create A2A client.' });
+      res.status(500).json({error: 'Failed to create A2A client.'});
       return;
     }
 
@@ -82,14 +82,14 @@ app.post('/a2a', (req, res) => {
     try {
       response = await client.sendMessage(sendParams);
     } catch (error) {
-      res.status(500).json({ error: 'Failed to send message.' });
+      res.status(500).json({error: 'Failed to send message.'});
       return;
     }
 
     res.set('Cache-Control', 'no-store');
 
     if ('error' in response) {
-      res.status(500).json({ error: JSON.stringify(response.error) });
+      res.status(500).json({error: JSON.stringify(response.error)});
       return;
     }
 
@@ -103,27 +103,27 @@ app.get('/a2a/agent-card', async (req, res) => {
       'http://localhost:10006/.well-known/agent-card.json',
     );
     if (!response.ok) {
-      res.status(response.status).json({ error: 'Failed to fetch agent card' });
+      res.status(response.status).json({error: 'Failed to fetch agent card'});
       return;
     }
     const card = await response.json();
     res.json(card);
   } catch (error) {
     console.error('Error fetching agent card:', error);
-    res.status(500).json({ error: 'Internal server error' });
+    res.status(500).json({error: 'Internal server error'});
   }
 });
 
 app.use((req, res, next) => {
   angularApp
     .handle(req)
-    .then((response) => (response ? writeResponseToNodeResponse(response, res) : next()))
+    .then(response => (response ? writeResponseToNodeResponse(response, res) : next()))
     .catch(next);
 });
 
 if (isMainModule(import.meta.url) || process.env['pm_id']) {
   const port = process.env['PORT'] || 4000;
-  app.listen(port, (error) => {
+  app.listen(port, error => {
     if (error) {
       throw error;
     }
@@ -135,7 +135,7 @@ if (isMainModule(import.meta.url) || process.env['pm_id']) {
 async function fetchWithCustomHeader(url: string | URL | Request, init?: RequestInit) {
   const headers = new Headers(init?.headers);
   headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.8');
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 }
 
diff --git a/samples/client/angular/projects/mcp_calculator/src/services/a2a-service-impl.ts b/samples/client/angular/projects/mcp_calculator/src/services/a2a-service-impl.ts
index 55ac70497..54634b5c1 100644
--- a/samples/client/angular/projects/mcp_calculator/src/services/a2a-service-impl.ts
+++ b/samples/client/angular/projects/mcp_calculator/src/services/a2a-service-impl.ts
@@ -14,18 +14,17 @@
  * limitations under the License.
  */
 
-import { AgentCard, Part, SendMessageSuccessResponse } from '@a2a-js/sdk';
-import { A2aService } from '@a2a_chat_canvas/interfaces/a2a-service';
-import { Injectable } from '@angular/core';
+import {AgentCard, Part, SendMessageSuccessResponse} from '@a2a-js/sdk';
+import {A2aService} from '@a2a_chat_canvas/interfaces/a2a-service';
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
 })
 export class A2aServiceImpl implements A2aService {
-
   async sendMessage(parts: Part[], signal?: AbortSignal): Promise<SendMessageSuccessResponse> {
     const response = await fetch('/a2a', {
-      body: JSON.stringify({ parts: parts }),
+      body: JSON.stringify({parts: parts}),
       method: 'POST',
       signal,
     });
@@ -35,7 +34,7 @@ export class A2aServiceImpl implements A2aService {
       return data;
     }
 
-    const error = (await response.json()) as { error: string };
+    const error = (await response.json()) as {error: string};
     throw new Error(error.error);
   }
 
@@ -44,7 +43,7 @@ export class A2aServiceImpl implements A2aService {
     if (!response.ok) {
       throw new Error('Failed to fetch agent card');
     }
-    const card = await response.json() as AgentCard;
+    const card = (await response.json()) as AgentCard;
     return card;
   }
 }
diff --git a/samples/client/angular/projects/mcp_calculator/src/styles.scss b/samples/client/angular/projects/mcp_calculator/src/styles.scss
index e6c8f2610..f89c852c7 100644
--- a/samples/client/angular/projects/mcp_calculator/src/styles.scss
+++ b/samples/client/angular/projects/mcp_calculator/src/styles.scss
@@ -14,7 +14,6 @@
 
 @use '@angular/material' as mat;
 
-
 @mixin styled-scrollbar {
   ::-webkit-scrollbar {
     width: 0.5rem;
@@ -39,11 +38,13 @@
 
 html {
   color-scheme: light dark;
-  @include mat.theme((
-    color: mat.$blue-palette,
-    typography: Roboto,
-    density: 0
-  ));
+  @include mat.theme(
+    (
+      color: mat.$blue-palette,
+      typography: Roboto,
+      density: 0,
+    )
+  );
 
   @include styled-scrollbar;
 }
@@ -201,4 +202,4 @@ body {
   padding: 0;
   width: 100svw;
   height: 100svh;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/mcp_calculator/tsconfig.app.json b/samples/client/angular/projects/mcp_calculator/tsconfig.app.json
index 3175e5ae7..6c6f9b1d1 100644
--- a/samples/client/angular/projects/mcp_calculator/tsconfig.app.json
+++ b/samples/client/angular/projects/mcp_calculator/tsconfig.app.json
@@ -4,14 +4,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }
diff --git a/samples/client/angular/projects/mcp_calculator/tsconfig.spec.json b/samples/client/angular/projects/mcp_calculator/tsconfig.spec.json
index 0feea88ed..43ba0b186 100644
--- a/samples/client/angular/projects/mcp_calculator/tsconfig.spec.json
+++ b/samples/client/angular/projects/mcp_calculator/tsconfig.spec.json
@@ -4,11 +4,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.ts"]
 }
diff --git a/samples/client/angular/projects/orchestrator/README.md b/samples/client/angular/projects/orchestrator/README.md
index 85789a8ea..e64ef9428 100644
--- a/samples/client/angular/projects/orchestrator/README.md
+++ b/samples/client/angular/projects/orchestrator/README.md
@@ -2,7 +2,7 @@
 
 Sample application using the Chat-Canvas component orchestrating multiple A2A and A2UI Agents.
 
-This angular app connects to an Orchastrator Agent which takes user messages and delegates tasks to its subagents based on the assessed context. 
+This angular app connects to an Orchastrator Agent which takes user messages and delegates tasks to its subagents based on the assessed context.
 
 ## Prerequisites
 
diff --git a/samples/client/angular/projects/orchestrator/src/a2ui-catalog/catalog.ts b/samples/client/angular/projects/orchestrator/src/a2ui-catalog/catalog.ts
index 9d13204e7..9ae596a57 100644
--- a/samples/client/angular/projects/orchestrator/src/a2ui-catalog/catalog.ts
+++ b/samples/client/angular/projects/orchestrator/src/a2ui-catalog/catalog.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { Catalog } from '@a2ui/angular';
-import { inputBinding } from '@angular/core';
+import {Catalog} from '@a2ui/angular';
+import {inputBinding} from '@angular/core';
 
 export const DEMO_CATALOG = {
   Chart: {
-    type: () => import('./chart').then((r) => r.Chart),
-    bindings: ({ properties }) => [
+    type: () => import('./chart').then(r => r.Chart),
+    bindings: ({properties}) => [
       inputBinding('type', () => ('type' in properties && properties['type']) || undefined),
       inputBinding('title', () => ('title' in properties && properties['title']) || undefined),
       inputBinding(
@@ -30,8 +30,8 @@ export const DEMO_CATALOG = {
     ],
   },
   GoogleMap: {
-    type: () => import('./google-map').then((r) => r.GoogleMap),
-    bindings: ({ properties }) => [
+    type: () => import('./google-map').then(r => r.GoogleMap),
+    bindings: ({properties}) => [
       inputBinding('zoom', () => ('zoom' in properties && properties['zoom']) || 8),
       inputBinding('center', () => ('center' in properties && properties['center']) || undefined),
       inputBinding('pins', () => ('pins' in properties && properties['pins']) || undefined),
diff --git a/samples/client/angular/projects/orchestrator/src/a2ui-catalog/chart.ts b/samples/client/angular/projects/orchestrator/src/a2ui-catalog/chart.ts
index 00b8c70f3..8e2a6313e 100644
--- a/samples/client/angular/projects/orchestrator/src/a2ui-catalog/chart.ts
+++ b/samples/client/angular/projects/orchestrator/src/a2ui-catalog/chart.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
 import {
@@ -26,8 +26,8 @@ import {
   signal,
   ViewChild,
 } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
 import {
   ChartData,
   ChartEvent,
@@ -37,7 +37,7 @@ import {
   LegendItem,
 } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { BaseChartDirective } from 'ng2-charts';
+import {BaseChartDirective} from 'ng2-charts';
 
 ChartJS.register(ChartDataLabels);
 
@@ -165,7 +165,7 @@ export class Chart extends DynamicComponent<Types.CustomNode> {
       if (!allData) {
         return undefined;
       }
-      return { ...allData.get(selectedCategory) } as ChartData<'pie', number[], string>;
+      return {...allData.get(selectedCategory)} as ChartData<'pie', number[], string>;
     },
   );
 
@@ -209,8 +209,8 @@ export class Chart extends DynamicComponent<Types.CustomNode> {
     if (pathPrefix?.path) {
       for (let index: number = 0; index < 500; index++) {
         const itemPrefix = `${pathPrefix.path}[${index}]`;
-        const labelPath: Primitives.StringValue = { path: `${itemPrefix}.label` };
-        const valuePath: Primitives.NumberValue = { path: `${itemPrefix}.value` };
+        const labelPath: Primitives.StringValue = {path: `${itemPrefix}.label`};
+        const valuePath: Primitives.NumberValue = {path: `${itemPrefix}.value`};
         const label = super.resolvePrimitive(labelPath);
         const value = super.resolvePrimitive(valuePath);
         if (label === null || value === null) {
@@ -267,7 +267,7 @@ export class Chart extends DynamicComponent<Types.CustomNode> {
     this.selectedCategory.set('root');
   }
 
-  protected onClick(e: { event?: ChartEvent; active?: any[] | undefined }) {
+  protected onClick(e: {event?: ChartEvent; active?: any[] | undefined}) {
     const active = e.active;
     if (!active || active.length === 0) return;
 
diff --git a/samples/client/angular/projects/orchestrator/src/a2ui-catalog/google-map.ts b/samples/client/angular/projects/orchestrator/src/a2ui-catalog/google-map.ts
index facc13baa..0759ac120 100644
--- a/samples/client/angular/projects/orchestrator/src/a2ui-catalog/google-map.ts
+++ b/samples/client/angular/projects/orchestrator/src/a2ui-catalog/google-map.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { GoogleMapsModule } from '@angular/google-maps';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {GoogleMapsModule} from '@angular/google-maps';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
 
 // --- Location Definitions ---
 interface Pin {
@@ -117,7 +117,7 @@ export interface CustomProperties {
             [zoom]="resolvedZoom"
             height="500px"
             width="100%"
-            [options]="{ mapId: mapId }"
+            [options]="{mapId: mapId}"
           >
             @for (pin of resolvedPins(); track pin) {
               <map-advanced-marker
@@ -179,13 +179,13 @@ export class GoogleMap extends DynamicComponent<Types.CustomNode> {
       return null;
     }
 
-    const latValue: Primitives.NumberValue = { path: `${value}.lat` };
-    const lngValue: Primitives.NumberValue = { path: `${value}.lng` };
-    const nameValue: Primitives.StringValue = { path: `${value}.name` };
-    const descriptionValue: Primitives.StringValue = { path: `${value}.description` };
-    const backgroundValue: Primitives.StringValue = { path: `${value}.background` };
-    const borderColorValue: Primitives.StringValue = { path: `${value}.borderColor` };
-    const glyphColorValue: Primitives.StringValue = { path: `${value}.glyphColor` };
+    const latValue: Primitives.NumberValue = {path: `${value}.lat`};
+    const lngValue: Primitives.NumberValue = {path: `${value}.lng`};
+    const nameValue: Primitives.StringValue = {path: `${value}.name`};
+    const descriptionValue: Primitives.StringValue = {path: `${value}.description`};
+    const backgroundValue: Primitives.StringValue = {path: `${value}.background`};
+    const borderColorValue: Primitives.StringValue = {path: `${value}.borderColor`};
+    const glyphColorValue: Primitives.StringValue = {path: `${value}.glyphColor`};
 
     const lat = this.resolvePrimitive(latValue);
     const lng = this.resolvePrimitive(lngValue);
@@ -217,8 +217,8 @@ export class GoogleMap extends DynamicComponent<Types.CustomNode> {
 
   private resolveLatLng(value: CustomProperties | null): google.maps.LatLngLiteral {
     if (value?.path) {
-      const latValue: Primitives.NumberValue = { path: `${value.path}.lat` };
-      const lngValue: Primitives.NumberValue = { path: `${value.path}.lng` };
+      const latValue: Primitives.NumberValue = {path: `${value.path}.lat`};
+      const lngValue: Primitives.NumberValue = {path: `${value.path}.lng`};
       const lat = this.resolvePrimitive(latValue)!;
       const lng = this.resolvePrimitive(lngValue)!;
       return {
diff --git a/samples/client/angular/projects/orchestrator/src/app/app.config.server.ts b/samples/client/angular/projects/orchestrator/src/app/app.config.server.ts
index 125e66bed..b27c47b15 100644
--- a/samples/client/angular/projects/orchestrator/src/app/app.config.server.ts
+++ b/samples/client/angular/projects/orchestrator/src/app/app.config.server.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
-import { provideServerRendering, withRoutes } from '@angular/ssr';
-import { appConfig } from './app.config';
-import { serverRoutes } from './app.routes.server';
+import {ApplicationConfig, mergeApplicationConfig} from '@angular/core';
+import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {appConfig} from './app.config';
+import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
   providers: [provideServerRendering(withRoutes(serverRoutes))],
diff --git a/samples/client/angular/projects/orchestrator/src/app/app.config.ts b/samples/client/angular/projects/orchestrator/src/app/app.config.ts
index 65f494e18..53c16d764 100644
--- a/samples/client/angular/projects/orchestrator/src/app/app.config.ts
+++ b/samples/client/angular/projects/orchestrator/src/app/app.config.ts
@@ -25,14 +25,14 @@ import {
   provideBrowserGlobalErrorListeners,
   provideZonelessChangeDetection,
 } from '@angular/core';
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { provideRouter } from '@angular/router';
-import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
-import { DEMO_CATALOG } from '../a2ui-catalog/catalog';
-import { A2aServiceImpl } from '../services/a2a-service-impl';
-import { routes } from './app.routes';
-import { provideMarkdownRenderer } from '@a2ui/angular';
-import { renderMarkdown } from '@a2ui/markdown-it';
+import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
+import {provideRouter} from '@angular/router';
+import {provideCharts, withDefaultRegisterables} from 'ng2-charts';
+import {DEMO_CATALOG} from '../a2ui-catalog/catalog';
+import {A2aServiceImpl} from '../services/a2a-service-impl';
+import {routes} from './app.routes';
+import {provideMarkdownRenderer} from '@a2ui/angular';
+import {renderMarkdown} from '@a2ui/markdown-it';
 
 export const appConfig: ApplicationConfig = {
   providers: [
diff --git a/samples/client/angular/projects/orchestrator/src/app/app.html b/samples/client/angular/projects/orchestrator/src/app/app.html
index b921a4810..390018abb 100644
--- a/samples/client/angular/projects/orchestrator/src/app/app.html
+++ b/samples/client/angular/projects/orchestrator/src/app/app.html
@@ -15,31 +15,36 @@
  -->
 
 <main class="main">
-  <a2a-chat-canvas [messageDecorator]="demoMessageDecorator" [emptyHistoryTemplate]="welcomeMessage"></a2a-chat-canvas>
+  <a2a-chat-canvas
+    [messageDecorator]="demoMessageDecorator"
+    [emptyHistoryTemplate]="welcomeMessage"
+  ></a2a-chat-canvas>
 </main>
 
 <ng-template #welcomeMessage>
   <div class="empty-history">
-      <div class="agent-header">
-        <div class="agent-header-part agent-name">
-          <strong>{{ agentName() }}</strong>
-        </div>
+    <div class="agent-header">
+      <div class="agent-header-part agent-name">
+        <strong>{{ agentName() }}</strong>
       </div>
-      <br />
+    </div>
+    <br />
 
-      <p class="empty-history-text">
-        I help you orchestrate tasks across multiple agents.
-      </p>
-      <div class="suggestion-chips">
-        <button mat-stroked-button class="chip" (click)="sendMessage('List Chinese restaurants in New York')">
-          <span class="material-icons-outlined">restaurant</span>
-          List restaurants
-        </button>
-        <button mat-stroked-button class="chip" (click)="sendMessage('Show me charts')">
-          <span class="material-icons-outlined">analytics</span>
-          Show me charts
-        </button>
-      </div>
+    <p class="empty-history-text">I help you orchestrate tasks across multiple agents.</p>
+    <div class="suggestion-chips">
+      <button
+        mat-stroked-button
+        class="chip"
+        (click)="sendMessage('List Chinese restaurants in New York')"
+      >
+        <span class="material-icons-outlined">restaurant</span>
+        List restaurants
+      </button>
+      <button mat-stroked-button class="chip" (click)="sendMessage('Show me charts')">
+        <span class="material-icons-outlined">analytics</span>
+        Show me charts
+      </button>
+    </div>
   </div>
 </ng-template>
 
diff --git a/samples/client/angular/projects/orchestrator/src/app/app.routes.server.ts b/samples/client/angular/projects/orchestrator/src/app/app.routes.server.ts
index 6e22a0113..417bd7b43 100644
--- a/samples/client/angular/projects/orchestrator/src/app/app.routes.server.ts
+++ b/samples/client/angular/projects/orchestrator/src/app/app.routes.server.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { RenderMode, ServerRoute } from '@angular/ssr';
+import {RenderMode, ServerRoute} from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
   {
diff --git a/samples/client/angular/projects/orchestrator/src/app/app.routes.ts b/samples/client/angular/projects/orchestrator/src/app/app.routes.ts
index 54e9a215f..1cbd92c87 100644
--- a/samples/client/angular/projects/orchestrator/src/app/app.routes.ts
+++ b/samples/client/angular/projects/orchestrator/src/app/app.routes.ts
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
 
 export const routes: Routes = [];
diff --git a/samples/client/angular/projects/orchestrator/src/app/app.scss b/samples/client/angular/projects/orchestrator/src/app/app.scss
index dff7732af..570c4fc61 100644
--- a/samples/client/angular/projects/orchestrator/src/app/app.scss
+++ b/samples/client/angular/projects/orchestrator/src/app/app.scss
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 main {
-    height: 100vh;
+  height: 100vh;
 }
 
 .empty-history {
@@ -44,12 +44,7 @@ main {
 }
 
 .agent-name {
-  background: linear-gradient(
-    90deg,
-    #217bfe 28.03%,
-    #078efb 49.56%,
-    #ac87eb 71.1%
-  );
+  background: linear-gradient(90deg, #217bfe 28.03%, #078efb 49.56%, #ac87eb 71.1%);
   background-clip: text;
   color: transparent;
 }
@@ -64,17 +59,17 @@ main {
 
 .chip {
   // Override Material button styles to look like a chip
-    border-radius: 100px !important; // Force pill shape
-    padding: 10px 16px !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    height: auto !important;
-    line-height: 25px !important; // Match icon height
+  border-radius: 100px !important; // Force pill shape
+  padding: 10px 16px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  height: auto !important;
+  line-height: 25px !important; // Match icon height
   .material-icons-outlined {
     font-size: 20px;
     margin-right: 8px;
-      line-height: 1; // Prevent icon from affecting line height
-      position: relative;
-      top: 4px; // Move icon down slightly to match text
+    line-height: 1; // Prevent icon from affecting line height
+    position: relative;
+    top: 4px; // Move icon down slightly to match text
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/orchestrator/src/app/app.ts b/samples/client/angular/projects/orchestrator/src/app/app.ts
index 65ac2a990..30784d1fc 100644
--- a/samples/client/angular/projects/orchestrator/src/app/app.ts
+++ b/samples/client/angular/projects/orchestrator/src/app/app.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { A2aChatCanvas } from '@a2a_chat_canvas/a2a-chat-canvas';
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
+import {A2aChatCanvas} from '@a2a_chat_canvas/a2a-chat-canvas';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -25,10 +25,10 @@ import {
   inject,
   signal,
 } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterOutlet } from '@angular/router';
-import { environment } from '../environments/environment';
-import { demoMessageDecorator } from '../message-decorator/demo-message-decorator';
+import {MatButtonModule} from '@angular/material/button';
+import {RouterOutlet} from '@angular/router';
+import {environment} from '../environments/environment';
+import {demoMessageDecorator} from '../message-decorator/demo-message-decorator';
 
 @Component({
   selector: 'app-root',
diff --git a/samples/client/angular/projects/orchestrator/src/main.server.ts b/samples/client/angular/projects/orchestrator/src/main.server.ts
index fcfe120c8..5bad09f44 100644
--- a/samples/client/angular/projects/orchestrator/src/main.server.ts
+++ b/samples/client/angular/projects/orchestrator/src/main.server.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
-import { config } from './app/app.config.server';
+import {BootstrapContext, bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {config} from './app/app.config.server';
 
 const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
 
diff --git a/samples/client/angular/projects/orchestrator/src/main.ts b/samples/client/angular/projects/orchestrator/src/main.ts
index 3c4480110..98aa73d70 100644
--- a/samples/client/angular/projects/orchestrator/src/main.ts
+++ b/samples/client/angular/projects/orchestrator/src/main.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
-import { appConfig } from './app/app.config';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {appConfig} from './app/app.config';
 
-bootstrapApplication(App, appConfig).catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch(err => console.error(err));
diff --git a/samples/client/angular/projects/orchestrator/src/message-decorator/demo-message-decorator.ts b/samples/client/angular/projects/orchestrator/src/message-decorator/demo-message-decorator.ts
index 56f2999e1..3ca8da42a 100644
--- a/samples/client/angular/projects/orchestrator/src/message-decorator/demo-message-decorator.ts
+++ b/samples/client/angular/projects/orchestrator/src/message-decorator/demo-message-decorator.ts
@@ -18,11 +18,11 @@ import {
   MessageDecorator,
   MessageDecoratorComponent,
 } from '@a2a_chat_canvas/components/chat/chat-history/message-decorator/types';
-import { UiMessage } from '@a2a_chat_canvas/types/ui-message'; // Assuming path based on context
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input, TemplateRef } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+import {UiMessage} from '@a2a_chat_canvas/types/ui-message'; // Assuming path based on context
+import {NgTemplateOutlet} from '@angular/common';
+import {ChangeDetectionStrategy, Component, input, TemplateRef} from '@angular/core';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
 
 @Component({
   selector: 'app-custom-message-decorator',
diff --git a/samples/client/angular/projects/orchestrator/src/server.ts b/samples/client/angular/projects/orchestrator/src/server.ts
index 1aacd931f..e09e571ab 100644
--- a/samples/client/angular/projects/orchestrator/src/server.ts
+++ b/samples/client/angular/projects/orchestrator/src/server.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { MessageSendParams, Part, SendMessageResponse } from '@a2a-js/sdk';
-import { A2AClient } from '@a2a-js/sdk/client';
+import {MessageSendParams, Part, SendMessageResponse} from '@a2a-js/sdk';
+import {A2AClient} from '@a2a-js/sdk/client';
 import {
   AngularNodeAppEngine,
   createNodeRequestHandler,
@@ -23,8 +23,8 @@ import {
   writeResponseToNodeResponse,
 } from '@angular/ssr/node';
 import express from 'express';
-import { join } from 'node:path';
-import { v4 as uuidv4 } from 'uuid';
+import {join} from 'node:path';
+import {v4 as uuidv4} from 'uuid';
 
 const browserDistFolder = join(import.meta.dirname, '../browser');
 const app = express();
@@ -42,7 +42,7 @@ app.use(
 app.post('/a2a', (req, res) => {
   let originalBody = '';
 
-  req.on('data', (chunk) => {
+  req.on('data', chunk => {
     originalBody += chunk.toString();
   });
 
@@ -75,7 +75,7 @@ app.post('/a2a', (req, res) => {
     try {
       client = await createOrGetClient();
     } catch (error) {
-      res.status(500).json({ error: 'Failed to create A2A client.' });
+      res.status(500).json({error: 'Failed to create A2A client.'});
       return;
     }
 
@@ -83,14 +83,14 @@ app.post('/a2a', (req, res) => {
     try {
       response = await client.sendMessage(sendParams);
     } catch (error) {
-      res.status(500).json({ error: 'Failed to send message.' });
+      res.status(500).json({error: 'Failed to send message.'});
       return;
     }
 
     res.set('Cache-Control', 'no-store');
 
     if ('error' in response) {
-      res.status(500).json({ error: JSON.stringify(response.error) });
+      res.status(500).json({error: JSON.stringify(response.error)});
       return;
     }
 
@@ -104,27 +104,27 @@ app.get('/a2a/agent-card', async (req, res) => {
       'http://localhost:10002/.well-known/agent-card.json',
     );
     if (!response.ok) {
-      res.status(response.status).json({ error: 'Failed to fetch agent card' });
+      res.status(response.status).json({error: 'Failed to fetch agent card'});
       return;
     }
     const card = await response.json();
     res.json(card);
   } catch (error) {
     console.error('Error fetching agent card:', error);
-    res.status(500).json({ error: 'Internal server error' });
+    res.status(500).json({error: 'Internal server error'});
   }
 });
 
 app.use((req, res, next) => {
   angularApp
     .handle(req)
-    .then((response) => (response ? writeResponseToNodeResponse(response, res) : next()))
+    .then(response => (response ? writeResponseToNodeResponse(response, res) : next()))
     .catch(next);
 });
 
 if (isMainModule(import.meta.url) || process.env['pm_id']) {
   const port = process.env['PORT'] || 4000;
-  app.listen(port, (error) => {
+  app.listen(port, error => {
     if (error) {
       throw error;
     }
@@ -136,7 +136,7 @@ if (isMainModule(import.meta.url) || process.env['pm_id']) {
 async function fetchWithCustomHeader(url: string | URL | Request, init?: RequestInit) {
   const headers = new Headers(init?.headers);
   headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.8');
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 }
 
diff --git a/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.spec.ts b/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.spec.ts
index 691e63755..235a56403 100644
--- a/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.spec.ts
+++ b/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.spec.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { A2aServiceImpl } from './a2a-service-impl';
+import {TestBed} from '@angular/core/testing';
+import {A2aServiceImpl} from './a2a-service-impl';
 
 describe('A2aServiceImpl', () => {
   let service: A2aServiceImpl;
@@ -32,7 +32,7 @@ describe('A2aServiceImpl', () => {
   });
 
   it('should send contextId in request after receiving it from server', async () => {
-  // Mock first response to return a contextId
+    // Mock first response to return a contextId
     const mockResponse1 = {
       contextId: 'test-session-123',
       parts: [],
@@ -42,12 +42,12 @@ describe('A2aServiceImpl', () => {
       Promise.resolve({
         ok: true,
         json: () => Promise.resolve(mockResponse1),
-      } as Response)
+      } as Response),
     );
 
     // First call should NOT send contextId (it doesn't have it yet)
     await service.sendMessage([]);
-    
+
     let lastCall = fetchSpy.calls.mostRecent();
     let body = JSON.parse(lastCall.args[1]!.body as string);
     expect(body.contextId).toBeUndefined();
@@ -60,7 +60,7 @@ describe('A2aServiceImpl', () => {
       Promise.resolve({
         ok: true,
         json: () => Promise.resolve(mockResponse2),
-      } as Response)
+      } as Response),
     );
 
     // Second call SHOULD send contextId
@@ -83,7 +83,7 @@ describe('A2aServiceImpl', () => {
       Promise.resolve({
         ok: true,
         json: () => Promise.resolve(mockResponse),
-      } as Response)
+      } as Response),
     );
 
     await service.sendMessage([]);
@@ -93,7 +93,7 @@ describe('A2aServiceImpl', () => {
       Promise.resolve({
         ok: true,
         json: () => Promise.resolve({}),
-      } as Response)
+      } as Response),
     );
 
     await service.sendMessage([]);
diff --git a/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.ts b/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.ts
index 4e7eae67c..eef53df81 100644
--- a/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.ts
+++ b/samples/client/angular/projects/orchestrator/src/services/a2a-service-impl.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { AgentCard, Part, SendMessageSuccessResponse } from '@a2a-js/sdk';
-import { A2aService } from '@a2a_chat_canvas/interfaces/a2a-service';
-import { Injectable } from '@angular/core';
+import {AgentCard, Part, SendMessageSuccessResponse} from '@a2a-js/sdk';
+import {A2aService} from '@a2a_chat_canvas/interfaces/a2a-service';
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root',
@@ -26,9 +26,9 @@ export class A2aServiceImpl implements A2aService {
 
   async sendMessage(parts: Part[], signal?: AbortSignal): Promise<SendMessageSuccessResponse> {
     const response = await fetch('/a2a', {
-      body: JSON.stringify({ 
+      body: JSON.stringify({
         parts: parts,
-        contextId: this.contextId
+        contextId: this.contextId,
       }),
       method: 'POST',
       signal,
@@ -42,7 +42,7 @@ export class A2aServiceImpl implements A2aService {
       return data;
     }
 
-    const error = (await response.json()) as { error: string };
+    const error = (await response.json()) as {error: string};
     throw new Error(error.error);
   }
 
@@ -51,7 +51,7 @@ export class A2aServiceImpl implements A2aService {
     if (!response.ok) {
       throw new Error('Failed to fetch agent card');
     }
-    const card = await response.json() as AgentCard;
+    const card = (await response.json()) as AgentCard;
     return card;
   }
 }
diff --git a/samples/client/angular/projects/orchestrator/src/styles.scss b/samples/client/angular/projects/orchestrator/src/styles.scss
index e6c8f2610..f89c852c7 100644
--- a/samples/client/angular/projects/orchestrator/src/styles.scss
+++ b/samples/client/angular/projects/orchestrator/src/styles.scss
@@ -14,7 +14,6 @@
 
 @use '@angular/material' as mat;
 
-
 @mixin styled-scrollbar {
   ::-webkit-scrollbar {
     width: 0.5rem;
@@ -39,11 +38,13 @@
 
 html {
   color-scheme: light dark;
-  @include mat.theme((
-    color: mat.$blue-palette,
-    typography: Roboto,
-    density: 0
-  ));
+  @include mat.theme(
+    (
+      color: mat.$blue-palette,
+      typography: Roboto,
+      density: 0,
+    )
+  );
 
   @include styled-scrollbar;
 }
@@ -201,4 +202,4 @@ body {
   padding: 0;
   width: 100svw;
   height: 100svh;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/orchestrator/tsconfig.app.json b/samples/client/angular/projects/orchestrator/tsconfig.app.json
index 3175e5ae7..6c6f9b1d1 100644
--- a/samples/client/angular/projects/orchestrator/tsconfig.app.json
+++ b/samples/client/angular/projects/orchestrator/tsconfig.app.json
@@ -4,14 +4,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }
diff --git a/samples/client/angular/projects/orchestrator/tsconfig.spec.json b/samples/client/angular/projects/orchestrator/tsconfig.spec.json
index 0feea88ed..43ba0b186 100644
--- a/samples/client/angular/projects/orchestrator/tsconfig.spec.json
+++ b/samples/client/angular/projects/orchestrator/tsconfig.spec.json
@@ -4,11 +4,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.ts"]
 }
diff --git a/samples/client/angular/projects/restaurant/src/app/app.config.server.ts b/samples/client/angular/projects/restaurant/src/app/app.config.server.ts
index 7f94af4ce..a55f9a93c 100644
--- a/samples/client/angular/projects/restaurant/src/app/app.config.server.ts
+++ b/samples/client/angular/projects/restaurant/src/app/app.config.server.ts
@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-import { mergeApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/ssr';
-import { appConfig } from './app.config';
+import {mergeApplicationConfig} from '@angular/core';
+import {provideServerRendering} from '@angular/ssr';
+import {appConfig} from './app.config';
 
 export const config = mergeApplicationConfig(appConfig, {
-  providers: [
-    provideServerRendering()
-  ]
+  providers: [provideServerRendering()],
 });
diff --git a/samples/client/angular/projects/restaurant/src/app/app.config.ts b/samples/client/angular/projects/restaurant/src/app/app.config.ts
index 1e3b858b0..0d3f74662 100644
--- a/samples/client/angular/projects/restaurant/src/app/app.config.ts
+++ b/samples/client/angular/projects/restaurant/src/app/app.config.ts
@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import {A2uiRendererService, A2UI_RENDERER_CONFIG, BasicCatalog, provideMarkdownRenderer} from '@a2ui/angular/v0_9';
+import {
+  A2uiRendererService,
+  A2UI_RENDERER_CONFIG,
+  BasicCatalog,
+  provideMarkdownRenderer,
+} from '@a2ui/angular/v0_9';
 import {Client} from './client';
 import {inject, Injector} from '@angular/core';
 import {IMAGE_CONFIG} from '@angular/common';
diff --git a/samples/client/angular/projects/restaurant/src/app/app.css b/samples/client/angular/projects/restaurant/src/app/app.css
index e42933eb1..881322709 100644
--- a/samples/client/angular/projects/restaurant/src/app/app.css
+++ b/samples/client/angular/projects/restaurant/src/app/app.css
@@ -134,13 +134,13 @@ form {
     pointer-events: none;
 
     &::before {
-      content: "dark_mode";
+      content: 'dark_mode';
     }
   }
 }
 
 .g-icon {
-  font-family: "Material Symbols Outlined", "Google Symbols";
+  font-family: 'Material Symbols Outlined', 'Google Symbols';
   font-weight: normal;
   font-style: normal;
   font-display: optional;
@@ -155,27 +155,39 @@ form {
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: "liga";
+  -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
   overflow: hidden;
 
-  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48,
-    "ROND" 100;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 300,
+    'GRAD' 0,
+    'opsz' 48,
+    'ROND' 100;
 
   &.filled {
-    font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 0, "opsz" 48,
-      "ROND" 100;
+    font-variation-settings:
+      'FILL' 1,
+      'wght' 300,
+      'GRAD' 0,
+      'opsz' 48,
+      'ROND' 100;
   }
 
   &.filled-heavy {
-    font-variation-settings: "FILL" 1, "wght" 700, "GRAD" 0, "opsz" 48,
-      "ROND" 100;
+    font-variation-settings:
+      'FILL' 1,
+      'wght' 700,
+      'GRAD' 0,
+      'opsz' 48,
+      'ROND' 100;
   }
 }
 
 @container style(--color-scheme: dark) {
   .theme-toggle .g-icon::before {
-    content: "light_mode";
+    content: 'light_mode';
     color: var(--n-90);
   }
 }
@@ -252,7 +264,7 @@ form {
   position: relative;
 
   &::after {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     top: 0;
@@ -272,4 +284,4 @@ form {
   100% {
     left: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/restaurant/src/app/app.html b/samples/client/angular/projects/restaurant/src/app/app.html
index 6f0af43b9..6b382e851 100644
--- a/samples/client/angular/projects/restaurant/src/app/app.html
+++ b/samples/client/angular/projects/restaurant/src/app/app.html
@@ -15,42 +15,49 @@
  -->
 
 @if (!hasData()) {
-<form (submit)="handleSubmit($event)">
-  <img class="hero-img" src="hero-img" src="hero.png" alt="Image of the restaurant">
-
-  <h1 class="app-title">Restaurant Finder</h1>
-  <div>
-    <input required value="Top 5 Chinese restaurants in New York." autocomplete="off" id="body" name="body" type="text"
-      [disabled]="client.isLoading()" />
-    <button type="submit" [disabled]="client.isLoading()">
-      <span class="g-icon filled-heavy">send</span>
-    </button>
-  </div>
-</form>
+  <form (submit)="handleSubmit($event)">
+    <img class="hero-img" src="hero-img" src="hero.png" alt="Image of the restaurant" />
+
+    <h1 class="app-title">Restaurant Finder</h1>
+    <div>
+      <input
+        required
+        value="Top 5 Chinese restaurants in New York."
+        autocomplete="off"
+        id="body"
+        name="body"
+        type="text"
+        [disabled]="client.isLoading()"
+      />
+      <button type="submit" [disabled]="client.isLoading()">
+        <span class="g-icon filled-heavy">send</span>
+      </button>
+    </div>
+  </form>
 } @else {
-<div class="surfaces">
-  @let surfaces = renderer.surfaceGroup.surfacesMap;
-
-  @if (client.isLoading() && surfaces.size === 0) {
-  <div class="pending">
-    <div class="spinner"></div>
-    <div class="loading-text">{{loadingTextLines[loadingTextIndex()]}}</div>
+  <div class="surfaces">
+    @let surfaces = renderer.surfaceGroup.surfacesMap;
+
+    @if (client.isLoading() && surfaces.size === 0) {
+      <div class="pending">
+        <div class="spinner"></div>
+        <div class="loading-text">{{ loadingTextLines[loadingTextIndex()] }}</div>
+      </div>
+    } @else {
+      @if (client.isLoading()) {
+        <div class="streaming-indicator">
+          <div class="progress-bar"></div>
+          <span>Finding the best spots for you...</span>
+        </div>
+      }
+
+      @for (entry of surfaces; track entry[0]) {
+        <a2ui-v09-surface [surfaceId]="entry[0]" />
+      }
+    }
   </div>
-  } @else {
-  @if (client.isLoading()) {
-  <div class="streaming-indicator">
-    <div class="progress-bar"></div>
-    <span>Finding the best spots for you...</span>
-  </div>
-  }
-
-  @for (entry of surfaces; track entry[0]) {
-  <a2ui-v09-surface [surfaceId]="entry[0]" />
-  }
-  }
-</div>
 }
 
 <button (click)="toggleTheme(toggleButton)" class="theme-toggle" #toggleButton>
   <span class="g-icon filled-heavy"></span>
-</button>
\ No newline at end of file
+</button>
diff --git a/samples/client/angular/projects/restaurant/src/app/app.ts b/samples/client/angular/projects/restaurant/src/app/app.ts
index 4b47a593d..3a5f0b421 100644
--- a/samples/client/angular/projects/restaurant/src/app/app.ts
+++ b/samples/client/angular/projects/restaurant/src/app/app.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { SurfaceComponent, A2uiRendererService } from '@a2ui/angular/v0_9';
+import {SurfaceComponent, A2uiRendererService} from '@a2ui/angular/v0_9';
 import * as Types from '@a2ui/web_core/types/types';
-import { ChangeDetectionStrategy, Component, DOCUMENT, inject, signal } from '@angular/core';
-import { Client } from './client';
+import {ChangeDetectionStrategy, Component, DOCUMENT, inject, signal} from '@angular/core';
+import {Client} from './client';
 
 @Component({
   selector: 'app-root',
@@ -62,7 +62,7 @@ export class App {
   }
 
   protected toggleTheme(button: HTMLButtonElement) {
-    const { colorScheme } = window.getComputedStyle(button);
+    const {colorScheme} = window.getComputedStyle(button);
     const classList = this.document.body.classList;
 
     if (colorScheme === 'dark') {
@@ -78,7 +78,7 @@ export class App {
     this.loadingTextIndex.set(0);
 
     this.loadingInterval = window.setInterval(() => {
-      this.loadingTextIndex.update((prev) => (prev + 1) % this.loadingTextLines.length);
+      this.loadingTextIndex.update(prev => (prev + 1) % this.loadingTextLines.length);
     }, 2000);
   }
 
diff --git a/samples/client/angular/projects/restaurant/src/app/client.ts b/samples/client/angular/projects/restaurant/src/app/client.ts
index 24edd3984..0957e95df 100644
--- a/samples/client/angular/projects/restaurant/src/app/client.ts
+++ b/samples/client/angular/projects/restaurant/src/app/client.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { A2uiRendererService } from '@a2ui/angular/v0_9';
+import {A2uiRendererService} from '@a2ui/angular/v0_9';
 import * as Types from '@a2ui/web_core/types/types';
-import { inject, Injectable, signal } from '@angular/core';
+import {inject, Injectable, signal} from '@angular/core';
 import {A2uiClientAction, A2uiMessage} from '@a2ui/web_core/v0_9';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class Client {
   private readonly renderer = inject(A2uiRendererService);
   private contextId?: string;
@@ -35,7 +35,9 @@ export class Client {
     }
   }
 
-  async makeRequest(request: Types.A2UIClientEventMessage | string): Promise<Types.ServerToClientMessage[]> {
+  async makeRequest(
+    request: Types.A2UIClientEventMessage | string,
+  ): Promise<Types.ServerToClientMessage[]> {
     let messages: Types.ServerToClientMessage[] = [];
     try {
       this.isLoading.set(true);
@@ -48,8 +50,8 @@ export class Client {
 
       const isString = typeof request === 'string';
       const bodyData = isString
-        ? { query: request, contextId: this.contextId }
-        : { event: request, contextId: this.contextId };
+        ? {query: request, contextId: this.contextId}
+        : {event: request, contextId: this.contextId};
 
       const response = await fetch('/a2a', {
         body: JSON.stringify(bodyData),
@@ -57,7 +59,7 @@ export class Client {
       });
 
       if (!response.ok) {
-        const error = (await response.json()) as { error: string };
+        const error = (await response.json()) as {error: string};
         throw new Error(error.error);
       }
 
@@ -79,7 +81,7 @@ export class Client {
 
   private async handleStreamingResponse(
     response: Response,
-    messages: Types.ServerToClientMessage[]
+    messages: Types.ServerToClientMessage[],
   ): Promise<void> {
     const reader = response.body?.getReader();
     if (!reader) {
@@ -90,11 +92,11 @@ export class Client {
     let buffer = '';
 
     while (true) {
-      const { done, value } = await reader.read();
+      const {done, value} = await reader.read();
       if (done) break;
 
       const now = performance.now();
-      buffer += decoder.decode(value, { stream: true });
+      buffer += decoder.decode(value, {stream: true});
 
       // Parse SSE events. The server sends "data: <json>\n\n"
       const lines = buffer.split('\n\n');
@@ -115,7 +117,7 @@ export class Client {
               }
               const parts = responseData.parts || (Array.isArray(responseData) ? responseData : []);
               console.log(
-                `[client] [${performance.now().toFixed(2)}ms] Scheduling processing for ${parts.length} parts`
+                `[client] [${performance.now().toFixed(2)}ms] Scheduling processing for ${parts.length} parts`,
               );
               // Use a microtask to ensure we don't block the stream reader
               await Promise.resolve();
@@ -132,7 +134,7 @@ export class Client {
 
   private async handleNonStreamingResponse(
     response: Response,
-    messages: Types.ServerToClientMessage[]
+    messages: Types.ServerToClientMessage[],
   ): Promise<void> {
     const responseData = await response.json();
     console.log(`[client] Received JSON response:`, responseData);
diff --git a/samples/client/angular/projects/restaurant/src/app/theme.ts b/samples/client/angular/projects/restaurant/src/app/theme.ts
index 6eb7be6fd..ca80954a5 100644
--- a/samples/client/angular/projects/restaurant/src/app/theme.ts
+++ b/samples/client/angular/projects/restaurant/src/app/theme.ts
@@ -222,7 +222,7 @@ export const theme: Types.Theme = {
       'behavior-ho-70': true,
       'typography-w-400': true,
     },
-    Card: { 'border-br-9': true, 'layout-p-4': true, 'color-bgc-n100': true },
+    Card: {'border-br-9': true, 'layout-p-4': true, 'color-bgc-n100': true},
     CheckBox: {
       element: {
         'layout-m-0': true,
@@ -287,7 +287,7 @@ export const theme: Types.Theme = {
         'layout-w-100': true,
         'layout-h-100': true,
       },
-      avatar: { 'is-avatar': true },
+      avatar: {'is-avatar': true},
       header: {},
       icon: {},
       largeFeature: {},
@@ -300,7 +300,7 @@ export const theme: Types.Theme = {
       'layout-p-2': true,
     },
     Modal: {
-      backdrop: { 'color-bbgc-p60_20': true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
         'border-br-2': true,
         'color-bgc-p100': true,
@@ -325,7 +325,7 @@ export const theme: Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
diff --git a/samples/client/angular/projects/restaurant/src/index.html b/samples/client/angular/projects/restaurant/src/index.html
index 4885b26d8..136eb64ef 100644
--- a/samples/client/angular/projects/restaurant/src/index.html
+++ b/samples/client/angular/projects/restaurant/src/index.html
@@ -16,22 +16,22 @@
 
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Angular Restaurant demo</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=account_circle,add,arrow_back,arrow_drop_down,arrow_forward,attach_file,calendar_today,call,camera,check,check_circle,close,communication,content_copy,dark_mode,delete,download,draw,edit,error,event,favorite,favorite_off,folder,help,home,info,light_mode,location_on,lock,lock_open,mail,menu,mobile_layout,more_horiz,more_vert,notifications,notifications_off,payment,pen_size_1,person,phone,photo,print,progress_activity,rectangle,refresh,search,send,settings,share,shopping_cart,star,star_half,star_off,upload,visibility,visibility_off,warning"
-  />
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular Restaurant demo</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=account_circle,add,arrow_back,arrow_drop_down,arrow_forward,attach_file,calendar_today,call,camera,check,check_circle,close,communication,content_copy,dark_mode,delete,download,draw,edit,error,event,favorite,favorite_off,folder,help,home,info,light_mode,location_on,lock,lock_open,mail,menu,mobile_layout,more_horiz,more_vert,notifications,notifications_off,payment,pen_size_1,person,phone,photo,print,progress_activity,rectangle,refresh,search,send,settings,share,shopping_cart,star,star_half,star_off,upload,visibility,visibility_off,warning"
+    />
 
-  <link
-    href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
-    rel="stylesheet"
-  />
-</head>
-<body>
-  <app-root></app-root>
-</body>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/samples/client/angular/projects/restaurant/src/main.server.ts b/samples/client/angular/projects/restaurant/src/main.server.ts
index fcfe120c8..5bad09f44 100644
--- a/samples/client/angular/projects/restaurant/src/main.server.ts
+++ b/samples/client/angular/projects/restaurant/src/main.server.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
-import { config } from './app/app.config.server';
+import {BootstrapContext, bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {config} from './app/app.config.server';
 
 const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
 
diff --git a/samples/client/angular/projects/restaurant/src/main.ts b/samples/client/angular/projects/restaurant/src/main.ts
index c1861c62b..3b5046207 100644
--- a/samples/client/angular/projects/restaurant/src/main.ts
+++ b/samples/client/angular/projects/restaurant/src/main.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {App} from './app/app';
 
-bootstrapApplication(App, appConfig).catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch(err => console.error(err));
diff --git a/samples/client/angular/projects/restaurant/src/restaurant-theme.css b/samples/client/angular/projects/restaurant/src/restaurant-theme.css
index 86d674d42..01c30fb6a 100644
--- a/samples/client/angular/projects/restaurant/src/restaurant-theme.css
+++ b/samples/client/angular/projects/restaurant/src/restaurant-theme.css
@@ -16,7 +16,11 @@
 
 :root {
   /* Button Overrides */
-  --a2ui-button-background: linear-gradient(135deg, light-dark(var(--p-70), var(--p-40)) 0%, light-dark(var(--p-60), var(--p-30)) 100%);
+  --a2ui-button-background: linear-gradient(
+    135deg,
+    light-dark(var(--p-70), var(--p-40)) 0%,
+    light-dark(var(--p-60), var(--p-30)) 100%
+  );
   --a2ui-button-box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
   --a2ui-button-font-weight: 500;
   --a2ui-button-border-radius: 9999px;
@@ -28,7 +32,22 @@
   /* Card Overrides */
   --a2ui-card-border: none;
   --a2ui-card-border-radius: 24px;
-  --a2ui-card-background: radial-gradient(circle at top left, light-dark(transparent, rgba(6, 182, 212, 0.15)), transparent 40%), radial-gradient(circle at bottom right, light-dark(transparent, rgba(139, 92, 246, 0.15)), transparent 40%), linear-gradient(135deg, light-dark(rgba(255, 255, 255, 0.7), rgba(30, 41, 59, 0.7)), light-dark(rgba(255, 255, 255, 0.7), rgba(15, 23, 42, 0.8)));
+  --a2ui-card-background:
+    radial-gradient(
+      circle at top left,
+      light-dark(transparent, rgba(6, 182, 212, 0.15)),
+      transparent 40%
+    ),
+    radial-gradient(
+      circle at bottom right,
+      light-dark(transparent, rgba(139, 92, 246, 0.15)),
+      transparent 40%
+    ),
+    linear-gradient(
+      135deg,
+      light-dark(rgba(255, 255, 255, 0.7), rgba(30, 41, 59, 0.7)),
+      light-dark(rgba(255, 255, 255, 0.7), rgba(15, 23, 42, 0.8))
+    );
 
   /* Image Overrides */
   --a2ui-image-border-radius: 12px;
diff --git a/samples/client/angular/projects/restaurant/src/server.ts b/samples/client/angular/projects/restaurant/src/server.ts
index e90358e38..120a6ca3b 100644
--- a/samples/client/angular/projects/restaurant/src/server.ts
+++ b/samples/client/angular/projects/restaurant/src/server.ts
@@ -21,10 +21,10 @@ import {
   writeResponseToNodeResponse,
 } from '@angular/ssr/node';
 import express from 'express';
-import { join } from 'node:path';
-import { v4 as uuidv4 } from 'uuid';
-import { A2AClient } from '@a2a-js/sdk/client';
-import { MessageSendParams, Part, SendMessageSuccessResponse, Task } from '@a2a-js/sdk';
+import {join} from 'node:path';
+import {v4 as uuidv4} from 'uuid';
+import {A2AClient} from '@a2a-js/sdk/client';
+import {MessageSendParams, Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
 
 const browserDistFolder = join(import.meta.dirname, '../browser');
 const app = express();
@@ -37,13 +37,13 @@ app.use(
     maxAge: '1y',
     index: false,
     redirect: false,
-  })
+  }),
 );
 
 app.post('/a2a', (req, res) => {
   let originalBody = '';
 
-  req.on('data', (chunk) => {
+  req.on('data', chunk => {
     originalBody += chunk.toString();
   });
 
@@ -65,7 +65,7 @@ app.post('/a2a', (req, res) => {
               {
                 kind: 'data',
                 data: requestData.event,
-                metadata: { 'mimeType': 'application/json+a2ui' },
+                metadata: {mimeType: 'application/json+a2ui'},
               } as Part,
             ],
             kind: 'message',
@@ -78,7 +78,7 @@ app.post('/a2a', (req, res) => {
             messageId: uuidv4(),
             contextId,
             role: 'user',
-            parts: [{ kind: 'text', text: requestData.query }],
+            parts: [{kind: 'text', text: requestData.query}],
             kind: 'message',
           },
         };
@@ -94,7 +94,7 @@ app.post('/a2a', (req, res) => {
               {
                 kind: 'data',
                 data: requestData,
-                metadata: { 'mimeType': 'application/json+a2ui' },
+                metadata: {mimeType: 'application/json+a2ui'},
               } as Part,
             ],
             kind: 'message',
@@ -107,7 +107,7 @@ app.post('/a2a', (req, res) => {
         message: {
           messageId: uuidv4(),
           role: 'user',
-          parts: [{ kind: 'text', text: originalBody }],
+          parts: [{kind: 'text', text: originalBody}],
           kind: 'message',
         },
       };
@@ -123,16 +123,20 @@ app.post('/a2a', (req, res) => {
     } catch (error: any) {
       console.error('Request error:', error.message);
       if (!res.headersSent) {
-        res.status(500).json({ error: error.message });
+        res.status(500).json({error: error.message});
       } else if (!res.writableEnded) {
-        res.write(`data: ${JSON.stringify({ error: error.message })}\n\n`);
+        res.write(`data: ${JSON.stringify({error: error.message})}\n\n`);
         res.end();
       }
     }
   });
 });
 
-async function handleStreamingResponse(client: A2AClient, sendParams: MessageSendParams, res: express.Response) {
+async function handleStreamingResponse(
+  client: A2AClient,
+  sendParams: MessageSendParams,
+  res: express.Response,
+) {
   process.stdout.write('[server] Streaming mode enabled\n');
   const stream = client.sendMessageStream(sendParams);
 
@@ -156,7 +160,7 @@ async function handleStreamingResponse(client: A2AClient, sendParams: MessageSen
       console.log(`[server] Streaming parts: ${JSON.stringify(parts)}`);
       const responseData = {
         parts,
-        contextId: (event as any).contextId || (event as any).status?.message?.contextId
+        contextId: (event as any).contextId || (event as any).status?.message?.contextId,
       };
       res.write(`data: ${JSON.stringify(responseData)}\n\n`);
     }
@@ -165,34 +169,38 @@ async function handleStreamingResponse(client: A2AClient, sendParams: MessageSen
   console.log('[server] Stream finished');
 }
 
-async function handleNonStreamingResponse(client: A2AClient, sendParams: MessageSendParams, res: express.Response) {
+async function handleNonStreamingResponse(
+  client: A2AClient,
+  sendParams: MessageSendParams,
+  res: express.Response,
+) {
   process.stdout.write('[server] Streaming mode disabled\n');
   const response = await client.sendMessage(sendParams);
   res.set('Cache-Control', 'no-store');
 
   if ('error' in response) {
     console.error('Error:', response.error.message);
-    res.status(500).json({ error: response.error.message });
+    res.status(500).json({error: response.error.message});
     return;
   }
 
   const result = (response as SendMessageSuccessResponse).result as Task;
   res.json({
     parts: result.kind === 'task' ? result.status.message?.parts || [] : [],
-    contextId: result.contextId
+    contextId: result.contextId,
   });
 }
 
 app.use((req, res, next) => {
   angularApp
     .handle(req)
-    .then((response) => (response ? writeResponseToNodeResponse(response, res) : next()))
+    .then(response => (response ? writeResponseToNodeResponse(response, res) : next()))
     .catch(next);
 });
 
 if (isMainModule(import.meta.url) || process.env['pm_id']) {
   const port = process.env['PORT'] || 4000;
-  app.listen(port, (error) => {
+  app.listen(port, error => {
     if (error) {
       throw error;
     }
@@ -204,7 +212,7 @@ if (isMainModule(import.meta.url) || process.env['pm_id']) {
 async function fetchWithCustomHeader(url: string | URL | Request, init?: RequestInit) {
   const headers = new Headers(init?.headers);
   headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.9');
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 }
 
diff --git a/samples/client/angular/projects/restaurant/src/styles.css b/samples/client/angular/projects/restaurant/src/styles.css
index cdc8ac184..71c822b32 100644
--- a/samples/client/angular/projects/restaurant/src/styles.css
+++ b/samples/client/angular/projects/restaurant/src/styles.css
@@ -53,32 +53,28 @@
   --bb-grid-size-15: calc(var(--bb-grid-size) * 15);
   --bb-grid-size-16: calc(var(--bb-grid-size) * 16);
 
-  --background: radial-gradient(
-    at 0% 0%,
-    light-dark(rgba(161, 196, 253, 0.3), rgba(6, 182, 212, 0.15)) 0px,
-    transparent 50%
-  ),
-  radial-gradient(
-    at 100% 0%,
-    light-dark(rgba(255, 226, 226, 0.3), rgba(59, 130, 246, 0.15)) 0px,
-    transparent 50%
-  ),
-  radial-gradient(
-    at 100% 100%,
-    light-dark(rgba(162, 210, 255, 0.3), rgba(20, 184, 166, 0.15)) 0px,
-    transparent 50%
-  ),
-  radial-gradient(
-    at 0% 100%,
-    light-dark(rgba(255, 200, 221, 0.3), rgba(99, 102, 241, 0.15)) 0px,
-    transparent 50%
-  ),
-  linear-gradient(
-    120deg,
-    light-dark(#f0f4f8, #0f172a) 0%,
-    light-dark(#e2e8f0, #1e293b) 100%
-  );
-
+  --background:
+    radial-gradient(
+      at 0% 0%,
+      light-dark(rgba(161, 196, 253, 0.3), rgba(6, 182, 212, 0.15)) 0px,
+      transparent 50%
+    ),
+    radial-gradient(
+      at 100% 0%,
+      light-dark(rgba(255, 226, 226, 0.3), rgba(59, 130, 246, 0.15)) 0px,
+      transparent 50%
+    ),
+    radial-gradient(
+      at 100% 100%,
+      light-dark(rgba(162, 210, 255, 0.3), rgba(20, 184, 166, 0.15)) 0px,
+      transparent 50%
+    ),
+    radial-gradient(
+      at 0% 100%,
+      light-dark(rgba(255, 200, 221, 0.3), rgba(99, 102, 241, 0.15)) 0px,
+      transparent 50%
+    ),
+    linear-gradient(120deg, light-dark(#f0f4f8, #0f172a) 0%, light-dark(#e2e8f0, #1e293b) 100%);
 }
 
 * {
@@ -87,9 +83,8 @@
 
 html,
 body {
-  --font-family: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-family-flex: "Outfit", "Helvetica Neue", Helvetica, Arial,
-    sans-serif;
+  --font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-family-flex: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --font-family-mono: monospace;
 
   background: var(--background);
diff --git a/samples/client/angular/projects/restaurant/tsconfig.app.json b/samples/client/angular/projects/restaurant/tsconfig.app.json
index 9fb2965ee..4ffbd7c8e 100644
--- a/samples/client/angular/projects/restaurant/tsconfig.app.json
+++ b/samples/client/angular/projects/restaurant/tsconfig.app.json
@@ -2,14 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/restaurant",
-    "types": [
-      "node"
-    ]
+    "types": ["node"]
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }
diff --git a/samples/client/angular/projects/rizzcharts/README.md b/samples/client/angular/projects/rizzcharts/README.md
index ebb991c8b..c761a5c1b 100644
--- a/samples/client/angular/projects/rizzcharts/README.md
+++ b/samples/client/angular/projects/rizzcharts/README.md
@@ -9,10 +9,12 @@ These are sample implementations of A2UI in Angular.
 
 ## Running
 
-1. Update the `src/environments/environment.ts` file with your Google Maps API key. 
+1. Update the `src/environments/environment.ts` file with your Google Maps API key.
 2. Build the shared dependencies by running `npm i`, then `npm run build` in the `renderers/web_core` directory
 3. Install the dependencies: `npm i`
 4. Run the A2A server for the [rizzcharts agent](../../../../agent/adk/rizzcharts/python/)
 5. Run the relevant app:
-  * `npm start -- rizzcharts`
+
+- `npm start -- rizzcharts`
+
 6. Open http://localhost:4200/
diff --git a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/canvas.ts b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/canvas.ts
index 3a2571a6f..b41a851c6 100644
--- a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/canvas.ts
+++ b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/canvas.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Types from '@a2ui/web_core/types/types';
-import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@angular/core';
-import { CanvasService } from '@a2a_chat_canvas/services/canvas-service';
+import {ChangeDetectionStrategy, Component, computed, inject, OnInit} from '@angular/core';
+import {CanvasService} from '@a2a_chat_canvas/services/canvas-service';
 
 @Component({
   selector: 'a2ui-canvas',
diff --git a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/catalog.ts b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/catalog.ts
index a4acf3234..51d2d5d02 100644
--- a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/catalog.ts
+++ b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/catalog.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { Catalog, DEFAULT_CATALOG } from '@a2ui/angular';
-import { inputBinding } from '@angular/core';
+import {Catalog, DEFAULT_CATALOG} from '@a2ui/angular';
+import {inputBinding} from '@angular/core';
 
 export const RIZZ_CHARTS_CATALOG = {
   ...DEFAULT_CATALOG,
-  Canvas: () => import('./canvas').then((r) => r.Canvas),
+  Canvas: () => import('./canvas').then(r => r.Canvas),
   Chart: {
-    type: () => import('./chart').then((r) => r.Chart),
-    bindings: ({ properties }) => [
+    type: () => import('./chart').then(r => r.Chart),
+    bindings: ({properties}) => [
       inputBinding('type', () => ('type' in properties && properties['type']) || undefined),
       inputBinding('title', () => ('title' in properties && properties['title']) || undefined),
       inputBinding(
@@ -32,8 +32,8 @@ export const RIZZ_CHARTS_CATALOG = {
     ],
   },
   GoogleMap: {
-    type: () => import('./google-map').then((r) => r.GoogleMap),
-    bindings: ({ properties }) => [
+    type: () => import('./google-map').then(r => r.GoogleMap),
+    bindings: ({properties}) => [
       inputBinding('zoom', () => ('zoom' in properties && properties['zoom']) || 8),
       inputBinding('center', () => ('center' in properties && properties['center']) || undefined),
       inputBinding('pins', () => ('pins' in properties && properties['pins']) || undefined),
@@ -41,11 +41,17 @@ export const RIZZ_CHARTS_CATALOG = {
     ],
   },
   YouTube: {
-    type: () => import('./youtube').then((r) => r.YouTube),
-    bindings: ({ properties }) => [
-      inputBinding('videoId', () => ('videoId' in properties && properties['videoId']) || undefined),
+    type: () => import('./youtube').then(r => r.YouTube),
+    bindings: ({properties}) => [
+      inputBinding(
+        'videoId',
+        () => ('videoId' in properties && properties['videoId']) || undefined,
+      ),
       inputBinding('title', () => ('title' in properties && properties['title']) || undefined),
-      inputBinding('autoplay', () => ('autoplay' in properties && properties['autoplay']) || undefined),
+      inputBinding(
+        'autoplay',
+        () => ('autoplay' in properties && properties['autoplay']) || undefined,
+      ),
     ],
   },
 } as Catalog;
diff --git a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/chart.ts b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/chart.ts
index 835488817..b637053ae 100644
--- a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/chart.ts
+++ b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/chart.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
 import {
@@ -26,10 +26,10 @@ import {
   signal,
   ViewChild,
 } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { ChartData, ChartEvent, ChartOptions, ChartType, LegendItem } from 'chart.js';
-import { BaseChartDirective } from 'ng2-charts';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
+import {ChartData, ChartEvent, ChartOptions, ChartType, LegendItem} from 'chart.js';
+import {BaseChartDirective} from 'ng2-charts';
 
 @Component({
   selector: 'a2ui-chart',
@@ -155,7 +155,7 @@ export class Chart extends DynamicComponent<Types.CustomNode> {
       if (!allData) {
         return undefined;
       }
-      return { ...allData.get(selectedCategory) } as ChartData<'pie', number[], string>;
+      return {...allData.get(selectedCategory)} as ChartData<'pie', number[], string>;
     },
   );
 
@@ -199,8 +199,8 @@ export class Chart extends DynamicComponent<Types.CustomNode> {
     if (pathPrefix?.path) {
       for (let index: number = 0; index < 500; index++) {
         const itemPrefix = `${pathPrefix.path}[${index}]`;
-        const labelPath: Primitives.StringValue = { path: `${itemPrefix}.label` };
-        const valuePath: Primitives.NumberValue = { path: `${itemPrefix}.value` };
+        const labelPath: Primitives.StringValue = {path: `${itemPrefix}.label`};
+        const valuePath: Primitives.NumberValue = {path: `${itemPrefix}.value`};
         const label = super.resolvePrimitive(labelPath);
         const value = super.resolvePrimitive(valuePath);
         if (label === null || value === null) {
@@ -257,7 +257,7 @@ export class Chart extends DynamicComponent<Types.CustomNode> {
     this.selectedCategory.set('root');
   }
 
-  protected onClick(e: { event?: ChartEvent; active?: any[] | undefined }) {
+  protected onClick(e: {event?: ChartEvent; active?: any[] | undefined}) {
     const active = e.active;
     if (!active || active.length === 0) return;
 
diff --git a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/google-map.ts b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/google-map.ts
index facc13baa..0759ac120 100644
--- a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/google-map.ts
+++ b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/google-map.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
-import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { GoogleMapsModule } from '@angular/google-maps';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {GoogleMapsModule} from '@angular/google-maps';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
 
 // --- Location Definitions ---
 interface Pin {
@@ -117,7 +117,7 @@ export interface CustomProperties {
             [zoom]="resolvedZoom"
             height="500px"
             width="100%"
-            [options]="{ mapId: mapId }"
+            [options]="{mapId: mapId}"
           >
             @for (pin of resolvedPins(); track pin) {
               <map-advanced-marker
@@ -179,13 +179,13 @@ export class GoogleMap extends DynamicComponent<Types.CustomNode> {
       return null;
     }
 
-    const latValue: Primitives.NumberValue = { path: `${value}.lat` };
-    const lngValue: Primitives.NumberValue = { path: `${value}.lng` };
-    const nameValue: Primitives.StringValue = { path: `${value}.name` };
-    const descriptionValue: Primitives.StringValue = { path: `${value}.description` };
-    const backgroundValue: Primitives.StringValue = { path: `${value}.background` };
-    const borderColorValue: Primitives.StringValue = { path: `${value}.borderColor` };
-    const glyphColorValue: Primitives.StringValue = { path: `${value}.glyphColor` };
+    const latValue: Primitives.NumberValue = {path: `${value}.lat`};
+    const lngValue: Primitives.NumberValue = {path: `${value}.lng`};
+    const nameValue: Primitives.StringValue = {path: `${value}.name`};
+    const descriptionValue: Primitives.StringValue = {path: `${value}.description`};
+    const backgroundValue: Primitives.StringValue = {path: `${value}.background`};
+    const borderColorValue: Primitives.StringValue = {path: `${value}.borderColor`};
+    const glyphColorValue: Primitives.StringValue = {path: `${value}.glyphColor`};
 
     const lat = this.resolvePrimitive(latValue);
     const lng = this.resolvePrimitive(lngValue);
@@ -217,8 +217,8 @@ export class GoogleMap extends DynamicComponent<Types.CustomNode> {
 
   private resolveLatLng(value: CustomProperties | null): google.maps.LatLngLiteral {
     if (value?.path) {
-      const latValue: Primitives.NumberValue = { path: `${value.path}.lat` };
-      const lngValue: Primitives.NumberValue = { path: `${value.path}.lng` };
+      const latValue: Primitives.NumberValue = {path: `${value.path}.lat`};
+      const lngValue: Primitives.NumberValue = {path: `${value.path}.lng`};
       const lat = this.resolvePrimitive(latValue)!;
       const lng = this.resolvePrimitive(lngValue)!;
       return {
diff --git a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/youtube.ts b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/youtube.ts
index 914ea1858..f0fa50d2a 100644
--- a/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/youtube.ts
+++ b/samples/client/angular/projects/rizzcharts/src/a2ui-catalog/youtube.ts
@@ -14,16 +14,11 @@
  limitations under the License.
  */
 
-import { DynamicComponent } from '@a2ui/angular';
+import {DynamicComponent} from '@a2ui/angular';
 import * as Primitives from '@a2ui/web_core/types/primitives';
 import * as Types from '@a2ui/web_core/types/types';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import {ChangeDetectionStrategy, Component, computed, input} from '@angular/core';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 
 @Component({
   selector: 'a2ui-youtube',
@@ -94,14 +89,10 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 })
 export class YouTube extends DynamicComponent<Types.CustomNode> {
   readonly videoId = input.required<Primitives.StringValue | null>();
-  protected readonly resolvedVideoId = computed(() =>
-    this.resolvePrimitive(this.videoId()),
-  );
+  protected readonly resolvedVideoId = computed(() => this.resolvePrimitive(this.videoId()));
 
   readonly title = input<Primitives.StringValue | null>();
-  protected readonly resolvedTitle = computed(() =>
-    this.resolvePrimitive(this.title() ?? null),
-  );
+  protected readonly resolvedTitle = computed(() => this.resolvePrimitive(this.title() ?? null));
 
   readonly autoplay = input<Primitives.BooleanValue | null>();
   protected readonly resolvedAutoplay = computed(() =>
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.config.server.ts b/samples/client/angular/projects/rizzcharts/src/app/app.config.server.ts
index 017a5233a..3f3c54719 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.config.server.ts
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.config.server.ts
@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 
-import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering, withRoutes } from '@angular/ssr';
-import { appConfig } from './app.config';
-import { serverRoutes } from './app.routes.server';
+import {mergeApplicationConfig, ApplicationConfig} from '@angular/core';
+import {provideServerRendering, withRoutes} from '@angular/ssr';
+import {appConfig} from './app.config';
+import {serverRoutes} from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(withRoutes(serverRoutes))
-  ]
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.config.ts b/samples/client/angular/projects/rizzcharts/src/app/app.config.ts
index 266e05194..d1bd293ac 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.config.ts
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.config.ts
@@ -25,17 +25,17 @@ import {
   provideBrowserGlobalErrorListeners,
   provideZonelessChangeDetection,
 } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { RIZZ_CHARTS_CATALOG } from '@rizzcharts/a2ui-catalog/catalog';
-import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
-import { A2aService } from '../services/a2a_service';
-import { RizzchartsMarkdownRendererService } from '../services/markdown-renderer.service';
-import { theme } from './theme';
+import {provideRouter} from '@angular/router';
+import {RIZZ_CHARTS_CATALOG} from '@rizzcharts/a2ui-catalog/catalog';
+import {provideCharts, withDefaultRegisterables} from 'ng2-charts';
+import {A2aService} from '../services/a2a_service';
+import {RizzchartsMarkdownRendererService} from '../services/markdown-renderer.service';
+import {theme} from './theme';
 
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
-import { routes } from './app.routes';
-import { provideMarkdownRenderer } from '@a2ui/angular';
-import { renderMarkdown } from '@a2ui/markdown-it';
+import {provideClientHydration, withEventReplay} from '@angular/platform-browser';
+import {routes} from './app.routes';
+import {provideMarkdownRenderer} from '@a2ui/angular';
+import {renderMarkdown} from '@a2ui/markdown-it';
 
 export const appConfig: ApplicationConfig = {
   providers: [
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.html b/samples/client/angular/projects/rizzcharts/src/app/app.html
index 0a6c46e98..5ce1d071b 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.html
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.html
@@ -19,35 +19,43 @@
   <a2a-chat-canvas [emptyHistoryTemplate]="welcomeMessage"></a2a-chat-canvas>
   <ng-template #welcomeMessage>
     <div class="empty-history">
-        <div class="agent-header">
-          <div class="agent-header-part">
-            <div class="agent-icon">
-              <img src="rizz-agent.png" class="large-icon" alt="Rizz agent icon" />
-            </div>
-          </div>
-          <div class="agent-header-part agent-name">
-            <strong>{{ agentName() }}</strong>
+      <div class="agent-header">
+        <div class="agent-header-part">
+          <div class="agent-icon">
+            <img src="rizz-agent.png" class="large-icon" alt="Rizz agent icon" />
           </div>
         </div>
-        <br />
-
-        <p class="empty-history-text">
-          I help you understand and visualize sales pipelines and analyze customer performance data.
-        </p>
-        <div class="suggestion-chips">
-          <button mat-stroked-button class="chip" (click)="sendMessage('Show me sales data for Q1')">
-            <span class="material-icons-outlined">pie_chart</span>
-            Show me sales data for Q1
-          </button>
-          <button mat-stroked-button class="chip" (click)="sendMessage('Show me 2024-Q3 sales report')">
-            <span class="material-icons-outlined">analytics</span>
-            Show me 2024-Q3 sales report
-          </button>
-          <button mat-stroked-button class="chip" (click)="sendMessage('Which stores have unique sales trends?')">
-            <span class="material-icons-outlined">local_mall</span>
-            Which stores have unique sales trends?
-          </button>
+        <div class="agent-header-part agent-name">
+          <strong>{{ agentName() }}</strong>
         </div>
+      </div>
+      <br />
+
+      <p class="empty-history-text">
+        I help you understand and visualize sales pipelines and analyze customer performance data.
+      </p>
+      <div class="suggestion-chips">
+        <button mat-stroked-button class="chip" (click)="sendMessage('Show me sales data for Q1')">
+          <span class="material-icons-outlined">pie_chart</span>
+          Show me sales data for Q1
+        </button>
+        <button
+          mat-stroked-button
+          class="chip"
+          (click)="sendMessage('Show me 2024-Q3 sales report')"
+        >
+          <span class="material-icons-outlined">analytics</span>
+          Show me 2024-Q3 sales report
+        </button>
+        <button
+          mat-stroked-button
+          class="chip"
+          (click)="sendMessage('Which stores have unique sales trends?')"
+        >
+          <span class="material-icons-outlined">local_mall</span>
+          Which stores have unique sales trends?
+        </button>
+      </div>
     </div>
   </ng-template>
 </main>
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.routes.server.ts b/samples/client/angular/projects/rizzcharts/src/app/app.routes.server.ts
index 7a761dad0..417bd7b43 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.routes.server.ts
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.routes.server.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { RenderMode, ServerRoute } from '@angular/ssr';
+import {RenderMode, ServerRoute} from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
   {
     path: '**',
-    renderMode: RenderMode.Prerender
-  }
+    renderMode: RenderMode.Prerender,
+  },
 ];
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.routes.ts b/samples/client/angular/projects/rizzcharts/src/app/app.routes.ts
index 54e9a215f..1cbd92c87 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.routes.ts
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.routes.ts
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
 
 export const routes: Routes = [];
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.scss b/samples/client/angular/projects/rizzcharts/src/app/app.scss
index ef84a8eb7..abfa95cbd 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.scss
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.scss
@@ -21,7 +21,7 @@ main {
 .empty-history {
   display: block;
   padding-bottom: 8rem;
-  background-image: url("/Gradient.png");
+  background-image: url('/Gradient.png');
   background-size: contain;
   background-repeat: no-repeat;
   background-position-y: bottom;
@@ -32,12 +32,7 @@ main {
   margin: 0;
   font: var(--mat-sys-display-small);
   // These values are not from the spec, but UX wants them for the gradient.
-  background: linear-gradient(
-    90deg,
-    #217bfe 28.03%,
-    #078efb 49.56%,
-    #ac87eb 71.1%
-  );
+  background: linear-gradient(90deg, #217bfe 28.03%, #078efb 49.56%, #ac87eb 71.1%);
   background-clip: text;
   color: transparent;
 }
@@ -65,14 +60,13 @@ main {
 }
 
 .large-icon {
-    width: 32px;
-    height: 32px;
-    font-size: 32px;
-    border-radius: var(--mat-sys-corner-extra-large);
-    vertical-align: top;
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+  border-radius: var(--mat-sys-corner-extra-large);
+  vertical-align: top;
 }
 
-
 .agent-header {
   display: flex;
   align-items: center;
@@ -93,17 +87,17 @@ main {
 
 .chip {
   // Override Material button styles to look like a chip
-    border-radius: 100px !important; // Force pill shape
-    padding: 10px 16px !important;
-    display: inline-flex !important;
-    align-items: center !important;
-    height: auto !important;
-    line-height: 25px !important; // Match icon height
+  border-radius: 100px !important; // Force pill shape
+  padding: 10px 16px !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  height: auto !important;
+  line-height: 25px !important; // Match icon height
   .material-icons-outlined {
     font-size: 20px;
     margin-right: 8px;
-      line-height: 1; // Prevent icon from affecting line height
-      position: relative;
-      top: 4px; // Move icon down slightly to match text
+    line-height: 1; // Prevent icon from affecting line height
+    position: relative;
+    top: 4px; // Move icon down slightly to match text
   }
 }
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.spec.ts b/samples/client/angular/projects/rizzcharts/src/app/app.spec.ts
index 20fdeeb37..6d28332ad 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.spec.ts
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { provideZonelessChangeDetection } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { App } from './app';
+import {provideZonelessChangeDetection} from '@angular/core';
+import {TestBed} from '@angular/core/testing';
+import {App} from './app';
 
 describe('App', () => {
   beforeEach(async () => {
diff --git a/samples/client/angular/projects/rizzcharts/src/app/app.ts b/samples/client/angular/projects/rizzcharts/src/app/app.ts
index 6ccf25c05..abf3be519 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/app.ts
+++ b/samples/client/angular/projects/rizzcharts/src/app/app.ts
@@ -23,14 +23,14 @@ import {
   inject,
   signal,
 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { A2aChatCanvas } from '@a2a_chat_canvas/a2a-chat-canvas';
-import { ChatService } from '@a2a_chat_canvas/services/chat-service';
-import { Toolbar } from '@rizzcharts/components/toolbar/toolbar';
-import { environment } from '@rizzcharts/environments/environment';
-import { A2aService } from '@rizzcharts/services/a2a_service';
+import {DOCUMENT} from '@angular/common';
+import {RouterOutlet} from '@angular/router';
+import {MatButtonModule} from '@angular/material/button';
+import {A2aChatCanvas} from '@a2a_chat_canvas/a2a-chat-canvas';
+import {ChatService} from '@a2a_chat_canvas/services/chat-service';
+import {Toolbar} from '@rizzcharts/components/toolbar/toolbar';
+import {environment} from '@rizzcharts/environments/environment';
+import {A2aService} from '@rizzcharts/services/a2a_service';
 
 @Component({
   selector: 'app-root',
@@ -55,7 +55,7 @@ export class App implements OnInit {
     script.async = true;
     script.defer = true;
     this._renderer2.appendChild(this._document.body, script);
-    this.a2aService.getAgentCard().then((card) => {
+    this.a2aService.getAgentCard().then(card => {
       this.agentName.set(card.name);
     });
   }
diff --git a/samples/client/angular/projects/rizzcharts/src/app/theme.ts b/samples/client/angular/projects/rizzcharts/src/app/theme.ts
index 06f1a0242..54f1d383d 100644
--- a/samples/client/angular/projects/rizzcharts/src/app/theme.ts
+++ b/samples/client/angular/projects/rizzcharts/src/app/theme.ts
@@ -160,16 +160,16 @@ const video = {
   'layout-el-cv': true,
 };
 
-const aLight = Styles.merge(a, { 'color-c-n5': true });
-const inputLight = Styles.merge(input, { 'color-c-n5': true });
-const textareaLight = Styles.merge(textarea, { 'color-c-n5': true });
-const buttonLight = Styles.merge(button, { 'color-c-n100': true });
-const h1Light = Styles.merge(h1, { 'color-c-n5': true });
-const h2Light = Styles.merge(h2, { 'color-c-n5': true });
-const h3Light = Styles.merge(h3, { 'color-c-n5': true });
-const bodyLight = Styles.merge(body, { 'color-c-n5': true });
-const pLight = Styles.merge(p, { 'color-c-n35': true });
-const preLight = Styles.merge(pre, { 'color-c-n35': true });
+const aLight = Styles.merge(a, {'color-c-n5': true});
+const inputLight = Styles.merge(input, {'color-c-n5': true});
+const textareaLight = Styles.merge(textarea, {'color-c-n5': true});
+const buttonLight = Styles.merge(button, {'color-c-n100': true});
+const h1Light = Styles.merge(h1, {'color-c-n5': true});
+const h2Light = Styles.merge(h2, {'color-c-n5': true});
+const h3Light = Styles.merge(h3, {'color-c-n5': true});
+const bodyLight = Styles.merge(body, {'color-c-n5': true});
+const pLight = Styles.merge(p, {'color-c-n35': true});
+const preLight = Styles.merge(pre, {'color-c-n35': true});
 const orderedListLight = Styles.merge(orderedList, {
   'color-c-n35': true,
 });
@@ -200,7 +200,7 @@ export const theme: Types.Theme = {
       'color-c-n100': true,
       'behavior-ho-70': true,
     },
-    Card: { 'border-br-9': true, 'color-bgc-p100': true, 'layout-p-4': true },
+    Card: {'border-br-9': true, 'color-bgc-p100': true, 'layout-p-4': true},
     CheckBox: {
       element: {
         'layout-m-0': true,
@@ -268,7 +268,7 @@ export const theme: Types.Theme = {
       'layout-p-2': true,
     },
     Modal: {
-      backdrop: { 'color-bbgc-p60_20': true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
         'border-br-2': true,
         'color-bgc-p100': true,
@@ -293,7 +293,7 @@ export const theme: Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
@@ -308,7 +308,7 @@ export const theme: Types.Theme = {
       h4: {},
       h5: {},
       caption: {},
-      body: {}
+      body: {},
     },
     TextField: {
       container: {
diff --git a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.html b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.html
index 3b06d0c68..ec78476ec 100644
--- a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.html
+++ b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.html
@@ -24,13 +24,17 @@
 
   <mat-form-field>
     <mat-label>A2UI Component Catalog</mat-label>
-    <mat-select [value]="selectedCatalogs" (valueChange)="selectedCatalogs = $event; updateCatalogService()" multiple>
+    <mat-select
+      [value]="selectedCatalogs"
+      (valueChange)="selectedCatalogs = $event; updateCatalogService()"
+      multiple
+    >
       @for (option of catalogs; track option) {
-      <mat-option [value]="option.value">{{ option.viewValue }}</mat-option>
+        <mat-option [value]="option.value">{{ option.viewValue }}</mat-option>
       }
     </mat-select>
   </mat-form-field>
 
   <span class="example-spacer"></span>
   <img src="avatar.jpg" class="profile-photo" />
-</mat-toolbar>
\ No newline at end of file
+</mat-toolbar>
diff --git a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.scss b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.scss
index f41813f36..3f6487020 100644
--- a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.scss
+++ b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.scss
@@ -12,22 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-
 .example-spacer {
   flex: 1 1 auto;
 }
 
 .logo {
-    
 }
 
 .profile-photo {
-    width: 40px;
-    height: 40px;
-    font-size: 40px;
-    border-radius: var(--mat-sys-corner-extra-large);
-    vertical-align: top;
-    margin-right: 0.5rem;
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+  border-radius: var(--mat-sys-corner-extra-large);
+  vertical-align: top;
+  margin-right: 0.5rem;
 }
 
 .logo-dark {
@@ -57,4 +55,4 @@ mat-toolbar {
 
 mat-form-field {
   width: 350px;
-}
\ No newline at end of file
+}
diff --git a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.spec.ts b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.spec.ts
index 75d69973d..12bd46f70 100644
--- a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.spec.ts
+++ b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { Toolbar } from './toolbar';
+import {Toolbar} from './toolbar';
 
 describe('Toolbar', () => {
   let component: Toolbar;
@@ -24,9 +24,8 @@ describe('Toolbar', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [Toolbar]
-    })
-    .compileComponents();
+      imports: [Toolbar],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(Toolbar);
     component = fixture.componentInstance;
diff --git a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.ts b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.ts
index 093ec7c48..e0ead1854 100644
--- a/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.ts
+++ b/samples/client/angular/projects/rizzcharts/src/components/toolbar/toolbar.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { inject, Component, ChangeDetectionStrategy } from '@angular/core';
-import { CatalogService } from '../../services/catalog_service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import {inject, Component, ChangeDetectionStrategy} from '@angular/core';
+import {CatalogService} from '../../services/catalog_service';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatToolbarModule} from '@angular/material/toolbar';
 
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { FormsModule } from '@angular/forms';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'app-toolbar',
@@ -57,7 +57,7 @@ export class Toolbar {
   ];
 
   ngOnInit() {
-    this.selectedCatalogs = this.catalogs.map((c) => c.value);
+    this.selectedCatalogs = this.catalogs.map(c => c.value);
     this.updateCatalogService();
   }
 
diff --git a/samples/client/angular/projects/rizzcharts/src/environments/environment.ts b/samples/client/angular/projects/rizzcharts/src/environments/environment.ts
index f545848b8..eb25a48fa 100644
--- a/samples/client/angular/projects/rizzcharts/src/environments/environment.ts
+++ b/samples/client/angular/projects/rizzcharts/src/environments/environment.ts
@@ -15,5 +15,5 @@
  */
 
 export const environment = {
-  googleMapsApiKey: 'YOUR_API_KEY_HERE'
+  googleMapsApiKey: 'YOUR_API_KEY_HERE',
 };
diff --git a/samples/client/angular/projects/rizzcharts/src/index.html b/samples/client/angular/projects/rizzcharts/src/index.html
index 5ffb846f5..5355f072a 100644
--- a/samples/client/angular/projects/rizzcharts/src/index.html
+++ b/samples/client/angular/projects/rizzcharts/src/index.html
@@ -22,8 +22,8 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined&display=swap"
       rel="stylesheet"
diff --git a/samples/client/angular/projects/rizzcharts/src/main.server.ts b/samples/client/angular/projects/rizzcharts/src/main.server.ts
index 1d1643b07..5bad09f44 100644
--- a/samples/client/angular/projects/rizzcharts/src/main.server.ts
+++ b/samples/client/angular/projects/rizzcharts/src/main.server.ts
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
-import { App } from './app/app';
-import { config } from './app/app.config.server';
+import {BootstrapContext, bootstrapApplication} from '@angular/platform-browser';
+import {App} from './app/app';
+import {config} from './app/app.config.server';
 
-const bootstrap = (context: BootstrapContext) =>
-    bootstrapApplication(App, config, context);
+const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
 
 export default bootstrap;
diff --git a/samples/client/angular/projects/rizzcharts/src/main.ts b/samples/client/angular/projects/rizzcharts/src/main.ts
index d9d99cb08..796e8b29e 100644
--- a/samples/client/angular/projects/rizzcharts/src/main.ts
+++ b/samples/client/angular/projects/rizzcharts/src/main.ts
@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
-import { Chart, registerables } from 'chart.js';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {App} from './app/app';
+import {Chart, registerables} from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 
 Chart.register(...registerables, ChartDataLabels);
 
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch(err => console.error(err));
diff --git a/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.spec.ts b/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.spec.ts
index 945d9287e..3ebfe961d 100644
--- a/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.spec.ts
+++ b/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MarkdownPipe } from './markdown.pipe';
+import {TestBed} from '@angular/core/testing';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MarkdownPipe} from './markdown.pipe';
 
 describe('MarkdownPipe', () => {
   let pipe: MarkdownPipe;
@@ -48,7 +48,6 @@ describe('MarkdownPipe', () => {
     expect(result).toContain('<strong>bold</strong>');
   });
 
-
   it('should open links in new tab', () => {
     const markdown = '[link](http://example.com)';
     const result = pipe.transform(markdown);
diff --git a/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.ts b/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.ts
index 77e13e7f1..abc6b3932 100644
--- a/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.ts
+++ b/samples/client/angular/projects/rizzcharts/src/pipes/markdown.pipe.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Pipe, PipeTransform, inject } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import {Pipe, PipeTransform, inject} from '@angular/core';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import markdownit from 'markdown-it';
 
-@Pipe({ name: 'markdown' })
+@Pipe({name: 'markdown'})
 export class MarkdownPipe implements PipeTransform {
   private readonly sanitizer = inject(DomSanitizer);
   private readonly md = markdownit({
diff --git a/samples/client/angular/projects/rizzcharts/src/server.ts b/samples/client/angular/projects/rizzcharts/src/server.ts
index 5bf454a1e..76ff0906b 100644
--- a/samples/client/angular/projects/rizzcharts/src/server.ts
+++ b/samples/client/angular/projects/rizzcharts/src/server.ts
@@ -21,10 +21,10 @@ import {
   writeResponseToNodeResponse,
 } from '@angular/ssr/node';
 import express from 'express';
-import { join } from 'node:path';
-import { v4 as uuidv4 } from 'uuid';
-import { A2AClient } from '@a2a-js/sdk/client';
-import { Message, MessageSendParams, Part, SendMessageSuccessResponse, Task } from '@a2a-js/sdk';
+import {join} from 'node:path';
+import {v4 as uuidv4} from 'uuid';
+import {A2AClient} from '@a2a-js/sdk/client';
+import {Message, MessageSendParams, Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
 
 const browserDistFolder = join(import.meta.dirname, '../browser');
 const app = express();
@@ -42,7 +42,7 @@ app.use(
 app.post('/a2a', (req, res) => {
   let originalBody = '';
 
-  req.on('data', (chunk) => {
+  req.on('data', chunk => {
     originalBody += chunk.toString();
   });
 
@@ -73,7 +73,7 @@ app.post('/a2a', (req, res) => {
 
     if ('error' in response) {
       console.error('Error:', response.error.message);
-      res.status(500).json({ error: response.error.message });
+      res.status(500).json({error: response.error.message});
       return;
     }
 
@@ -83,29 +83,31 @@ app.post('/a2a', (req, res) => {
 
 app.get('/a2a/agent-card', async (req, res) => {
   try {
-    const response = await fetchWithCustomHeader('http://localhost:10002/.well-known/agent-card.json');
+    const response = await fetchWithCustomHeader(
+      'http://localhost:10002/.well-known/agent-card.json',
+    );
     if (!response.ok) {
-      res.status(response.status).json({ error: 'Failed to fetch agent card' });
+      res.status(response.status).json({error: 'Failed to fetch agent card'});
       return;
     }
     const card = await response.json();
     res.json(card);
   } catch (error) {
     console.error('Error fetching agent card:', error);
-    res.status(500).json({ error: 'Internal server error' });
+    res.status(500).json({error: 'Internal server error'});
   }
 });
 
 app.use((req, res, next) => {
   angularApp
     .handle(req)
-    .then((response) => (response ? writeResponseToNodeResponse(response, res) : next()))
+    .then(response => (response ? writeResponseToNodeResponse(response, res) : next()))
     .catch(next);
 });
 
 if (isMainModule(import.meta.url) || process.env['pm_id']) {
   const port = process.env['PORT'] || 4000;
-  app.listen(port, (error) => {
+  app.listen(port, error => {
     if (error) {
       throw error;
     }
@@ -117,7 +119,7 @@ if (isMainModule(import.meta.url) || process.env['pm_id']) {
 async function fetchWithCustomHeader(url: string | URL | Request, init?: RequestInit) {
   const headers = new Headers(init?.headers);
   headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.8');
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 }
 
diff --git a/samples/client/angular/projects/rizzcharts/src/services/a2a_service.ts b/samples/client/angular/projects/rizzcharts/src/services/a2a_service.ts
index 1f501d259..0c766d170 100644
--- a/samples/client/angular/projects/rizzcharts/src/services/a2a_service.ts
+++ b/samples/client/angular/projects/rizzcharts/src/services/a2a_service.ts
@@ -14,43 +14,43 @@
  * limitations under the License.
  */
 
-import { AgentCard, Part, SendMessageSuccessResponse } from '@a2a-js/sdk';
-import { A2aService as A2aServiceInterface } from '@a2a_chat_canvas/interfaces/a2a-service';
-import { Injectable } from '@angular/core';
-import { CatalogService } from './catalog_service';
+import {AgentCard, Part, SendMessageSuccessResponse} from '@a2a-js/sdk';
+import {A2aService as A2aServiceInterface} from '@a2a_chat_canvas/interfaces/a2a-service';
+import {Injectable} from '@angular/core';
+import {CatalogService} from './catalog_service';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class A2aService implements A2aServiceInterface {
   private contextId?: string;
 
-  constructor(private catalogService: CatalogService) { }
+  constructor(private catalogService: CatalogService) {}
 
   async sendMessage(parts: Part[], signal?: AbortSignal): Promise<SendMessageSuccessResponse> {
     const currentCatalogUris = this.catalogService.catalogUris;
-    console.log("Attaching supported A2UI catalogs to message: ", currentCatalogUris);
+    console.log('Attaching supported A2UI catalogs to message: ', currentCatalogUris);
     const response = await fetch('/a2a', {
       body: JSON.stringify({
-        'parts': parts,
-        'metadata': {
-          "a2uiClientCapabilities": {
-            "supportedCatalogIds": currentCatalogUris
-          }
+        parts: parts,
+        metadata: {
+          a2uiClientCapabilities: {
+            supportedCatalogIds: currentCatalogUris,
+          },
         },
-        'contextId': this.contextId
+        contextId: this.contextId,
       }),
       method: 'POST',
       signal,
     });
 
     if (response.ok) {
-      const json = await response.json() as SendMessageSuccessResponse & { contextId?: string };
+      const json = (await response.json()) as SendMessageSuccessResponse & {contextId?: string};
       if (json.contextId || json.result?.contextId) {
         this.contextId = json.contextId || json.result?.contextId;
       }
       return json;
     }
 
-    const error = (await response.json()) as { error: string };
+    const error = (await response.json()) as {error: string};
     throw new Error(error.error);
   }
 
@@ -59,7 +59,7 @@ export class A2aService implements A2aServiceInterface {
     if (!response.ok) {
       throw new Error('Failed to fetch agent card');
     }
-    const card = await response.json() as AgentCard;
+    const card = (await response.json()) as AgentCard;
     // Override iconUrl to use local asset
     card.iconUrl = 'rizz-agent.png';
     return card;
diff --git a/samples/client/angular/projects/rizzcharts/src/services/catalog_service.ts b/samples/client/angular/projects/rizzcharts/src/services/catalog_service.ts
index c2e034f66..dafb4a64a 100644
--- a/samples/client/angular/projects/rizzcharts/src/services/catalog_service.ts
+++ b/samples/client/angular/projects/rizzcharts/src/services/catalog_service.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class CatalogService {
   public catalogUris: string[] = [];
 }
diff --git a/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.spec.ts b/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.spec.ts
index 835265cbf..5d598d946 100644
--- a/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.spec.ts
+++ b/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.spec.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { DomSanitizer } from '@angular/platform-browser';
-import { RizzchartsMarkdownRendererService } from './markdown-renderer.service';
+import {TestBed} from '@angular/core/testing';
+import {DomSanitizer} from '@angular/platform-browser';
+import {RizzchartsMarkdownRendererService} from './markdown-renderer.service';
 
 describe('RizzchartsMarkdownRendererService', () => {
   let service: RizzchartsMarkdownRendererService;
diff --git a/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.ts b/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.ts
index 30beebb1d..3b5fab772 100644
--- a/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.ts
+++ b/samples/client/angular/projects/rizzcharts/src/services/markdown-renderer.service.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { MarkdownRendererService } from '@a2a_chat_canvas/interfaces/markdown-renderer-service';
-import { inject, Injectable } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import {MarkdownRendererService} from '@a2a_chat_canvas/interfaces/markdown-renderer-service';
+import {inject, Injectable} from '@angular/core';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import markdownit from 'markdown-it';
 
 @Injectable({
diff --git a/samples/client/angular/projects/rizzcharts/src/styles.scss b/samples/client/angular/projects/rizzcharts/src/styles.scss
index 236d15a04..7238c36f6 100644
--- a/samples/client/angular/projects/rizzcharts/src/styles.scss
+++ b/samples/client/angular/projects/rizzcharts/src/styles.scss
@@ -12,11 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-
 // You can add global styles to this file, and also import other style files
 @use '@angular/material' as mat;
 
-
 @mixin styled-scrollbar {
   ::-webkit-scrollbar {
     width: 0.5rem;
@@ -41,15 +39,17 @@
 
 html {
   color-scheme: light dark;
-  @include mat.theme((
-    color: mat.$blue-palette,
-    typography: Roboto,
-    density: 0
-  ));
+  @include mat.theme(
+    (
+      color: mat.$blue-palette,
+      typography: Roboto,
+      density: 0,
+    )
+  );
 
   @include styled-scrollbar;
 }
- 
+
 :root {
   --n-100: #ffffff;
   --n-99: #fcfcfc;
diff --git a/samples/client/angular/projects/rizzcharts/src/utils/utils.ts b/samples/client/angular/projects/rizzcharts/src/utils/utils.ts
index 37d688495..cfd9eed17 100644
--- a/samples/client/angular/projects/rizzcharts/src/utils/utils.ts
+++ b/samples/client/angular/projects/rizzcharts/src/utils/utils.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Part } from '@a2a-js/sdk';
+import {Part} from '@a2a-js/sdk';
 
 /**
  * Returns true if the part is a thought.
@@ -27,6 +27,6 @@ export function isAgentThought(part: Part): boolean {
     return false;
   }
 
-  const metadata = part.metadata as { adk_thought: boolean };
+  const metadata = part.metadata as {adk_thought: boolean};
   return metadata.adk_thought;
 }
diff --git a/samples/client/angular/projects/rizzcharts/tsconfig.app.json b/samples/client/angular/projects/rizzcharts/tsconfig.app.json
index e04b233e0..6c6f9b1d1 100644
--- a/samples/client/angular/projects/rizzcharts/tsconfig.app.json
+++ b/samples/client/angular/projects/rizzcharts/tsconfig.app.json
@@ -4,14 +4,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": [
-      "node"
-    ],
+    "types": ["node"]
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }
diff --git a/samples/client/angular/projects/rizzcharts/tsconfig.spec.json b/samples/client/angular/projects/rizzcharts/tsconfig.spec.json
index 0feea88ed..43ba0b186 100644
--- a/samples/client/angular/projects/rizzcharts/tsconfig.spec.json
+++ b/samples/client/angular/projects/rizzcharts/tsconfig.spec.json
@@ -4,11 +4,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.ts"]
 }
diff --git a/samples/client/angular/tsconfig.json b/samples/client/angular/tsconfig.json
index c51960598..999f107af 100644
--- a/samples/client/angular/tsconfig.json
+++ b/samples/client/angular/tsconfig.json
@@ -5,18 +5,10 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "paths": {
-      "@a2ui/angular": [
-        "./projects/lib/src/public-api.ts"
-      ],
-      "@a2ui/angular/v0_9": [
-        "./projects/lib/src/v0_9/public-api.ts"
-      ],
-      "@a2a_chat_canvas/*": [
-        "./projects/a2a-chat-canvas/src/lib/*"
-      ],
-      "@rizzcharts/*": [
-        "./projects/rizzcharts/src/*"
-      ]
+      "@a2ui/angular": ["./projects/lib/src/public-api.ts"],
+      "@a2ui/angular/v0_9": ["./projects/lib/src/v0_9/public-api.ts"],
+      "@a2a_chat_canvas/*": ["./projects/a2a-chat-canvas/src/lib/*"],
+      "@rizzcharts/*": ["./projects/rizzcharts/src/*"]
     },
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
diff --git a/samples/client/flutter/restaurant_finder/app/macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json b/samples/client/flutter/restaurant_finder/app/macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
index a2ec33f19..60e60c947 100644
--- a/samples/client/flutter/restaurant_finder/app/macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ b/samples/client/flutter/restaurant_finder/app/macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,68 +1,68 @@
 {
-  "images" : [
+  "images": [
     {
-      "size" : "16x16",
-      "idiom" : "mac",
-      "filename" : "app_icon_16.png",
-      "scale" : "1x"
+      "size": "16x16",
+      "idiom": "mac",
+      "filename": "app_icon_16.png",
+      "scale": "1x"
     },
     {
-      "size" : "16x16",
-      "idiom" : "mac",
-      "filename" : "app_icon_32.png",
-      "scale" : "2x"
+      "size": "16x16",
+      "idiom": "mac",
+      "filename": "app_icon_32.png",
+      "scale": "2x"
     },
     {
-      "size" : "32x32",
-      "idiom" : "mac",
-      "filename" : "app_icon_32.png",
-      "scale" : "1x"
+      "size": "32x32",
+      "idiom": "mac",
+      "filename": "app_icon_32.png",
+      "scale": "1x"
     },
     {
-      "size" : "32x32",
-      "idiom" : "mac",
-      "filename" : "app_icon_64.png",
-      "scale" : "2x"
+      "size": "32x32",
+      "idiom": "mac",
+      "filename": "app_icon_64.png",
+      "scale": "2x"
     },
     {
-      "size" : "128x128",
-      "idiom" : "mac",
-      "filename" : "app_icon_128.png",
-      "scale" : "1x"
+      "size": "128x128",
+      "idiom": "mac",
+      "filename": "app_icon_128.png",
+      "scale": "1x"
     },
     {
-      "size" : "128x128",
-      "idiom" : "mac",
-      "filename" : "app_icon_256.png",
-      "scale" : "2x"
+      "size": "128x128",
+      "idiom": "mac",
+      "filename": "app_icon_256.png",
+      "scale": "2x"
     },
     {
-      "size" : "256x256",
-      "idiom" : "mac",
-      "filename" : "app_icon_256.png",
-      "scale" : "1x"
+      "size": "256x256",
+      "idiom": "mac",
+      "filename": "app_icon_256.png",
+      "scale": "1x"
     },
     {
-      "size" : "256x256",
-      "idiom" : "mac",
-      "filename" : "app_icon_512.png",
-      "scale" : "2x"
+      "size": "256x256",
+      "idiom": "mac",
+      "filename": "app_icon_512.png",
+      "scale": "2x"
     },
     {
-      "size" : "512x512",
-      "idiom" : "mac",
-      "filename" : "app_icon_512.png",
-      "scale" : "1x"
+      "size": "512x512",
+      "idiom": "mac",
+      "filename": "app_icon_512.png",
+      "scale": "1x"
     },
     {
-      "size" : "512x512",
-      "idiom" : "mac",
-      "filename" : "app_icon_1024.png",
-      "scale" : "2x"
+      "size": "512x512",
+      "idiom": "mac",
+      "filename": "app_icon_1024.png",
+      "scale": "2x"
     }
   ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+  "info": {
+    "version": 1,
+    "author": "xcode"
   }
 }
diff --git a/samples/client/flutter/restaurant_finder/app/pubspec.yaml b/samples/client/flutter/restaurant_finder/app/pubspec.yaml
index 03848ed45..bddee44ec 100644
--- a/samples/client/flutter/restaurant_finder/app/pubspec.yaml
+++ b/samples/client/flutter/restaurant_finder/app/pubspec.yaml
@@ -29,7 +29,6 @@ dependencies:
   genui_a2a: ^0.8.0
   logging: ^1.3.0
 
-
 dev_dependencies:
   flutter_test:
     sdk: flutter
diff --git a/samples/client/flutter/restaurant_finder/app/web/index.html b/samples/client/flutter/restaurant_finder/app/web/index.html
index 8ef603914..1e39b9a3a 100644
--- a/samples/client/flutter/restaurant_finder/app/web/index.html
+++ b/samples/client/flutter/restaurant_finder/app/web/index.html
@@ -14,10 +14,10 @@
  limitations under the License.
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <!--
+  <head>
+    <!--
     If you are serving your web app in a path other than the root, change the
     href value below to reflect the base path you are serving from.
 
@@ -30,26 +30,26 @@
     This is a placeholder for base href that will be replaced by the value of
     the `--base-href` argument provided to `flutter build`.
   -->
-  <base href="$FLUTTER_BASE_HREF">
-
-  <meta charset="UTF-8">
-  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="A new Flutter project.">
-
-  <!-- iOS meta tags & icons -->
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="apple-mobile-web-app-title" content="app">
-  <link rel="apple-touch-icon" href="icons/Icon-192.png">
-
-  <!-- Favicon -->
-  <link rel="icon" type="image/png" href="favicon.png"/>
-
-  <title>app</title>
-  <link rel="manifest" href="manifest.json">
-</head>
-<body>
-  <!--
+    <base href="$FLUTTER_BASE_HREF" />
+
+    <meta charset="UTF-8" />
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
+    <meta name="description" content="A new Flutter project." />
+
+    <!-- iOS meta tags & icons -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-title" content="app" />
+    <link rel="apple-touch-icon" href="icons/Icon-192.png" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="favicon.png" />
+
+    <title>app</title>
+    <link rel="manifest" href="manifest.json" />
+  </head>
+  <body>
+    <!--
     You can customize the "flutter_bootstrap.js" script.
     This is useful to provide a custom configuration to the Flutter loader
     or to give the user feedback during the initialization process.
@@ -57,6 +57,6 @@
     For more details:
     * https://docs.flutter.dev/platform-integration/web/initialization
   -->
-  <script src="flutter_bootstrap.js" async></script>
-</body>
+    <script src="flutter_bootstrap.js" async></script>
+  </body>
 </html>
diff --git a/samples/client/flutter/restaurant_finder/app/web/manifest.json b/samples/client/flutter/restaurant_finder/app/web/manifest.json
index 5620a335a..85243e14c 100644
--- a/samples/client/flutter/restaurant_finder/app/web/manifest.json
+++ b/samples/client/flutter/restaurant_finder/app/web/manifest.json
@@ -1,35 +1,35 @@
 {
-    "name": "app",
-    "short_name": "app",
-    "start_url": ".",
-    "display": "standalone",
-    "background_color": "#0175C2",
-    "theme_color": "#0175C2",
-    "description": "A new Flutter project.",
-    "orientation": "portrait-primary",
-    "prefer_related_applications": false,
-    "icons": [
-        {
-            "src": "icons/Icon-192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "icons/Icon-512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        },
-        {
-            "src": "icons/Icon-maskable-192.png",
-            "sizes": "192x192",
-            "type": "image/png",
-            "purpose": "maskable"
-        },
-        {
-            "src": "icons/Icon-maskable-512.png",
-            "sizes": "512x512",
-            "type": "image/png",
-            "purpose": "maskable"
-        }
-    ]
+  "name": "app",
+  "short_name": "app",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#0175C2",
+  "theme_color": "#0175C2",
+  "description": "A new Flutter project.",
+  "orientation": "portrait-primary",
+  "prefer_related_applications": false,
+  "icons": [
+    {
+      "src": "icons/Icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/Icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/Icon-maskable-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icons/Icon-maskable-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
 }
diff --git a/samples/client/flutter/restaurant_finder/e2e_test/README.md b/samples/client/flutter/restaurant_finder/e2e_test/README.md
index 4cc22887d..d752927ef 100644
--- a/samples/client/flutter/restaurant_finder/e2e_test/README.md
+++ b/samples/client/flutter/restaurant_finder/e2e_test/README.md
@@ -6,6 +6,6 @@ Tests that checks the following entities work well together:
 2. Python restaurant finder agent
 3. AI model
 
-This tests are in separate package and 
+This tests are in separate package and
 run in a separate CI/CD pipeline, because they
 require API key.
diff --git a/samples/client/flutter/restaurant_finder/e2e_test/pubspec.yaml b/samples/client/flutter/restaurant_finder/e2e_test/pubspec.yaml
index c83447bd0..6518e642b 100644
--- a/samples/client/flutter/restaurant_finder/e2e_test/pubspec.yaml
+++ b/samples/client/flutter/restaurant_finder/e2e_test/pubspec.yaml
@@ -31,7 +31,6 @@ dependencies:
   restaurant_finder_client:
     path: ../app
 
-
 dev_dependencies:
   flutter_test:
     sdk: flutter
diff --git a/samples/client/lit/custom-components-example/README.md b/samples/client/lit/custom-components-example/README.md
index b161f8236..8ef49ae8a 100644
--- a/samples/client/lit/custom-components-example/README.md
+++ b/samples/client/lit/custom-components-example/README.md
@@ -11,6 +11,7 @@ This is a UI to generate and visualize A2UI responses.
 This sample depends on the Lit renderer. Before running this sample, you need to build the renderer.
 
 1. **Build the renderer:**
+
    ```bash
    cd ../../../renderers/lit
    npm install
@@ -18,6 +19,7 @@ This sample depends on the Lit renderer. Before running this sample, you need to
    ```
 
 2. **Run this sample:**
+
    ```bash
    cd - # back to the sample directory
    npm install
@@ -26,7 +28,7 @@ This sample depends on the Lit renderer. Before running this sample, you need to
 3. **Run the servers:**
    - Run the [A2A server](../../../agent/adk/custom-components-example/)
      - By default, the server uses the `McpAppsCustomComponent` which wraps MCP Apps in a secure, isolated double-iframe sandbox (`sandbox.html`) communicating strictly via JSON-RPC.
-     - Optionally run the server using `USE_MCP_SANDBOX=false uv run .` to bypass this security and use the standard `WebFrame` element. 
+     - Optionally run the server using `USE_MCP_SANDBOX=false uv run .` to bypass this security and use the standard `WebFrame` element.
      - **Observing the difference**: Search for "Alex Jordan" in the UI and click the Location button to open the floor plan. If you inspect the DOM using your browser's Developer Tools, you will see that `McpAppsCustomComponent` securely points the iframe `src` to the local proxy (`/sandbox.html`). In contrast, `WebFrame` directly injects the untrusted HTML via a data blob/srcdoc, lacking defense-in-depth origin isolation.
    - Run the dev server: `npm run dev`
 
@@ -36,11 +38,11 @@ After starting the dev server, you can open http://localhost:5173/ to view the s
 
 This sample showcases several custom components that go beyond standard A2UI rendering:
 
--   **MCP Apps (`mcp-apps-component.ts`)**: Sandboxed UI widgets using the MCP protocol, communicating securely via a JSON-RPC channel.
--   **Secure iFrame Web Frame (`web-frame.ts`)**: Powerful component that allows rendering raw HTML in an isolated context (used for the Office Floor Plan).
--   **Org Chart (`org-chart.ts`)**: A custom tree structure visualization component.
+- **MCP Apps (`mcp-apps-component.ts`)**: Sandboxed UI widgets using the MCP protocol, communicating securely via a JSON-RPC channel.
+- **Secure iFrame Web Frame (`web-frame.ts`)**: Powerful component that allows rendering raw HTML in an isolated context (used for the Office Floor Plan).
+- **Org Chart (`org-chart.ts`)**: A custom tree structure visualization component.
 
 ## Mix and Match A2UI Surfaces
 
-This sample demonstrates how standard A2UI surfaces (such as contact profile cards using standard `Card` and list items) can live on the same canvas as custom extensions. 
-The A2UI renderer library seamlessly manages the standard component catalog, while custom components (like the Org Chart or iframe-based floor plans) hook into the same event lifecycle. You can swap between standard profile views and rich custom widgets using a unified routing layer.
\ No newline at end of file
+This sample demonstrates how standard A2UI surfaces (such as contact profile cards using standard `Card` and list items) can live on the same canvas as custom extensions.
+The A2UI renderer library seamlessly manages the standard component catalog, while custom components (like the Org Chart or iframe-based floor plans) hook into the same event lifecycle. You can swap between standard profile views and rich custom widgets using a unified routing layer.
diff --git a/samples/client/lit/custom-components-example/README_CUSTOM_COMPONENTS.md b/samples/client/lit/custom-components-example/README_CUSTOM_COMPONENTS.md
index f94b77c76..5b2dc4dfd 100644
--- a/samples/client/lit/custom-components-example/README_CUSTOM_COMPONENTS.md
+++ b/samples/client/lit/custom-components-example/README_CUSTOM_COMPONENTS.md
@@ -9,55 +9,66 @@ This sample demonstrates a powerful pattern where the **Client** controls the ca
 1.  **Component Definition**: This client defines custom components (`OrgChart`, `WebFrame`) in `ui/custom-components/`.
 2.  **Schema Generation**: Each custom component has an associated JSON schema.
 3.  **Handshake**: When connecting to the agent, the client sends these schemas in the `metadata.inlineCatalog` field of the initial request.
-4.  **Dynamic Support**: This allows *any* A2UI agent (that supports inline catalogs) to immediately start using these components without prior knowledge.
+4.  **Dynamic Support**: This allows _any_ A2UI agent (that supports inline catalogs) to immediately start using these components without prior knowledge.
 
 ## Custom Components Implemented
 
 ### 1. `OrgChart`
-*Located in: `ui/custom-components/org-chart.ts`*
+
+_Located in: `ui/custom-components/org-chart.ts`_
 A visual tree illustrating the organizational hierarchy.
--   **Implementation**: A standard LitElement component.
--   **Interaction**: Emits `chart_node_click` events when nodes are clicked, which are sent back to the agent as A2UI Actions.
+
+- **Implementation**: A standard LitElement component.
+- **Interaction**: Emits `chart_node_click` events when nodes are clicked, which are sent back to the agent as A2UI Actions.
 
 ### 2. `WebFrame` (Interactive Iframe)
-*Located in: `ui/custom-components/web-frame.ts`*
+
+_Located in: `ui/custom-components/web-frame.ts`_
 A tailored iframe wrapper for embedding external content or static HTML tools.
--   **Use Case**: Used here to render the "Office Floor Plan" map.
--   **Security**: Uses `sandbox` attributes to restrict script execution while allowing necessary interactions.
--   **Bridge**: Includes a `postMessage` bridge to allow the embedded content (the map) to trigger A2UI actions in the main application.
+
+- **Use Case**: Used here to render the "Office Floor Plan" map.
+- **Security**: Uses `sandbox` attributes to restrict script execution while allowing necessary interactions.
+- **Bridge**: Includes a `postMessage` bridge to allow the embedded content (the map) to trigger A2UI actions in the main application.
 
 ## Multiple Surfaces
 
 The client is designed to render multiple A2UI "Surfaces" simultaneously. Instead of a single chat stream, the `contact.ts` shell manages:
 
--   **Main Profile (`contact-card`)**: The primary view.
--   **Side Panel (`org-chart-view`)**: A persistent side view for context.
--   **Overlay (`location-surface`)**: A temporary surface for specific tasks like map viewing.
+- **Main Profile (`contact-card`)**: The primary view.
+- **Side Panel (`org-chart-view`)**: A persistent side view for context.
+- **Overlay (`location-surface`)**: A temporary surface for specific tasks like map viewing.
 
 ## How to Run in Tandem
 
 To see this full experience, you must run this client with the specific `contact_multiple_surfaces` agent.
 
 ### 1. Start the Agent
+
 The agent serves the backend logic and the static assets (like the floor plan HTML).
+
 ```bash
 cd ../../../agent/adk/contact_multiple_surfaces
 uv run .
 ```
-*Runs on port 10004.*
+
+_Runs on port 10004._
 
 ### 2. Start this Client
+
 The client connects to the agent and renders the UI.
+
 ```bash
 # In this directory (samples/client/lit/contact)
 npm install
 npm run dev
 ```
-*The client acts as a shell, connecting to localhost:10004 by default.*
+
+_The client acts as a shell, connecting to localhost:10004 by default._
 
 ## Configuration
 
 The connection to the agent is configured in `middleware/a2a.ts`. If you need to change the agent port, update the URL in that file:
+
 ```typescript
-const agentUrl = "http://localhost:10004";
+const agentUrl = 'http://localhost:10004';
 ```
diff --git a/samples/client/lit/custom-components-example/client.ts b/samples/client/lit/custom-components-example/client.ts
index ccd31027d..770f20874 100644
--- a/samples/client/lit/custom-components-example/client.ts
+++ b/samples/client/lit/custom-components-example/client.ts
@@ -14,23 +14,21 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
-import { registerContactComponents } from "./ui/custom-components/register-components.js";
+import {v0_8} from '@a2ui/lit';
+import {registerContactComponents} from './ui/custom-components/register-components.js';
 type A2TextPayload = {
-  kind: "text";
+  kind: 'text';
   text: string;
 };
 
 type A2DataPayload = {
-  kind: "data";
+  kind: 'data';
   data: v0_8.Types.ServerToClientMessage;
 };
 
-type A2AServerPayload =
-  | Array<A2DataPayload | A2TextPayload>
-  | { error: string };
+type A2AServerPayload = Array<A2DataPayload | A2TextPayload> | {error: string};
 
-import { componentRegistry } from "@a2ui/lit/ui";
+import {componentRegistry} from '@a2ui/lit/ui';
 
 export class A2UIClient {
   #ready: Promise<void> = Promise.resolve();
@@ -42,51 +40,51 @@ export class A2UIClient {
 
   async send(
     message: v0_8.Types.A2UIClientEventMessage,
-    onChunk?: (messages: v0_8.Types.ServerToClientMessage[]) => void
+    onChunk?: (messages: v0_8.Types.ServerToClientMessage[]) => void,
   ): Promise<v0_8.Types.ServerToClientMessage[]> {
     const catalog = componentRegistry.getInlineCatalog();
     const finalMessage = {
       ...message,
       metadata: {
-        "a2uiClientCapabilities": {
-          "inlineCatalogs": [catalog],
+        a2uiClientCapabilities: {
+          inlineCatalogs: [catalog],
         },
       },
     };
 
-    const response = await fetch("/a2a", {
+    const response = await fetch('/a2a', {
       body: JSON.stringify({
         event: finalMessage,
-        contextId: this.#contextId
+        contextId: this.#contextId,
       }),
-      method: "POST",
+      method: 'POST',
     });
 
     if (!response.ok) {
-      const error = (await response.json()) as { error: string };
+      const error = (await response.json()) as {error: string};
       throw new Error(error.error);
     }
 
-    const contentType = response.headers.get("content-type");
+    const contentType = response.headers.get('content-type');
     const messages: v0_8.Types.ServerToClientMessage[] = [];
 
-    if (contentType?.includes("text/event-stream")) {
+    if (contentType?.includes('text/event-stream')) {
       const reader = response.body?.getReader();
-      if (!reader) throw new Error("No response body");
+      if (!reader) throw new Error('No response body');
       const decoder = new TextDecoder();
-      let buffer = "";
+      let buffer = '';
 
       while (true) {
-        const { done, value } = await reader.read();
+        const {done, value} = await reader.read();
         if (done) break;
 
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split("\n\n");
-        buffer = lines.pop() || "";
+        buffer += decoder.decode(value, {stream: true});
+        const lines = buffer.split('\n\n');
+        buffer = lines.pop() || '';
 
         for (const line of lines) {
-          if (line.startsWith("data: ")) {
-            const jsonStr = line.replace(/^data:\s*/, "");
+          if (line.startsWith('data: ')) {
+            const jsonStr = line.replace(/^data:\s*/, '');
             try {
               const responseData = JSON.parse(jsonStr);
               if (responseData.error) {
@@ -103,7 +101,7 @@ export class A2UIClient {
                 }
               }
             } catch (e) {
-              console.error("Error parsing SSE data:", e, jsonStr);
+              console.error('Error parsing SSE data:', e, jsonStr);
             }
           }
         }
@@ -112,7 +110,7 @@ export class A2UIClient {
     }
 
     const responseData = (await response.json()) as any;
-    if (responseData && typeof responseData === 'object' && "error" in responseData) {
+    if (responseData && typeof responseData === 'object' && 'error' in responseData) {
       throw new Error(responseData.error);
     } else {
       if (responseData.contextId) {
@@ -135,19 +133,21 @@ export class A2UIClient {
     } else {
       items = Array.isArray(data)
         ? data
-        : (data.kind === "message" && Array.isArray(data.parts) ? data.parts : [data]);
+        : data.kind === 'message' && Array.isArray(data.parts)
+          ? data.parts
+          : [data];
     }
 
     const messages: v0_8.Types.ServerToClientMessage[] = [];
     for (const item of items) {
-      if (item.kind === "message" && Array.isArray(item.parts)) {
+      if (item.kind === 'message' && Array.isArray(item.parts)) {
         for (const part of item.parts) {
           if (part.data) {
             messages.push(part.data);
           }
         }
       } else {
-        if (item.kind === "text") continue;
+        if (item.kind === 'text') continue;
         if (item.data) {
           messages.push(item.data);
         }
diff --git a/samples/client/lit/custom-components-example/contact.ts b/samples/client/lit/custom-components-example/contact.ts
index 283592062..dacd5427a 100644
--- a/samples/client/lit/custom-components-example/contact.ts
+++ b/samples/client/lit/custom-components-example/contact.ts
@@ -14,50 +14,38 @@
  * limitations under the License.
  */
 
-import { SignalWatcher } from "@lit-labs/signals";
-import { provide } from "@lit/context";
-import {
-  LitElement,
-  html,
-  css,
-  nothing,
-  HTMLTemplateResult,
-  unsafeCSS,
-} from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { theme as uiTheme } from "./theme/theme.js";
-import { A2UIClient } from "./client.js";
-import {
-  SnackbarAction,
-  SnackbarMessage,
-  SnackbarUUID,
-  SnackType,
-} from "./types/types.js";
-import { type Snackbar } from "./ui/snackbar.js";
-import { repeat } from "lit/directives/repeat.js";
-import { v0_8 } from "@a2ui/lit";
-import * as UI from "@a2ui/lit/ui";
+import {SignalWatcher} from '@lit-labs/signals';
+import {provide} from '@lit/context';
+import {LitElement, html, css, nothing, HTMLTemplateResult, unsafeCSS} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {theme as uiTheme} from './theme/theme.js';
+import {A2UIClient} from './client.js';
+import {SnackbarAction, SnackbarMessage, SnackbarUUID, SnackType} from './types/types.js';
+import {type Snackbar} from './ui/snackbar.js';
+import {repeat} from 'lit/directives/repeat.js';
+import {v0_8} from '@a2ui/lit';
+import * as UI from '@a2ui/lit/ui';
 
 // Demo elements.
-import "./ui/ui.js";
-import { registerContactComponents } from "./ui/custom-components/register-components.js";
-import { Context } from "@a2ui/lit/ui";
+import './ui/ui.js';
+import {registerContactComponents} from './ui/custom-components/register-components.js';
+import {Context} from '@a2ui/lit/ui';
 // @ts-ignore
-import { renderMarkdown } from "@a2ui/markdown-it";
+import {renderMarkdown} from '@a2ui/markdown-it';
 
 // Register custom components for the contact app
 registerContactComponents();
 
-@customElement("a2ui-contact")
+@customElement('a2ui-contact')
 export class A2UIContactFinder extends SignalWatcher(LitElement) {
   connectedCallback() {
     super.connectedCallback();
   }
 
-  @provide({ context: UI.Context.themeContext })
+  @provide({context: UI.Context.themeContext})
   accessor theme: v0_8.Types.Theme = uiTheme;
 
-  @provide({ context: UI.Context.markdown })
+  @provide({context: UI.Context.markdown})
   accessor markdownRenderer: v0_8.Types.MarkdownRenderer = async (text, options) => {
     return renderMarkdown(text, options);
   };
@@ -232,11 +220,7 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
   }> = [];
 
   render() {
-    return [
-      this.#maybeRenderForm(),
-      this.#maybeRenderData(),
-      this.#maybeRenderError(),
-    ];
+    return [this.#maybeRenderForm(), this.#maybeRenderData(), this.#maybeRenderError()];
   }
 
   #maybeRenderError() {
@@ -255,7 +239,7 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
           return;
         }
         const data = new FormData(evt.target);
-        const body = data.get("body") ?? null;
+        const body = data.get('body') ?? null;
         if (!body) {
           return;
         }
@@ -265,9 +249,7 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
         await this.#sendAndProcessMessage(message);
       }}
     >
-      <h1 class="typography-f-sf typography-v-r typography-w-400 color-c-p30">
-        Contact Finder
-      </h1>
+      <h1 class="typography-f-sf typography-v-r typography-w-400 color-c-p30">Contact Finder</h1>
       <div>
         <input
           required
@@ -301,13 +283,11 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
       return a.localeCompare(b);
     });
 
-
     if (surfaces.length === 0) {
       return nothing;
     }
 
-    return html`
-      ${this.#requesting
+    return html` ${this.#requesting
         ? html`<div class="rendering-indicator">
             <span class="g-icon filled-heavy rotate">progress_activity</span>
             Rendering UI...
@@ -318,68 +298,62 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
           surfaces,
           ([surfaceId]) => surfaceId,
           ([surfaceId, surface]) => {
-            return html`
-            <div style="position: relative; height: 100%; display: flex; flex-direction: column;">
-
-                <a2ui-surface
-                  .surface=${{ ...surface }}
-                  @a2uiaction=${async (
-              evt: v0_8.Events.StateEvent<"a2ui.action">
-            ) => {
-                const [target] = evt.composedPath();
-                if (!(target instanceof HTMLElement)) {
-                  return;
-                }
-
-                const context: v0_8.Types.A2UIClientEventMessage["userAction"]["context"] =
-                  {};
-                if (evt.detail.action.context) {
-                  const srcContext = evt.detail.action.context;
-                  for (const item of srcContext) {
-                    if (item.value.literalBoolean) {
-                      context[item.key] = item.value.literalBoolean;
-                    } else if (item.value.literalNumber) {
-                      context[item.key] = item.value.literalNumber;
-                    } else if (item.value.literalString) {
-                      context[item.key] = item.value.literalString;
-                    } else if (item.value.path) {
-                      const path = this.#processor.resolvePath(
-                        item.value.path,
-                        evt.detail.dataContextPath
-                      );
-                      const value = this.#processor.getData(
-                        evt.detail.sourceComponent,
-                        path,
-                        surfaceId
-                      );
-                      context[item.key] = value;
-                    }
+            return html` <div
+              style="position: relative; height: 100%; display: flex; flex-direction: column;"
+            >
+              <a2ui-surface
+                .surface=${{...surface}}
+                @a2uiaction=${async (evt: v0_8.Events.StateEvent<'a2ui.action'>) => {
+                  const [target] = evt.composedPath();
+                  if (!(target instanceof HTMLElement)) {
+                    return;
                   }
-                }
-
-                const message: v0_8.Types.A2UIClientEventMessage = {
-                  userAction: {
-                    surfaceId: surfaceId,
-                    name: "ACTION: " + evt.detail.action.name,
-                    sourceComponentId: target.id,
-                    timestamp: new Date().toISOString(),
-                    context,
-                  },
-                };
-
 
+                  const context: v0_8.Types.A2UIClientEventMessage['userAction']['context'] = {};
+                  if (evt.detail.action.context) {
+                    const srcContext = evt.detail.action.context;
+                    for (const item of srcContext) {
+                      if (item.value.literalBoolean) {
+                        context[item.key] = item.value.literalBoolean;
+                      } else if (item.value.literalNumber) {
+                        context[item.key] = item.value.literalNumber;
+                      } else if (item.value.literalString) {
+                        context[item.key] = item.value.literalString;
+                      } else if (item.value.path) {
+                        const path = this.#processor.resolvePath(
+                          item.value.path,
+                          evt.detail.dataContextPath,
+                        );
+                        const value = this.#processor.getData(
+                          evt.detail.sourceComponent,
+                          path,
+                          surfaceId,
+                        );
+                        context[item.key] = value;
+                      }
+                    }
+                  }
 
-                await this.#sendAndProcessMessage(message);
-              }}
+                  const message: v0_8.Types.A2UIClientEventMessage = {
+                    userAction: {
+                      surfaceId: surfaceId,
+                      name: 'ACTION: ' + evt.detail.action.name,
+                      sourceComponentId: target.id,
+                      timestamp: new Date().toISOString(),
+                      context,
+                    },
+                  };
+
+                  await this.#sendAndProcessMessage(message);
+                }}
                 .surfaceId=${surfaceId}
-
                 .processor=${this.#processor}
                 .enableCustomElements=${true}
               ></a2ui-surface>
             </div>`;
-          }
+          },
         )}
-    </section>`;
+      </section>`;
   }
 
   async #sendAndProcessMessage(request: v0_8.Types.A2UIClientEventMessage) {
@@ -398,11 +372,11 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
   }
 
   async #sendMessage(
-    message: v0_8.Types.A2UIClientEventMessage
+    message: v0_8.Types.A2UIClientEventMessage,
   ): Promise<v0_8.Types.ServerToClientMessage[]> {
     try {
       this.#requesting = true;
-      const response = await this.#a2uiClient.send(message, (chunkMessages) => {
+      const response = await this.#a2uiClient.send(message, chunkMessages => {
         this.#processor.processMessages(chunkMessages);
         this.renderVersion++;
         this.requestUpdate();
@@ -426,7 +400,7 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
     actions: SnackbarAction[] = [],
     persistent = false,
     id = globalThis.crypto.randomUUID(),
-    replaceAll = false
+    replaceAll = false,
   ) {
     if (!this.#snackbar) {
       this.#pendingSnackbarMessages.push({
@@ -450,7 +424,7 @@ export class A2UIContactFinder extends SignalWatcher(LitElement) {
         persistent,
         actions,
       },
-      replaceAll
+      replaceAll,
     );
   }
 
diff --git a/samples/client/lit/custom-components-example/events/events.ts b/samples/client/lit/custom-components-example/events/events.ts
index 2b7811ab9..95ec43396 100644
--- a/samples/client/lit/custom-components-example/events/events.ts
+++ b/samples/client/lit/custom-components-example/events/events.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { HTMLTemplateResult } from "lit";
+import {HTMLTemplateResult} from 'lit';
 
 const eventInit = {
   bubbles: true,
@@ -23,13 +23,13 @@ const eventInit = {
 };
 
 export class SnackbarActionEvent extends Event {
-  static eventName = "snackbaraction";
+  static eventName = 'snackbaraction';
 
   constructor(
     public readonly action: string,
     public readonly value?: HTMLTemplateResult | string,
-    public readonly callback?: () => void
+    public readonly callback?: () => void,
   ) {
-    super(SnackbarActionEvent.eventName, { ...eventInit });
+    super(SnackbarActionEvent.eventName, {...eventInit});
   }
 }
diff --git a/samples/client/lit/custom-components-example/index.html b/samples/client/lit/custom-components-example/index.html
index a69208e02..c907d7169 100644
--- a/samples/client/lit/custom-components-example/index.html
+++ b/samples/client/lit/custom-components-example/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2025 Google LLC
 
@@ -145,12 +145,8 @@
         --primary: #137fec;
         --text-color: #fff;
         --background: light-dark(#f6f7f8, #101922);
-        --border-color: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.15)
-        );
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --border-color: oklch(from var(--background-light) l c h / calc(alpha * 0.15));
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
@@ -168,7 +164,8 @@
         --bb-grid-size-15: calc(var(--bb-grid-size) * 15);
         --bb-grid-size-16: calc(var(--bb-grid-size) * 16);
 
-        --background: radial-gradient(
+        --background:
+          radial-gradient(
             at 0% 0%,
             light-dark(rgba(161, 196, 253, 0.3), rgba(6, 182, 212, 0.15)) 0px,
             transparent 50%
@@ -194,9 +191,7 @@
             light-dark(#e2e8f0, #1e293b) 100%
           );
 
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
@@ -221,8 +216,8 @@
 
       html,
       body {
-        --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         background: var(--background);
diff --git a/samples/client/lit/custom-components-example/middleware/a2a.ts b/samples/client/lit/custom-components-example/middleware/a2a.ts
index 17f515ec5..71e56cb6a 100644
--- a/samples/client/lit/custom-components-example/middleware/a2a.ts
+++ b/samples/client/lit/custom-components-example/middleware/a2a.ts
@@ -14,34 +14,27 @@
  * limitations under the License.
  */
 
-import { IncomingMessage, ServerResponse } from "http";
-import { Plugin, ViteDevServer } from "vite";
-import { A2AClient } from "@a2a-js/sdk/client";
-import {
-  MessageSendParams,
-  Part,
-  SendMessageSuccessResponse,
-  Task,
-} from "@a2a-js/sdk";
-import { v4 as uuidv4 } from "uuid";
-
-const A2UI_MIME_TYPE = "application/json+a2ui";
-const enableStreaming = process.env["ENABLE_STREAMING"] === "true";
+import {IncomingMessage, ServerResponse} from 'http';
+import {Plugin, ViteDevServer} from 'vite';
+import {A2AClient} from '@a2a-js/sdk/client';
+import {MessageSendParams, Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
+import {v4 as uuidv4} from 'uuid';
+
+const A2UI_MIME_TYPE = 'application/json+a2ui';
+const enableStreaming = process.env['ENABLE_STREAMING'] === 'true';
 
 const fetchWithCustomHeader: typeof fetch = async (url, init) => {
   const headers = new Headers(init?.headers);
-  headers.set("X-A2A-Extensions", "https://a2ui.org/a2a-extension/a2ui/v0.8");
+  headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.8');
 
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 };
 
 const isJson = (str: string) => {
   try {
     const parsed = JSON.parse(str);
-    return (
-      typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)
-    );
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed);
   } catch (err) {
     console.warn(err);
     return false;
@@ -52,10 +45,9 @@ let client: A2AClient | null = null;
 const createOrGetClient = async () => {
   if (!client) {
     // Create a client pointing to the agent's Agent Card URL.
-    client = await A2AClient.fromCardUrl(
-      "http://localhost:10004/.well-known/agent-card.json",
-      { fetchImpl: fetchWithCustomHeader }
-    );
+    client = await A2AClient.fromCardUrl('http://localhost:10004/.well-known/agent-card.json', {
+      fetchImpl: fetchWithCustomHeader,
+    });
   }
 
   return client;
@@ -63,26 +55,23 @@ const createOrGetClient = async () => {
 
 export const plugin = (): Plugin => {
   return {
-    name: "a2a-handler",
+    name: 'a2a-handler',
     configureServer(server: ViteDevServer) {
       server.middlewares.use(
-        "/a2a",
+        '/a2a',
         async (req: IncomingMessage, res: ServerResponse, next: () => void) => {
-          if (req.method === "POST") {
-            let originalBody = "";
+          if (req.method === 'POST') {
+            let originalBody = '';
 
-            req.on("data", (chunk) => {
+            req.on('data', chunk => {
               originalBody += chunk.toString();
             });
 
-            req.on("end", async () => {
+            req.on('end', async () => {
               let sendParams: MessageSendParams;
 
               if (isJson(originalBody)) {
-                console.log(
-                  "[a2a-middleware] Received JSON UI event:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received JSON UI event:', originalBody);
 
                 const requestData = JSON.parse(originalBody);
                 const contextId = requestData.contextId;
@@ -92,33 +81,30 @@ export const plugin = (): Plugin => {
                   message: {
                     messageId: uuidv4(),
                     contextId,
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "data",
+                        kind: 'data',
                         data: clientEvent,
-                        metadata: { 'mimeType': A2UI_MIME_TYPE },
+                        metadata: {mimeType: A2UI_MIME_TYPE},
                       } as Part,
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               } else {
-                console.log(
-                  "[a2a-middleware] Received text query:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received text query:', originalBody);
                 sendParams = {
                   message: {
                     messageId: uuidv4(),
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "text",
+                        kind: 'text',
                         text: originalBody,
                       },
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               }
@@ -129,23 +115,24 @@ export const plugin = (): Plugin => {
                 if (enableStreaming) {
                   const stream = await client.sendMessageStream(sendParams);
                   res.statusCode = 200;
-                  res.setHeader("Content-Type", "text/event-stream");
-                  res.setHeader("Cache-Control", "no-cache");
-                  res.setHeader("Connection", "keep-alive");
+                  res.setHeader('Content-Type', 'text/event-stream');
+                  res.setHeader('Cache-Control', 'no-cache');
+                  res.setHeader('Connection', 'keep-alive');
 
                   for await (const chunk of stream) {
                     // A2AClient unpacks the JSON-RPC, so chunk is an A2AStreamEventData
                     let parts: Part[] = [];
-                    if (chunk.kind === "status-update" && chunk.status.message?.parts) {
+                    if (chunk.kind === 'status-update' && chunk.status.message?.parts) {
                       parts = chunk.status.message.parts;
-                    } else if (chunk.kind === "message" && chunk.parts) {
+                    } else if (chunk.kind === 'message' && chunk.parts) {
                       parts = chunk.parts;
                     }
 
                     if (parts.length > 0) {
                       const responseData = {
                         parts,
-                        contextId: (chunk as any).contextId || (chunk as any).status?.message?.contextId
+                        contextId:
+                          (chunk as any).contextId || (chunk as any).status?.message?.contextId,
                       };
                       res.write(`data: ${JSON.stringify(responseData)}\n\n`);
                     }
@@ -153,30 +140,30 @@ export const plugin = (): Plugin => {
                   res.end();
                 } else {
                   const response = await client.sendMessage(sendParams);
-                  res.setHeader("Cache-Control", "no-store");
-                  if ("error" in response) {
+                  res.setHeader('Cache-Control', 'no-store');
+                  if ('error' in response) {
                     res.statusCode = 500;
-                    res.setHeader("Content-Type", "application/json");
-                    res.end(JSON.stringify({ error: response.error.message }));
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(JSON.stringify({error: response.error.message}));
                   } else {
                     const result = (response as SendMessageSuccessResponse).result as Task;
                     res.statusCode = 200;
-                    res.setHeader("Content-Type", "application/json");
+                    res.setHeader('Content-Type', 'application/json');
                     const responseData = {
-                      parts: result.kind === "task" ? result.status.message?.parts || [] : [],
-                      contextId: result.contextId
+                      parts: result.kind === 'task' ? result.status.message?.parts || [] : [],
+                      contextId: result.contextId,
                     };
                     res.end(JSON.stringify(responseData));
                   }
                 }
               } catch (e: any) {
-                console.error("Error during streaming:", e);
+                console.error('Error during streaming:', e);
                 if (!res.headersSent) {
                   res.statusCode = 500;
-                  res.setHeader("Content-Type", "application/json");
-                  res.end(JSON.stringify({ error: e.message || String(e) }));
+                  res.setHeader('Content-Type', 'application/json');
+                  res.end(JSON.stringify({error: e.message || String(e)}));
                 } else {
-                  res.write(`data: ${JSON.stringify({ error: e.message || String(e) })}\n\n`);
+                  res.write(`data: ${JSON.stringify({error: e.message || String(e)})}\n\n`);
                   res.end();
                 }
               }
@@ -186,7 +173,7 @@ export const plugin = (): Plugin => {
           } else {
             next();
           }
-        }
+        },
       );
     },
   };
diff --git a/samples/client/lit/custom-components-example/middleware/index.ts b/samples/client/lit/custom-components-example/middleware/index.ts
index 36099efff..c61a5cdae 100644
--- a/samples/client/lit/custom-components-example/middleware/index.ts
+++ b/samples/client/lit/custom-components-example/middleware/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export * as A2AMiddleware from "./a2a.js";
+export * as A2AMiddleware from './a2a.js';
diff --git a/samples/client/lit/custom-components-example/theme/theme.ts b/samples/client/lit/custom-components-example/theme/theme.ts
index 920666f59..8ae50a7e8 100644
--- a/samples/client/lit/custom-components-example/theme/theme.ts
+++ b/samples/client/lit/custom-components-example/theme/theme.ts
@@ -14,235 +14,235 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
+import {v0_8} from '@a2ui/lit';
 
 /** Elements */
 
 const a = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-as-n": true,
-  "layout-dis-iflx": true,
-  "layout-al-c": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-as-n': true,
+  'layout-dis-iflx': true,
+  'layout-al-c': true,
 };
 
 const audio = {
-  "layout-w-100": true,
+  'layout-w-100': true,
 };
 
 const body = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
-  "typography-sz-bm": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
+  'typography-sz-bm': true,
+  'color-c-n10': true,
 };
 
 const button = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-pt-3": true,
-  "layout-pb-3": true,
-  "layout-pl-5": true,
-  "layout-pr-5": true,
-  "layout-mb-1": true,
-  "border-br-16": true,
-  "border-bw-0": true,
-  "border-c-n70": true,
-  "border-bs-s": true,
-  "color-bgc-s30": true,
-  "color-c-n100": true,
-  "behavior-ho-80": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-pt-3': true,
+  'layout-pb-3': true,
+  'layout-pl-5': true,
+  'layout-pr-5': true,
+  'layout-mb-1': true,
+  'border-br-16': true,
+  'border-bw-0': true,
+  'border-c-n70': true,
+  'border-bs-s': true,
+  'color-bgc-s30': true,
+  'color-c-n100': true,
+  'behavior-ho-80': true,
 };
 
 const heading = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
-  "color-c-n10": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
+  'color-c-n10': true,
 };
 
 const h1 = {
   ...heading,
-  "typography-sz-tl": true,
+  'typography-sz-tl': true,
 };
 
 const h2 = {
   ...heading,
-  "typography-sz-tm": true,
+  'typography-sz-tm': true,
 };
 
 const h3 = {
   ...heading,
-  "typography-sz-ts": true,
+  'typography-sz-ts': true,
 };
 
 const iframe = {
-  "behavior-sw-n": true,
+  'behavior-sw-n': true,
 };
 
 const input = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-pl-4": true,
-  "layout-pr-4": true,
-  "layout-pt-2": true,
-  "layout-pb-2": true,
-  "border-br-6": true,
-  "border-bw-1": true,
-  "color-bc-s70": true,
-  "border-bs-s": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-pl-4': true,
+  'layout-pr-4': true,
+  'layout-pt-2': true,
+  'layout-pb-2': true,
+  'border-br-6': true,
+  'border-bw-1': true,
+  'color-bc-s70': true,
+  'border-bs-s': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const p = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const orderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const unorderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const listItem = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const pre = {
-  "typography-f-c": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "typography-sz-bm": true,
-  "typography-ws-p": true,
-  "layout-as-n": true,
+  'typography-f-c': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'typography-sz-bm': true,
+  'typography-ws-p': true,
+  'layout-as-n': true,
 };
 
 const textarea = {
   ...input,
-  "layout-r-none": true,
-  "layout-fs-c": true,
+  'layout-r-none': true,
+  'layout-fs-c': true,
 };
 
 const video = {
-  "layout-el-cv": true,
+  'layout-el-cv': true,
 };
 
-const aLight = v0_8.Styles.merge(a, { "color-c-p30": true });
-const inputLight = v0_8.Styles.merge(input, { "color-c-n5": true });
-const textareaLight = v0_8.Styles.merge(textarea, { "color-c-n5": true });
-const buttonLight = v0_8.Styles.merge(button, { "color-c-n100": true });
-const h1Light = v0_8.Styles.merge(h1, { "color-c-n5": true });
-const h2Light = v0_8.Styles.merge(h2, { "color-c-n5": true });
-const h3Light = v0_8.Styles.merge(h3, { "color-c-n5": true });
-const bodyLight = v0_8.Styles.merge(body, { "color-c-n5": true });
-const pLight = v0_8.Styles.merge(p, { "color-c-n60": true });
-const preLight = v0_8.Styles.merge(pre, { "color-c-n35": true });
+const aLight = v0_8.Styles.merge(a, {'color-c-p30': true});
+const inputLight = v0_8.Styles.merge(input, {'color-c-n5': true});
+const textareaLight = v0_8.Styles.merge(textarea, {'color-c-n5': true});
+const buttonLight = v0_8.Styles.merge(button, {'color-c-n100': true});
+const h1Light = v0_8.Styles.merge(h1, {'color-c-n5': true});
+const h2Light = v0_8.Styles.merge(h2, {'color-c-n5': true});
+const h3Light = v0_8.Styles.merge(h3, {'color-c-n5': true});
+const bodyLight = v0_8.Styles.merge(body, {'color-c-n5': true});
+const pLight = v0_8.Styles.merge(p, {'color-c-n60': true});
+const preLight = v0_8.Styles.merge(pre, {'color-c-n35': true});
 const orderedListLight = v0_8.Styles.merge(orderedList, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 const unorderedListLight = v0_8.Styles.merge(unorderedList, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 const listItemLight = v0_8.Styles.merge(listItem, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 
 export const theme: v0_8.Types.Theme = {
   additionalStyles: {
     Card: {
-      "min-width": "320px",
+      'min-width': '320px',
     },
     Button: {
-      "--n-60": "var(--n-100)",
+      '--n-60': 'var(--n-100)',
     },
     Image: {
-      "max-width": "120px",
-      "max-height": "120px",
-      marginLeft: "auto",
-      marginRight: "auto",
+      'max-width': '120px',
+      'max-height': '120px',
+      marginLeft: 'auto',
+      marginRight: 'auto',
     },
   },
   components: {
     AudioPlayer: {},
     Button: {
-      "layout-pt-2": true,
-      "layout-pb-2": true,
-      "layout-pl-5": true,
-      "layout-pr-5": true,
-      "border-br-2": true,
-      "border-bw-0": true,
-      "border-bs-s": true,
-      "color-bgc-p30": true,
-      "color-c-n100": true,
-      "behavior-ho-70": true,
+      'layout-pt-2': true,
+      'layout-pb-2': true,
+      'layout-pl-5': true,
+      'layout-pr-5': true,
+      'border-br-2': true,
+      'border-bw-0': true,
+      'border-bs-s': true,
+      'color-bgc-p30': true,
+      'color-c-n100': true,
+      'behavior-ho-70': true,
     },
     Card: {
-      "border-br-4": true,
-      "color-bgc-p100": true,
-      "color-bc-n90": true,
-      "border-bw-1": true,
-      "border-bs-s": true,
-      "layout-pt-10": true,
-      "layout-pb-10": true,
-      "layout-pl-4": true,
-      "layout-pr-4": true,
+      'border-br-4': true,
+      'color-bgc-p100': true,
+      'color-bc-n90': true,
+      'border-bw-1': true,
+      'border-bs-s': true,
+      'layout-pt-10': true,
+      'layout-pb-10': true,
+      'layout-pl-4': true,
+      'layout-pr-4': true,
     },
     CheckBox: {
       element: {
-        "layout-m-0": true,
-        "layout-mr-2": true,
-        "layout-p-2": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'layout-m-0': true,
+        'layout-mr-2': true,
+        'layout-p-2': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
       label: {
-        "color-c-p30": true,
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-flx-1": true,
-        "typography-sz-ll": true,
+        'color-c-p30': true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-flx-1': true,
+        'typography-sz-ll': true,
       },
       container: {
-        "layout-dsp-iflex": true,
-        "layout-al-c": true,
+        'layout-dsp-iflex': true,
+        'layout-al-c': true,
       },
     },
     Column: {},
@@ -250,33 +250,33 @@ export const theme: v0_8.Types.Theme = {
       container: {},
       label: {},
       element: {
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
       },
     },
     Divider: {
-      "color-bgc-n90": true,
-      "layout-mt-6": true,
-      "layout-mb-6": true,
+      'color-bgc-n90': true,
+      'layout-mt-6': true,
+      'layout-mb-6': true,
     },
     Image: {
       all: {
-        "border-br-50pc": true,
-        "layout-el-cv": true,
-        "layout-w-100": true,
-        "layout-h-100": true,
-        "layout-dsp-flexhor": true,
-        "layout-al-c": true,
-        "layout-sp-c": true,
-        "layout-mb-3": true,
+        'border-br-50pc': true,
+        'layout-el-cv': true,
+        'layout-w-100': true,
+        'layout-h-100': true,
+        'layout-dsp-flexhor': true,
+        'layout-al-c': true,
+        'layout-sp-c': true,
+        'layout-mb-3': true,
       },
       avatar: {},
       header: {},
@@ -286,26 +286,26 @@ export const theme: v0_8.Types.Theme = {
       smallFeature: {},
     },
     Icon: {
-      "border-br-1": true,
-      "layout-p-2": true,
-      "color-bgc-n98": true,
-      "layout-dsp-flexhor": true,
-      "layout-al-c": true,
-      "layout-sp-c": true,
+      'border-br-1': true,
+      'layout-p-2': true,
+      'color-bgc-n98': true,
+      'layout-dsp-flexhor': true,
+      'layout-al-c': true,
+      'layout-sp-c': true,
     },
     List: {
-      "layout-g-4": true,
-      "layout-p-2": true,
+      'layout-g-4': true,
+      'layout-p-2': true,
     },
     Modal: {
-      backdrop: { "color-bbgc-p60_20": true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
-        "border-br-2": true,
-        "color-bgc-p100": true,
-        "layout-p-4": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bc-p80": true,
+        'border-br-2': true,
+        'color-bgc-p100': true,
+        'layout-p-4': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bc-p80': true,
       },
     },
     MultipleChoice: {
@@ -314,8 +314,8 @@ export const theme: v0_8.Types.Theme = {
       element: {},
     },
     Row: {
-      "layout-g-4": true,
-      "layout-mb-3": true,
+      'layout-g-4': true,
+      'layout-mb-3': true,
     },
     Slider: {
       container: {},
@@ -324,109 +324,109 @@ export const theme: v0_8.Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
       all: {
-        "layout-w-100": true,
-        "layout-g-2": true,
-        "color-c-p30": true,
+        'layout-w-100': true,
+        'layout-g-2': true,
+        'color-c-p30': true,
       },
       h1: {
-        "typography-f-sf": true,
-        "typography-ta-c": true,
-        "typography-v-r": true,
-        "typography-w-500": true,
-        "layout-mt-0": true,
-        "layout-mr-0": true,
-        "layout-ml-0": true,
-        "layout-mb-2": true,
-        "layout-p-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-ta-c': true,
+        'typography-v-r': true,
+        'typography-w-500': true,
+        'layout-mt-0': true,
+        'layout-mr-0': true,
+        'layout-ml-0': true,
+        'layout-mb-2': true,
+        'layout-p-0': true,
+        'typography-sz-tl': true,
       },
       h2: {
-        "typography-f-sf": true,
-        "typography-ta-c": true,
-        "typography-v-r": true,
-        "typography-w-500": true,
-        "layout-mt-0": true,
-        "layout-mr-0": true,
-        "layout-ml-0": true,
-        "layout-mb-2": true,
-        "layout-p-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-ta-c': true,
+        'typography-v-r': true,
+        'typography-w-500': true,
+        'layout-mt-0': true,
+        'layout-mr-0': true,
+        'layout-ml-0': true,
+        'layout-mb-2': true,
+        'layout-p-0': true,
+        'typography-sz-tl': true,
       },
       h3: {
-        "typography-f-sf": true,
-        "typography-ta-c": true,
-        "typography-v-r": true,
-        "typography-w-500": true,
-        "layout-mt-0": true,
-        "layout-mr-0": true,
-        "layout-ml-0": true,
-        "layout-mb-0": true,
-        "layout-p-0": true,
-        "typography-sz-ts": true,
+        'typography-f-sf': true,
+        'typography-ta-c': true,
+        'typography-v-r': true,
+        'typography-w-500': true,
+        'layout-mt-0': true,
+        'layout-mr-0': true,
+        'layout-ml-0': true,
+        'layout-mb-0': true,
+        'layout-p-0': true,
+        'typography-sz-ts': true,
       },
       h4: {
-        "typography-f-sf": true,
-        "typography-ta-c": true,
-        "typography-v-r": true,
-        "typography-w-500": true,
-        "layout-mt-0": true,
-        "layout-mr-0": true,
-        "layout-ml-0": true,
-        "layout-mb-0": true,
-        "layout-p-0": true,
-        "typography-sz-bl": true,
+        'typography-f-sf': true,
+        'typography-ta-c': true,
+        'typography-v-r': true,
+        'typography-w-500': true,
+        'layout-mt-0': true,
+        'layout-mr-0': true,
+        'layout-ml-0': true,
+        'layout-mb-0': true,
+        'layout-p-0': true,
+        'typography-sz-bl': true,
       },
       h5: {
-        "typography-f-sf": true,
-        "typography-ta-c": true,
-        "typography-v-r": true,
-        "typography-w-500": true,
-        "layout-mt-0": true,
-        "layout-mr-0": true,
-        "layout-ml-0": true,
-        "layout-mb-0": true,
-        "layout-p-0": true,
-        "color-c-n30": true,
-        "typography-sz-bm": true,
-        "layout-mb-1": true,
+        'typography-f-sf': true,
+        'typography-ta-c': true,
+        'typography-v-r': true,
+        'typography-w-500': true,
+        'layout-mt-0': true,
+        'layout-mr-0': true,
+        'layout-ml-0': true,
+        'layout-mb-0': true,
+        'layout-p-0': true,
+        'color-c-n30': true,
+        'typography-sz-bm': true,
+        'layout-mb-1': true,
       },
       body: {},
       caption: {},
     },
     TextField: {
       container: {
-        "typography-sz-bm": true,
-        "layout-w-100": true,
-        "layout-g-2": true,
-        "layout-dsp-flexhor": true,
-        "layout-al-c": true,
+        'typography-sz-bm': true,
+        'layout-w-100': true,
+        'layout-g-2': true,
+        'layout-dsp-flexhor': true,
+        'layout-al-c': true,
       },
       label: {
-        "layout-flx-0": true,
+        'layout-flx-0': true,
       },
       element: {
-        "typography-sz-bm": true,
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'typography-sz-bm': true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
     },
     Video: {
-      "border-br-5": true,
-      "layout-el-cv": true,
+      'border-br-5': true,
+      'layout-el-cv': true,
     },
   },
   elements: {
diff --git a/samples/client/lit/custom-components-example/tsconfig.json b/samples/client/lit/custom-components-example/tsconfig.json
index 977166deb..99bf993a0 100644
--- a/samples/client/lit/custom-components-example/tsconfig.json
+++ b/samples/client/lit/custom-components-example/tsconfig.json
@@ -32,22 +32,12 @@
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
     "paths": {
-      "lit": [
-        "../../../../renderers/lit/node_modules/lit"
-      ],
-      "lit-html": [
-        "../../../../renderers/lit/node_modules/lit-html"
-      ],
-      "lit-element": [
-        "../../../../renderers/lit/node_modules/lit-element"
-      ],
-      "@lit/reactive-element": [
-        "../../../../renderers/lit/node_modules/@lit/reactive-element"
-      ],
-      "@lit/context": [
-        "../../../../renderers/lit/node_modules/@lit/context"
-      ]
+      "lit": ["../../../../renderers/lit/node_modules/lit"],
+      "lit-html": ["../../../../renderers/lit/node_modules/lit-html"],
+      "lit-element": ["../../../../renderers/lit/node_modules/lit-element"],
+      "@lit/reactive-element": ["../../../../renderers/lit/node_modules/@lit/reactive-element"],
+      "@lit/context": ["../../../../renderers/lit/node_modules/@lit/context"]
     }
   },
-  "references": [{ "path": "../../../../renderers/lit" }]
+  "references": [{"path": "../../../../renderers/lit"}]
 }
diff --git a/samples/client/lit/custom-components-example/types/types.ts b/samples/client/lit/custom-components-example/types/types.ts
index 28c83de3d..3a1644ed0 100644
--- a/samples/client/lit/custom-components-example/types/types.ts
+++ b/samples/client/lit/custom-components-example/types/types.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { HTMLTemplateResult } from "lit";
+import {HTMLTemplateResult} from 'lit';
 
 export enum SnackType {
-  NONE = "none",
-  INFORMATION = "information",
-  WARNING = "warning",
-  ERROR = "error",
-  PENDING = "pending",
+  NONE = 'none',
+  INFORMATION = 'information',
+  WARNING = 'warning',
+  ERROR = 'error',
+  PENDING = 'pending',
 }
 
 export type SnackbarUUID = ReturnType<typeof globalThis.crypto.randomUUID>;
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/README.md b/samples/client/lit/custom-components-example/ui/custom-components/README.md
index 18f611132..c8a8a4182 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/README.md
+++ b/samples/client/lit/custom-components-example/ui/custom-components/README.md
@@ -8,13 +8,13 @@ Create a new Lit component file in `lib/src/0.8/ui/custom-components/`.
 Example: `my-component.ts`
 
 ```typescript
-import { html, css } from "lit";
-import { property } from "lit/decorators.js";
+import {html, css} from 'lit';
+import {property} from 'lit/decorators.js';
 
-import { Root } from "../root.js";
+import {Root} from '../root.js';
 
 export class MyComponent extends Root {
-  @property() accessor myProp: string = "Default";
+  @property() accessor myProp: string = 'Default';
 
   static styles = [
     ...Root.styles, // Inherit base styles
@@ -44,15 +44,15 @@ Update `lib/src/0.8/ui/custom-components/index.ts` to register your new componen
 You must pass the desired tag name as the third argument.
 
 ```typescript
-import { componentRegistry } from "../component-registry.js";
-import { MyComponent } from "./my-component.js"; // Import your component
+import {componentRegistry} from '../component-registry.js';
+import {MyComponent} from './my-component.js'; // Import your component
 
 export function registerCustomComponents() {
   // Register with explicit tag name
-  componentRegistry.register("MyComponent", MyComponent, "my-component");
+  componentRegistry.register('MyComponent', MyComponent, 'my-component');
 }
 
-export { MyComponent }; // Export for type usage if needed
+export {MyComponent}; // Export for type usage if needed
 ```
 
 ## Define the schema (server-side)
@@ -66,7 +66,7 @@ Example: `lib/my_component_schema.json`
   "type": "object",
   "additionalProperties": false,
   "properties": {
-    "type": { "const": "object" },
+    "type": {"const": "object"},
     "properties": {
       "type": "object",
       "additionalProperties": false,
@@ -88,7 +88,7 @@ Example: `lib/my_component_schema.json`
 In your client application (e.g., `contact` sample), ensure you import and call the registration function.
 
 ```typescript
-import { registerCustomComponents } from "@a2ui/lit/ui";
+import {registerCustomComponents} from '@a2ui/lit/ui';
 
 // Call this once at startup
 registerCustomComponents();
@@ -109,8 +109,8 @@ You can replace standard A2UI components (like `TextField`, `Video`, `Button`) w
     ```typescript
     // 1. Define your override
     class MyPremiumTextField extends Root {
-      @property() accessor label = "";
-      @property() accessor text = "";
+      @property() accessor label = '';
+      @property() accessor text = '';
 
       static styles = [
         ...Root.styles,
@@ -130,12 +130,8 @@ You can replace standard A2UI components (like `TextField`, `Video`, `Button`) w
     }
 
     // 2. Register with the STANDARD type name
-    import { componentRegistry } from "@a2ui/lit/ui";
-    componentRegistry.register(
-      "TextField",
-      MyPremiumTextField,
-      "my-premium-textfield"
-    );
+    import {componentRegistry} from '@a2ui/lit/ui';
+    componentRegistry.register('TextField', MyPremiumTextField, 'my-premium-textfield');
     ```
 
 **Result:**
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/mcp-apps-component.ts b/samples/client/lit/custom-components-example/ui/custom-components/mcp-apps-component.ts
index b17c6a902..80ac0cecf 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/mcp-apps-component.ts
+++ b/samples/client/lit/custom-components-example/ui/custom-components/mcp-apps-component.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { html, css } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { Root } from "@a2ui/lit/ui";
-import { v0_8 } from "@a2ui/lit";
-import { AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge";
-import type { McpUiSandboxProxyReadyNotification } from "@modelcontextprotocol/ext-apps/app-bridge";
-import { SANDBOX_IFRAME_PATH } from "../shared-constants.js";
-
-@customElement("a2ui-mcp-apps-component")
+import {html, css} from 'lit';
+import {customElement, property, query, state} from 'lit/decorators.js';
+import {Root} from '@a2ui/lit/ui';
+import {v0_8} from '@a2ui/lit';
+import {AppBridge, PostMessageTransport} from '@modelcontextprotocol/ext-apps/app-bridge';
+import type {McpUiSandboxProxyReadyNotification} from '@modelcontextprotocol/ext-apps/app-bridge';
+import {SANDBOX_IFRAME_PATH} from '../shared-constants.js';
+
+@customElement('a2ui-mcp-apps-component')
 export class McpApp extends Root {
   static override styles = [
     ...Root.styles,
@@ -41,28 +41,30 @@ export class McpApp extends Root {
         height: 100%;
         border: none;
         background: #f5f5f5;
-        transition: height 0.3s ease-out, min-width 0.3s ease-out;
+        transition:
+          height 0.3s ease-out,
+          min-width 0.3s ease-out;
       }
     `,
   ];
 
   /* --- Properties (Server Contract) --- */
 
-  @property({ type: String })
-  accessor resourceUri: string = "";
+  @property({type: String})
+  accessor resourceUri: string = '';
 
-  @property({ type: String })
-  accessor htmlContent: string = "";
+  @property({type: String})
+  accessor htmlContent: string = '';
 
-  @property({ type: Number })
+  @property({type: Number})
   accessor height: number | undefined = undefined;
 
-  @property({ type: Array })
+  @property({type: Array})
   accessor allowedTools: string[] = [];
 
   // --- Internal State ---
 
-  @query("iframe")
+  @query('iframe')
   accessor iframe!: HTMLIFrameElement;
 
   private bridge?: AppBridge;
@@ -104,22 +106,28 @@ export class McpApp extends Root {
     // Fall back to the 127.0.0.1 trick for local development to simulate cross-origin isolation
     const meta = import.meta as any;
     const configuredSandboxUrl = meta && meta.env ? meta.env.VITE_MCP_SANDBOX_URL : undefined;
-    const sandboxOrigin = configuredSandboxUrl || `http://127.0.0.1:${window.location.port}${SANDBOX_IFRAME_PATH}`;
+    const sandboxOrigin =
+      configuredSandboxUrl || `http://127.0.0.1:${window.location.port}${SANDBOX_IFRAME_PATH}`;
     const sandboxUrl = new URL(sandboxOrigin);
 
     // Set up the bridge. No MCP client needed because A2UI acts as the orchestrator.
-    this.bridge = new AppBridge(null, { name: "A2UI Client Host", version: "1.0.0" }, {
-      serverTools: {},
-      updateModelContext: { text: {} },
-    }, {
-      hostContext: {
-        theme: "light",
-        platform: "web",
-        displayMode: "inline",
-      }
-    });
-
-    this.bridge.onsizechange = ({ width, height }) => {
+    this.bridge = new AppBridge(
+      null,
+      {name: 'A2UI Client Host', version: '1.0.0'},
+      {
+        serverTools: {},
+        updateModelContext: {text: {}},
+      },
+      {
+        hostContext: {
+          theme: 'light',
+          platform: 'web',
+          displayMode: 'inline',
+        },
+      },
+    );
+
+    this.bridge.onsizechange = ({width, height}) => {
       // Allow the view to dynamically resize the iframe container
       const from: Keyframe = {};
       const to: Keyframe = {};
@@ -132,37 +140,42 @@ export class McpApp extends Root {
         from.height = `${this.iframe.offsetHeight}px`;
         this.iframe.style.height = to.height = `${height}px`;
       }
-      this.iframe.animate([from, to], { duration: 300, easing: "ease-out" });
+      this.iframe.animate([from, to], {duration: 300, easing: 'ease-out'});
     };
 
     // Forward Tool Calls to the A2UI Action Dispatch
-    this.bridge.oncalltool = async (params) => {
+    this.bridge.oncalltool = async params => {
       const actionName = params.name;
       const args = params.arguments || {};
 
       if (this.allowedTools.includes(actionName)) {
         this.dispatchAgentAction(actionName, args);
-        return { content: [{ type: "text", text: "Action dispatched to A2UI Agent" }] };
+        return {content: [{type: 'text', text: 'Action dispatched to A2UI Agent'}]};
       } else {
         console.warn(`[McpApp] Tool '${actionName}' blocked.`);
-        throw new Error("Tool not allowed");
+        throw new Error('Tool not allowed');
       }
     };
 
-    this.bridge.onloggingmessage = (params) => {
+    this.bridge.onloggingmessage = params => {
       console.log(`[MCP Sandbox ${params.level}]:`, params.data);
     };
 
     // 1. Listen for the Outer Iframe to declare itself ready.
-    const readyNotification: McpUiSandboxProxyReadyNotification["method"] = "ui/notifications/sandbox-proxy-ready";
-    const proxyReady = new Promise<boolean>((resolve) => {
-      const listener = ({ source, data, origin }: MessageEvent) => {
-        if (source === this.iframe.contentWindow && origin === sandboxUrl.origin && data?.method === readyNotification) {
-          window.removeEventListener("message", listener);
+    const readyNotification: McpUiSandboxProxyReadyNotification['method'] =
+      'ui/notifications/sandbox-proxy-ready';
+    const proxyReady = new Promise<boolean>(resolve => {
+      const listener = ({source, data, origin}: MessageEvent) => {
+        if (
+          source === this.iframe.contentWindow &&
+          origin === sandboxUrl.origin &&
+          data?.method === readyNotification
+        ) {
+          window.removeEventListener('message', listener);
           resolve(true);
         }
       };
-      window.addEventListener("message", listener);
+      window.addEventListener('message', listener);
     });
 
     // 2. Load the proxy iframe.
@@ -171,27 +184,29 @@ export class McpApp extends Root {
 
     // 3. Connect AppBridge via PostMessage transport.
     // We pass iframe.contentWindow to target just the sandbox proxy.
-    await this.bridge.connect(new PostMessageTransport(this.iframe.contentWindow!, this.iframe.contentWindow!));
+    await this.bridge.connect(
+      new PostMessageTransport(this.iframe.contentWindow!, this.iframe.contentWindow!),
+    );
 
     // 4. Send the Inner HTML UI resource to the sandbox to spin up the actual app.
     await this.bridge.sendSandboxResourceReady({
       html: this.htmlContent,
-      sandbox: "allow-scripts allow-forms allow-popups allow-modals"
+      sandbox: 'allow-scripts allow-forms allow-popups allow-modals',
     });
   }
 
   private dispatchAgentAction(actionName: string, params: any) {
-    const context: v0_8.Types.Action["context"] = [];
+    const context: v0_8.Types.Action['context'] = [];
     if (params && typeof params === 'object') {
       for (const [key, value] of Object.entries(params)) {
-        if (typeof value === "string") {
-          context.push({ key, value: { literalString: value } });
-        } else if (typeof value === "number") {
-          context.push({ key, value: { literalNumber: value } });
-        } else if (typeof value === "boolean") {
-          context.push({ key, value: { literalBoolean: value } });
+        if (typeof value === 'string') {
+          context.push({key, value: {literalString: value}});
+        } else if (typeof value === 'number') {
+          context.push({key, value: {literalNumber: value}});
+        } else if (typeof value === 'boolean') {
+          context.push({key, value: {literalBoolean: value}});
         } else if (value !== null && typeof value === 'object') {
-          context.push({ key, value: { literalString: JSON.stringify(value) } });
+          context.push({key, value: {literalString: JSON.stringify(value)}});
         }
       }
     }
@@ -201,8 +216,8 @@ export class McpApp extends Root {
       context,
     };
 
-    const eventPayload: v0_8.Events.StateEventDetailMap["a2ui.action"] = {
-      eventType: "a2ui.action",
+    const eventPayload: v0_8.Events.StateEventDetailMap['a2ui.action'] = {
+      eventType: 'a2ui.action',
       action,
       sourceComponentId: this.id,
       dataContextPath: this.dataContextPath,
@@ -212,4 +227,3 @@ export class McpApp extends Root {
     this.dispatchEvent(new v0_8.Events.StateEvent(eventPayload));
   }
 }
-
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/org-chart.ts b/samples/client/lit/custom-components-example/ui/custom-components/org-chart.ts
index aac18587e..8814d9306 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/org-chart.ts
+++ b/samples/client/lit/custom-components-example/ui/custom-components/org-chart.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { Root } from '@a2ui/lit/ui';
-import { v0_8 } from '@a2ui/lit';
-import { html, css, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
+import {Root} from '@a2ui/lit/ui';
+import {v0_8} from '@a2ui/lit';
+import {html, css, TemplateResult} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {map} from 'lit/directives/map.js';
 
 // Use aliases for convenience
 const StateEvent = v0_8.Events.StateEvent;
@@ -31,76 +31,79 @@ export interface OrgChartNode {
 
 @customElement('org-chart')
 export class OrgChart extends Root {
-  @property({ type: Array }) accessor chain: OrgChartNode[] = [];
-  @property({ type: Object }) accessor action: Action | null = null;
+  @property({type: Array}) accessor chain: OrgChartNode[] = [];
+  @property({type: Object}) accessor action: Action | null = null;
 
   static styles = [
     ...Root.styles,
     css`
-    :host {
-      display: block;
-      padding: 16px;
-      font-family: 'Roboto', sans-serif;
-    }
+      :host {
+        display: block;
+        padding: 16px;
+        font-family: 'Roboto', sans-serif;
+      }
 
-    .container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 16px;
-    }
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+      }
 
-    .node {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 12px 24px;
-      background: #fff;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-      min-width: 200px;
-      position: relative;
-      transition: transform 0.2s, box-shadow 0.2s;
-      cursor: pointer;
-    }
+      .node {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 12px 24px;
+        background: #fff;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        min-width: 200px;
+        position: relative;
+        transition:
+          transform 0.2s,
+          box-shadow 0.2s;
+        cursor: pointer;
+      }
 
-    .node:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    }
+      .node:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
 
-    .node:focus {
-      outline: 2px solid #1a73e8;
-      outline-offset: 2px;
-    }
+      .node:focus {
+        outline: 2px solid #1a73e8;
+        outline-offset: 2px;
+      }
 
-    .node.current {
-      background: #e8f0fe;
-      border-color: #1a73e8;
-      border-width: 2px;
-    }
+      .node.current {
+        background: #e8f0fe;
+        border-color: #1a73e8;
+        border-width: 2px;
+      }
 
-    .title {
-      font-size: 0.85rem;
-      color: #5f6368;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 4px;
-    }
+      .title {
+        font-size: 0.85rem;
+        color: #5f6368;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 4px;
+      }
 
-    .name {
-      font-size: 1.1rem;
-      font-weight: 500;
-      color: #202124;
-    }
+      .name {
+        font-size: 1.1rem;
+        font-weight: 500;
+        color: #202124;
+      }
 
-    .arrow {
-      color: #9aa0a6;
-      font-size: 24px;
-      line-height: 1;
-    }
-  `];
+      .arrow {
+        color: #9aa0a6;
+        font-size: 24px;
+        line-height: 1;
+      }
+    `,
+  ];
 
   render() {
     let chainData: OrgChartNode[] | null = null;
@@ -110,7 +113,11 @@ export class OrgChart extends Root {
     const chainAsAny = this.chain as any;
     if (chainAsAny && typeof chainAsAny === 'object' && 'path' in chainAsAny && chainAsAny.path) {
       if (this.processor) {
-        const resolved = this.processor.getData(this.component, chainAsAny.path, this.surfaceId ?? 'default');
+        const resolved = this.processor.getData(
+          this.component,
+          chainAsAny.path,
+          this.surfaceId ?? 'default',
+        );
         if (resolved) {
           unresolvedChain = resolved;
         }
@@ -175,21 +182,21 @@ export class OrgChart extends Root {
       ...(this.action.context || []),
       {
         key: 'clickedNodeTitle',
-        value: { literalString: node.title }
+        value: {literalString: node.title},
       },
       {
         key: 'clickedNodeName',
-        value: { literalString: node.name }
-      }
+        value: {literalString: node.name},
+      },
     ];
 
     const actionWithContext: Action = {
       ...this.action,
-      context: newContext as Action['context']
+      context: newContext as Action['context'],
     };
 
-    const evt = new StateEvent<"a2ui.action">({
-      eventType: "a2ui.action",
+    const evt = new StateEvent<'a2ui.action'>({
+      eventType: 'a2ui.action',
       action: actionWithContext,
       dataContextPath: this.dataContextPath,
       sourceComponentId: this.id,
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/premium-text-field.ts b/samples/client/lit/custom-components-example/ui/custom-components/premium-text-field.ts
index 0bbbed4a7..75a871b72 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/premium-text-field.ts
+++ b/samples/client/lit/custom-components-example/ui/custom-components/premium-text-field.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Root } from '@a2ui/lit/ui';
-import { html, css } from 'lit';
-import { property } from 'lit/decorators.js';
+import {Root} from '@a2ui/lit/ui';
+import {html, css} from 'lit';
+import {property} from 'lit/decorators.js';
 
 export class PremiumTextField extends Root {
   @property() accessor label = '';
@@ -30,14 +30,14 @@ export class PremiumTextField extends Root {
         padding: 16px;
         background: #fff;
         border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
         border: 1px solid #e0e0e0;
         transition: all 0.2s ease;
         font-family: 'Inter', sans-serif;
       }
       :host(:hover) {
         transform: translateY(-2px);
-        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
       }
       .input-container {
         position: relative;
@@ -82,14 +82,14 @@ export class PremiumTextField extends Root {
         font-weight: bold;
         text-transform: uppercase;
       }
-    `
+    `,
   ];
 
   render() {
     return html`
       <label>${this.label}</label>
       <div class="input-container">
-        <input type="text" .value="${this.text}" placeholder="Type here...">
+        <input type="text" .value="${this.text}" placeholder="Type here..." />
       </div>
       <div class="hint">
         <span class="badge">Custom</span>
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/register-components.ts b/samples/client/lit/custom-components-example/ui/custom-components/register-components.ts
index 71ffe4da0..af431bf33 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/register-components.ts
+++ b/samples/client/lit/custom-components-example/ui/custom-components/register-components.ts
@@ -14,102 +14,98 @@
  * limitations under the License.
  */
 
-import { componentRegistry } from "@a2ui/lit/ui";
-import { OrgChart } from "./org-chart.js";
-import { WebFrame } from "./web-frame.js";
-import { PremiumTextField } from "./premium-text-field.js";
-import { McpApp } from "./mcp-apps-component.js";
+import {componentRegistry} from '@a2ui/lit/ui';
+import {OrgChart} from './org-chart.js';
+import {WebFrame} from './web-frame.js';
+import {PremiumTextField} from './premium-text-field.js';
+import {McpApp} from './mcp-apps-component.js';
 
 export function registerContactComponents() {
   // Register OrgChart
-  componentRegistry.register("OrgChart", OrgChart, "org-chart", {
-    type: "object",
+  componentRegistry.register('OrgChart', OrgChart, 'org-chart', {
+    type: 'object',
     properties: {
       chain: {
-        type: "object",
+        type: 'object',
         properties: {
-          path: { type: "string" },
+          path: {type: 'string'},
           literalArray: {
-            type: "array",
+            type: 'array',
             items: {
-              type: "object",
+              type: 'object',
               properties: {
-                title: { type: "string" },
-                name: { type: "string" },
+                title: {type: 'string'},
+                name: {type: 'string'},
               },
-              required: ["title", "name"],
+              required: ['title', 'name'],
             },
           },
         },
       },
       action: {
-        type: "object",
+        type: 'object',
         properties: {
-          name: { type: "string" },
+          name: {type: 'string'},
           context: {
-            type: "array",
+            type: 'array',
             items: {
-              type: "object",
+              type: 'object',
               properties: {
-                key: { type: "string" },
+                key: {type: 'string'},
                 value: {
-                  type: "object",
+                  type: 'object',
                   properties: {
-                    path: { type: "string" },
-                    literalString: { type: "string" },
-                    literalNumber: { type: "number" },
-                    literalBoolean: { type: "boolean" },
+                    path: {type: 'string'},
+                    literalString: {type: 'string'},
+                    literalNumber: {type: 'number'},
+                    literalBoolean: {type: 'boolean'},
                   },
                 },
               },
-              required: ["key", "value"],
+              required: ['key', 'value'],
             },
           },
         },
-        required: ["name"],
+        required: ['name'],
       },
     },
-    required: ["chain"],
+    required: ['chain'],
   });
 
   // Register PremiumTextField as an override for TextField
-  componentRegistry.register(
-    "TextField",
-    PremiumTextField,
-    "premium-text-field"
-  );
+  componentRegistry.register('TextField', PremiumTextField, 'premium-text-field');
 
   // Register McpApp
-  componentRegistry.register("McpApp", McpApp, "a2ui-mcp-apps-component", {
-    type: "object",
+  componentRegistry.register('McpApp', McpApp, 'a2ui-mcp-apps-component', {
+    type: 'object',
     properties: {
-      resourceUri: { type: "string" },
-      htmlContent: { type: "string" },
-      height: { type: "number" },
+      resourceUri: {type: 'string'},
+      htmlContent: {type: 'string'},
+      height: {type: 'number'},
       allowedTools: {
-        type: "array",
-        items: { type: "string" }
-      }
+        type: 'array',
+        items: {type: 'string'},
+      },
     },
   });
 
   // Register WebFrame
-  componentRegistry.register("WebFrame", WebFrame, "a2ui-web-frame", {
-    type: "object",
+  componentRegistry.register('WebFrame', WebFrame, 'a2ui-web-frame', {
+    type: 'object',
     properties: {
-      url: { type: "string" },
-      html: { type: "string" },
-      height: { type: "number" },
+      url: {type: 'string'},
+      html: {type: 'string'},
+      height: {type: 'number'},
       interactionMode: {
-        type: "string",
-        enum: ["readOnly", "interactive"]
+        type: 'string',
+        enum: ['readOnly', 'interactive'],
       },
       allowedEvents: {
-        type: "array",
-        items: { type: "string" }
-      }
+        type: 'array',
+        items: {type: 'string'},
+      },
     },
   });
 
-  console.log("Registered Contact App Custom Components");
+  console.log('Registered Contact App Custom Components');
 }
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/test/README.md b/samples/client/lit/custom-components-example/ui/custom-components/test/README.md
index f4277bfeb..6b0068003 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/test/README.md
+++ b/samples/client/lit/custom-components-example/ui/custom-components/test/README.md
@@ -7,6 +7,7 @@ This directory contains tests to verify custom component integration specificall
 These tests run via the Vite development server used by the contact sample.
 
 ### 1. Start the dev server
+
 From the `web/lit/samples/contact` directory, run:
 
 ```bash
@@ -14,17 +15,18 @@ npm run dev
 ```
 
 ### 2. Access the tests
+
 Open your browser and navigate to the local server (usually port 5173):
 
--   **Component override test**:
-    [http://localhost:5173/ui/custom-components/test/override-test.html](http://localhost:5173/ui/custom-components/test/override-test.html)
-    *Verifies that a standard component (TextField) can be overridden by a custom implementation.*
+- **Component override test**:
+  [http://localhost:5173/ui/custom-components/test/override-test.html](http://localhost:5173/ui/custom-components/test/override-test.html)
+  _Verifies that a standard component (TextField) can be overridden by a custom implementation._
 
--   **Hierarchy graph integration test**:
-    [http://localhost:5173/ui/custom-components/test/hierarchy-test.html](http://localhost:5173/ui/custom-components/test/hierarchy-test.html)
-    *Verifies that the HierarchyGraph component renders correctly within the contact app's build setup.*
+- **Hierarchy graph integration test**:
+  [http://localhost:5173/ui/custom-components/test/hierarchy-test.html](http://localhost:5173/ui/custom-components/test/hierarchy-test.html)
+  _Verifies that the HierarchyGraph component renders correctly within the contact app's build setup._
 
 ## Files
 
--   `override-test.html` & `override-test.ts`: Implements and tests a custom `TextField` override.
--   `hierarchy-test.html`: Tests the `HierarchyGraph` component.
+- `override-test.html` & `override-test.ts`: Implements and tests a custom `TextField` override.
+- `hierarchy-test.html`: Tests the `HierarchyGraph` component.
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/test/org-chart-test.html b/samples/client/lit/custom-components-example/ui/custom-components/test/org-chart-test.html
index b54b5710c..c91c613ad 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/test/org-chart-test.html
+++ b/samples/client/lit/custom-components-example/ui/custom-components/test/org-chart-test.html
@@ -14,73 +14,73 @@
  limitations under the License.
  -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>A2UI Org Chart Test (Contact Sample)</title>
+    <style>
+      body {
+        font-family: sans-serif;
+        padding: 20px;
+        background: #f5f5f5;
+      }
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>A2UI Org Chart Test (Contact Sample)</title>
-  <style>
-    body {
-      font-family: sans-serif;
-      padding: 20px;
-      background: #f5f5f5;
-    }
+      .container {
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+      }
+    </style>
+    <script type="module">
+      import {registerContactComponents} from '../register-components.js';
 
-    .container {
-      margin-top: 20px;
-      display: flex;
-      justify-content: center;
-    }
-  </style>
-  <script type="module">
-    import { registerContactComponents } from '../register-components.js';
+      // Register custom components
+      registerContactComponents();
+      console.log('Custom components registered in Contact Sample');
+    </script>
+  </head>
 
-    // Register custom components
-    registerContactComponents();
-    console.log('Custom components registered in Contact Sample');
-  </script>
-</head>
+  <body>
+    <h1>A2UI Org Chart Test (Contact Sample)</h1>
 
-<body>
-  <h1>A2UI Org Chart Test (Contact Sample)</h1>
+    <div class="container">
+      <org-chart id="graph"></org-chart>
+    </div>
 
-  <div class="container">
-    <org-chart id="graph"></org-chart>
-  </div>
+    <script>
+      customElements.whenDefined('org-chart').then(() => {
+        const graph = document.getElementById('graph');
 
-  <script>
-    customElements.whenDefined('org-chart').then(() => {
-      const graph = document.getElementById('graph');
+        graph.chain = [
+          {title: 'CEO', name: 'Alice Johnson'},
+          {title: 'SVP', name: 'Bob Smith'},
+          {title: 'VP', name: 'Charlie Brown'},
+          {title: 'Director', name: 'Diana Prince'},
+          {title: 'Software Engineer', name: 'Evan Wright'},
+        ];
 
-      graph.chain = [
-        { title: 'CEO', name: 'Alice Johnson' },
-        { title: 'SVP', name: 'Bob Smith' },
-        { title: 'VP', name: 'Charlie Brown' },
-        { title: 'Director', name: 'Diana Prince' },
-        { title: 'Software Engineer', name: 'Evan Wright' }
-      ];
+        graph.action = {
+          name: 'showContactCard',
+          context: [],
+        };
 
-      graph.action = {
-        name: 'showContactCard',
-        context: []
-      };
-
-      graph.addEventListener('a2uiaction', (e) => {
-        const status = document.createElement('div');
-        const clickedNodeTitle = e.detail.action.context.find(c => c.key === 'clickedNodeTitle')?.value.literalString;
-        const clickedNodeName = e.detail.action.context.find(c => c.key === 'clickedNodeName')?.value.literalString;
-        status.textContent = `Clicked: ${clickedNodeTitle} - ${clickedNodeName}`;
-        status.style.marginTop = '20px';
-        status.style.padding = '10px';
-        status.style.background = '#e0f7fa';
-        status.style.border = '1px solid #006064';
-        status.id = 'action-status';
-        document.body.appendChild(status);
+        graph.addEventListener('a2uiaction', e => {
+          const status = document.createElement('div');
+          const clickedNodeTitle = e.detail.action.context.find(c => c.key === 'clickedNodeTitle')
+            ?.value.literalString;
+          const clickedNodeName = e.detail.action.context.find(c => c.key === 'clickedNodeName')
+            ?.value.literalString;
+          status.textContent = `Clicked: ${clickedNodeTitle} - ${clickedNodeName}`;
+          status.style.marginTop = '20px';
+          status.style.padding = '10px';
+          status.style.background = '#e0f7fa';
+          status.style.border = '1px solid #006064';
+          status.id = 'action-status';
+          document.body.appendChild(status);
+        });
       });
-    });
-  </script>
-</body>
-
-</html>
\ No newline at end of file
+    </script>
+  </body>
+</html>
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.html b/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.html
index 7edf0291c..67feacf2f 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.html
+++ b/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.html
@@ -14,30 +14,28 @@
  limitations under the License.
  -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <title>A2UI Component Override Test</title>
-  <style>
-    body {
-      padding: 20px;
-      font-family: sans-serif;
-    }
-
-    .container {
-      margin-top: 20px;
-      border: 1px dashed #ccc;
-      padding: 10px;
-    }
-  </style>
-  <script type="module" src="./override-test.ts"></script>
-</head>
-
-<body>
-  <h1>Component Override Test</h1>
-  <div id="app" class="container"></div>
-</body>
-
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <title>A2UI Component Override Test</title>
+    <style>
+      body {
+        padding: 20px;
+        font-family: sans-serif;
+      }
+
+      .container {
+        margin-top: 20px;
+        border: 1px dashed #ccc;
+        padding: 10px;
+      }
+    </style>
+    <script type="module" src="./override-test.ts"></script>
+  </head>
+
+  <body>
+    <h1>Component Override Test</h1>
+    <div id="app" class="container"></div>
+  </body>
+</html>
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.ts b/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.ts
index b1a1bd06b..4f2de69a7 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.ts
+++ b/samples/client/lit/custom-components-example/ui/custom-components/test/override-test.ts
@@ -14,27 +14,27 @@
  * limitations under the License.
  */
 
-import { componentRegistry, Root } from "@a2ui/lit/ui";
-import { html, css } from "lit";
-import { property } from "lit/decorators.js";
+import {componentRegistry, Root} from '@a2ui/lit/ui';
+import {html, css} from 'lit';
+import {property} from 'lit/decorators.js';
 // 1. Define the override
-import { PremiumTextField } from "../premium-text-field.js";
+import {PremiumTextField} from '../premium-text-field.js';
 
 // 2. Register it as "TextField"
-componentRegistry.register("TextField", PremiumTextField, "premium-text-field");
-console.log("Registered PremiumTextField override");
+componentRegistry.register('TextField', PremiumTextField, 'premium-text-field');
+console.log('Registered PremiumTextField override');
 
 // 3. Render a standard TextField component node
-const container = document.getElementById("app");
+const container = document.getElementById('app');
 if (container) {
-  const root = document.createElement("a2ui-root") as Root;
+  const root = document.createElement('a2ui-root') as Root;
 
   const textFieldComponent = {
-    type: "TextField",
-    id: "tf-1",
+    type: 'TextField',
+    id: 'tf-1',
     properties: {
-      label: "Enter your name",
-      text: "John Doe",
+      label: 'Enter your name',
+      text: 'John Doe',
     },
   };
 
diff --git a/samples/client/lit/custom-components-example/ui/custom-components/web-frame.ts b/samples/client/lit/custom-components-example/ui/custom-components/web-frame.ts
index 6eee51cf7..d5bde665d 100644
--- a/samples/client/lit/custom-components-example/ui/custom-components/web-frame.ts
+++ b/samples/client/lit/custom-components-example/ui/custom-components/web-frame.ts
@@ -14,18 +14,17 @@
  * limitations under the License.
  */
 
-import { html, css, PropertyValues, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { Root } from "@a2ui/lit/ui";
-import { v0_8 } from "@a2ui/lit";
-
+import {html, css, PropertyValues, nothing} from 'lit';
+import {customElement, property, query} from 'lit/decorators.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
+import {Root} from '@a2ui/lit/ui';
+import {v0_8} from '@a2ui/lit';
 
 interface WebFrameConfig {
   [key: string]: unknown;
 }
 
-@customElement("a2ui-web-frame")
+@customElement('a2ui-web-frame')
 export class WebFrame extends Root {
   static override styles = [
     ...Root.styles,
@@ -62,7 +61,7 @@ export class WebFrame extends Root {
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
       .controls button:hover {
         background: #f0f0f0;
@@ -72,33 +71,33 @@ export class WebFrame extends Root {
 
   /* --- Properties (Server Contract) --- */
 
-  @property({ type: String })
-  accessor url: string = "";
+  @property({type: String})
+  accessor url: string = '';
 
-  @property({ type: String })
-  accessor html: string = "";
+  @property({type: String})
+  accessor html: string = '';
 
-  @property({ type: Number })
+  @property({type: Number})
   accessor height: number | undefined = undefined;
 
-  @property({ type: String })
-  accessor interactionMode: "readOnly" | "interactive" = "readOnly";
+  @property({type: String})
+  accessor interactionMode: 'readOnly' | 'interactive' = 'readOnly';
 
-  @property({ type: Array })
+  @property({type: Array})
   accessor allowedEvents: string[] = [];
 
   // --- Internal State ---
 
-  @query("iframe")
+  @query('iframe')
   accessor iframe!: HTMLIFrameElement;
 
   // --- Security Constants ---
   static readonly TRUSTED_DOMAINS = [
-    "localhost",
-    "127.0.0.1",
-    "openstreetmap.org",
-    "youtube.com",
-    "maps.google.com"
+    'localhost',
+    '127.0.0.1',
+    'openstreetmap.org',
+    'youtube.com',
+    'maps.google.com',
   ];
 
   override render() {
@@ -131,9 +130,9 @@ export class WebFrame extends Root {
     // 1. If HTML is provided, it's treated as Trusted (but isolated)
     if (this.html) {
       if (this.interactionMode === 'interactive') {
-        return "allow-scripts allow-forms allow-popups allow-modals";
+        return 'allow-scripts allow-forms allow-popups allow-modals';
       }
-      return "allow-scripts"; // ReadOnly but scripts allowed for rendering
+      return 'allow-scripts'; // ReadOnly but scripts allowed for rendering
     }
 
     // 2. Parse Domain from URL
@@ -141,35 +140,36 @@ export class WebFrame extends Root {
       const urlObj = new URL(this.url, window.location.href); // Handle relative URLs too
       const hostname = urlObj.hostname;
 
-      const isTrusted = WebFrame.TRUSTED_DOMAINS.some(d => hostname === d || hostname.endsWith(`.${d}`));
+      const isTrusted = WebFrame.TRUSTED_DOMAINS.some(
+        d => hostname === d || hostname.endsWith(`.${d}`),
+      );
 
       if (!isTrusted) {
         // Untrusted: Strict Lockdown
-        return "";
+        return '';
       }
 
       // Trusted
       // Always allow same-origin for trusted domains to avoid issues with local assets or CORS checks
       if (this.interactionMode === 'interactive') {
-        return "allow-scripts allow-forms allow-popups allow-modals allow-same-origin";
+        return 'allow-scripts allow-forms allow-popups allow-modals allow-same-origin';
       } else {
-        return "allow-scripts allow-same-origin";
+        return 'allow-scripts allow-same-origin';
       }
-
     } catch (e) {
       // Invalid URL -> Lockdown
-      return "";
+      return '';
     }
   }
 
   // --- Event Bridge ---
 
   firstUpdated() {
-    window.addEventListener("message", this.#onMessage);
+    window.addEventListener('message', this.#onMessage);
   }
 
   disconnectedCallback() {
-    window.removeEventListener("message", this.#onMessage);
+    window.removeEventListener('message', this.#onMessage);
     super.disconnectedCallback();
   }
 
@@ -179,14 +179,17 @@ export class WebFrame extends Root {
 
     // Spec Protocol: { type: 'a2ui_action', action: '...', data: ... }
     if (data && data.type === 'a2ui_action') {
-      const { action, data: actionData } = data; // 'data' property in message payload
+      const {action, data: actionData} = data; // 'data' property in message payload
 
       // 1. Validate Action
       if (this.allowedEvents.includes(action)) {
         // 2. Dispatch
         this.#dispatchAgentAction(action, actionData);
       } else {
-        console.warn(`[WebFrame] Action '${action}' blocked. Not in allowedEvents:`, this.allowedEvents);
+        console.warn(
+          `[WebFrame] Action '${action}' blocked. Not in allowedEvents:`,
+          this.allowedEvents,
+        );
       }
     }
     // Legacy support for 'emit' temporarily if we want to be safe, but spec implies replacement.
@@ -194,15 +197,15 @@ export class WebFrame extends Root {
   };
 
   #dispatchAgentAction(actionName: string, params: any) {
-    const context: v0_8.Types.Action["context"] = [];
+    const context: v0_8.Types.Action['context'] = [];
     if (params && typeof params === 'object') {
       for (const [key, value] of Object.entries(params)) {
-        if (typeof value === "string") {
-          context.push({ key, value: { literalString: value } });
-        } else if (typeof value === "number") {
-          context.push({ key, value: { literalNumber: value } });
-        } else if (typeof value === "boolean") {
-          context.push({ key, value: { literalBoolean: value } });
+        if (typeof value === 'string') {
+          context.push({key, value: {literalString: value}});
+        } else if (typeof value === 'number') {
+          context.push({key, value: {literalNumber: value}});
+        } else if (typeof value === 'boolean') {
+          context.push({key, value: {literalBoolean: value}});
         }
       }
     }
@@ -212,8 +215,8 @@ export class WebFrame extends Root {
       context,
     };
 
-    const eventPayload: v0_8.Events.StateEventDetailMap["a2ui.action"] = {
-      eventType: "a2ui.action",
+    const eventPayload: v0_8.Events.StateEventDetailMap['a2ui.action'] = {
+      eventType: 'a2ui.action',
       action,
       sourceComponentId: this.id,
       dataContextPath: this.dataContextPath,
@@ -228,7 +231,7 @@ export class WebFrame extends Root {
   // We assume the iframe content knows how to handle 'zoom' message if it supports it.
   #zoom(factor: number) {
     if (this.iframe && this.iframe.contentWindow) {
-      this.iframe.contentWindow.postMessage({ type: 'zoom', payload: { factor } }, '*');
+      this.iframe.contentWindow.postMessage({type: 'zoom', payload: {factor}}, '*');
     }
   }
 }
diff --git a/samples/client/lit/custom-components-example/ui/shared-constants.ts b/samples/client/lit/custom-components-example/ui/shared-constants.ts
index 2213f62d6..e9ef90f04 100644
--- a/samples/client/lit/custom-components-example/ui/shared-constants.ts
+++ b/samples/client/lit/custom-components-example/ui/shared-constants.ts
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export const SANDBOX_BASE_PATH = "shared/mcp_apps_inner_iframe/";
+export const SANDBOX_BASE_PATH = 'shared/mcp_apps_inner_iframe/';
 export const SANDBOX_ENTRY_NAME = `${SANDBOX_BASE_PATH}sandbox`;
 export const SANDBOX_IFRAME_PATH = `/${SANDBOX_ENTRY_NAME}.html`;
diff --git a/samples/client/lit/custom-components-example/ui/snackbar.ts b/samples/client/lit/custom-components-example/ui/snackbar.ts
index 03ce8ab4a..68bef22b1 100644
--- a/samples/client/lit/custom-components-example/ui/snackbar.ts
+++ b/samples/client/lit/custom-components-example/ui/snackbar.ts
@@ -13,22 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { LitElement, html, css, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { SnackbarMessage, SnackbarUUID, SnackType } from "../types/types";
-import { repeat } from "lit/directives/repeat.js";
-import { SnackbarActionEvent } from "../events/events";
-import { classMap } from "lit/directives/class-map.js";
-import { v0_8 } from "@a2ui/lit";
+import {LitElement, html, css, nothing, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {SnackbarMessage, SnackbarUUID, SnackType} from '../types/types';
+import {repeat} from 'lit/directives/repeat.js';
+import {SnackbarActionEvent} from '../events/events';
+import {classMap} from 'lit/directives/class-map.js';
+import {v0_8} from '@a2ui/lit';
 
 const DEFAULT_TIMEOUT = 8000;
 
-@customElement("ui-snackbar")
+@customElement('ui-snackbar')
 export class Snackbar extends LitElement {
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor active = false;
 
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor error = false;
 
   @property()
@@ -61,8 +61,7 @@ export class Snackbar extends LitElement {
         z-index: 1800;
         scrollbar-width: none;
         overflow-x: scroll;
-        font: 400 var(--bb-body-medium) / var(--bb-body-line-height-medium)
-          var(--bb-font-family);
+        font: 400 var(--bb-body-medium) / var(--bb-body-line-height-medium) var(--bb-font-family);
       }
 
       :host([active]) {
@@ -109,8 +108,7 @@ export class Snackbar extends LitElement {
         margin-right: var(--bb-grid-size-3);
 
         & button {
-          font: 500 var(--bb-body-medium) / var(--bb-body-line-height-medium)
-            var(--bb-font-family);
+          font: 500 var(--bb-body-medium) / var(--bb-body-line-height-medium) var(--bb-font-family);
           padding: 0;
           background: transparent;
           border: none;
@@ -168,9 +166,7 @@ export class Snackbar extends LitElement {
   ];
 
   show(message: SnackbarMessage, replaceAll = false) {
-    const existingMessage = this.#messages.findIndex(
-      (msg) => msg.id === message.id
-    );
+    const existingMessage = this.#messages.findIndex(msg => msg.id === message.id);
     if (existingMessage === -1) {
       if (replaceAll) {
         this.#messages.length = 0;
@@ -182,13 +178,13 @@ export class Snackbar extends LitElement {
     }
 
     window.clearTimeout(this.#timeout);
-    if (!this.#messages.every((msg) => msg.persistent)) {
+    if (!this.#messages.every(msg => msg.persistent)) {
       this.#timeout = window.setTimeout(() => {
         this.hide();
       }, this.timeout);
     }
 
-    this.error = this.#messages.some((msg) => msg.type === SnackType.ERROR);
+    this.error = this.#messages.some(msg => msg.type === SnackType.ERROR);
     this.active = true;
     this.requestUpdate();
 
@@ -197,7 +193,7 @@ export class Snackbar extends LitElement {
 
   hide(id?: SnackbarUUID) {
     if (id) {
-      const idx = this.#messages.findIndex((msg) => msg.id === id);
+      const idx = this.#messages.findIndex(msg => msg.id === id);
       if (idx !== -1) {
         this.#messages.splice(idx, 1);
       }
@@ -206,7 +202,7 @@ export class Snackbar extends LitElement {
     }
 
     this.active = this.#messages.length !== 0;
-    this.updateComplete.then((avoidedUpdate) => {
+    this.updateComplete.then(avoidedUpdate => {
       if (!avoidedUpdate) {
         return;
       }
@@ -217,81 +213,74 @@ export class Snackbar extends LitElement {
 
   render() {
     let rotate = false;
-    let icon = "";
+    let icon = '';
     for (let i = this.#messages.length - 1; i >= 0; i--) {
-      if (
-        !this.#messages[i].type ||
-        this.#messages[i].type === SnackType.NONE
-      ) {
+      if (!this.#messages[i].type || this.#messages[i].type === SnackType.NONE) {
         continue;
       }
 
       icon = this.#messages[i].type;
       if (this.#messages[i].type === SnackType.PENDING) {
-        icon = "progress_activity";
+        icon = 'progress_activity';
         rotate = true;
       }
       break;
     }
 
     return html` ${icon
-      ? html`<span
+        ? html`<span
             class=${classMap({
-        "g-icon": true,
-        round: true,
-        filled: true,
-        rotate,
-      })}
+              'g-icon': true,
+              round: true,
+              filled: true,
+              rotate,
+            })}
             >${icon}</span
           >`
-      : nothing}
+        : nothing}
       <div id="messages">
         ${repeat(
-        this.#messages,
-        (message) => message.id,
-        (message) => {
-          return html`<div>${message.message}</div>`;
-        }
-      )}
+          this.#messages,
+          message => message.id,
+          message => {
+            return html`<div>${message.message}</div>`;
+          },
+        )}
       </div>
       <div id="actions">
         ${repeat(
-        this.#messages,
-        (message) => message.id,
-        (message) => {
-          if (!message.actions) {
-            return nothing;
-          }
+          this.#messages,
+          message => message.id,
+          message => {
+            if (!message.actions) {
+              return nothing;
+            }
 
-          return html`${repeat(
-            message.actions,
-            (action) => action.value,
-            (action) => {
-              return html`<button
+            return html`${repeat(
+              message.actions,
+              action => action.value,
+              action => {
+                return html`<button
                   @click=${() => {
-                  this.hide();
-                  this.dispatchEvent(
-                    new SnackbarActionEvent(
-                      action.action,
-                      action.value,
-                      action.callback
-                    )
-                  );
-                }}
+                    this.hide();
+                    this.dispatchEvent(
+                      new SnackbarActionEvent(action.action, action.value, action.callback),
+                    );
+                  }}
                 >
                   ${action.title}
                 </button>`;
-            }
-          )}`;
-        }
-      )}
+              },
+            )}`;
+          },
+        )}
       </div>
       <button
         id="close"
         @click=${() => {
-        this.hide();
-        this.dispatchEvent(new SnackbarActionEvent("dismiss"));
-      }}
+          this.hide();
+          this.dispatchEvent(new SnackbarActionEvent('dismiss'));
+        }}
       >
         <span class="g-icon">close</span>
       </button>`;
diff --git a/samples/client/lit/custom-components-example/ui/ui.ts b/samples/client/lit/custom-components-example/ui/ui.ts
index 0a06940f1..2f86cdd65 100644
--- a/samples/client/lit/custom-components-example/ui/ui.ts
+++ b/samples/client/lit/custom-components-example/ui/ui.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { Snackbar } from "./snackbar";
+export {Snackbar} from './snackbar';
diff --git a/samples/client/lit/custom-components-example/vite.config.ts b/samples/client/lit/custom-components-example/vite.config.ts
index 001035e06..4fa6e79d6 100644
--- a/samples/client/lit/custom-components-example/vite.config.ts
+++ b/samples/client/lit/custom-components-example/vite.config.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { config } from "dotenv";
-import { UserConfig } from "vite";
-import * as Middleware from "./middleware";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import { SANDBOX_ENTRY_NAME, SANDBOX_BASE_PATH, SANDBOX_IFRAME_PATH } from "./ui/shared-constants.js";
+import {config} from 'dotenv';
+import {UserConfig} from 'vite';
+import * as Middleware from './middleware';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {SANDBOX_ENTRY_NAME, SANDBOX_BASE_PATH, SANDBOX_IFRAME_PATH} from './ui/shared-constants.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -27,7 +27,7 @@ export default async () => {
   config();
 
   const entry: Record<string, string> = {
-    contact: resolve(__dirname, "index.html"),
+    contact: resolve(__dirname, 'index.html'),
     [SANDBOX_ENTRY_NAME]: resolve(__dirname, `../..${SANDBOX_IFRAME_PATH}`),
   };
 
@@ -41,44 +41,47 @@ export default async () => {
             if (req.url?.startsWith(`/${SANDBOX_BASE_PATH}`)) {
               let targetPath = req.url.slice(1);
               // Normalize .js requests from HTML back to source .ts files for Vite bundling
-              if (targetPath.endsWith(".js")) {
-                targetPath = targetPath.slice(0, -3) + ".ts";
+              if (targetPath.endsWith('.js')) {
+                targetPath = targetPath.slice(0, -3) + '.ts';
               }
               req.url = '/@fs' + resolve(__dirname, '../../' + targetPath);
             }
             next();
           });
-        }
-      }
+        },
+      },
     ],
     build: {
       rollupOptions: {
         input: entry,
       },
-      target: "es2021",
+      target: 'es2021',
     },
     define: {},
     resolve: {
-      dedupe: ["lit"],
+      dedupe: ['lit'],
       alias: {
-        "@a2ui/markdown-it": resolve(__dirname, "../../../../renderers/markdown/markdown-it/dist/src/markdown.js"),
-        "sandbox.js": resolve(__dirname, "../../" + SANDBOX_ENTRY_NAME + ".ts"),
-        "@modelcontextprotocol/ext-apps/app-bridge": resolve(__dirname, "../node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js"),
-      }
+        '@a2ui/markdown-it': resolve(
+          __dirname,
+          '../../../../renderers/markdown/markdown-it/dist/src/markdown.js',
+        ),
+        'sandbox.js': resolve(__dirname, '../../' + SANDBOX_ENTRY_NAME + '.ts'),
+        '@modelcontextprotocol/ext-apps/app-bridge': resolve(
+          __dirname,
+          '../node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js',
+        ),
+      },
     },
     optimizeDeps: {
       esbuildOptions: {
-        target: "es2021",
-      }
+        target: 'es2021',
+      },
     },
     server: {
       host: true, // Listen on all network interfaces (0.0.0.0), enabling both localhost and 127.0.0.1 simultaneously
       fs: {
-        allow: [
-          "../../",
-          "./",
-        ]
-      }
+        allow: ['../../', './'],
+      },
     },
   } satisfies UserConfig;
 };
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/README.md b/samples/client/lit/mcp-apps-in-a2ui-sample/README.md
index 4dbd6071f..34f5c43c3 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/README.md
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/README.md
@@ -16,23 +16,30 @@ This sample demonstrates how a sandboxed MCP (Model Context Protocol) applicatio
 ## Rationale for Implementation Pattern
 
 This sample follows the pattern established in the `custom-components-example` (specifically the floor plan map):
+
 - It uses **raw postMessage** communication in the iframe instead of loading external scripts like `AppBridge` from `unpkg.com`. This makes it robust against network issues and CSP restrictions in the sandbox.
 - It relies on the A2UI host to act as the orchestrator, translating MCP tool calls into A2UI actions.
 
 ## How to Run
 
 ### 1. Run the Agent
+
 Navigate to the agent sample directory and run the agent:
+
 ```bash
 cd samples/agent/adk/mcp-apps-in-a2ui-sample
 uv run agent.py
 ```
+
 The agent will start on `http://localhost:8000`.
 
 ### 2. Run the Client
+
 Navigate to the client sample directory and start the dev server:
+
 ```bash
 cd samples/client/lit/mcp-apps-in-a2ui-sample
 npm run dev
 ```
+
 The client will start (typically on `http://localhost:5173/`). Open this URL in your browser to interact with the sample.
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/client.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/client.ts
index 1c2312cde..bdf42554b 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/client.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/client.ts
@@ -14,23 +14,21 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
-import { registerMcpComponents } from "./ui/custom-components/register-components.js";
-import { componentRegistry } from "@a2ui/lit/ui";
+import {v0_8} from '@a2ui/lit';
+import {registerMcpComponents} from './ui/custom-components/register-components.js';
+import {componentRegistry} from '@a2ui/lit/ui';
 
 type A2TextPayload = {
-  kind: "text";
+  kind: 'text';
   text: string;
 };
 
 type A2DataPayload = {
-  kind: "data";
+  kind: 'data';
   data: v0_8.Types.ServerToClientMessage;
 };
 
-type A2AServerPayload =
-  | Array<A2DataPayload | A2TextPayload>
-  | { error: string };
+type A2AServerPayload = Array<A2DataPayload | A2TextPayload> | {error: string};
 
 export class A2UIClient {
   #ready: Promise<void> = Promise.resolve();
@@ -39,33 +37,33 @@ export class A2UIClient {
   }
 
   async send(
-    message: v0_8.Types.A2UIClientEventMessage
+    message: v0_8.Types.A2UIClientEventMessage,
   ): Promise<v0_8.Types.ServerToClientMessage[]> {
     const catalog = componentRegistry.getInlineCatalog();
     const finalMessage = {
       ...message,
       metadata: {
-        "a2uiClientCapabilities": {
-          "inlineCatalogs": [catalog],
+        a2uiClientCapabilities: {
+          inlineCatalogs: [catalog],
         },
       },
     };
 
-    const response = await fetch("/a2a", {
+    const response = await fetch('/a2a', {
       body: JSON.stringify(finalMessage),
-      method: "POST",
+      method: 'POST',
     });
 
     if (response.ok) {
       const data = (await response.json()) as A2AServerPayload;
       const messages: v0_8.Types.ServerToClientMessage[] = [];
-      if ("error" in data) {
+      if ('error' in data) {
         throw new Error(data.error);
       } else {
         for (const item of data) {
           if (typeof item === 'object' && item !== null && 'kind' in item) {
-            if (item.kind === "text") continue;
-            if (item.kind === "data") {
+            if (item.kind === 'text') continue;
+            if (item.kind === 'data') {
               messages.push(item.data);
             }
           } else {
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/index.html b/samples/client/lit/mcp-apps-in-a2ui-sample/index.html
index 461c59b7e..37313cbe4 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/index.html
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2025 Google LLC
 
@@ -145,12 +145,8 @@
         --primary: #137fec;
         --text-color: #fff;
         --background: light-dark(#f6f7f8, #101922);
-        --border-color: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.15)
-        );
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --border-color: oklch(from var(--background-light) l c h / calc(alpha * 0.15));
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
@@ -168,7 +164,8 @@
         --bb-grid-size-15: calc(var(--bb-grid-size) * 15);
         --bb-grid-size-16: calc(var(--bb-grid-size) * 16);
 
-        --background: radial-gradient(
+        --background:
+          radial-gradient(
             at 0% 0%,
             light-dark(rgba(161, 196, 253, 0.3), rgba(6, 182, 212, 0.15)) 0px,
             transparent 50%
@@ -194,9 +191,7 @@
             light-dark(#e2e8f0, #1e293b) 100%
           );
 
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
@@ -221,8 +216,8 @@
 
       html,
       body {
-        --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         background: var(--background);
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/mcp-app.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/mcp-app.ts
index 090cbf483..5c9697e03 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/mcp-app.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/mcp-app.ts
@@ -14,26 +14,26 @@
  * limitations under the License.
  */
 
-import { SignalWatcher } from "@lit-labs/signals";
-import { provide } from "@lit/context";
-import { LitElement, html, css, nothing, unsafeCSS } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { A2UIClient } from "./client.js";
-import { v0_8 } from "@a2ui/lit";
-import * as UI from "@a2ui/lit/ui";
+import {SignalWatcher} from '@lit-labs/signals';
+import {provide} from '@lit/context';
+import {LitElement, html, css, nothing, unsafeCSS} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {A2UIClient} from './client.js';
+import {v0_8} from '@a2ui/lit';
+import * as UI from '@a2ui/lit/ui';
 
 // Register custom components
-import { registerMcpComponents } from "./ui/custom-components/register-components.js";
-import { theme as uiTheme } from "./theme/theme.js";
+import {registerMcpComponents} from './ui/custom-components/register-components.js';
+import {theme as uiTheme} from './theme/theme.js';
 registerMcpComponents();
 
-@customElement("a2ui-mcp-sample")
+@customElement('a2ui-mcp-sample')
 export class A2UIMcpSample extends SignalWatcher(LitElement) {
-  @provide({ context: UI.Context.themeContext })
+  @provide({context: UI.Context.themeContext})
   accessor theme: v0_8.Types.Theme = uiTheme;
 
-  @provide({ context: UI.Context.markdown })
-  accessor markdownRenderer: v0_8.Types.MarkdownRenderer = async (text) => text; // Minimal, no MD needed likely
+  @provide({context: UI.Context.markdown})
+  accessor markdownRenderer: v0_8.Types.MarkdownRenderer = async text => text; // Minimal, no MD needed likely
 
   @state()
   accessor #requesting = false;
@@ -42,7 +42,7 @@ export class A2UIMcpSample extends SignalWatcher(LitElement) {
   accessor #processor = v0_8.Data.createSignalA2uiMessageProcessor();
 
   @state()
-  accessor #logs: Array<{ type: 'sent' | 'received', data: any, expanded: boolean }> = [];
+  accessor #logs: Array<{type: 'sent' | 'received'; data: any; expanded: boolean}> = [];
 
   #a2uiClient = new A2UIClient();
 
@@ -50,7 +50,7 @@ export class A2UIMcpSample extends SignalWatcher(LitElement) {
     super.connectedCallback();
     // Only send if we don't have surfaces yet and not already requesting
     if (this.#processor.getSurfaces().size === 0 && !this.#requesting) {
-      this.#sendAndProcessMessage({ request: "Load MCP App" });
+      this.#sendAndProcessMessage({request: 'Load MCP App'});
     }
   }
 
@@ -64,7 +64,7 @@ export class A2UIMcpSample extends SignalWatcher(LitElement) {
         padding: 16px;
         background: #fff;
         border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
       .loading {
         text-align: center;
@@ -148,38 +148,42 @@ export class A2UIMcpSample extends SignalWatcher(LitElement) {
     return html`
       <h1>MCP App Standalone Sample</h1>
       <div id="surfaces">
-        ${surfaces.map(surface => html`
-          <a2ui-surface
-            .surface=${{...surface}}
-            .enableCustomElements=${true}
-            @a2uiaction=${this.#handleAction}
-          ></a2ui-surface>
-        `)}
+        ${surfaces.map(
+          surface => html`
+            <a2ui-surface
+              .surface=${{...surface}}
+              .enableCustomElements=${true}
+              @a2uiaction=${this.#handleAction}
+            ></a2ui-surface>
+          `,
+        )}
       </div>
 
       <div class="debug-panel">
         <h3>Communication Log</h3>
         <div class="log-entries">
-          ${this.#logs.map((log, index) => html`
-            <div class="log-entry ${log.type}" @click=${() => this.#toggleLog(index)}>
-              <div class="log-header">
-                <span class="log-type">${log.type.toUpperCase()}</span>
-                <span class="log-summary">${this.#getLogSummary(log.data)}</span>
-                <span class="log-toggle">${log.expanded ? '▼' : '▶'}</span>
+          ${this.#logs.map(
+            (log, index) => html`
+              <div class="log-entry ${log.type}" @click=${() => this.#toggleLog(index)}>
+                <div class="log-header">
+                  <span class="log-type">${log.type.toUpperCase()}</span>
+                  <span class="log-summary">${this.#getLogSummary(log.data)}</span>
+                  <span class="log-toggle">${log.expanded ? '▼' : '▶'}</span>
+                </div>
+                ${log.expanded
+                  ? html` <pre class="log-detail">${JSON.stringify(log.data, null, 2)}</pre> `
+                  : nothing}
               </div>
-              ${log.expanded ? html`
-                <pre class="log-detail">${JSON.stringify(log.data, null, 2)}</pre>
-              ` : nothing}
-            </div>
-          `)}
+            `,
+          )}
         </div>
       </div>
     `;
   }
 
   #toggleLog(index: number) {
-    this.#logs = this.#logs.map((log, i) => 
-      i === index ? { ...log, expanded: !log.expanded } : log
+    this.#logs = this.#logs.map((log, i) =>
+      i === index ? {...log, expanded: !log.expanded} : log,
     );
   }
 
@@ -195,7 +199,7 @@ export class A2UIMcpSample extends SignalWatcher(LitElement) {
     return JSON.stringify(data).substring(0, 50) + '...';
   }
 
-  async #handleAction(evt: v0_8.Events.StateEvent<"a2ui.action">) {
+  async #handleAction(evt: v0_8.Events.StateEvent<'a2ui.action'>) {
     const [target] = evt.composedPath();
     if (!(target instanceof HTMLElement)) return;
 
@@ -224,15 +228,18 @@ export class A2UIMcpSample extends SignalWatcher(LitElement) {
 
   async #sendAndProcessMessage(request: v0_8.Types.A2UIClientEventMessage) {
     this.#requesting = true;
-    this.#logs = [...this.#logs, { type: 'sent', data: request, expanded: false }];
+    this.#logs = [...this.#logs, {type: 'sent', data: request, expanded: false}];
     try {
       const messages = await this.#a2uiClient.send(request);
-      this.#logs = [...this.#logs, { type: 'received', data: messages, expanded: false }];
+      this.#logs = [...this.#logs, {type: 'received', data: messages, expanded: false}];
       this.#processor.processMessages(messages);
       this.requestUpdate();
     } catch (err) {
-      console.error("Failed to send message:", err);
-      this.#logs = [...this.#logs, { type: 'received', data: { error: (err as Error).message }, expanded: false }];
+      console.error('Failed to send message:', err);
+      this.#logs = [
+        ...this.#logs,
+        {type: 'received', data: {error: (err as Error).message}, expanded: false},
+      ];
     } finally {
       this.#requesting = false;
     }
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/a2a.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/a2a.ts
index c0197e4ef..fd75bb5f3 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/a2a.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/a2a.ts
@@ -14,33 +14,26 @@
  * limitations under the License.
  */
 
-import { IncomingMessage, ServerResponse } from "http";
-import { Plugin, ViteDevServer } from "vite";
-import { A2AClient } from "@a2a-js/sdk/client";
-import {
-  MessageSendParams,
-  Part,
-  SendMessageSuccessResponse,
-  Task,
-} from "@a2a-js/sdk";
-import { v4 as uuidv4 } from "uuid";
+import {IncomingMessage, ServerResponse} from 'http';
+import {Plugin, ViteDevServer} from 'vite';
+import {A2AClient} from '@a2a-js/sdk/client';
+import {MessageSendParams, Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
+import {v4 as uuidv4} from 'uuid';
 
-const A2UI_MIME_TYPE = "application/json+a2ui";
+const A2UI_MIME_TYPE = 'application/json+a2ui';
 
 const fetchWithCustomHeader: typeof fetch = async (url, init) => {
   const headers = new Headers(init?.headers);
-  headers.set("X-A2A-Extensions", "https://a2ui.org/a2a-extension/a2ui/v0.8");
+  headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.8');
 
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 };
 
 const isJson = (str: string) => {
   try {
     const parsed = JSON.parse(str);
-    return (
-      typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)
-    );
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed);
   } catch (err) {
     console.warn(err);
     return false;
@@ -51,10 +44,9 @@ let client: A2AClient | null = null;
 const createOrGetClient = async () => {
   if (!client) {
     // Create a client pointing to the agent's Agent Card URL.
-    client = await A2AClient.fromCardUrl(
-      "http://localhost:8000/.well-known/agent-card.json",
-      { fetchImpl: fetchWithCustomHeader }
-    );
+    client = await A2AClient.fromCardUrl('http://localhost:8000/.well-known/agent-card.json', {
+      fetchImpl: fetchWithCustomHeader,
+    });
   }
 
   return client;
@@ -62,83 +54,76 @@ const createOrGetClient = async () => {
 
 export const plugin = (): Plugin => {
   return {
-    name: "a2a-handler",
+    name: 'a2a-handler',
     configureServer(server: ViteDevServer) {
       server.middlewares.use(
-        "/a2a",
+        '/a2a',
         async (req: IncomingMessage, res: ServerResponse, next: () => void) => {
-          if (req.method === "POST") {
-            let originalBody = "";
+          if (req.method === 'POST') {
+            let originalBody = '';
 
-            req.on("data", (chunk) => {
+            req.on('data', chunk => {
               originalBody += chunk.toString();
             });
 
-            req.on("end", async () => {
+            req.on('end', async () => {
               let sendParams: MessageSendParams;
 
               if (isJson(originalBody)) {
-                console.log(
-                  "[a2a-middleware] Received JSON UI event:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received JSON UI event:', originalBody);
 
                 const clientEvent = JSON.parse(originalBody);
                 sendParams = {
                   message: {
                     messageId: uuidv4(),
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "data",
+                        kind: 'data',
                         data: clientEvent,
-                        metadata: { 'mimeType': A2UI_MIME_TYPE },
+                        metadata: {mimeType: A2UI_MIME_TYPE},
                       } as Part,
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               } else {
-                console.log(
-                  "[a2a-middleware] Received text query:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received text query:', originalBody);
                 sendParams = {
                   message: {
                     messageId: uuidv4(),
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "text",
+                        kind: 'text',
                         text: originalBody,
                       },
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               }
 
               const client = await createOrGetClient();
               const response = await client.sendMessage(sendParams);
-              if ("error" in response) {
-                console.error("Error:", response.error.message);
+              if ('error' in response) {
+                console.error('Error:', response.error.message);
                 res.statusCode = 500;
-                res.setHeader("Content-Type", "application/json");
-                res.end(JSON.stringify({ error: response.error.message }));
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({error: response.error.message}));
                 return;
               } else {
-                const result = (response as SendMessageSuccessResponse)
-                  .result as Task;
-                if (result.kind === "task") {
+                const result = (response as SendMessageSuccessResponse).result as Task;
+                if (result.kind === 'task') {
                   res.statusCode = 200;
-                  res.setHeader("Content-Type", "application/json");
+                  res.setHeader('Content-Type', 'application/json');
                   res.end(JSON.stringify(result.status.message?.parts));
                   return;
                 }
               }
 
               res.statusCode = 200;
-              res.setHeader("Content-Type", "application/json");
+              res.setHeader('Content-Type', 'application/json');
               res.end(JSON.stringify([]));
             });
 
@@ -146,7 +131,7 @@ export const plugin = (): Plugin => {
           } else {
             next();
           }
-        }
+        },
       );
     },
   };
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/index.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/index.ts
index 36099efff..c61a5cdae 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/index.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/middleware/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export * as A2AMiddleware from "./a2a.js";
+export * as A2AMiddleware from './a2a.js';
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/tsconfig.json b/samples/client/lit/mcp-apps-in-a2ui-sample/tsconfig.json
index 977166deb..99bf993a0 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/tsconfig.json
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/tsconfig.json
@@ -32,22 +32,12 @@
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
     "paths": {
-      "lit": [
-        "../../../../renderers/lit/node_modules/lit"
-      ],
-      "lit-html": [
-        "../../../../renderers/lit/node_modules/lit-html"
-      ],
-      "lit-element": [
-        "../../../../renderers/lit/node_modules/lit-element"
-      ],
-      "@lit/reactive-element": [
-        "../../../../renderers/lit/node_modules/@lit/reactive-element"
-      ],
-      "@lit/context": [
-        "../../../../renderers/lit/node_modules/@lit/context"
-      ]
+      "lit": ["../../../../renderers/lit/node_modules/lit"],
+      "lit-html": ["../../../../renderers/lit/node_modules/lit-html"],
+      "lit-element": ["../../../../renderers/lit/node_modules/lit-element"],
+      "@lit/reactive-element": ["../../../../renderers/lit/node_modules/@lit/reactive-element"],
+      "@lit/context": ["../../../../renderers/lit/node_modules/@lit/context"]
     }
   },
-  "references": [{ "path": "../../../../renderers/lit" }]
+  "references": [{"path": "../../../../renderers/lit"}]
 }
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/mcp-apps-component.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/mcp-apps-component.ts
index a9da0f504..036d23512 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/mcp-apps-component.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/mcp-apps-component.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { html, css } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { Root } from "@a2ui/lit/ui";
-import { v0_8 } from "@a2ui/lit";
-import { AppBridge, PostMessageTransport } from "@modelcontextprotocol/ext-apps/app-bridge";
-import type { McpUiSandboxProxyReadyNotification } from "@modelcontextprotocol/ext-apps/app-bridge";
-import { SANDBOX_IFRAME_PATH } from "../shared-constants.js";
+import {html, css} from 'lit';
+import {property, query, state} from 'lit/decorators.js';
+import {Root} from '@a2ui/lit/ui';
+import {v0_8} from '@a2ui/lit';
+import {AppBridge, PostMessageTransport} from '@modelcontextprotocol/ext-apps/app-bridge';
+import type {McpUiSandboxProxyReadyNotification} from '@modelcontextprotocol/ext-apps/app-bridge';
+import {SANDBOX_IFRAME_PATH} from '../shared-constants.js';
 
 export class McpApp extends Root {
   static override styles = [
@@ -40,28 +40,30 @@ export class McpApp extends Root {
         height: 100%;
         border: none;
         background: #f5f5f5;
-        transition: height 0.3s ease-out, min-width 0.3s ease-out;
+        transition:
+          height 0.3s ease-out,
+          min-width 0.3s ease-out;
       }
     `,
   ];
 
   /* --- Properties (Server Contract) --- */
 
-  @property({ type: String })
-  accessor resourceUri: string = "";
+  @property({type: String})
+  accessor resourceUri: string = '';
 
-  @property({ type: String })
-  accessor htmlContent: string = "";
+  @property({type: String})
+  accessor htmlContent: string = '';
 
-  @property({ type: Number })
+  @property({type: Number})
   accessor height: number | undefined = undefined;
 
-  @property({ type: Array })
+  @property({type: Array})
   accessor allowedTools: string[] = [];
 
   // --- Internal State ---
 
-  @query("iframe")
+  @query('iframe')
   accessor iframe!: HTMLIFrameElement;
 
   private bridge?: AppBridge;
@@ -103,22 +105,28 @@ export class McpApp extends Root {
     // Fall back to the 127.0.0.1 trick for local development to simulate cross-origin isolation
     const meta = import.meta as any;
     const configuredSandboxUrl = meta && meta.env ? meta.env.VITE_MCP_SANDBOX_URL : undefined;
-    const sandboxOrigin = configuredSandboxUrl || `http://127.0.0.1:${window.location.port}${SANDBOX_IFRAME_PATH}`;
+    const sandboxOrigin =
+      configuredSandboxUrl || `http://127.0.0.1:${window.location.port}${SANDBOX_IFRAME_PATH}`;
     const sandboxUrl = new URL(sandboxOrigin);
 
     // Set up the bridge. No MCP client needed because A2UI acts as the orchestrator.
-    this.bridge = new AppBridge(null, { name: "A2UI Client Host", version: "1.0.0" }, {
-      serverTools: {},
-      updateModelContext: { text: {} },
-    }, {
-      hostContext: {
-        theme: "light",
-        platform: "web",
-        displayMode: "inline",
-      }
-    });
-
-    this.bridge.onsizechange = ({ width, height }) => {
+    this.bridge = new AppBridge(
+      null,
+      {name: 'A2UI Client Host', version: '1.0.0'},
+      {
+        serverTools: {},
+        updateModelContext: {text: {}},
+      },
+      {
+        hostContext: {
+          theme: 'light',
+          platform: 'web',
+          displayMode: 'inline',
+        },
+      },
+    );
+
+    this.bridge.onsizechange = ({width, height}) => {
       // Allow the view to dynamically resize the iframe container
       const from: Keyframe = {};
       const to: Keyframe = {};
@@ -131,67 +139,74 @@ export class McpApp extends Root {
         from.height = `${this.iframe.offsetHeight}px`;
         this.iframe.style.height = to.height = `${height}px`;
       }
-      this.iframe.animate([from, to], { duration: 300, easing: "ease-out" });
+      this.iframe.animate([from, to], {duration: 300, easing: 'ease-out'});
     };
 
     // Forward Tool Calls to the A2UI Action Dispatch
-    this.bridge.oncalltool = async (params) => {
+    this.bridge.oncalltool = async params => {
       const actionName = params.name;
       const args = params.arguments || {};
 
       if (this.allowedTools.includes(actionName)) {
         this.dispatchAgentAction(actionName, args);
-        return { content: [{ type: "text", text: "Action dispatched to A2UI Agent" }] };
+        return {content: [{type: 'text', text: 'Action dispatched to A2UI Agent'}]};
       } else {
         console.warn(`[McpApp] Tool '${actionName}' blocked.`);
-        throw new Error("Tool not allowed");
+        throw new Error('Tool not allowed');
       }
     };
 
-    this.bridge.onloggingmessage = (params) => {
+    this.bridge.onloggingmessage = params => {
       console.log(`[MCP Sandbox ${params.level}]:`, params.data);
     };
 
     // 1. Listen for the Outer Iframe to declare itself ready.
-    const readyNotification: McpUiSandboxProxyReadyNotification["method"] = "ui/notifications/sandbox-proxy-ready";
-    const proxyReady = new Promise<boolean>((resolve) => {
-      const listener = ({ source, data, origin }: MessageEvent) => {
-        if (source === this.iframe.contentWindow && origin === sandboxUrl.origin && data?.method === readyNotification) {
-          window.removeEventListener("message", listener);
+    const readyNotification: McpUiSandboxProxyReadyNotification['method'] =
+      'ui/notifications/sandbox-proxy-ready';
+    const proxyReady = new Promise<boolean>(resolve => {
+      const listener = ({source, data, origin}: MessageEvent) => {
+        if (
+          source === this.iframe.contentWindow &&
+          origin === sandboxUrl.origin &&
+          data?.method === readyNotification
+        ) {
+          window.removeEventListener('message', listener);
           resolve(true);
         }
       };
-      window.addEventListener("message", listener);
+      window.addEventListener('message', listener);
     });
 
     // 2. Load the proxy iframe.
     this.iframe.src = sandboxUrl.href;
     await proxyReady;
-    console.log("[McpApp] proxyReady resolved");
+    console.log('[McpApp] proxyReady resolved');
 
     // 3. Connect AppBridge via PostMessage transport.
     // We pass iframe.contentWindow to target just the sandbox proxy.
-    await this.bridge.connect(new PostMessageTransport(this.iframe.contentWindow!, this.iframe.contentWindow!));
+    await this.bridge.connect(
+      new PostMessageTransport(this.iframe.contentWindow!, this.iframe.contentWindow!),
+    );
 
     // 4. Send the Inner HTML UI resource to the sandbox to spin up the actual app.
     await this.bridge.sendSandboxResourceReady({
       html: this.htmlContent,
-      sandbox: "allow-scripts allow-forms allow-popups allow-modals allow-same-origin"
+      sandbox: 'allow-scripts allow-forms allow-popups allow-modals allow-same-origin',
     });
   }
 
   private dispatchAgentAction(actionName: string, params: any) {
-    const context: v0_8.Types.Action["context"] = [];
+    const context: v0_8.Types.Action['context'] = [];
     if (params && typeof params === 'object') {
       for (const [key, value] of Object.entries(params)) {
-        if (typeof value === "string") {
-          context.push({ key, value: { literalString: value } });
-        } else if (typeof value === "number") {
-          context.push({ key, value: { literalNumber: value } });
-        } else if (typeof value === "boolean") {
-          context.push({ key, value: { literalBoolean: value } });
+        if (typeof value === 'string') {
+          context.push({key, value: {literalString: value}});
+        } else if (typeof value === 'number') {
+          context.push({key, value: {literalNumber: value}});
+        } else if (typeof value === 'boolean') {
+          context.push({key, value: {literalBoolean: value}});
         } else if (value !== null && typeof value === 'object') {
-          context.push({ key, value: { literalString: JSON.stringify(value) } });
+          context.push({key, value: {literalString: JSON.stringify(value)}});
         }
       }
     }
@@ -201,8 +216,8 @@ export class McpApp extends Root {
       context,
     };
 
-    const eventPayload: v0_8.Events.StateEventDetailMap["a2ui.action"] = {
-      eventType: "a2ui.action",
+    const eventPayload: v0_8.Events.StateEventDetailMap['a2ui.action'] = {
+      eventType: 'a2ui.action',
       action,
       sourceComponentId: this.id,
       dataContextPath: this.dataContextPath,
@@ -212,4 +227,3 @@ export class McpApp extends Root {
     this.dispatchEvent(new v0_8.Events.StateEvent(eventPayload));
   }
 }
-
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/register-components.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/register-components.ts
index a57425389..bb35374db 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/register-components.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/ui/custom-components/register-components.ts
@@ -14,21 +14,21 @@
  * limitations under the License.
  */
 
-import { componentRegistry } from "@a2ui/lit/ui";
-import { McpApp } from "./mcp-apps-component.js";
+import {componentRegistry} from '@a2ui/lit/ui';
+import {McpApp} from './mcp-apps-component.js';
 
 export function registerMcpComponents() {
-  componentRegistry.register("McpApp", McpApp, "a2ui-mcp-apps-component", {
-    type: "object",
+  componentRegistry.register('McpApp', McpApp, 'a2ui-mcp-apps-component', {
+    type: 'object',
     properties: {
-      resourceUri: { type: "string" },
-      htmlContent: { type: "string" },
-      height: { type: "number" },
+      resourceUri: {type: 'string'},
+      htmlContent: {type: 'string'},
+      height: {type: 'number'},
       allowedTools: {
-        type: "array",
-        items: { type: "string" }
-      }
+        type: 'array',
+        items: {type: 'string'},
+      },
     },
   });
-  console.log("Registered MCP App Custom Components");
+  console.log('Registered MCP App Custom Components');
 }
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/ui/shared-constants.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/ui/shared-constants.ts
index 2213f62d6..e9ef90f04 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/ui/shared-constants.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/ui/shared-constants.ts
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export const SANDBOX_BASE_PATH = "shared/mcp_apps_inner_iframe/";
+export const SANDBOX_BASE_PATH = 'shared/mcp_apps_inner_iframe/';
 export const SANDBOX_ENTRY_NAME = `${SANDBOX_BASE_PATH}sandbox`;
 export const SANDBOX_IFRAME_PATH = `/${SANDBOX_ENTRY_NAME}.html`;
diff --git a/samples/client/lit/mcp-apps-in-a2ui-sample/vite.config.ts b/samples/client/lit/mcp-apps-in-a2ui-sample/vite.config.ts
index 175119465..14c9b077a 100644
--- a/samples/client/lit/mcp-apps-in-a2ui-sample/vite.config.ts
+++ b/samples/client/lit/mcp-apps-in-a2ui-sample/vite.config.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
+import {defineConfig} from 'vite';
+import {resolve} from 'path';
 import fs from 'fs';
-import { plugin as a2aPlugin } from './middleware/a2a';
-import { SANDBOX_BASE_PATH } from "./ui/shared-constants.js";
+import {plugin as a2aPlugin} from './middleware/a2a';
+import {SANDBOX_BASE_PATH} from './ui/shared-constants.js';
 
 export default defineConfig({
   plugins: [
@@ -29,7 +29,11 @@ export default defineConfig({
         server.middlewares.use((req, res, next) => {
           if (req.url?.startsWith(`/${SANDBOX_BASE_PATH}`)) {
             let urlPath = req.url.slice(1);
-            if (urlPath.endsWith('.js') && !urlPath.endsWith('app-bridge.js') && !urlPath.endsWith('app-with-deps.js')) {
+            if (
+              urlPath.endsWith('.js') &&
+              !urlPath.endsWith('app-bridge.js') &&
+              !urlPath.endsWith('app-with-deps.js')
+            ) {
               urlPath = urlPath.slice(0, -3) + '.ts';
             }
             req.url = '/@fs' + resolve(__dirname, '../../' + urlPath);
@@ -49,8 +53,8 @@ export default defineConfig({
             next();
           }
         });
-      }
-    }
+      },
+    },
   ],
   build: {
     target: 'esnext',
@@ -58,9 +62,9 @@ export default defineConfig({
   resolve: {
     dedupe: ['lit'],
     alias: {
-      "sandbox.js": "../../shared/mcp_apps_inner_iframe/sandbox.ts",
-      "/lit/node_modules": resolve(__dirname, '../node_modules')
-    }
+      'sandbox.js': '../../shared/mcp_apps_inner_iframe/sandbox.ts',
+      '/lit/node_modules': resolve(__dirname, '../node_modules'),
+    },
   },
   server: {
     host: '0.0.0.0',
@@ -69,8 +73,8 @@ export default defineConfig({
         resolve(__dirname, '.'),
         resolve(__dirname, '../node_modules'),
         resolve(__dirname, '../../shared'),
-        resolve(__dirname, '../../../../renderers/lit')
-      ]
-    }
-  }
+        resolve(__dirname, '../../../../renderers/lit'),
+      ],
+    },
+  },
 });
diff --git a/samples/client/lit/package.json b/samples/client/lit/package.json
index 7a683d9a9..7706dcc34 100644
--- a/samples/client/lit/package.json
+++ b/samples/client/lit/package.json
@@ -29,4 +29,4 @@
     "@types/node": "^24.7.1",
     "lit": "^3.3.1"
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/lit/personalized_learning/README.md b/samples/client/lit/personalized_learning/README.md
index e3ff0201b..b7ed748f8 100644
--- a/samples/client/lit/personalized_learning/README.md
+++ b/samples/client/lit/personalized_learning/README.md
@@ -14,7 +14,7 @@ _This video demonstrates two use cases: personalized learning, which is the focu
 
 This sample shows how agents within a chat can use A2UI to go beyond text responses and generate dynamic UI elements. When a student asks for flashcards on photosynthesis, the agent matches the topic to OpenStax textbook content, generates personalized study materials, and returns A2UI JSON that the frontend renders as interactive, flippable cards.
 
-Here are the concepts we're demonstrating: 
+Here are the concepts we're demonstrating:
 
 - **Custom A2UI Components** — Flashcard and QuizCard extend the standard A2UI UI component library
 - **Remote Agent** — ADK agent deployed to Vertex AI Agent Engine, decoupled from the UI
@@ -36,6 +36,7 @@ npm run dev
 ```
 
 Open the URL shown in your terminal (typically http://localhost:5174, but the port may vary) and try prompts like:
+
 - "Help me understand ATP"
 - "Quiz me on meiosis"
 - "Flashcards for photosynthesis"
@@ -63,15 +64,15 @@ Browser → API Server → Agent Engine → OpenStax → A2UI Response
 
 ## Key Files
 
-| File | Purpose |
-|------|---------|
-| [Quickstart.ipynb](Quickstart.ipynb) | Step-by-step setup notebook |
-| [deploy.py](deploy.py) | Agent deployment with embedded agent code |
-| [api-server.ts](api-server.ts) | Intent detection and Agent Engine proxy |
-| [src/chat-orchestrator.ts](src/chat-orchestrator.ts) | Frontend routing logic |
-| [src/flashcard.ts](src/flashcard.ts) | Custom Flashcard component |
-| [src/quiz-card.ts](src/quiz-card.ts) | Custom QuizCard component |
-| [learner_context/](learner_context/) | Sample learner profiles |
+| File                                                 | Purpose                                   |
+| ---------------------------------------------------- | ----------------------------------------- |
+| [Quickstart.ipynb](Quickstart.ipynb)                 | Step-by-step setup notebook               |
+| [deploy.py](deploy.py)                               | Agent deployment with embedded agent code |
+| [api-server.ts](api-server.ts)                       | Intent detection and Agent Engine proxy   |
+| [src/chat-orchestrator.ts](src/chat-orchestrator.ts) | Frontend routing logic                    |
+| [src/flashcard.ts](src/flashcard.ts)                 | Custom Flashcard component                |
+| [src/quiz-card.ts](src/quiz-card.ts)                 | Custom QuizCard component                 |
+| [learner_context/](learner_context/)                 | Sample learner profiles                   |
 
 ---
 
@@ -82,7 +83,12 @@ This demo extends A2UI with two Lit web components that agents can generate at r
 **Flashcard** — A flippable card with front (question) and back (answer). Click to flip.
 
 ```json
-{"Flashcard": {"front": {"literalString": "What is ATP?"}, "back": {"literalString": "Adenosine triphosphate..."}}}
+{
+  "Flashcard": {
+    "front": {"literalString": "What is ATP?"},
+    "back": {"literalString": "Adenosine triphosphate..."}
+  }
+}
 ```
 
 **QuizCard** — Multiple-choice question with immediate feedback and explanation.
@@ -99,7 +105,7 @@ Both components are registered in [src/main.ts](src/main.ts) and rendered by the
 
 Learner profiles live in GCS at `gs://{PROJECT_ID}-learner-context/learner_context/`. The demo includes a sample student "Maria" — a pre-med student preparing for the MCAT who responds well to sports analogies and has a common misconception about ATP bond energy.
 
-To personalize for a different student, edit the files in [learner_context/](learner_context/) and upload to GCS. The agent picks up changes on the next request—no redeployment required. 
+To personalize for a different student, edit the files in [learner_context/](learner_context/) and upload to GCS. The agent picks up changes on the next request—no redeployment required.
 
 ---
 
diff --git a/samples/client/lit/personalized_learning/a2ui-primer.html b/samples/client/lit/personalized_learning/a2ui-primer.html
index 37a62378f..606a161ff 100644
--- a/samples/client/lit/personalized_learning/a2ui-primer.html
+++ b/samples/client/lit/personalized_learning/a2ui-primer.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,601 +16,689 @@
 -->
 
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>How A2UI Works - Message Flow</title>
-  <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Google+Sans+Text:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg-dark: #131314;
-      --bg-card: #1e1f20;
-      --bg-code: #0d1117;
-      --border: #3c4043;
-      --text-primary: #e3e3e3;
-      --text-secondary: #9aa0a6;
-      --accent-blue: #8ab4f8;
-      --accent-green: #81c995;
-      --accent-yellow: #fdd663;
-      --accent-purple: #c58af9;
-      --accent-orange: #fcad70;
-    }
-
-    body {
-      font-family: "Google Sans Text", sans-serif;
-      background: var(--bg-dark);
-      color: var(--text-primary);
-      line-height: 1.6;
-      padding: 24px;
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-
-    header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 32px;
-      padding-bottom: 16px;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
-
-    .logo {
-      width: 40px;
-      height: 40px;
-      background: linear-gradient(135deg, #4285f4 0%, #8ab4f8 50%, #c58af9 100%);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .logo .material-symbols-outlined {
-      color: white;
-      font-size: 24px;
-    }
-
-    h1 {
-      font-size: 24px;
-      font-weight: 500;
-    }
-
-    .subtitle {
-      color: var(--text-secondary);
-      font-size: 14px;
-    }
-
-    .back-link {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      color: var(--accent-blue);
-      text-decoration: none;
-      font-size: 14px;
-      padding: 8px 16px;
-      border-radius: 20px;
-      border: 1px solid var(--border);
-      transition: background 0.2s;
-    }
-
-    .back-link:hover {
-      background: rgba(138, 180, 248, 0.1);
-    }
-
-    .intro {
-      background: var(--bg-card);
-      border-radius: 12px;
-      padding: 24px;
-      margin-bottom: 32px;
-      border: 1px solid var(--border);
-    }
-
-    .intro h2 {
-      font-size: 18px;
-      margin-bottom: 12px;
-      color: var(--accent-blue);
-    }
-
-    .intro p {
-      color: var(--text-secondary);
-      font-size: 14px;
-      margin-bottom: 8px;
-    }
-
-    .flow-diagram {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      margin: 24px 0;
-      flex-wrap: wrap;
-    }
-
-    .flow-box {
-      padding: 12px 20px;
-      border-radius: 8px;
-      font-size: 13px;
-      font-weight: 500;
-      text-align: center;
-    }
-
-    .flow-box.client { background: rgba(138, 180, 248, 0.2); color: var(--accent-blue); }
-    .flow-box.server { background: rgba(129, 201, 149, 0.2); color: var(--accent-green); }
-    .flow-box.agent { background: rgba(197, 138, 249, 0.2); color: var(--accent-purple); }
-
-    .flow-arrow {
-      color: var(--text-secondary);
-      font-size: 20px;
-    }
-
-    .message-sequence {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .message-card {
-      background: var(--bg-card);
-      border-radius: 12px;
-      border: 1px solid var(--border);
-      overflow: hidden;
-    }
-
-    .message-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--border);
-    }
-
-    .sequence-num {
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 14px;
-      font-weight: 600;
-    }
-
-    .sequence-num.client-to-server { background: var(--accent-blue); color: #1e1f20; }
-    .sequence-num.server-to-agent { background: var(--accent-green); color: #1e1f20; }
-    .sequence-num.agent-to-server { background: var(--accent-purple); color: #1e1f20; }
-    .sequence-num.server-to-client { background: var(--accent-orange); color: #1e1f20; }
-
-    .message-direction {
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      padding: 4px 10px;
-      border-radius: 12px;
-    }
-
-    .message-direction.client-to-server { background: rgba(138, 180, 248, 0.2); color: var(--accent-blue); }
-    .message-direction.server-to-agent { background: rgba(129, 201, 149, 0.2); color: var(--accent-green); }
-    .message-direction.agent-to-server { background: rgba(197, 138, 249, 0.2); color: var(--accent-purple); }
-    .message-direction.server-to-client { background: rgba(252, 173, 112, 0.2); color: var(--accent-orange); }
-
-    .message-endpoint {
-      flex: 1;
-      font-size: 14px;
-      color: var(--text-secondary);
-    }
-
-    .message-body {
-      padding: 20px;
-    }
-
-    .message-description {
-      font-size: 15px;
-      margin-bottom: 16px;
-      color: var(--text-primary);
-    }
-
-    .message-description strong {
-      color: var(--accent-yellow);
-    }
-
-    .json-container {
-      background: var(--bg-code);
-      border-radius: 8px;
-      border: 1px solid var(--border);
-      overflow: hidden;
-    }
-
-    .json-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 8px 12px;
-      background: rgba(255,255,255,0.03);
-      border-bottom: 1px solid var(--border);
-      font-size: 12px;
-      color: var(--text-secondary);
-    }
-
-    .json-content {
-      padding: 16px;
-      max-height: 400px;
-      overflow-y: auto;
-      font-family: "Roboto Mono", monospace;
-      font-size: 12px;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    .json-content::-webkit-scrollbar {
-      width: 8px;
-    }
-
-    .json-content::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    .json-content::-webkit-scrollbar-thumb {
-      background: var(--border);
-      border-radius: 4px;
-    }
-
-    /* JSON Syntax Highlighting */
-    .json-key { color: #79c0ff; }
-    .json-string { color: #a5d6ff; }
-    .json-number { color: #ffa657; }
-    .json-boolean { color: #ff7b72; }
-    .json-null { color: #ff7b72; }
-
-    .callout {
-      background: rgba(253, 214, 99, 0.1);
-      border-left: 3px solid var(--accent-yellow);
-      padding: 12px 16px;
-      margin-top: 16px;
-      border-radius: 0 8px 8px 0;
-      font-size: 13px;
-      color: var(--text-secondary);
-    }
-
-    .callout strong {
-      color: var(--accent-yellow);
-    }
-
-    .a2ui-highlight {
-      background: rgba(197, 138, 249, 0.15);
-      border: 1px solid rgba(197, 138, 249, 0.3);
-      border-radius: 8px;
-      padding: 16px;
-      margin-top: 16px;
-    }
-
-    .a2ui-highlight h4 {
-      color: var(--accent-purple);
-      font-size: 14px;
-      margin-bottom: 8px;
-    }
-
-    .a2ui-highlight p {
-      font-size: 13px;
-      color: var(--text-secondary);
-    }
-  </style>
-</head>
-<body>
-  <header>
-    <div class="header-left">
-      <div class="logo">
-        <span class="material-symbols-outlined">auto_awesome</span>
-      </div>
-      <div>
-        <h1>How A2UI Works</h1>
-        <div class="subtitle">Message Flow Between Client, Server, and Remote Agent</div>
-      </div>
-    </div>
-    <a href="/" class="back-link">
-      <span class="material-symbols-outlined">arrow_back</span>
-      Back to Demo
-    </a>
-  </header>
-
-  <div class="intro">
-    <h2>The A2UI Message Flow</h2>
-    <p>This page shows a <strong>representative message sequence</strong> from when a user asks for flashcards about ATP.</p>
-    <p>A2UI enables agents to generate rich UI components as <strong>declarative JSON data</strong>, not executable code. The client application renders these using its own native components.</p>
-
-    <div class="flow-diagram">
-      <div class="flow-box client">Browser Client</div>
-      <span class="flow-arrow">→</span>
-      <div class="flow-box server">Local API Server<br><small style="opacity:0.8">(api-server.ts)</small></div>
-      <span class="flow-arrow">→</span>
-      <div class="flow-box agent">Remote Agent<br><small style="opacity:0.8">(Vertex AI Agent Engine)</small></div>
-      <span class="flow-arrow">→</span>
-      <div class="flow-box server">Local API Server</div>
-      <span class="flow-arrow">→</span>
-      <div class="flow-box client">Browser Renders</div>
-    </div>
-  </div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>How A2UI Works - Message Flow</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600&family=Google+Sans+Text:wght@400;500&family=Roboto+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      :root {
+        --bg-dark: #131314;
+        --bg-card: #1e1f20;
+        --bg-code: #0d1117;
+        --border: #3c4043;
+        --text-primary: #e3e3e3;
+        --text-secondary: #9aa0a6;
+        --accent-blue: #8ab4f8;
+        --accent-green: #81c995;
+        --accent-yellow: #fdd663;
+        --accent-purple: #c58af9;
+        --accent-orange: #fcad70;
+      }
+
+      body {
+        font-family: 'Google Sans Text', sans-serif;
+        background: var(--bg-dark);
+        color: var(--text-primary);
+        line-height: 1.6;
+        padding: 24px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+
+      header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 32px;
+        padding-bottom: 16px;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .logo {
+        width: 40px;
+        height: 40px;
+        background: linear-gradient(135deg, #4285f4 0%, #8ab4f8 50%, #c58af9 100%);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .logo .material-symbols-outlined {
+        color: white;
+        font-size: 24px;
+      }
+
+      h1 {
+        font-size: 24px;
+        font-weight: 500;
+      }
+
+      .subtitle {
+        color: var(--text-secondary);
+        font-size: 14px;
+      }
+
+      .back-link {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: var(--accent-blue);
+        text-decoration: none;
+        font-size: 14px;
+        padding: 8px 16px;
+        border-radius: 20px;
+        border: 1px solid var(--border);
+        transition: background 0.2s;
+      }
+
+      .back-link:hover {
+        background: rgba(138, 180, 248, 0.1);
+      }
+
+      .intro {
+        background: var(--bg-card);
+        border-radius: 12px;
+        padding: 24px;
+        margin-bottom: 32px;
+        border: 1px solid var(--border);
+      }
+
+      .intro h2 {
+        font-size: 18px;
+        margin-bottom: 12px;
+        color: var(--accent-blue);
+      }
+
+      .intro p {
+        color: var(--text-secondary);
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
+      .flow-diagram {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        margin: 24px 0;
+        flex-wrap: wrap;
+      }
+
+      .flow-box {
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        text-align: center;
+      }
+
+      .flow-box.client {
+        background: rgba(138, 180, 248, 0.2);
+        color: var(--accent-blue);
+      }
+      .flow-box.server {
+        background: rgba(129, 201, 149, 0.2);
+        color: var(--accent-green);
+      }
+      .flow-box.agent {
+        background: rgba(197, 138, 249, 0.2);
+        color: var(--accent-purple);
+      }
+
+      .flow-arrow {
+        color: var(--text-secondary);
+        font-size: 20px;
+      }
+
+      .message-sequence {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .message-card {
+        background: var(--bg-card);
+        border-radius: 12px;
+        border: 1px solid var(--border);
+        overflow: hidden;
+      }
+
+      .message-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 16px 20px;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .sequence-num {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 600;
+      }
+
+      .sequence-num.client-to-server {
+        background: var(--accent-blue);
+        color: #1e1f20;
+      }
+      .sequence-num.server-to-agent {
+        background: var(--accent-green);
+        color: #1e1f20;
+      }
+      .sequence-num.agent-to-server {
+        background: var(--accent-purple);
+        color: #1e1f20;
+      }
+      .sequence-num.server-to-client {
+        background: var(--accent-orange);
+        color: #1e1f20;
+      }
+
+      .message-direction {
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        padding: 4px 10px;
+        border-radius: 12px;
+      }
 
-  <div class="message-sequence">
+      .message-direction.client-to-server {
+        background: rgba(138, 180, 248, 0.2);
+        color: var(--accent-blue);
+      }
+      .message-direction.server-to-agent {
+        background: rgba(129, 201, 149, 0.2);
+        color: var(--accent-green);
+      }
+      .message-direction.agent-to-server {
+        background: rgba(197, 138, 249, 0.2);
+        color: var(--accent-purple);
+      }
+      .message-direction.server-to-client {
+        background: rgba(252, 173, 112, 0.2);
+        color: var(--accent-orange);
+      }
+
+      .message-endpoint {
+        flex: 1;
+        font-size: 14px;
+        color: var(--text-secondary);
+      }
+
+      .message-body {
+        padding: 20px;
+      }
 
-    <!-- Message 1: Client → Server (Intent Detection) -->
-    <div class="message-card">
-      <div class="message-header">
-        <div class="sequence-num client-to-server">1</div>
-        <span class="message-direction client-to-server">Client → Server</span>
-        <span class="message-endpoint">/api/chat (Intent Detection)</span>
+      .message-description {
+        font-size: 15px;
+        margin-bottom: 16px;
+        color: var(--text-primary);
+      }
+
+      .message-description strong {
+        color: var(--accent-yellow);
+      }
+
+      .json-container {
+        background: var(--bg-code);
+        border-radius: 8px;
+        border: 1px solid var(--border);
+        overflow: hidden;
+      }
+
+      .json-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: rgba(255, 255, 255, 0.03);
+        border-bottom: 1px solid var(--border);
+        font-size: 12px;
+        color: var(--text-secondary);
+      }
+
+      .json-content {
+        padding: 16px;
+        max-height: 400px;
+        overflow-y: auto;
+        font-family: 'Roboto Mono', monospace;
+        font-size: 12px;
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .json-content::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .json-content::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .json-content::-webkit-scrollbar-thumb {
+        background: var(--border);
+        border-radius: 4px;
+      }
+
+      /* JSON Syntax Highlighting */
+      .json-key {
+        color: #79c0ff;
+      }
+      .json-string {
+        color: #a5d6ff;
+      }
+      .json-number {
+        color: #ffa657;
+      }
+      .json-boolean {
+        color: #ff7b72;
+      }
+      .json-null {
+        color: #ff7b72;
+      }
+
+      .callout {
+        background: rgba(253, 214, 99, 0.1);
+        border-left: 3px solid var(--accent-yellow);
+        padding: 12px 16px;
+        margin-top: 16px;
+        border-radius: 0 8px 8px 0;
+        font-size: 13px;
+        color: var(--text-secondary);
+      }
+
+      .callout strong {
+        color: var(--accent-yellow);
+      }
+
+      .a2ui-highlight {
+        background: rgba(197, 138, 249, 0.15);
+        border: 1px solid rgba(197, 138, 249, 0.3);
+        border-radius: 8px;
+        padding: 16px;
+        margin-top: 16px;
+      }
+
+      .a2ui-highlight h4 {
+        color: var(--accent-purple);
+        font-size: 14px;
+        margin-bottom: 8px;
+      }
+
+      .a2ui-highlight p {
+        font-size: 13px;
+        color: var(--text-secondary);
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="header-left">
+        <div class="logo">
+          <span class="material-symbols-outlined">auto_awesome</span>
+        </div>
+        <div>
+          <h1>How A2UI Works</h1>
+          <div class="subtitle">Message Flow Between Client, Server, and Remote Agent</div>
+        </div>
       </div>
-      <div class="message-body">
-        <div class="message-description">
-          User types <strong>"Create flashcards for bond energy misconceptions"</strong>. The orchestrator first sends this to Gemini to detect the user's intent.
+      <a href="/" class="back-link">
+        <span class="material-symbols-outlined">arrow_back</span>
+        Back to Demo
+      </a>
+    </header>
+
+    <div class="intro">
+      <h2>The A2UI Message Flow</h2>
+      <p>
+        This page shows a <strong>representative message sequence</strong> from when a user asks for
+        flashcards about ATP.
+      </p>
+      <p>
+        A2UI enables agents to generate rich UI components as
+        <strong>declarative JSON data</strong>, not executable code. The client application renders
+        these using its own native components.
+      </p>
+
+      <div class="flow-diagram">
+        <div class="flow-box client">Browser Client</div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-box server">
+          Local API Server<br /><small style="opacity: 0.8">(api-server.ts)</small>
         </div>
-        <div class="json-container">
-          <div class="json-header">
-            <span>Request Payload</span>
-            <span>JSON</span>
-          </div>
-          <div class="json-content" id="json1"></div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-box agent">
+          Remote Agent<br /><small style="opacity: 0.8">(Vertex AI Agent Engine)</small>
         </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-box server">Local API Server</div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-box client">Browser Renders</div>
       </div>
     </div>
 
-    <!-- Message 2: Server → Client (Intent Response) -->
-    <div class="message-card">
-      <div class="message-header">
-        <div class="sequence-num server-to-client">2</div>
-        <span class="message-direction server-to-client">Server → Client</span>
-        <span class="message-endpoint">/api/chat (Intent Classification)</span>
-      </div>
-      <div class="message-body">
-        <div class="message-description">
-          Gemini classifies the intent as <strong>"flashcards"</strong>. This tells the orchestrator to fetch A2UI content from the specialized agent.
+    <div class="message-sequence">
+      <!-- Message 1: Client → Server (Intent Detection) -->
+      <div class="message-card">
+        <div class="message-header">
+          <div class="sequence-num client-to-server">1</div>
+          <span class="message-direction client-to-server">Client → Server</span>
+          <span class="message-endpoint">/api/chat (Intent Detection)</span>
         </div>
-        <div class="json-container">
-          <div class="json-header">
-            <span>Response</span>
-            <span>JSON</span>
+        <div class="message-body">
+          <div class="message-description">
+            User types <strong>"Create flashcards for bond energy misconceptions"</strong>. The
+            orchestrator first sends this to Gemini to detect the user's intent.
+          </div>
+          <div class="json-container">
+            <div class="json-header">
+              <span>Request Payload</span>
+              <span>JSON</span>
+            </div>
+            <div class="json-content" id="json1"></div>
           </div>
-          <div class="json-content" id="json2"></div>
         </div>
       </div>
-    </div>
 
-    <!-- Message 3: Client → Server (A2UI Request) -->
-    <div class="message-card">
-      <div class="message-header">
-        <div class="sequence-num client-to-server">3</div>
-        <span class="message-direction client-to-server">Client → Server</span>
-        <span class="message-endpoint">/a2ui-agent/a2a/query</span>
-      </div>
-      <div class="message-body">
-        <div class="message-description">
-          The browser requests A2UI content generation. It specifies <strong>format: flashcards</strong> and includes context about what the user asked for.
+      <!-- Message 2: Server → Client (Intent Response) -->
+      <div class="message-card">
+        <div class="message-header">
+          <div class="sequence-num server-to-client">2</div>
+          <span class="message-direction server-to-client">Server → Client</span>
+          <span class="message-endpoint">/api/chat (Intent Classification)</span>
         </div>
-        <div class="json-container">
-          <div class="json-header">
-            <span>Request Payload</span>
-            <span>JSON</span>
+        <div class="message-body">
+          <div class="message-description">
+            Gemini classifies the intent as <strong>"flashcards"</strong>. This tells the
+            orchestrator to fetch A2UI content from the specialized agent.
+          </div>
+          <div class="json-container">
+            <div class="json-header">
+              <span>Response</span>
+              <span>JSON</span>
+            </div>
+            <div class="json-content" id="json2"></div>
           </div>
-          <div class="json-content" id="json3"></div>
         </div>
       </div>
-    </div>
 
-    <!-- Message 4: Server → Agent Engine -->
-    <div class="message-card">
-      <div class="message-header">
-        <div class="sequence-num server-to-agent">4</div>
-        <span class="message-direction server-to-agent">Server → Remote Agent</span>
-        <span class="message-endpoint">Deployed to Vertex AI Agent Engine</span>
-      </div>
-      <div class="message-body">
-        <div class="message-description">
-          The server forwards the request to a <strong>remote A2UI-generating agent deployed to Vertex AI Agent Engine</strong>. This agent is a separate service that specializes in generating A2UI content.
+      <!-- Message 3: Client → Server (A2UI Request) -->
+      <div class="message-card">
+        <div class="message-header">
+          <div class="sequence-num client-to-server">3</div>
+          <span class="message-direction client-to-server">Client → Server</span>
+          <span class="message-endpoint">/a2ui-agent/a2a/query</span>
         </div>
-        <div class="json-container">
-          <div class="json-header">
-            <span>Request to Remote Agent (via Agent Engine API)</span>
-            <span>JSON</span>
+        <div class="message-body">
+          <div class="message-description">
+            The browser requests A2UI content generation. It specifies
+            <strong>format: flashcards</strong> and includes context about what the user asked for.
+          </div>
+          <div class="json-container">
+            <div class="json-header">
+              <span>Request Payload</span>
+              <span>JSON</span>
+            </div>
+            <div class="json-content" id="json3"></div>
           </div>
-          <div class="json-content" id="json4"></div>
-        </div>
-        <div class="callout">
-          <strong>Key Point:</strong> This is the A2A (Agent-to-Agent) pattern described in the blog. The orchestrator delegates UI generation to a specialized remote agent deployed on Vertex AI Agent Engine - demonstrating cross-boundary agent collaboration.
         </div>
       </div>
-    </div>
 
-    <!-- Message 5: Agent Engine → Server (A2UI Response) -->
-    <div class="message-card">
-      <div class="message-header">
-        <div class="sequence-num agent-to-server">5</div>
-        <span class="message-direction agent-to-server">Remote Agent → Server</span>
-        <span class="message-endpoint">Response from Vertex AI Agent Engine</span>
-      </div>
-      <div class="message-body">
-        <div class="message-description">
-          The remote agent (deployed on Agent Engine) returns <strong>A2UI JSON</strong> - a declarative description of UI components. This is the core of what A2UI provides.
+      <!-- Message 4: Server → Agent Engine -->
+      <div class="message-card">
+        <div class="message-header">
+          <div class="sequence-num server-to-agent">4</div>
+          <span class="message-direction server-to-agent">Server → Remote Agent</span>
+          <span class="message-endpoint">Deployed to Vertex AI Agent Engine</span>
         </div>
-        <div class="json-container">
-          <div class="json-header">
-            <span>A2UI Messages (Parsed)</span>
-            <span>JSON • Scroll to see full payload</span>
+        <div class="message-body">
+          <div class="message-description">
+            The server forwards the request to a
+            <strong>remote A2UI-generating agent deployed to Vertex AI Agent Engine</strong>. This
+            agent is a separate service that specializes in generating A2UI content.
+          </div>
+          <div class="json-container">
+            <div class="json-header">
+              <span>Request to Remote Agent (via Agent Engine API)</span>
+              <span>JSON</span>
+            </div>
+            <div class="json-content" id="json4"></div>
+          </div>
+          <div class="callout">
+            <strong>Key Point:</strong> This is the A2A (Agent-to-Agent) pattern described in the
+            blog. The orchestrator delegates UI generation to a specialized remote agent deployed on
+            Vertex AI Agent Engine - demonstrating cross-boundary agent collaboration.
           </div>
-          <div class="json-content" id="json5"></div>
-        </div>
-        <div class="a2ui-highlight">
-          <h4>Understanding the A2UI Structure</h4>
-          <p><strong>beginRendering</strong> - Declares the surface and root component ID<br>
-          <strong>surfaceUpdate</strong> - Contains the flat list of components with ID references<br>
-          <strong>Components</strong> - Text, Column, Row, Flashcard - these are catalog components the client knows how to render</p>
         </div>
       </div>
-    </div>
 
-    <!-- Message 6: Server → Client -->
-    <div class="message-card">
-      <div class="message-header">
-        <div class="sequence-num server-to-client">6</div>
-        <span class="message-direction server-to-client">Server → Client</span>
-        <span class="message-endpoint">/a2ui-agent/a2a/query</span>
-      </div>
-      <div class="message-body">
-        <div class="message-description">
-          The server sends the A2UI payload to the browser. The <strong>@a2ui/web-lib</strong> renderer processes this JSON and creates native web components.
+      <!-- Message 5: Agent Engine → Server (A2UI Response) -->
+      <div class="message-card">
+        <div class="message-header">
+          <div class="sequence-num agent-to-server">5</div>
+          <span class="message-direction agent-to-server">Remote Agent → Server</span>
+          <span class="message-endpoint">Response from Vertex AI Agent Engine</span>
         </div>
-        <div class="json-container">
-          <div class="json-header">
-            <span>Final Response to Browser</span>
-            <span>JSON</span>
+        <div class="message-body">
+          <div class="message-description">
+            The remote agent (deployed on Agent Engine) returns <strong>A2UI JSON</strong> - a
+            declarative description of UI components. This is the core of what A2UI provides.
+          </div>
+          <div class="json-container">
+            <div class="json-header">
+              <span>A2UI Messages (Parsed)</span>
+              <span>JSON • Scroll to see full payload</span>
+            </div>
+            <div class="json-content" id="json5"></div>
+          </div>
+          <div class="a2ui-highlight">
+            <h4>Understanding the A2UI Structure</h4>
+            <p>
+              <strong>beginRendering</strong> - Declares the surface and root component ID<br />
+              <strong>surfaceUpdate</strong> - Contains the flat list of components with ID
+              references<br />
+              <strong>Components</strong> - Text, Column, Row, Flashcard - these are catalog
+              components the client knows how to render
+            </p>
           </div>
-          <div class="json-content" id="json6"></div>
         </div>
-        <div class="callout">
-          <strong>Result:</strong> The browser's A2UI renderer creates &lt;a2ui-surface&gt;, which contains &lt;a2ui-flashcard&gt; components styled to match the host application's theme.
+      </div>
+
+      <!-- Message 6: Server → Client -->
+      <div class="message-card">
+        <div class="message-header">
+          <div class="sequence-num server-to-client">6</div>
+          <span class="message-direction server-to-client">Server → Client</span>
+          <span class="message-endpoint">/a2ui-agent/a2a/query</span>
+        </div>
+        <div class="message-body">
+          <div class="message-description">
+            The server sends the A2UI payload to the browser. The
+            <strong>@a2ui/web-lib</strong> renderer processes this JSON and creates native web
+            components.
+          </div>
+          <div class="json-container">
+            <div class="json-header">
+              <span>Final Response to Browser</span>
+              <span>JSON</span>
+            </div>
+            <div class="json-content" id="json6"></div>
+          </div>
+          <div class="callout">
+            <strong>Result:</strong> The browser's A2UI renderer creates &lt;a2ui-surface&gt;, which
+            contains &lt;a2ui-flashcard&gt; components styled to match the host application's theme.
+          </div>
         </div>
       </div>
     </div>
 
-  </div>
-
-  <script>
-    // Representative example data from a real demo session
-    const exampleMessages = {
-      msg1: {
-        userMessage: "Create flashcards for bond energy misconceptions",
-        intentGuidance: "You are an intent classifier. Analyze the user's message...",
-        conversationLength: 0
-      },
-      msg2: {
-        text: "flashcards"
-      },
-      msg3: {
-        message: "flashcards:Create flashcards for bond energy misconceptions",
-        session_id: "session_1734567890123_abc123def",
-        extensions: ["https://a2ui.org/a2a-extension/a2ui/v0.8"]
-      },
-      msg4: {
-        class_method: "stream_query",
-        input: {
-          user_id: "demo-user",
-          message: "Generate flashcards for: Create flashcards for bond energy misconceptions"
-        }
-      },
-      msg5: [
-        {
-          beginRendering: {
-            surfaceId: "learningContent",
-            root: "mainColumn"
-          }
+    <script>
+      // Representative example data from a real demo session
+      const exampleMessages = {
+        msg1: {
+          userMessage: 'Create flashcards for bond energy misconceptions',
+          intentGuidance: "You are an intent classifier. Analyze the user's message...",
+          conversationLength: 0,
+        },
+        msg2: {
+          text: 'flashcards',
+        },
+        msg3: {
+          message: 'flashcards:Create flashcards for bond energy misconceptions',
+          session_id: 'session_1734567890123_abc123def',
+          extensions: ['https://a2ui.org/a2a-extension/a2ui/v0.8'],
         },
-        {
-          surfaceUpdate: {
-            surfaceId: "learningContent",
-            components: [
-              {
-                id: "mainColumn",
-                component: {
-                  Column: {
-                    children: { explicitList: ["headerText", "flashcardRow"] },
-                    distribution: "start",
-                    alignment: "stretch"
-                  }
-                }
-              },
-              {
-                id: "headerText",
-                component: {
-                  Text: {
-                    text: { literalString: "Study Flashcards: ATP & Bond Energy" },
-                    usageHint: "h3"
-                  }
-                }
-              },
-              {
-                id: "flashcardRow",
-                component: {
-                  Row: {
-                    children: { explicitList: ["card1", "card2", "card3"] },
-                    distribution: "start",
-                    alignment: "stretch"
-                  }
-                }
-              },
-              {
-                id: "card1",
-                component: {
-                  Flashcard: {
-                    front: { literalString: "Why does ATP hydrolysis release energy?" },
-                    back: { literalString: "ATP hydrolysis releases energy because the products (ADP + Pi) are MORE STABLE than ATP. The phosphate groups in ATP repel each other due to negative charges. When the terminal phosphate is removed, this electrostatic strain is relieved, and the products achieve better resonance stabilization." },
-                    category: { literalString: "Biochemistry" }
-                  }
-                }
-              },
-              {
-                id: "card2",
-                component: {
-                  Flashcard: {
-                    front: { literalString: "Does breaking a chemical bond release energy?" },
-                    back: { literalString: "NO - this is a common MCAT trap! Breaking ANY bond REQUIRES energy input (it's endothermic). Energy is only released when NEW bonds FORM. In ATP hydrolysis, the energy released comes from forming more stable bonds in the products." },
-                    category: { literalString: "Common Trap" }
-                  }
-                }
-              },
-              {
-                id: "card3",
-                component: {
-                  Flashcard: {
-                    front: { literalString: "What's wrong with saying 'ATP stores energy in its bonds'?" },
-                    back: { literalString: "Bonds don't 'store' energy like batteries. Think of it like holding a plank position at the gym - you're not storing energy, you're in a high-energy unstable state. When you release to rest (ATP → ADP + Pi), you move to a more stable, lower-energy state." },
-                    category: { literalString: "MCAT Concept" }
-                  }
-                }
-              }
-            ]
-          }
-        }
-      ],
-      msg6: {
-        format: "flashcards",
-        surfaceId: "learningContent",
-        source: {
-          url: "https://openstax.org/books/biology-ap-courses/pages/6-2-potential-kinetic-free-and-activation-energy",
-          title: "OpenStax Biology for AP Courses",
-          provider: "OpenStax"
+        msg4: {
+          class_method: 'stream_query',
+          input: {
+            user_id: 'demo-user',
+            message: 'Generate flashcards for: Create flashcards for bond energy misconceptions',
+          },
         },
-        a2uiMessageCount: 2,
-        a2uiPayload: "[ ... see Message 5 for full A2UI content ... ]"
-      }
-    };
-
-    // Simple JSON syntax highlighter
-    function highlightJSON(obj) {
-      const json = JSON.stringify(obj, null, 2);
-      return json
-        .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
-        .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
-        .replace(/: (\d+)/g, ': <span class="json-number">$1</span>')
-        .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
-        .replace(/: (null)/g, ': <span class="json-null">$1</span>');
-    }
-
-    // Populate JSON containers
-    document.getElementById('json1').innerHTML = highlightJSON(exampleMessages.msg1);
-    document.getElementById('json2').innerHTML = highlightJSON(exampleMessages.msg2);
-    document.getElementById('json3').innerHTML = highlightJSON(exampleMessages.msg3);
-    document.getElementById('json4').innerHTML = highlightJSON(exampleMessages.msg4);
-    document.getElementById('json5').innerHTML = highlightJSON(exampleMessages.msg5);
-    document.getElementById('json6').innerHTML = highlightJSON(exampleMessages.msg6);
-  </script>
-</body>
+        msg5: [
+          {
+            beginRendering: {
+              surfaceId: 'learningContent',
+              root: 'mainColumn',
+            },
+          },
+          {
+            surfaceUpdate: {
+              surfaceId: 'learningContent',
+              components: [
+                {
+                  id: 'mainColumn',
+                  component: {
+                    Column: {
+                      children: {explicitList: ['headerText', 'flashcardRow']},
+                      distribution: 'start',
+                      alignment: 'stretch',
+                    },
+                  },
+                },
+                {
+                  id: 'headerText',
+                  component: {
+                    Text: {
+                      text: {literalString: 'Study Flashcards: ATP & Bond Energy'},
+                      usageHint: 'h3',
+                    },
+                  },
+                },
+                {
+                  id: 'flashcardRow',
+                  component: {
+                    Row: {
+                      children: {explicitList: ['card1', 'card2', 'card3']},
+                      distribution: 'start',
+                      alignment: 'stretch',
+                    },
+                  },
+                },
+                {
+                  id: 'card1',
+                  component: {
+                    Flashcard: {
+                      front: {literalString: 'Why does ATP hydrolysis release energy?'},
+                      back: {
+                        literalString:
+                          'ATP hydrolysis releases energy because the products (ADP + Pi) are MORE STABLE than ATP. The phosphate groups in ATP repel each other due to negative charges. When the terminal phosphate is removed, this electrostatic strain is relieved, and the products achieve better resonance stabilization.',
+                      },
+                      category: {literalString: 'Biochemistry'},
+                    },
+                  },
+                },
+                {
+                  id: 'card2',
+                  component: {
+                    Flashcard: {
+                      front: {literalString: 'Does breaking a chemical bond release energy?'},
+                      back: {
+                        literalString:
+                          "NO - this is a common MCAT trap! Breaking ANY bond REQUIRES energy input (it's endothermic). Energy is only released when NEW bonds FORM. In ATP hydrolysis, the energy released comes from forming more stable bonds in the products.",
+                      },
+                      category: {literalString: 'Common Trap'},
+                    },
+                  },
+                },
+                {
+                  id: 'card3',
+                  component: {
+                    Flashcard: {
+                      front: {
+                        literalString: "What's wrong with saying 'ATP stores energy in its bonds'?",
+                      },
+                      back: {
+                        literalString:
+                          "Bonds don't 'store' energy like batteries. Think of it like holding a plank position at the gym - you're not storing energy, you're in a high-energy unstable state. When you release to rest (ATP → ADP + Pi), you move to a more stable, lower-energy state.",
+                      },
+                      category: {literalString: 'MCAT Concept'},
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        ],
+        msg6: {
+          format: 'flashcards',
+          surfaceId: 'learningContent',
+          source: {
+            url: 'https://openstax.org/books/biology-ap-courses/pages/6-2-potential-kinetic-free-and-activation-energy',
+            title: 'OpenStax Biology for AP Courses',
+            provider: 'OpenStax',
+          },
+          a2uiMessageCount: 2,
+          a2uiPayload: '[ ... see Message 5 for full A2UI content ... ]',
+        },
+      };
+
+      // Simple JSON syntax highlighter
+      function highlightJSON(obj) {
+        const json = JSON.stringify(obj, null, 2);
+        return json
+          .replace(/"([^"]+)":/g, '<span class="json-key">"$1"</span>:')
+          .replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>')
+          .replace(/: (\d+)/g, ': <span class="json-number">$1</span>')
+          .replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>')
+          .replace(/: (null)/g, ': <span class="json-null">$1</span>');
+      }
+
+      // Populate JSON containers
+      document.getElementById('json1').innerHTML = highlightJSON(exampleMessages.msg1);
+      document.getElementById('json2').innerHTML = highlightJSON(exampleMessages.msg2);
+      document.getElementById('json3').innerHTML = highlightJSON(exampleMessages.msg3);
+      document.getElementById('json4').innerHTML = highlightJSON(exampleMessages.msg4);
+      document.getElementById('json5').innerHTML = highlightJSON(exampleMessages.msg5);
+      document.getElementById('json6').innerHTML = highlightJSON(exampleMessages.msg6);
+    </script>
+  </body>
 </html>
diff --git a/samples/client/lit/personalized_learning/api-server.ts b/samples/client/lit/personalized_learning/api-server.ts
index b844fe139..855aff2a1 100644
--- a/samples/client/lit/personalized_learning/api-server.ts
+++ b/samples/client/lit/personalized_learning/api-server.ts
@@ -32,13 +32,13 @@
  *   GENAI_MODEL - Gemini model to use (default: gemini-2.5-flash)
  */
 
-import { createServer } from "http";
-import { execSync } from "child_process";
-import { writeFileSync, readFileSync, existsSync } from "fs";
-import { join } from "path";
-import { config } from "dotenv";
-import { initializeApp, applicationDefault } from "firebase-admin/app";
-import { getAuth } from "firebase-admin/auth";
+import {createServer} from 'http';
+import {execSync} from 'child_process';
+import {writeFileSync, readFileSync, existsSync} from 'fs';
+import {join} from 'path';
+import {config} from 'dotenv';
+import {initializeApp, applicationDefault} from 'firebase-admin/app';
+import {getAuth} from 'firebase-admin/auth';
 
 // Load environment variables
 config();
@@ -46,19 +46,21 @@ config();
 // =============================================================================
 // FIREBASE ADMIN - Server-side authentication
 // =============================================================================
-initializeApp({ credential: applicationDefault() });
+initializeApp({credential: applicationDefault()});
 
 // Local dev mode: skip auth when Firebase is not configured (matches client behavior)
 const IS_LOCAL_DEV_MODE = !process.env.VITE_FIREBASE_API_KEY;
 if (IS_LOCAL_DEV_MODE) {
-  console.warn("[API Server] ⚠️  LOCAL DEV MODE: Authentication disabled (VITE_FIREBASE_API_KEY not set)");
+  console.warn(
+    '[API Server] ⚠️  LOCAL DEV MODE: Authentication disabled (VITE_FIREBASE_API_KEY not set)',
+  );
 }
 
 // Access control - reads from environment variables (shared with src/firebase-auth.ts)
 // Uses VITE_ prefix so the same .env works for both client and server
-const ALLOWED_DOMAIN = process.env.VITE_ALLOWED_DOMAIN ?? "google.com";
-const ALLOWED_EMAILS: string[] = (process.env.VITE_ALLOWED_EMAILS ?? "")
-  .split(",")
+const ALLOWED_DOMAIN = process.env.VITE_ALLOWED_DOMAIN ?? 'google.com';
+const ALLOWED_EMAILS: string[] = (process.env.VITE_ALLOWED_EMAILS ?? '')
+  .split(',')
   .map((e: string) => e.trim().toLowerCase())
   .filter((e: string) => e.length > 0);
 
@@ -78,26 +80,26 @@ async function authenticateRequest(req: any, res: any): Promise<boolean> {
   }
 
   const authHeader = req.headers.authorization;
-  if (!authHeader?.startsWith("Bearer ")) {
-    res.writeHead(401, { "Content-Type": "application/json" });
-    res.end(JSON.stringify({ error: "Missing or malformed Authorization header" }));
+  if (!authHeader?.startsWith('Bearer ')) {
+    res.writeHead(401, {'Content-Type': 'application/json'});
+    res.end(JSON.stringify({error: 'Missing or malformed Authorization header'}));
     return false;
   }
   try {
-    const token = authHeader.split("Bearer ")[1];
+    const token = authHeader.split('Bearer ')[1];
     const decoded = await getAuth().verifyIdToken(token);
     if (!isAllowedEmail(decoded.email)) {
-      console.error("[API Server] Access denied for:", decoded.email);
-      res.writeHead(403, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ error: "Email not authorized" }));
+      console.error('[API Server] Access denied for:', decoded.email);
+      res.writeHead(403, {'Content-Type': 'application/json'});
+      res.end(JSON.stringify({error: 'Email not authorized'}));
       return false;
     }
     return true;
   } catch (err) {
     const message = err instanceof Error ? err.message : String(err);
-    console.error("[API Server] Auth failed:", message);
-    res.writeHead(403, { "Content-Type": "application/json" });
-    res.end(JSON.stringify({ error: "Invalid or expired token" }));
+    console.error('[API Server] Auth failed:', message);
+    res.writeHead(403, {'Content-Type': 'application/json'});
+    res.end(JSON.stringify({error: 'Invalid or expired token'}));
     return false;
   }
 }
@@ -105,20 +107,20 @@ async function authenticateRequest(req: any, res: any): Promise<boolean> {
 // =============================================================================
 // MESSAGE LOG - Captures all request/response traffic for demo purposes
 // =============================================================================
-const LOG_FILE = "./demo-message-log.json";
+const LOG_FILE = './demo-message-log.json';
 let messageLog: Array<{
   sequence: number;
   timestamp: string;
-  direction: "CLIENT_TO_SERVER" | "SERVER_TO_AGENT" | "AGENT_TO_SERVER" | "SERVER_TO_CLIENT";
+  direction: 'CLIENT_TO_SERVER' | 'SERVER_TO_AGENT' | 'AGENT_TO_SERVER' | 'SERVER_TO_CLIENT';
   endpoint: string;
   data: unknown;
 }> = [];
 let sequenceCounter = 0;
 
 function logMessage(
-  direction: "CLIENT_TO_SERVER" | "SERVER_TO_AGENT" | "AGENT_TO_SERVER" | "SERVER_TO_CLIENT",
+  direction: 'CLIENT_TO_SERVER' | 'SERVER_TO_AGENT' | 'AGENT_TO_SERVER' | 'SERVER_TO_CLIENT',
   endpoint: string,
-  data: unknown
+  data: unknown,
 ) {
   const entry = {
     sequence: ++sequenceCounter,
@@ -137,22 +139,22 @@ function logMessage(
 function resetLog() {
   messageLog = [];
   sequenceCounter = 0;
-  writeFileSync(LOG_FILE, "[]");
+  writeFileSync(LOG_FILE, '[]');
   console.log(`[LOG] Reset log file: ${LOG_FILE}`);
 }
 
 // Reset log on server start
 resetLog();
 
-const PORT = parseInt(process.env.API_PORT || "8080");
+const PORT = parseInt(process.env.API_PORT || '8080');
 const PROJECT = process.env.GOOGLE_CLOUD_PROJECT;
 // Use us-central1 region for consistency with Agent Engine
-const LOCATION = process.env.GOOGLE_CLOUD_LOCATION || "us-central1";
-const MODEL = process.env.GENAI_MODEL || "gemini-2.5-flash";
+const LOCATION = process.env.GOOGLE_CLOUD_LOCATION || 'us-central1';
+const MODEL = process.env.GENAI_MODEL || 'gemini-2.5-flash';
 
 // Validate required environment variables
 if (!PROJECT) {
-  console.error("ERROR: GOOGLE_CLOUD_PROJECT environment variable is required");
+  console.error('ERROR: GOOGLE_CLOUD_PROJECT environment variable is required');
   process.exit(1);
 }
 
@@ -160,62 +162,92 @@ if (!PROJECT) {
 // See QUICKSTART.md for deployment instructions
 // Note: Agent Engine is deployed in us-central1 (not global like Gemini API)
 const AGENT_ENGINE_CONFIG = {
-  projectNumber: process.env.AGENT_ENGINE_PROJECT_NUMBER || "",
-  location: process.env.AGENT_ENGINE_LOCATION || "us-central1",
-  resourceId: process.env.AGENT_ENGINE_RESOURCE_ID || "",
+  projectNumber: process.env.AGENT_ENGINE_PROJECT_NUMBER || '',
+  location: process.env.AGENT_ENGINE_LOCATION || 'us-central1',
+  resourceId: process.env.AGENT_ENGINE_RESOURCE_ID || '',
 };
 
 if (!AGENT_ENGINE_CONFIG.projectNumber || !AGENT_ENGINE_CONFIG.resourceId) {
-  console.warn("WARNING: AGENT_ENGINE_PROJECT_NUMBER and AGENT_ENGINE_RESOURCE_ID not set.");
-  console.warn("         Agent Engine features will not work. See QUICKSTART.md for setup.");
+  console.warn('WARNING: AGENT_ENGINE_PROJECT_NUMBER and AGENT_ENGINE_RESOURCE_ID not set.');
+  console.warn('         Agent Engine features will not work. See QUICKSTART.md for setup.');
 }
 
 // =============================================================================
 // OpenStax Source Attribution - Maps topics to specific textbook sections
 // =============================================================================
-const OPENSTAX_BASE = "https://openstax.org/books/biology-ap-courses/pages/";
+const OPENSTAX_BASE = 'https://openstax.org/books/biology-ap-courses/pages/';
 
-const OPENSTAX_SECTIONS: Record<string, { slug: string; title: string }> = {
+const OPENSTAX_SECTIONS: Record<string, {slug: string; title: string}> = {
   // ATP and Energy
-  "atp": { slug: "6-4-atp-adenosine-triphosphate", title: "ATP: Adenosine Triphosphate" },
-  "bond energy": { slug: "6-4-atp-adenosine-triphosphate", title: "ATP: Adenosine Triphosphate" },
-  "energy currency": { slug: "6-4-atp-adenosine-triphosphate", title: "ATP: Adenosine Triphosphate" },
-  "hydrolysis": { slug: "6-4-atp-adenosine-triphosphate", title: "ATP: Adenosine Triphosphate" },
+  atp: {slug: '6-4-atp-adenosine-triphosphate', title: 'ATP: Adenosine Triphosphate'},
+  'bond energy': {slug: '6-4-atp-adenosine-triphosphate', title: 'ATP: Adenosine Triphosphate'},
+  'energy currency': {
+    slug: '6-4-atp-adenosine-triphosphate',
+    title: 'ATP: Adenosine Triphosphate',
+  },
+  hydrolysis: {slug: '6-4-atp-adenosine-triphosphate', title: 'ATP: Adenosine Triphosphate'},
   // Thermodynamics
-  "thermodynamics": { slug: "6-3-the-laws-of-thermodynamics", title: "The Laws of Thermodynamics" },
-  "gibbs": { slug: "6-2-potential-kinetic-free-and-activation-energy", title: "Potential, Kinetic, Free, and Activation Energy" },
-  "free energy": { slug: "6-2-potential-kinetic-free-and-activation-energy", title: "Potential, Kinetic, Free, and Activation Energy" },
+  thermodynamics: {slug: '6-3-the-laws-of-thermodynamics', title: 'The Laws of Thermodynamics'},
+  gibbs: {
+    slug: '6-2-potential-kinetic-free-and-activation-energy',
+    title: 'Potential, Kinetic, Free, and Activation Energy',
+  },
+  'free energy': {
+    slug: '6-2-potential-kinetic-free-and-activation-energy',
+    title: 'Potential, Kinetic, Free, and Activation Energy',
+  },
   // Metabolism
-  "metabolism": { slug: "6-1-energy-and-metabolism", title: "Energy and Metabolism" },
-  "enzymes": { slug: "6-5-enzymes", title: "Enzymes" },
-  "glycolysis": { slug: "7-2-glycolysis", title: "Glycolysis" },
-  "krebs": { slug: "7-3-oxidation-of-pyruvate-and-the-citric-acid-cycle", title: "Oxidation of Pyruvate and the Citric Acid Cycle" },
-  "citric acid": { slug: "7-3-oxidation-of-pyruvate-and-the-citric-acid-cycle", title: "Oxidation of Pyruvate and the Citric Acid Cycle" },
-  "oxidative phosphorylation": { slug: "7-4-oxidative-phosphorylation", title: "Oxidative Phosphorylation" },
-  "electron transport": { slug: "7-4-oxidative-phosphorylation", title: "Oxidative Phosphorylation" },
+  metabolism: {slug: '6-1-energy-and-metabolism', title: 'Energy and Metabolism'},
+  enzymes: {slug: '6-5-enzymes', title: 'Enzymes'},
+  glycolysis: {slug: '7-2-glycolysis', title: 'Glycolysis'},
+  krebs: {
+    slug: '7-3-oxidation-of-pyruvate-and-the-citric-acid-cycle',
+    title: 'Oxidation of Pyruvate and the Citric Acid Cycle',
+  },
+  'citric acid': {
+    slug: '7-3-oxidation-of-pyruvate-and-the-citric-acid-cycle',
+    title: 'Oxidation of Pyruvate and the Citric Acid Cycle',
+  },
+  'oxidative phosphorylation': {
+    slug: '7-4-oxidative-phosphorylation',
+    title: 'Oxidative Phosphorylation',
+  },
+  'electron transport': {
+    slug: '7-4-oxidative-phosphorylation',
+    title: 'Oxidative Phosphorylation',
+  },
   // Photosynthesis
-  "photosynthesis": { slug: "8-1-overview-of-photosynthesis", title: "Overview of Photosynthesis" },
-  "light reactions": { slug: "8-2-the-light-dependent-reaction-of-photosynthesis", title: "The Light-Dependent Reactions" },
-  "calvin cycle": { slug: "8-3-using-light-to-make-organic-molecules", title: "Using Light to Make Organic Molecules" },
+  photosynthesis: {slug: '8-1-overview-of-photosynthesis', title: 'Overview of Photosynthesis'},
+  'light reactions': {
+    slug: '8-2-the-light-dependent-reaction-of-photosynthesis',
+    title: 'The Light-Dependent Reactions',
+  },
+  'calvin cycle': {
+    slug: '8-3-using-light-to-make-organic-molecules',
+    title: 'Using Light to Make Organic Molecules',
+  },
   // Cell structure
-  "cell membrane": { slug: "5-1-components-and-structure", title: "Cell Membrane Components and Structure" },
-  "transport": { slug: "5-2-passive-transport", title: "Passive Transport" },
+  'cell membrane': {
+    slug: '5-1-components-and-structure',
+    title: 'Cell Membrane Components and Structure',
+  },
+  transport: {slug: '5-2-passive-transport', title: 'Passive Transport'},
   // Reproduction
-  "reproductive system": { slug: "34-1-reproduction-methods", title: "Reproduction Methods" },
-  "reproductive": { slug: "34-1-reproduction-methods", title: "Reproduction Methods" },
-  "reproduction": { slug: "34-1-reproduction-methods", title: "Reproduction Methods" },
+  'reproductive system': {slug: '34-1-reproduction-methods', title: 'Reproduction Methods'},
+  reproductive: {slug: '34-1-reproduction-methods', title: 'Reproduction Methods'},
+  reproduction: {slug: '34-1-reproduction-methods', title: 'Reproduction Methods'},
   // Default - intentionally empty to avoid wrong citations
-  "default": { slug: "", title: "Biology Content" },
+  default: {slug: '', title: 'Biology Content'},
 };
 
-function getOpenStaxSource(topic: string): { provider: string; title: string; url: string } {
+function getOpenStaxSource(topic: string): {provider: string; title: string; url: string} {
   const topicLower = topic.toLowerCase();
 
   // Find matching section
   for (const [keyword, section] of Object.entries(OPENSTAX_SECTIONS)) {
-    if (keyword !== "default" && topicLower.includes(keyword)) {
+    if (keyword !== 'default' && topicLower.includes(keyword)) {
       return {
-        provider: "OpenStax Biology for AP Courses",
+        provider: 'OpenStax Biology for AP Courses',
         title: section.title,
         url: OPENSTAX_BASE + section.slug,
       };
@@ -223,9 +255,9 @@ function getOpenStaxSource(topic: string): { provider: string; title: string; ur
   }
 
   // Default fallback
-  const defaultSection = OPENSTAX_SECTIONS["default"];
+  const defaultSection = OPENSTAX_SECTIONS['default'];
   return {
-    provider: "OpenStax Biology for AP Courses",
+    provider: 'OpenStax Biology for AP Courses',
     title: defaultSection.title,
     url: OPENSTAX_BASE + defaultSection.slug,
   };
@@ -235,7 +267,7 @@ function getOpenStaxSource(topic: string): { provider: string; title: string; ur
 let genai: any = null;
 
 async function initGenAI() {
-  const { GoogleGenAI } = await import("@google/genai");
+  const {GoogleGenAI} = await import('@google/genai');
   // Use VertexAI with Application Default Credentials
   genai = new GoogleGenAI({
     vertexai: true,
@@ -248,7 +280,7 @@ async function initGenAI() {
 
 interface ChatMessage {
   role: string;
-  parts: { text: string }[];
+  parts: {text: string}[];
 }
 
 interface ChatRequest {
@@ -261,7 +293,7 @@ interface ChatRequest {
 // =============================================================================
 // ACCESS TOKEN CACHING
 // =============================================================================
-let cachedAccessToken: { token: string; expiresAt: number } | null = null;
+let cachedAccessToken: {token: string; expiresAt: number} | null = null;
 
 // Get Google Cloud access token with caching
 // In Cloud Run, use the metadata server. Locally, use gcloud CLI.
@@ -275,9 +307,10 @@ async function getAccessToken(): Promise<string> {
 
   // Try metadata server first (Cloud Run environment)
   try {
-    const metadataUrl = "http://metadata.google.internal/computeMetadata/v1/instance/service-accounts/default/token";
+    const metadataUrl =
+      'http://metadata.google.internal/computeMetadata/v1/instance/service-accounts/default/token';
     const response = await fetch(metadataUrl, {
-      headers: { "Metadata-Flavor": "Google" },
+      headers: {'Metadata-Flavor': 'Google'},
     });
     if (response.ok) {
       const data = await response.json();
@@ -286,7 +319,7 @@ async function getAccessToken(): Promise<string> {
         token: data.access_token,
         expiresAt: now + 3480000, // 58 minutes
       };
-      console.log("[API Server] Cached access token from metadata server");
+      console.log('[API Server] Cached access token from metadata server');
       return data.access_token;
     }
   } catch {
@@ -295,25 +328,25 @@ async function getAccessToken(): Promise<string> {
 
   // Fall back to gcloud CLI (local development)
   try {
-    const token = execSync("gcloud auth print-access-token", {
-      encoding: "utf-8",
+    const token = execSync('gcloud auth print-access-token', {
+      encoding: 'utf-8',
     }).trim();
     // Cache the token
     cachedAccessToken = {
       token: token,
       expiresAt: now + 3480000, // 58 minutes
     };
-    console.log("[API Server] Cached access token from gcloud CLI");
+    console.log('[API Server] Cached access token from gcloud CLI');
     return token;
   } catch (error) {
-    console.error("[API Server] Failed to get access token:", error);
-    throw new Error("Failed to get Google Cloud access token. Run: gcloud auth login");
+    console.error('[API Server] Failed to get access token:', error);
+    throw new Error('Failed to get Google Cloud access token. Run: gcloud auth login');
   }
 }
 
 // Query Agent Engine for A2UI content using streamQuery
-async function queryAgentEngine(format: string, context: string = ""): Promise<any> {
-  const { projectNumber, location, resourceId } = AGENT_ENGINE_CONFIG;
+async function queryAgentEngine(format: string, context: string = ''): Promise<any> {
+  const {projectNumber, location, resourceId} = AGENT_ENGINE_CONFIG;
   // Use :streamQuery endpoint with stream_query method for ADK agents
   const url = `https://${location}-aiplatform.googleapis.com/v1/projects/${projectNumber}/locations/${location}/reasoningEngines/${resourceId}:streamQuery`;
 
@@ -322,8 +355,8 @@ async function queryAgentEngine(format: string, context: string = ""): Promise<a
   // For audio/video, don't include topic context - we only have one pre-built podcast/video
   // Including a topic might confuse the agent into thinking we want topic-specific content
   let message: string;
-  if (format === "podcast" || format === "audio" || format === "video") {
-    message = format === "video" ? "Play the video" : "Play the podcast";
+  if (format === 'podcast' || format === 'audio' || format === 'video') {
+    message = format === 'video' ? 'Play the video' : 'Play the podcast';
   } else {
     message = context ? `Generate ${format} for: ${context}` : `Generate ${format}`;
   }
@@ -333,61 +366,72 @@ async function queryAgentEngine(format: string, context: string = ""): Promise<a
 
   // Build the request payload
   const requestPayload = {
-    class_method: "stream_query",
+    class_method: 'stream_query',
     input: {
-      user_id: "demo-user",
+      user_id: 'demo-user',
       message: message,
     },
   };
 
   // LOG: Server → Agent Engine request
-  logMessage("SERVER_TO_AGENT", "Vertex AI Agent Engine (A2UI Generator)", {
-    description: "Request to remote A2UI-generating agent",
+  logMessage('SERVER_TO_AGENT', 'Vertex AI Agent Engine (A2UI Generator)', {
+    description: 'Request to remote A2UI-generating agent',
     agentUrl: url,
     payload: requestPayload,
   });
 
   const response = await fetch(url, {
-    method: "POST",
+    method: 'POST',
     headers: {
-      "Authorization": `Bearer ${accessToken}`,
-      "Content-Type": "application/json",
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
     },
     body: JSON.stringify(requestPayload),
   });
 
   if (!response.ok) {
     const errorText = await response.text();
-    console.error("[API Server] Agent Engine error:", errorText);
+    console.error('[API Server] Agent Engine error:', errorText);
     throw new Error(`Agent Engine error: ${response.status}`);
   }
 
   // Parse the newline-delimited JSON response
   const responseText = await response.text();
-  console.log("[API Server] Agent Engine response length:", responseText.length);
-  console.log("[API Server] Raw response (first 1000 chars):", responseText.substring(0, 1000));
+  console.log('[API Server] Agent Engine response length:', responseText.length);
+  console.log('[API Server] Raw response (first 1000 chars):', responseText.substring(0, 1000));
 
   // LOG: Agent Engine → Server raw response
-  logMessage("AGENT_TO_SERVER", "Vertex AI Agent Engine (raw)", {
-    description: "Raw streaming response from Agent Engine (newline-delimited JSON)",
+  logMessage('AGENT_TO_SERVER', 'Vertex AI Agent Engine (raw)', {
+    description: 'Raw streaming response from Agent Engine (newline-delimited JSON)',
     responseLength: responseText.length,
-    rawChunks: responseText.trim().split("\n").slice(0, 5).map(chunk => {
-      try { return JSON.parse(chunk); } catch { return chunk.substring(0, 200); }
-    }),
-    note: "Showing first 5 chunks only",
+    rawChunks: responseText
+      .trim()
+      .split('\n')
+      .slice(0, 5)
+      .map(chunk => {
+        try {
+          return JSON.parse(chunk);
+        } catch {
+          return chunk.substring(0, 200);
+        }
+      }),
+    note: 'Showing first 5 chunks only',
   });
 
   // Extract text from all chunks
-  const chunks = responseText.trim().split("\n").filter((line: string) => line.trim());
-  let fullText = "";
+  const chunks = responseText
+    .trim()
+    .split('\n')
+    .filter((line: string) => line.trim());
+  let fullText = '';
 
-  let functionResponseResult = "";  // Prioritize function_response over text
-  let textParts = "";
+  let functionResponseResult = ''; // Prioritize function_response over text
+  let textParts = '';
 
   for (const chunk of chunks) {
     try {
       const parsed = JSON.parse(chunk);
-      console.log("[API Server] Parsed chunk keys:", Object.keys(parsed));
+      console.log('[API Server] Parsed chunk keys:', Object.keys(parsed));
 
       // Extract from content.parts - can contain text, function_call, or function_response
       if (parsed.content?.parts) {
@@ -395,23 +439,23 @@ async function queryAgentEngine(format: string, context: string = ""): Promise<a
           // Check for function_response which contains the tool result (prioritize this)
           if (part.function_response?.response?.result) {
             const result = part.function_response.response.result;
-            console.log("[API Server] Found function_response result:", result.substring(0, 200));
+            console.log('[API Server] Found function_response result:', result.substring(0, 200));
             functionResponseResult += result;
           } else if (part.text) {
-            console.log("[API Server] Found text part:", part.text.substring(0, 100));
+            console.log('[API Server] Found text part:', part.text.substring(0, 100));
             textParts += part.text;
           }
         }
       }
     } catch (e) {
-      console.warn("[API Server] Failed to parse chunk:", e, chunk.substring(0, 100));
+      console.warn('[API Server] Failed to parse chunk:', e, chunk.substring(0, 100));
     }
   }
 
   // Prefer function_response result over text parts (agent text often just wraps the same data)
   fullText = functionResponseResult || textParts;
 
-  console.log("[API Server] Extracted text:", fullText.substring(0, 300));
+  console.log('[API Server] Extracted text:', fullText.substring(0, 300));
 
   // Try to parse A2UI JSON from the response
   try {
@@ -420,36 +464,37 @@ async function queryAgentEngine(format: string, context: string = ""): Promise<a
     cleaned = cleaned.replace(/^```(?:json)?\s*/i, '').replace(/\s*```$/i, '');
     cleaned = cleaned.trim();
 
-    console.log("[API Server] Cleaned text:", cleaned.substring(0, 200));
+    console.log('[API Server] Cleaned text:', cleaned.substring(0, 200));
 
     // Helper to extract A2UI content and source info from various formats
-    const extractA2UIWithSource = (text: string): { a2ui: unknown[] | null; source?: { url: string; title: string; provider: string } } => {
+    const extractA2UIWithSource = (
+      text: string,
+    ): {a2ui: unknown[] | null; source?: {url: string; title: string; provider: string}} => {
       // Try parsing as raw JSON array (legacy format)
-      if (text.startsWith("[")) {
+      if (text.startsWith('[')) {
         try {
           const parsed = JSON.parse(text);
-          if (Array.isArray(parsed)) return { a2ui: parsed };
+          if (Array.isArray(parsed)) return {a2ui: parsed};
         } catch {}
       }
 
       // Try parsing as object with a2ui and source (new format)
-      if (text.startsWith("{")) {
+      if (text.startsWith('{')) {
         try {
           const wrapper = JSON.parse(text);
           // New format: {a2ui: [...], source: {...}}
           if (wrapper.a2ui && Array.isArray(wrapper.a2ui)) {
-            return { a2ui: wrapper.a2ui, source: wrapper.source || undefined };
+            return {a2ui: wrapper.a2ui, source: wrapper.source || undefined};
           }
           // Legacy format: {"result": "..."}
           if (wrapper.result) {
-            const inner = typeof wrapper.result === 'string'
-              ? JSON.parse(wrapper.result)
-              : wrapper.result;
+            const inner =
+              typeof wrapper.result === 'string' ? JSON.parse(wrapper.result) : wrapper.result;
             // Check if inner is the new format
             if (inner && inner.a2ui && Array.isArray(inner.a2ui)) {
-              return { a2ui: inner.a2ui, source: inner.source || undefined };
+              return {a2ui: inner.a2ui, source: inner.source || undefined};
             }
-            if (Array.isArray(inner)) return { a2ui: inner };
+            if (Array.isArray(inner)) return {a2ui: inner};
           }
         } catch {}
       }
@@ -459,7 +504,7 @@ async function queryAgentEngine(format: string, context: string = ""): Promise<a
       if (arrayMatch) {
         try {
           const parsed = JSON.parse(arrayMatch[0]);
-          if (Array.isArray(parsed)) return { a2ui: parsed };
+          if (Array.isArray(parsed)) return {a2ui: parsed};
         } catch {}
       }
 
@@ -468,35 +513,33 @@ async function queryAgentEngine(format: string, context: string = ""): Promise<a
       if (resultMatch) {
         try {
           // Unescape the JSON string
-          const unescaped = resultMatch[1]
-            .replace(/\\"/g, '"')
-            .replace(/\\\\/g, '\\');
+          const unescaped = resultMatch[1].replace(/\\"/g, '"').replace(/\\\\/g, '\\');
           const parsed = JSON.parse(unescaped);
           // Check if parsed is new format
           if (parsed && parsed.a2ui && Array.isArray(parsed.a2ui)) {
-            return { a2ui: parsed.a2ui, source: parsed.source || undefined };
+            return {a2ui: parsed.a2ui, source: parsed.source || undefined};
           }
-          if (Array.isArray(parsed)) return { a2ui: parsed };
+          if (Array.isArray(parsed)) return {a2ui: parsed};
         } catch {}
       }
 
-      return { a2ui: null };
+      return {a2ui: null};
     };
 
     const extracted = extractA2UIWithSource(cleaned);
     if (extracted.a2ui) {
       const result = {
         format,
-        surfaceId: "learningContent",
+        surfaceId: 'learningContent',
         a2ui: extracted.a2ui,
         source: extracted.source,
       };
 
       // LOG: Parsed A2UI content
-      logMessage("AGENT_TO_SERVER", "Vertex AI Agent Engine (parsed A2UI)", {
-        description: "Successfully parsed A2UI JSON from agent response",
+      logMessage('AGENT_TO_SERVER', 'Vertex AI Agent Engine (parsed A2UI)', {
+        description: 'Successfully parsed A2UI JSON from agent response',
         format,
-        surfaceId: "learningContent",
+        surfaceId: 'learningContent',
         source: extracted.source,
         a2uiMessageCount: extracted.a2ui.length,
         a2uiMessages: extracted.a2ui,
@@ -508,18 +551,18 @@ async function queryAgentEngine(format: string, context: string = ""): Promise<a
     // Return raw text if no JSON found
     return {
       format,
-      surfaceId: "learningContent",
+      surfaceId: 'learningContent',
       a2ui: [],
       rawText: fullText,
     };
   } catch (e) {
-    console.error("[API Server] Failed to parse agent response:", e);
+    console.error('[API Server] Failed to parse agent response:', e);
     return {
       format,
-      surfaceId: "learningContent",
+      surfaceId: 'learningContent',
       a2ui: [],
       rawText: fullText,
-      error: "Failed to parse A2UI JSON",
+      error: 'Failed to parse A2UI JSON',
     };
   }
 }
@@ -616,18 +659,26 @@ Replace all [BRACKETED] placeholders with actual content. Vary which option is c
   try {
     const response = await genai.models.generateContent({
       model: MODEL,
-      contents: [{ role: "user", parts: [{ text: `Generate quiz questions about: ${topic || 'ATP and bond energy'}` }] }],
+      contents: [
+        {
+          role: 'user',
+          parts: [{text: `Generate quiz questions about: ${topic || 'ATP and bond energy'}`}],
+        },
+      ],
       config: {
         systemInstruction: systemPrompt,
-        responseMimeType: "application/json",
+        responseMimeType: 'application/json',
       },
     });
 
-    const text = response.text?.trim() || "";
-    console.log("[API Server] Local quiz generation response:", text.substring(0, 500));
+    const text = response.text?.trim() || '';
+    console.log('[API Server] Local quiz generation response:', text.substring(0, 500));
 
     // Parse the JSON
-    let cleaned = text.replace(/^```(?:json)?\s*/i, '').replace(/\s*```$/i, '').trim();
+    let cleaned = text
+      .replace(/^```(?:json)?\s*/i, '')
+      .replace(/\s*```$/i, '')
+      .trim();
     let parsed = JSON.parse(cleaned);
 
     // Handle case where Gemini wraps the A2UI array in an object
@@ -640,40 +691,40 @@ Replace all [BRACKETED] placeholders with actual content. Vary which option is c
     } else if (parsed.messages && Array.isArray(parsed.messages)) {
       a2ui = parsed.messages;
     } else {
-      console.error("[API Server] Unexpected quiz format from Gemini:", Object.keys(parsed));
+      console.error('[API Server] Unexpected quiz format from Gemini:', Object.keys(parsed));
       return null;
     }
 
     // Match topic to specific OpenStax section for better attribution
     const source = getOpenStaxSource(topic);
     return {
-      format: "quiz",
-      surfaceId: "learningContent",
+      format: 'quiz',
+      surfaceId: 'learningContent',
       a2ui: a2ui,
       source,
     };
   } catch (error) {
-    console.error("[API Server] Local quiz generation failed:", error);
+    console.error('[API Server] Local quiz generation failed:', error);
     return null;
   }
 }
 
-async function handleChatRequest(request: ChatRequest): Promise<{ text: string }> {
-  const { systemPrompt, intentGuidance, messages, userMessage } = request;
+async function handleChatRequest(request: ChatRequest): Promise<{text: string}> {
+  const {systemPrompt, intentGuidance, messages, userMessage} = request;
 
   // Build the full system instruction
   const fullSystemPrompt = `${systemPrompt}\n\n${intentGuidance}`;
 
   // Convert messages to Gemini format
-  const contents = messages.map((m) => ({
-    role: m.role === "assistant" ? "model" : "user",
+  const contents = messages.map(m => ({
+    role: m.role === 'assistant' ? 'model' : 'user',
     parts: m.parts,
   }));
 
   // Add the current user message
   contents.push({
-    role: "user",
-    parts: [{ text: userMessage }],
+    role: 'user',
+    parts: [{text: userMessage}],
   });
 
   try {
@@ -686,9 +737,9 @@ async function handleChatRequest(request: ChatRequest): Promise<{ text: string }
     });
 
     const text = response.text || "I apologize, I couldn't generate a response.";
-    return { text };
+    return {text};
   } catch (error) {
-    console.error("[API Server] Error calling Gemini:", error);
+    console.error('[API Server] Error calling Gemini:', error);
     throw error;
   }
 }
@@ -707,11 +758,13 @@ interface CombinedChatRequest {
 interface CombinedChatResponse {
   intent: string;
   text: string;
-  keywords?: string;  // Comma-separated keywords for content-generating intents
+  keywords?: string; // Comma-separated keywords for content-generating intents
 }
 
-async function handleCombinedChatRequest(request: CombinedChatRequest): Promise<CombinedChatResponse> {
-  const { systemPrompt, messages, userMessage, recentContext } = request;
+async function handleCombinedChatRequest(
+  request: CombinedChatRequest,
+): Promise<CombinedChatResponse> {
+  const {systemPrompt, messages, userMessage, recentContext} = request;
 
   const combinedSystemPrompt = `${systemPrompt}
 
@@ -758,8 +811,8 @@ The keywords help the content retrieval system find the right OpenStax textbook
 Then provide an appropriate conversational response following your tutor persona.`;
 
   // Convert messages to Gemini format
-  const contents = messages.map((m) => ({
-    role: m.role === "assistant" ? "model" : "user",
+  const contents = messages.map(m => ({
+    role: m.role === 'assistant' ? 'model' : 'user',
     parts: m.parts,
   }));
 
@@ -770,8 +823,8 @@ Then provide an appropriate conversational response following your tutor persona
   }
 
   contents.push({
-    role: "user",
-    parts: [{ text: contextualMessage }],
+    role: 'user',
+    parts: [{text: contextualMessage}],
   });
 
   try {
@@ -780,138 +833,138 @@ Then provide an appropriate conversational response following your tutor persona
       contents,
       config: {
         systemInstruction: combinedSystemPrompt,
-        responseMimeType: "application/json",
+        responseMimeType: 'application/json',
       },
     });
 
-    const responseText = response.text?.trim() || "";
-    console.log("[API Server] Combined response:", responseText.substring(0, 200));
+    const responseText = response.text?.trim() || '';
+    console.log('[API Server] Combined response:', responseText.substring(0, 200));
 
     try {
       const parsed = JSON.parse(responseText);
       const result: CombinedChatResponse = {
-        intent: parsed.intent || "general",
+        intent: parsed.intent || 'general',
         text: parsed.text || "I apologize, I couldn't generate a response.",
       };
       // Include keywords if present (for content-generating intents)
       if (parsed.keywords) {
         result.keywords = parsed.keywords;
-        console.log("[API Server] Keywords for content retrieval:", parsed.keywords);
+        console.log('[API Server] Keywords for content retrieval:', parsed.keywords);
       }
       return result;
     } catch (parseError) {
-      console.error("[API Server] Failed to parse combined response:", parseError);
+      console.error('[API Server] Failed to parse combined response:', parseError);
       // Fallback: return general intent with raw text
       return {
-        intent: "general",
+        intent: 'general',
         text: responseText || "I apologize, I couldn't generate a response.",
       };
     }
   } catch (error) {
-    console.error("[API Server] Error calling Gemini for combined request:", error);
+    console.error('[API Server] Error calling Gemini for combined request:', error);
     throw error;
   }
 }
 
 function parseBody(req: any): Promise<any> {
   return new Promise((resolve, reject) => {
-    let body = "";
-    req.on("data", (chunk: string) => {
+    let body = '';
+    req.on('data', (chunk: string) => {
       body += chunk;
     });
-    req.on("end", () => {
+    req.on('end', () => {
       try {
         resolve(JSON.parse(body));
       } catch (e) {
         reject(e);
       }
     });
-    req.on("error", reject);
+    req.on('error', reject);
   });
 }
 
 async function main() {
-  console.log("[API Server] Initializing Gemini client...");
+  console.log('[API Server] Initializing Gemini client...');
   await initGenAI();
 
   const server = createServer(async (req, res) => {
     // CORS headers
-    res.setHeader("Access-Control-Allow-Origin", "*");
-    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
-    res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
 
-    if (req.method === "OPTIONS") {
+    if (req.method === 'OPTIONS') {
       res.writeHead(204);
       res.end();
       return;
     }
 
     // Health check
-    if (req.url === "/health" && req.method === "GET") {
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ status: "healthy" }));
+    if (req.url === '/health' && req.method === 'GET') {
+      res.writeHead(200, {'Content-Type': 'application/json'});
+      res.end(JSON.stringify({status: 'healthy'}));
       return;
     }
 
     // Reset message log (useful before demo)
-    if (req.url === "/reset-log" && req.method === "POST") {
+    if (req.url === '/reset-log' && req.method === 'POST') {
       resetLog();
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ status: "log reset", file: LOG_FILE }));
+      res.writeHead(200, {'Content-Type': 'application/json'});
+      res.end(JSON.stringify({status: 'log reset', file: LOG_FILE}));
       return;
     }
 
     // View current log
-    if (req.url === "/log" && req.method === "GET") {
-      res.writeHead(200, { "Content-Type": "application/json" });
+    if (req.url === '/log' && req.method === 'GET') {
+      res.writeHead(200, {'Content-Type': 'application/json'});
       res.end(JSON.stringify(messageLog, null, 2));
       return;
     }
 
     // Authorization check endpoint - used by frontend to verify user is allowed
     // This is the SINGLE SOURCE OF TRUTH for access control decisions
-    if (req.url === "/api/check-access" && req.method === "GET") {
+    if (req.url === '/api/check-access' && req.method === 'GET') {
       if (!(await authenticateRequest(req, res))) return;
       // If authenticateRequest passes, user is both authenticated AND authorized
-      res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ authorized: true }));
+      res.writeHead(200, {'Content-Type': 'application/json'});
+      res.end(JSON.stringify({authorized: true}));
       return;
     }
 
     // A2A Agent Engine endpoint
-    if (req.url === "/a2ui-agent/a2a/query" && req.method === "POST") {
+    if (req.url === '/a2ui-agent/a2a/query' && req.method === 'POST') {
       if (!(await authenticateRequest(req, res))) return;
       try {
         const body = await parseBody(req);
-        console.log("[API Server] ========================================");
-        console.log("[API Server] A2A QUERY - REQUESTING A2UI CONTENT");
-        console.log("[API Server] Full message:", body.message);
-        console.log("[API Server] Session ID:", body.session_id);
-        console.log("[API Server] ========================================");
+        console.log('[API Server] ========================================');
+        console.log('[API Server] A2A QUERY - REQUESTING A2UI CONTENT');
+        console.log('[API Server] Full message:', body.message);
+        console.log('[API Server] Session ID:', body.session_id);
+        console.log('[API Server] ========================================');
 
         // LOG: Client → Server request for A2UI content
-        logMessage("CLIENT_TO_SERVER", "/a2ui-agent/a2a/query", {
-          description: "Browser client requesting A2UI content generation",
+        logMessage('CLIENT_TO_SERVER', '/a2ui-agent/a2a/query', {
+          description: 'Browser client requesting A2UI content generation',
           requestBody: body,
         });
 
         // Parse format from message (e.g., "flashcards:context" or just "flashcards")
-        const parts = (body.message || "flashcards").split(":");
+        const parts = (body.message || 'flashcards').split(':');
         const format = parts[0].trim();
-        const context = parts.slice(1).join(":").trim();
+        const context = parts.slice(1).join(':').trim();
 
-        console.log("[API Server] Parsed format:", format);
-        console.log("[API Server] Parsed context (keywords):", context);
-        console.log("[API Server] This context will be sent to Agent Engine for topic matching");
+        console.log('[API Server] Parsed format:', format);
+        console.log('[API Server] Parsed context (keywords):', context);
+        console.log('[API Server] This context will be sent to Agent Engine for topic matching');
 
         let result = await queryAgentEngine(format, context);
 
         // If quiz was requested but Agent Engine returned Flashcards or empty,
         // generate quiz locally using Gemini
-        if (format.toLowerCase() === "quiz") {
+        if (format.toLowerCase() === 'quiz') {
           const a2uiStr = JSON.stringify(result.a2ui || []);
-          const hasFlashcards = a2uiStr.includes("Flashcard");
-          const hasQuizCards = a2uiStr.includes("QuizCard");
+          const hasFlashcards = a2uiStr.includes('Flashcard');
+          const hasQuizCards = a2uiStr.includes('QuizCard');
           const isEmpty = !result.a2ui || result.a2ui.length === 0;
 
           if (isEmpty || (hasFlashcards && !hasQuizCards)) {
@@ -924,8 +977,8 @@ async function main() {
         }
 
         // LOG: Server → Client response with A2UI
-        logMessage("SERVER_TO_CLIENT", "/a2ui-agent/a2a/query", {
-          description: "Sending A2UI JSON payload to browser for rendering",
+        logMessage('SERVER_TO_CLIENT', '/a2ui-agent/a2a/query', {
+          description: 'Sending A2UI JSON payload to browser for rendering',
           format: result.format,
           surfaceId: result.surfaceId,
           source: result.source,
@@ -933,63 +986,63 @@ async function main() {
           a2uiPayload: result.a2ui,
         });
 
-        res.writeHead(200, { "Content-Type": "application/json" });
+        res.writeHead(200, {'Content-Type': 'application/json'});
         res.end(JSON.stringify(result));
       } catch (error: any) {
-        console.error("[API Server] A2A error:", error);
-        res.writeHead(500, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ error: error.message }));
+        console.error('[API Server] A2A error:', error);
+        res.writeHead(500, {'Content-Type': 'application/json'});
+        res.end(JSON.stringify({error: error.message}));
       }
       return;
     }
 
     // Chat endpoint
-    if (req.url === "/api/chat" && req.method === "POST") {
+    if (req.url === '/api/chat' && req.method === 'POST') {
       if (!(await authenticateRequest(req, res))) return;
       try {
         const body = await parseBody(req);
-        console.log("[API Server] Chat request received");
+        console.log('[API Server] Chat request received');
 
         // LOG: Client → Server chat request
-        logMessage("CLIENT_TO_SERVER", "/api/chat", {
-          description: "Browser client sending chat message to Gemini",
+        logMessage('CLIENT_TO_SERVER', '/api/chat', {
+          description: 'Browser client sending chat message to Gemini',
           userMessage: body.userMessage,
-          intentGuidance: body.intentGuidance?.substring(0, 100) + "...",
+          intentGuidance: body.intentGuidance?.substring(0, 100) + '...',
           conversationLength: body.messages?.length || 0,
         });
 
         const result = await handleChatRequest(body);
 
         // LOG: Server → Client chat response
-        logMessage("SERVER_TO_CLIENT", "/api/chat", {
-          description: "Gemini response text (conversational layer)",
+        logMessage('SERVER_TO_CLIENT', '/api/chat', {
+          description: 'Gemini response text (conversational layer)',
           responseText: result.text,
         });
 
-        res.writeHead(200, { "Content-Type": "application/json" });
+        res.writeHead(200, {'Content-Type': 'application/json'});
         res.end(JSON.stringify(result));
       } catch (error: any) {
-        console.error("[API Server] Error:", error);
-        res.writeHead(500, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ error: error.message }));
+        console.error('[API Server] Error:', error);
+        res.writeHead(500, {'Content-Type': 'application/json'});
+        res.end(JSON.stringify({error: error.message}));
       }
       return;
     }
 
     // Combined chat endpoint - performs intent detection AND response in one LLM call
-    if (req.url === "/api/chat-with-intent" && req.method === "POST") {
+    if (req.url === '/api/chat-with-intent' && req.method === 'POST') {
       if (!(await authenticateRequest(req, res))) return;
       try {
         const body = await parseBody(req);
-        console.log("[API Server] ========================================");
-        console.log("[API Server] COMBINED CHAT REQUEST RECEIVED");
-        console.log("[API Server] User message:", body.userMessage);
-        console.log("[API Server] Conversation history length:", body.messages?.length || 0);
-        console.log("[API Server] ========================================");
+        console.log('[API Server] ========================================');
+        console.log('[API Server] COMBINED CHAT REQUEST RECEIVED');
+        console.log('[API Server] User message:', body.userMessage);
+        console.log('[API Server] Conversation history length:', body.messages?.length || 0);
+        console.log('[API Server] ========================================');
 
         // LOG: Client → Server combined request
-        logMessage("CLIENT_TO_SERVER", "/api/chat-with-intent", {
-          description: "Browser client requesting combined intent+response (latency optimization)",
+        logMessage('CLIENT_TO_SERVER', '/api/chat-with-intent', {
+          description: 'Browser client requesting combined intent+response (latency optimization)',
           userMessage: body.userMessage,
           recentContext: body.recentContext,
           conversationLength: body.messages?.length || 0,
@@ -998,52 +1051,52 @@ async function main() {
 
         const result = await handleCombinedChatRequest(body);
 
-        console.log("[API Server] ========================================");
-        console.log("[API Server] GEMINI COMBINED RESPONSE:");
-        console.log("[API Server] Intent:", result.intent);
-        console.log("[API Server] Keywords:", result.keywords || "(none - not a content intent)");
-        console.log("[API Server] Text:", result.text.substring(0, 200));
-        console.log("[API Server] ========================================");
+        console.log('[API Server] ========================================');
+        console.log('[API Server] GEMINI COMBINED RESPONSE:');
+        console.log('[API Server] Intent:', result.intent);
+        console.log('[API Server] Keywords:', result.keywords || '(none - not a content intent)');
+        console.log('[API Server] Text:', result.text.substring(0, 200));
+        console.log('[API Server] ========================================');
 
         // LOG: Server → Client combined response
-        logMessage("SERVER_TO_CLIENT", "/api/chat-with-intent", {
-          description: "Combined intent detection and response in single LLM call",
+        logMessage('SERVER_TO_CLIENT', '/api/chat-with-intent', {
+          description: 'Combined intent detection and response in single LLM call',
           intent: result.intent,
           keywords: result.keywords,
           responseText: result.text,
         });
 
-        res.writeHead(200, { "Content-Type": "application/json" });
+        res.writeHead(200, {'Content-Type': 'application/json'});
         res.end(JSON.stringify(result));
       } catch (error: any) {
-        console.error("[API Server] Combined chat error:", error);
-        res.writeHead(500, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ error: error.message }));
+        console.error('[API Server] Combined chat error:', error);
+        res.writeHead(500, {'Content-Type': 'application/json'});
+        res.end(JSON.stringify({error: error.message}));
       }
       return;
     }
 
     // Static file serving for frontend
     const MIME_TYPES: Record<string, string> = {
-      ".html": "text/html",
-      ".js": "application/javascript",
-      ".css": "text/css",
-      ".json": "application/json",
-      ".png": "image/png",
-      ".jpg": "image/jpeg",
-      ".svg": "image/svg+xml",
-      ".ico": "image/x-icon",
+      '.html': 'text/html',
+      '.js': 'application/javascript',
+      '.css': 'text/css',
+      '.json': 'application/json',
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
     };
 
     // Serve static files (Vite builds to dist/, but index.html is in root for dev)
-    if (req.method === "GET") {
-      let filePath = req.url === "/" ? "/index.html" : req.url || "/index.html";
+    if (req.method === 'GET') {
+      let filePath = req.url === '/' ? '/index.html' : req.url || '/index.html';
 
       // Remove query string
-      filePath = filePath.split("?")[0];
+      filePath = filePath.split('?')[0];
 
       // Try dist/ first (production build), then root (development)
-      const distPath = join(process.cwd(), "dist", filePath);
+      const distPath = join(process.cwd(), 'dist', filePath);
       const rootPath = join(process.cwd(), filePath);
 
       const fullPath = existsSync(distPath) ? distPath : rootPath;
@@ -1051,10 +1104,10 @@ async function main() {
       if (existsSync(fullPath)) {
         try {
           const content = readFileSync(fullPath);
-          const ext = filePath.substring(filePath.lastIndexOf("."));
-          const contentType = MIME_TYPES[ext] || "application/octet-stream";
+          const ext = filePath.substring(filePath.lastIndexOf('.'));
+          const contentType = MIME_TYPES[ext] || 'application/octet-stream';
 
-          res.writeHead(200, { "Content-Type": contentType });
+          res.writeHead(200, {'Content-Type': contentType});
           res.end(content);
           return;
         } catch (err) {
@@ -1064,8 +1117,8 @@ async function main() {
     }
 
     // 404 for other routes
-    res.writeHead(404, { "Content-Type": "application/json" });
-    res.end(JSON.stringify({ error: "Not found" }));
+    res.writeHead(404, {'Content-Type': 'application/json'});
+    res.end(JSON.stringify({error: 'Not found'}));
   });
 
   server.listen(PORT, () => {
diff --git a/samples/client/lit/personalized_learning/index.html b/samples/client/lit/personalized_learning/index.html
index b755d80ba..d80bc4327 100644
--- a/samples/client/lit/personalized_learning/index.html
+++ b/samples/client/lit/personalized_learning/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -55,7 +55,12 @@
       }
 
       body {
-        font-family: "Google Sans Text", "Google Sans", -apple-system, BlinkMacSystemFont, sans-serif;
+        font-family:
+          'Google Sans Text',
+          'Google Sans',
+          -apple-system,
+          BlinkMacSystemFont,
+          sans-serif;
         background: var(--main-bg);
         color: var(--text-primary);
         height: 100vh;
@@ -440,7 +445,7 @@
 
       .message-text br {
         display: block;
-        content: "";
+        content: '';
         margin-top: 4px;
       }
 
@@ -727,7 +732,11 @@
       .a2ui-badge-icon {
         display: inline-block;
         padding: 3px 8px;
-        background: linear-gradient(135deg, rgba(197, 138, 249, 0.2) 0%, rgba(138, 180, 248, 0.2) 100%);
+        background: linear-gradient(
+          135deg,
+          rgba(197, 138, 249, 0.2) 0%,
+          rgba(138, 180, 248, 0.2) 100%
+        );
         border: 1px solid rgba(197, 138, 249, 0.4);
         border-radius: 4px;
         font-size: 10px;
@@ -848,7 +857,9 @@
         font-weight: 500;
         color: #1f1f1f;
         cursor: pointer;
-        transition: background 0.2s, box-shadow 0.2s;
+        transition:
+          background 0.2s,
+          box-shadow 0.2s;
         font-family: inherit;
       }
 
@@ -887,7 +898,7 @@
     </style>
   </head>
   <body>
-    <div class="app-container" id="app-container" style="display: none;">
+    <div class="app-container" id="app-container" style="display: none">
       <!-- Sidebar -->
       <aside class="sidebar">
         <div class="sidebar-header">
@@ -1004,14 +1015,18 @@
             </div>
             <h1 class="welcome-title">Hello, Maria</h1>
             <p class="welcome-subtitle">
-              Personalized learning chat: Bite-sized smart study tools right in the chat, based on your specific learning journey
+              Personalized learning chat: Bite-sized smart study tools right in the chat, based on
+              your specific learning journey
             </p>
             <div class="suggestion-chips">
               <div class="suggestion-chip" data-prompt="Help me understand why ATP releases energy">
                 <span class="material-symbols-outlined">lightbulb</span>
                 <span>ATP energy concepts</span>
               </div>
-              <div class="suggestion-chip" data-prompt="Create flashcards for bond energy misconceptions">
+              <div
+                class="suggestion-chip"
+                data-prompt="Create flashcards for bond energy misconceptions"
+              >
                 <span class="material-symbols-outlined">style</span>
                 <span>Bond energy flashcards</span>
               </div>
@@ -1049,7 +1064,10 @@ <h1 class="welcome-title">Hello, Maria</h1>
               </button>
             </div>
             <div class="input-footer">
-              <span>Gemini may display inaccurate info, including about people, so double-check its responses.</span>
+              <span
+                >Gemini may display inaccurate info, including about people, so double-check its
+                responses.</span
+              >
             </div>
           </div>
         </div>
diff --git a/samples/client/lit/personalized_learning/public/404.html b/samples/client/lit/personalized_learning/public/404.html
index 6b3db2d76..6706aa502 100644
--- a/samples/client/lit/personalized_learning/public/404.html
+++ b/samples/client/lit/personalized_learning/public/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,36 +16,39 @@
 -->
 
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>Page Not Found</title>
-  <style>
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      margin: 0;
-      background: #f5f5f5;
-    }
-    .container {
-      text-align: center;
-      padding: 2rem;
-    }
-    h1 {
-      color: #333;
-      margin-bottom: 0.5rem;
-    }
-    p {
-      color: #666;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>404</h1>
-    <p>Page not found</p>
-  </div>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Page Not Found</title>
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background: #f5f5f5;
+      }
+      .container {
+        text-align: center;
+        padding: 2rem;
+      }
+      h1 {
+        color: #333;
+        margin-bottom: 0.5rem;
+      }
+      p {
+        color: #666;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>404</h1>
+      <p>Page not found</p>
+    </div>
+  </body>
 </html>
diff --git a/samples/client/lit/personalized_learning/public/assets/openstax-bio-glossary.md b/samples/client/lit/personalized_learning/public/assets/openstax-bio-glossary.md
index dc3ba0ac8..718e8b200 100644
--- a/samples/client/lit/personalized_learning/public/assets/openstax-bio-glossary.md
+++ b/samples/client/lit/personalized_learning/public/assets/openstax-bio-glossary.md
@@ -5,9 +5,9 @@
 **5' UTR** [16.5 Eukaryotic Post-transcriptional Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-5-eukaryotic-post-transcriptional-gene-regulation#term-00005)  
 **60S ribosomal subunit** [16.6 Eukaryotic Translational and Post-translational Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-6-eukaryotic-translational-and-post-translational-gene-regulation#term-00006)  
 **7-methylguanosine cap** [15.4 RNA Processing in Eukaryotes](https://openstax.org/books/biology-ap-courses/pages/15-4-rna-processing-in-eukaryotes#term-00002)  
-***α*****\-helix** [3.4 Proteins](https://openstax.org/books/biology-ap-courses/pages/3-4-proteins#term-00009)  
-***β*****\-pleated sheet** [3.4 Proteins](https://openstax.org/books/biology-ap-courses/pages/3-4-proteins#term-00010)  
-**A**  
+**\*α\*\*\***\-helix** [3.4 Proteins](https://openstax.org/books/biology-ap-courses/pages/3-4-proteins#term-00009)  
+\***β**\***\-pleated sheet** [3.4 Proteins](https://openstax.org/books/biology-ap-courses/pages/3-4-proteins#term-00010)  
+**A\**  
 **absorption spectrum** [8.2 The Light-Dependent Reaction of Photosynthesis](https://openstax.org/books/biology-ap-courses/pages/8-2-the-light-dependent-reaction-of-photosynthesis#term-00006)  
 **abstract** [1.1 The Science of Biology](https://openstax.org/books/biology-ap-courses/pages/1-1-the-science-of-biology#term-00020)  
 **acetyl CoA** [7.3 Oxidation of Pyruvate and the Citric Acid Cycle](https://openstax.org/books/biology-ap-courses/pages/7-3-oxidation-of-pyruvate-and-the-citric-acid-cycle#term-00001)  
@@ -107,8 +107,8 @@
 **chiasmata** [11.1 The Process of Meiosis](https://openstax.org/books/biology-ap-courses/pages/11-1-the-process-of-meiosis#term-00009)  
 **chitin** [3.2 Carbohydrates](https://openstax.org/books/biology-ap-courses/pages/3-2-carbohydrates#term-00009)  
 **chlorophyll** [4.3 Eukaryotic Cells](https://openstax.org/books/biology-ap-courses/pages/4-3-eukaryotic-cells#term-00021)  
-**Chlorophyll *a*** [8.2 The Light-Dependent Reaction of Photosynthesis](https://openstax.org/books/biology-ap-courses/pages/8-2-the-light-dependent-reaction-of-photosynthesis#term-00003)  
-**chlorophyll *b*** [8.2 The Light-Dependent Reaction of Photosynthesis](https://openstax.org/books/biology-ap-courses/pages/8-2-the-light-dependent-reaction-of-photosynthesis#term-00004)  
+\*\*Chlorophyll *a**\* [8.2 The Light-Dependent Reaction of Photosynthesis](https://openstax.org/books/biology-ap-courses/pages/8-2-the-light-dependent-reaction-of-photosynthesis#term-00003)  
+**chlorophyll \*b**\* [8.2 The Light-Dependent Reaction of Photosynthesis](https://openstax.org/books/biology-ap-courses/pages/8-2-the-light-dependent-reaction-of-photosynthesis#term-00004)  
 **chloroplast** [8.1 Overview of Photosynthesis](https://openstax.org/books/biology-ap-courses/pages/8-1-overview-of-photosynthesis#term-00006)  
 **Chloroplasts** [4.3 Eukaryotic Cells](https://openstax.org/books/biology-ap-courses/pages/4-3-eukaryotic-cells#term-00020)  
 **chromatids** [10.1 Cell Division](https://openstax.org/books/biology-ap-courses/pages/10-1-cell-division#term-00011)  
@@ -117,7 +117,7 @@
 **chromosome inversion** [13.2 Chromosomal Basis of Inherited Disorders](https://openstax.org/books/biology-ap-courses/pages/13-2-chromosomal-basis-of-inherited-disorders#term-00012)  
 **Chromosomes** [4.3 Eukaryotic Cells](https://openstax.org/books/biology-ap-courses/pages/4-3-eukaryotic-cells#term-00009), [10.1 Cell Division](https://openstax.org/books/biology-ap-courses/pages/10-1-cell-division#term-00006)  
 **cilia** [4.5 Cytoskeleton](https://openstax.org/books/biology-ap-courses/pages/4-5-cytoskeleton#term-00006)  
-***cis*****\-acting element** [16.4 Eukaryotic Transcriptional Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-4-eukaryotic-transcriptional-gene-regulation#term-00001)  
+\***cis**\***\-acting element** [16.4 Eukaryotic Transcriptional Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-4-eukaryotic-transcriptional-gene-regulation#term-00001)  
 **citric acid cycle** [7.3 Oxidation of Pyruvate and the Citric Acid Cycle](https://openstax.org/books/biology-ap-courses/pages/7-3-oxidation-of-pyruvate-and-the-citric-acid-cycle#term-00002)  
 **clathrin** [5.4 Bulk Transport](https://openstax.org/books/biology-ap-courses/pages/5-4-bulk-transport#term-00002)  
 **cleavage furrow** [10.2 The Cell Cycle](https://openstax.org/books/biology-ap-courses/pages/10-2-the-cell-cycle#term-00020)  
@@ -153,7 +153,7 @@
 **cytoplasm** [4.3 Eukaryotic Cells](https://openstax.org/books/biology-ap-courses/pages/4-3-eukaryotic-cells#term-00004)  
 **cytoskeleton** [4.5 Cytoskeleton](https://openstax.org/books/biology-ap-courses/pages/4-5-cytoskeleton#term-00001)  
 **cytosol** [4.3 Eukaryotic Cells](https://openstax.org/books/biology-ap-courses/pages/4-3-eukaryotic-cells#term-00005)  
-**D**  
+**D\*\*  
 **Deductive reasoning** [1.1 The Science of Biology](https://openstax.org/books/biology-ap-courses/pages/1-1-the-science-of-biology#term-00002)  
 **degenerate** [15.1 The Genetic Code](https://openstax.org/books/biology-ap-courses/pages/15-1-the-genetic-code#term-00003)  
 **dehydration synthesis** [3.1 Synthesis of Biological Macromolecules](https://openstax.org/books/biology-ap-courses/pages/3-1-synthesis-of-biological-macromolecules#term-00004)  
@@ -368,7 +368,7 @@
 **Kozak’s rules** [15.5 Ribosomes and Protein Synthesis](https://openstax.org/books/biology-ap-courses/pages/15-5-ribosomes-and-protein-synthesis#term-00006)  
 **Krebs cycle** [7.3 Oxidation of Pyruvate and the Citric Acid Cycle](https://openstax.org/books/biology-ap-courses/pages/7-3-oxidation-of-pyruvate-and-the-citric-acid-cycle#term-00004)  
 **L**  
-***lac*** **operon** [16.2 Prokaryotic Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-2-prokaryotic-gene-regulation#term-00012)  
+**_lac_** **operon** [16.2 Prokaryotic Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-2-prokaryotic-gene-regulation#term-00012)  
 **lagging strand** [14.4 DNA Replication in Prokaryotes](https://openstax.org/books/biology-ap-courses/pages/14-4-dna-replication-in-prokaryotes#term-00008)  
 **law of dominance** [12.3 Laws of Inheritance](https://openstax.org/books/biology-ap-courses/pages/12-3-laws-of-inheritance#term-00001)  
 **law of independent assortment** [12.3 Laws of Inheritance](https://openstax.org/books/biology-ap-courses/pages/12-3-laws-of-inheritance#term-00003)  
@@ -709,7 +709,7 @@
 **triglycerides** [3.3 Lipids](https://openstax.org/books/biology-ap-courses/pages/3-3-lipids#term-00003)  
 **trisomy** [13.2 Chromosomal Basis of Inherited Disorders](https://openstax.org/books/biology-ap-courses/pages/13-2-chromosomal-basis-of-inherited-disorders#term-00009)  
 **Tryptophan** [16.2 Prokaryotic Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-2-prokaryotic-gene-regulation#term-00004)  
-**tryptophan (*trp*) operon** [16.2 Prokaryotic Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-2-prokaryotic-gene-regulation#term-00005)  
+**tryptophan (_trp_) operon** [16.2 Prokaryotic Gene Regulation](https://openstax.org/books/biology-ap-courses/pages/16-2-prokaryotic-gene-regulation#term-00005)  
 **Tumor suppressor genes** [10.4 Cancer and the Cell Cycle](https://openstax.org/books/biology-ap-courses/pages/10-4-cancer-and-the-cell-cycle#term-00003)  
 **U**  
 **ubiquinone** [7.4 Oxidative Phosphorylation](https://openstax.org/books/biology-ap-courses/pages/7-4-oxidative-phosphorylation#term-00002)  
@@ -734,4 +734,4 @@
 **X inactivation** [13.2 Chromosomal Basis of Inherited Disorders](https://openstax.org/books/biology-ap-courses/pages/13-2-chromosomal-basis-of-inherited-disorders#term-00011)  
 **X-linked** [12.2 Characteristics and Traits](https://openstax.org/books/biology-ap-courses/pages/12-2-characteristics-and-traits#term-00015)  
 **Z**  
-**Zoology** [1.2 Themes and Concepts of Biology](https://openstax.org/books/biology-ap-courses/pages/1-2-themes-and-concepts-of-biology#term-00024)  
\ No newline at end of file
+**Zoology** [1.2 Themes and Concepts of Biology](https://openstax.org/books/biology-ap-courses/pages/1-2-themes-and-concepts-of-biology#term-00024)
diff --git a/samples/client/lit/personalized_learning/public/maria-context.html b/samples/client/lit/personalized_learning/public/maria-context.html
index 85dda34cf..7a13a3c6d 100644
--- a/samples/client/lit/personalized_learning/public/maria-context.html
+++ b/samples/client/lit/personalized_learning/public/maria-context.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,468 +16,480 @@
 -->
 
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Learner Profile: Maria Thompson</title>
-    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
+      rel="stylesheet"
+    />
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Google Sans', 'Roboto', sans-serif;
-            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-            min-height: 100vh;
-            color: #e2e8f0;
-            padding: 40px;
-        }
-
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        .header {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            margin-bottom: 32px;
-            padding-bottom: 24px;
-            border-bottom: 1px solid rgba(255,255,255,0.1);
-        }
-
-        .header-icon {
-            width: 48px;
-            height: 48px;
-            background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .header-icon .material-symbols-outlined {
-            font-size: 28px;
-            color: white;
-        }
-
-        .header-text h1 {
-            font-size: 24px;
-            font-weight: 500;
-            color: #f8fafc;
-            margin-bottom: 4px;
-        }
-
-        .header-text p {
-            font-size: 14px;
-            color: #94a3b8;
-            font-family: 'Roboto Mono', monospace;
-        }
-
-        .profile-card {
-            background: rgba(255,255,255,0.05);
-            border: 1px solid rgba(255,255,255,0.1);
-            border-radius: 16px;
-            padding: 32px;
-            margin-bottom: 24px;
-        }
-
-        .profile-header {
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            margin-bottom: 24px;
-        }
-
-        .avatar {
-            width: 72px;
-            height: 72px;
-            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 28px;
-            font-weight: 600;
-            color: white;
-        }
-
-        .profile-info h2 {
-            font-size: 28px;
-            font-weight: 600;
-            color: #f8fafc;
-            margin-bottom: 4px;
-        }
-
-        .profile-info p {
-            font-size: 16px;
-            color: #94a3b8;
-        }
-
-        .tags {
-            display: flex;
-            gap: 8px;
-            margin-top: 12px;
-            flex-wrap: wrap;
-        }
-
-        .tag {
-            padding: 6px 12px;
-            background: rgba(59, 130, 246, 0.2);
-            border: 1px solid rgba(59, 130, 246, 0.3);
-            border-radius: 20px;
-            font-size: 13px;
-            color: #93c5fd;
-        }
-
-        .tag.green {
-            background: rgba(34, 197, 94, 0.2);
-            border-color: rgba(34, 197, 94, 0.3);
-            color: #86efac;
-        }
-
-        .tag.amber {
-            background: rgba(245, 158, 11, 0.2);
-            border-color: rgba(245, 158, 11, 0.3);
-            color: #fcd34d;
-        }
-
-        .section {
-            margin-bottom: 24px;
-        }
-
-        .section-title {
-            font-size: 12px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            color: #64748b;
-            margin-bottom: 12px;
-        }
-
-        .misconception-card {
-            background: rgba(239, 68, 68, 0.1);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            border-radius: 12px;
-            padding: 20px;
-            margin-bottom: 16px;
-        }
-
-        .misconception-header {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 12px;
-        }
-
-        .misconception-icon {
-            width: 36px;
-            height: 36px;
-            background: rgba(239, 68, 68, 0.2);
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .misconception-icon .material-symbols-outlined {
-            font-size: 20px;
-            color: #fca5a5;
-        }
-
-        .misconception-title {
-            font-size: 16px;
-            font-weight: 600;
-            color: #fca5a5;
-        }
-
-        .misconception-content {
-            padding-left: 48px;
-        }
-
-        .misconception-belief {
-            background: rgba(0,0,0,0.2);
-            border-radius: 8px;
-            padding: 12px 16px;
-            margin-bottom: 12px;
-            font-style: italic;
-            color: #f87171;
-        }
-
-        .misconception-belief::before {
-            content: '"';
-            font-size: 24px;
-            opacity: 0.5;
-        }
-
-        .misconception-belief::after {
-            content: '"';
-            font-size: 24px;
-            opacity: 0.5;
-        }
-
-        .correction {
-            display: flex;
-            align-items: flex-start;
-            gap: 8px;
-            color: #86efac;
-            font-size: 14px;
-        }
-
-        .correction .material-symbols-outlined {
-            font-size: 18px;
-            margin-top: 2px;
-        }
-
-        .learning-style {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-        }
-
-        .style-item {
-            background: rgba(255,255,255,0.05);
-            border-radius: 12px;
-            padding: 16px;
-        }
-
-        .style-item h4 {
-            font-size: 14px;
-            font-weight: 500;
-            color: #94a3b8;
-            margin-bottom: 8px;
-        }
-
-        .style-item p {
-            font-size: 16px;
-            color: #f8fafc;
-        }
-
-        .proficiency-bar {
-            margin-top: 24px;
-        }
-
-        .proficiency-item {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            margin-bottom: 12px;
-        }
-
-        .proficiency-label {
-            width: 120px;
-            font-size: 14px;
-            color: #94a3b8;
-        }
-
-        .proficiency-track {
-            flex: 1;
-            height: 8px;
-            background: rgba(255,255,255,0.1);
-            border-radius: 4px;
-            overflow: hidden;
-        }
-
-        .proficiency-fill {
-            height: 100%;
-            border-radius: 4px;
-            transition: width 1s ease;
-        }
-
-        .proficiency-fill.high {
-            background: linear-gradient(90deg, #22c55e, #4ade80);
-        }
-
-        .proficiency-fill.medium {
-            background: linear-gradient(90deg, #f59e0b, #fbbf24);
-        }
-
-        .proficiency-fill.low {
-            background: linear-gradient(90deg, #ef4444, #f87171);
-        }
-
-        .proficiency-value {
-            width: 48px;
-            text-align: right;
-            font-size: 14px;
-            font-weight: 600;
-            color: #f8fafc;
-        }
-
-        .footer {
-            margin-top: 32px;
-            padding-top: 24px;
-            border-top: 1px solid rgba(255,255,255,0.1);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .footer-left {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .footer-logo {
-            width: 32px;
-            height: 32px;
-            background: rgba(139, 92, 246, 0.2);
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .footer-logo .material-symbols-outlined {
-            font-size: 20px;
-            color: #a78bfa;
-        }
-
-        .footer-text {
-            font-size: 13px;
-            color: #64748b;
-        }
-
-        .footer-text strong {
-            color: #a78bfa;
-        }
-
-        .data-source {
-            font-size: 12px;
-            font-family: 'Roboto Mono', monospace;
-            color: #475569;
-            background: rgba(0,0,0,0.2);
-            padding: 6px 12px;
-            border-radius: 6px;
-        }
-
-        /* Subtle animation for the misconception card */
-        @keyframes pulse-border {
-            0%, 100% { border-color: rgba(239, 68, 68, 0.3); }
-            50% { border-color: rgba(239, 68, 68, 0.5); }
-        }
-
-        .misconception-card {
-            animation: pulse-border 3s ease-in-out infinite;
-        }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: 'Google Sans', 'Roboto', sans-serif;
+        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+        min-height: 100vh;
+        color: #e2e8f0;
+        padding: 40px;
+      }
+
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 32px;
+        padding-bottom: 24px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      }
+
+      .header-icon {
+        width: 48px;
+        height: 48px;
+        background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .header-icon .material-symbols-outlined {
+        font-size: 28px;
+        color: white;
+      }
+
+      .header-text h1 {
+        font-size: 24px;
+        font-weight: 500;
+        color: #f8fafc;
+        margin-bottom: 4px;
+      }
+
+      .header-text p {
+        font-size: 14px;
+        color: #94a3b8;
+        font-family: 'Roboto Mono', monospace;
+      }
+
+      .profile-card {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 16px;
+        padding: 32px;
+        margin-bottom: 24px;
+      }
+
+      .profile-header {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 24px;
+      }
+
+      .avatar {
+        width: 72px;
+        height: 72px;
+        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+        font-weight: 600;
+        color: white;
+      }
+
+      .profile-info h2 {
+        font-size: 28px;
+        font-weight: 600;
+        color: #f8fafc;
+        margin-bottom: 4px;
+      }
+
+      .profile-info p {
+        font-size: 16px;
+        color: #94a3b8;
+      }
+
+      .tags {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        flex-wrap: wrap;
+      }
+
+      .tag {
+        padding: 6px 12px;
+        background: rgba(59, 130, 246, 0.2);
+        border: 1px solid rgba(59, 130, 246, 0.3);
+        border-radius: 20px;
+        font-size: 13px;
+        color: #93c5fd;
+      }
+
+      .tag.green {
+        background: rgba(34, 197, 94, 0.2);
+        border-color: rgba(34, 197, 94, 0.3);
+        color: #86efac;
+      }
+
+      .tag.amber {
+        background: rgba(245, 158, 11, 0.2);
+        border-color: rgba(245, 158, 11, 0.3);
+        color: #fcd34d;
+      }
+
+      .section {
+        margin-bottom: 24px;
+      }
+
+      .section-title {
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: #64748b;
+        margin-bottom: 12px;
+      }
+
+      .misconception-card {
+        background: rgba(239, 68, 68, 0.1);
+        border: 1px solid rgba(239, 68, 68, 0.3);
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 16px;
+      }
+
+      .misconception-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+      }
+
+      .misconception-icon {
+        width: 36px;
+        height: 36px;
+        background: rgba(239, 68, 68, 0.2);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .misconception-icon .material-symbols-outlined {
+        font-size: 20px;
+        color: #fca5a5;
+      }
+
+      .misconception-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #fca5a5;
+      }
+
+      .misconception-content {
+        padding-left: 48px;
+      }
+
+      .misconception-belief {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 8px;
+        padding: 12px 16px;
+        margin-bottom: 12px;
+        font-style: italic;
+        color: #f87171;
+      }
+
+      .misconception-belief::before {
+        content: '"';
+        font-size: 24px;
+        opacity: 0.5;
+      }
+
+      .misconception-belief::after {
+        content: '"';
+        font-size: 24px;
+        opacity: 0.5;
+      }
+
+      .correction {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        color: #86efac;
+        font-size: 14px;
+      }
+
+      .correction .material-symbols-outlined {
+        font-size: 18px;
+        margin-top: 2px;
+      }
+
+      .learning-style {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+      }
+
+      .style-item {
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 12px;
+        padding: 16px;
+      }
+
+      .style-item h4 {
+        font-size: 14px;
+        font-weight: 500;
+        color: #94a3b8;
+        margin-bottom: 8px;
+      }
+
+      .style-item p {
+        font-size: 16px;
+        color: #f8fafc;
+      }
+
+      .proficiency-bar {
+        margin-top: 24px;
+      }
+
+      .proficiency-item {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 12px;
+      }
+
+      .proficiency-label {
+        width: 120px;
+        font-size: 14px;
+        color: #94a3b8;
+      }
+
+      .proficiency-track {
+        flex: 1;
+        height: 8px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .proficiency-fill {
+        height: 100%;
+        border-radius: 4px;
+        transition: width 1s ease;
+      }
+
+      .proficiency-fill.high {
+        background: linear-gradient(90deg, #22c55e, #4ade80);
+      }
+
+      .proficiency-fill.medium {
+        background: linear-gradient(90deg, #f59e0b, #fbbf24);
+      }
+
+      .proficiency-fill.low {
+        background: linear-gradient(90deg, #ef4444, #f87171);
+      }
+
+      .proficiency-value {
+        width: 48px;
+        text-align: right;
+        font-size: 14px;
+        font-weight: 600;
+        color: #f8fafc;
+      }
+
+      .footer {
+        margin-top: 32px;
+        padding-top: 24px;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .footer-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .footer-logo {
+        width: 32px;
+        height: 32px;
+        background: rgba(139, 92, 246, 0.2);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .footer-logo .material-symbols-outlined {
+        font-size: 20px;
+        color: #a78bfa;
+      }
+
+      .footer-text {
+        font-size: 13px;
+        color: #64748b;
+      }
+
+      .footer-text strong {
+        color: #a78bfa;
+      }
+
+      .data-source {
+        font-size: 12px;
+        font-family: 'Roboto Mono', monospace;
+        color: #475569;
+        background: rgba(0, 0, 0, 0.2);
+        padding: 6px 12px;
+        border-radius: 6px;
+      }
+
+      /* Subtle animation for the misconception card */
+      @keyframes pulse-border {
+        0%,
+        100% {
+          border-color: rgba(239, 68, 68, 0.3);
+        }
+        50% {
+          border-color: rgba(239, 68, 68, 0.5);
+        }
+      }
+
+      .misconception-card {
+        animation: pulse-border 3s ease-in-out infinite;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="container">
-        <div class="header">
-            <div class="header-icon">
-                <span class="material-symbols-outlined">psychology</span>
-            </div>
-            <div class="header-text">
-                <h1>Learner Context Profile</h1>
-                <p>session_id: mcat-prep-2025-maria</p>
+      <div class="header">
+        <div class="header-icon">
+          <span class="material-symbols-outlined">psychology</span>
+        </div>
+        <div class="header-text">
+          <h1>Learner Context Profile</h1>
+          <p>session_id: mcat-prep-2025-maria</p>
+        </div>
+      </div>
+
+      <div class="profile-card">
+        <div class="profile-header">
+          <div class="avatar">MT</div>
+          <div class="profile-info">
+            <h2>Maria Thompson</h2>
+            <p>Pre-Med Student, Cymbal University</p>
+            <div class="tags">
+              <span class="tag">MCAT Prep</span>
+              <span class="tag green">AP Biology: 92%</span>
+              <span class="tag amber">AP Chemistry: Struggling</span>
             </div>
+          </div>
         </div>
 
-        <div class="profile-card">
-            <div class="profile-header">
-                <div class="avatar">MT</div>
-                <div class="profile-info">
-                    <h2>Maria Thompson</h2>
-                    <p>Pre-Med Student, Cymbal University</p>
-                    <div class="tags">
-                        <span class="tag">MCAT Prep</span>
-                        <span class="tag green">AP Biology: 92%</span>
-                        <span class="tag amber">AP Chemistry: Struggling</span>
-                    </div>
-                </div>
+        <div class="section">
+          <div class="section-title">Identified Misconception</div>
+          <div class="misconception-card">
+            <div class="misconception-header">
+              <div class="misconception-icon">
+                <span class="material-symbols-outlined">warning</span>
+              </div>
+              <div class="misconception-title">ATP & Bond Energy</div>
             </div>
-
-            <div class="section">
-                <div class="section-title">Identified Misconception</div>
-                <div class="misconception-card">
-                    <div class="misconception-header">
-                        <div class="misconception-icon">
-                            <span class="material-symbols-outlined">warning</span>
-                        </div>
-                        <div class="misconception-title">ATP & Bond Energy</div>
-                    </div>
-                    <div class="misconception-content">
-                        <div class="misconception-belief">
-                            Energy is stored in ATP bonds like a battery. When we break the phosphate bonds, that stored energy is released.
-                        </div>
-                        <div class="correction">
-                            <span class="material-symbols-outlined">check_circle</span>
-                            <span><strong>Correct understanding:</strong> ATP releases energy because the products (ADP + Pi) are more thermodynamically stable, not because energy was "stored" in the bonds.</span>
-                        </div>
-                    </div>
-                </div>
+            <div class="misconception-content">
+              <div class="misconception-belief">
+                Energy is stored in ATP bonds like a battery. When we break the phosphate bonds,
+                that stored energy is released.
+              </div>
+              <div class="correction">
+                <span class="material-symbols-outlined">check_circle</span>
+                <span
+                  ><strong>Correct understanding:</strong> ATP releases energy because the products
+                  (ADP + Pi) are more thermodynamically stable, not because energy was "stored" in
+                  the bonds.</span
+                >
+              </div>
             </div>
+          </div>
+        </div>
 
-            <div class="section">
-                <div class="section-title">Learning Preferences</div>
-                <div class="learning-style">
-                    <div class="style-item">
-                        <h4>Learning Style</h4>
-                        <p>Visual-Kinesthetic</p>
-                    </div>
-                    <div class="style-item">
-                        <h4>Preferred Analogies</h4>
-                        <p>Sports & Gym</p>
-                    </div>
-                    <div class="style-item">
-                        <h4>Study Mode</h4>
-                        <p>Active recall, spaced repetition</p>
-                    </div>
-                    <div class="style-item">
-                        <h4>Best Time</h4>
-                        <p>Morning sessions</p>
-                    </div>
-                </div>
+        <div class="section">
+          <div class="section-title">Learning Preferences</div>
+          <div class="learning-style">
+            <div class="style-item">
+              <h4>Learning Style</h4>
+              <p>Visual-Kinesthetic</p>
             </div>
-
-            <div class="section">
-                <div class="section-title">Subject Proficiency</div>
-                <div class="proficiency-bar">
-                    <div class="proficiency-item">
-                        <span class="proficiency-label">AP Biology</span>
-                        <div class="proficiency-track">
-                            <div class="proficiency-fill high" style="width: 92%"></div>
-                        </div>
-                        <span class="proficiency-value">92%</span>
-                    </div>
-                    <div class="proficiency-item">
-                        <span class="proficiency-label">AP Chemistry</span>
-                        <div class="proficiency-track">
-                            <div class="proficiency-fill medium" style="width: 68%"></div>
-                        </div>
-                        <span class="proficiency-value">68%</span>
-                    </div>
-                    <div class="proficiency-item">
-                        <span class="proficiency-label">AP Physics</span>
-                        <div class="proficiency-track">
-                            <div class="proficiency-fill high" style="width: 85%"></div>
-                        </div>
-                        <span class="proficiency-value">85%</span>
-                    </div>
-                </div>
+            <div class="style-item">
+              <h4>Preferred Analogies</h4>
+              <p>Sports & Gym</p>
+            </div>
+            <div class="style-item">
+              <h4>Study Mode</h4>
+              <p>Active recall, spaced repetition</p>
             </div>
+            <div class="style-item">
+              <h4>Best Time</h4>
+              <p>Morning sessions</p>
+            </div>
+          </div>
         </div>
 
-        <div class="footer">
-            <div class="footer-left">
-                <div class="footer-logo">
-                    <span class="material-symbols-outlined">hub</span>
-                </div>
-                <div class="footer-text">
-                    Generated by <strong>Personalization Pipeline</strong>
-                </div>
+        <div class="section">
+          <div class="section-title">Subject Proficiency</div>
+          <div class="proficiency-bar">
+            <div class="proficiency-item">
+              <span class="proficiency-label">AP Biology</span>
+              <div class="proficiency-track">
+                <div class="proficiency-fill high" style="width: 92%"></div>
+              </div>
+              <span class="proficiency-value">92%</span>
+            </div>
+            <div class="proficiency-item">
+              <span class="proficiency-label">AP Chemistry</span>
+              <div class="proficiency-track">
+                <div class="proficiency-fill medium" style="width: 68%"></div>
+              </div>
+              <span class="proficiency-value">68%</span>
             </div>
-            <div class="data-source">
-                source: wikidata + curriculum_graph
+            <div class="proficiency-item">
+              <span class="proficiency-label">AP Physics</span>
+              <div class="proficiency-track">
+                <div class="proficiency-fill high" style="width: 85%"></div>
+              </div>
+              <span class="proficiency-value">85%</span>
             </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer">
+        <div class="footer-left">
+          <div class="footer-logo">
+            <span class="material-symbols-outlined">hub</span>
+          </div>
+          <div class="footer-text">Generated by <strong>Personalization Pipeline</strong></div>
         </div>
+        <div class="data-source">source: wikidata + curriculum_graph</div>
+      </div>
     </div>
-</body>
+  </body>
 </html>
diff --git a/samples/client/lit/personalized_learning/src/a2a-client.ts b/samples/client/lit/personalized_learning/src/a2a-client.ts
index eb071a301..197de0a43 100644
--- a/samples/client/lit/personalized_learning/src/a2a-client.ts
+++ b/samples/client/lit/personalized_learning/src/a2a-client.ts
@@ -21,17 +21,17 @@
  * This client talks to the remote agent (locally or on Agent Engine).
  */
 
-import { getIdToken } from "./firebase-auth";
+import {getIdToken} from './firebase-auth';
 
 // Helper to get auth headers for API requests
 async function getAuthHeaders(): Promise<Record<string, string>> {
   const headers: Record<string, string> = {
-    "Content-Type": "application/json",
+    'Content-Type': 'application/json',
   };
 
   const token = await getIdToken();
   if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
+    headers['Authorization'] = `Bearer ${token}`;
   }
 
   return headers;
@@ -54,36 +54,33 @@ export interface A2UIResponse {
 export class A2AClient {
   private baseUrl: string;
 
-  constructor(baseUrl: string = "/a2ui-agent") {
+  constructor(baseUrl: string = '/a2ui-agent') {
     this.baseUrl = baseUrl;
   }
 
   /**
    * Generate A2UI content from the agent.
    */
-  async generateContent(
-    format: string,
-    context: string = ""
-  ): Promise<A2UIResponse> {
+  async generateContent(format: string, context: string = ''): Promise<A2UIResponse> {
     console.log(`[A2AClient] Requesting ${format} content`);
 
     // For audio/video, always use local fallback content.
     // The deployed agent returns GCS URLs which won't work locally,
     // and we only have one pre-built podcast/video anyway.
     const lowerFormat = format.toLowerCase();
-    if (lowerFormat === "podcast" || lowerFormat === "audio" || lowerFormat === "video") {
+    if (lowerFormat === 'podcast' || lowerFormat === 'audio' || lowerFormat === 'video') {
       console.log(`[A2AClient] Using local fallback for ${format} (pre-built content)`);
       return this.getFallbackContent(format);
     }
 
     try {
       const response = await fetch(`${this.baseUrl}/a2a/query`, {
-        method: "POST",
+        method: 'POST',
         headers: await getAuthHeaders(),
         body: JSON.stringify({
           message: context ? `${format}:${context}` : format,
           session_id: this.getSessionId(),
-          extensions: ["https://a2ui.org/a2a-extension/a2ui/v0.8"],
+          extensions: ['https://a2ui.org/a2a-extension/a2ui/v0.8'],
         }),
       });
 
@@ -100,8 +97,8 @@ export class A2AClient {
         !data.a2ui ||
         data.a2ui.length === 0 ||
         data.error ||
-        data.rawText?.includes("cannot fulfill") ||
-        data.rawText?.includes("do not have the functionality")
+        data.rawText?.includes('cannot fulfill') ||
+        data.rawText?.includes('do not have the functionality')
       ) {
         console.log(`[A2AClient] Agent returned empty/error, using fallback for ${format}`);
         return this.getFallbackContent(format);
@@ -109,17 +106,19 @@ export class A2AClient {
 
       // Special case: if we requested a quiz but agent returned flashcards,
       // use our quiz fallback instead (agent doesn't know about QuizCard)
-      if (format.toLowerCase() === "quiz") {
+      if (format.toLowerCase() === 'quiz') {
         const a2uiStr = JSON.stringify(data.a2ui);
-        if (a2uiStr.includes("Flashcard") && !a2uiStr.includes("QuizCard")) {
-          console.log(`[A2AClient] Agent returned Flashcards for quiz request, using QuizCard fallback`);
+        if (a2uiStr.includes('Flashcard') && !a2uiStr.includes('QuizCard')) {
+          console.log(
+            `[A2AClient] Agent returned Flashcards for quiz request, using QuizCard fallback`,
+          );
           return this.getFallbackContent(format);
         }
       }
 
       return data as A2UIResponse;
     } catch (error) {
-      console.error("[A2AClient] Error calling agent:", error);
+      console.error('[A2AClient] Error calling agent:', error);
 
       // Return fallback content for demo purposes
       return this.getFallbackContent(format);
@@ -131,18 +130,18 @@ export class A2AClient {
    */
   async *streamContent(
     format: string,
-    context: string = ""
-  ): AsyncGenerator<{ status: string; data?: A2UIResponse }> {
+    context: string = '',
+  ): AsyncGenerator<{status: string; data?: A2UIResponse}> {
     console.log(`[A2AClient] Streaming ${format} content`);
 
     try {
       const response = await fetch(`${this.baseUrl}/a2a/stream`, {
-        method: "POST",
+        method: 'POST',
         headers: await getAuthHeaders(),
         body: JSON.stringify({
           message: context ? `${format}:${context}` : format,
           session_id: this.getSessionId(),
-          extensions: ["https://a2ui.org/a2a-extension/a2ui/v0.8"],
+          extensions: ['https://a2ui.org/a2a-extension/a2ui/v0.8'],
         }),
       });
 
@@ -152,36 +151,36 @@ export class A2AClient {
 
       const reader = response.body?.getReader();
       if (!reader) {
-        throw new Error("No response body");
+        throw new Error('No response body');
       }
 
       const decoder = new TextDecoder();
-      let buffer = "";
+      let buffer = '';
 
       while (true) {
-        const { done, value } = await reader.read();
+        const {done, value} = await reader.read();
         if (done) break;
 
-        buffer += decoder.decode(value, { stream: true });
+        buffer += decoder.decode(value, {stream: true});
 
         // Parse SSE events
-        const lines = buffer.split("\n\n");
-        buffer = lines.pop() || "";
+        const lines = buffer.split('\n\n');
+        buffer = lines.pop() || '';
 
         for (const line of lines) {
-          if (line.startsWith("data: ")) {
+          if (line.startsWith('data: ')) {
             const data = JSON.parse(line.slice(6));
             if (data.is_task_complete) {
-              yield { status: "complete", data: data.content };
+              yield {status: 'complete', data: data.content};
             } else {
-              yield { status: "processing" };
+              yield {status: 'processing'};
             }
           }
         }
       }
     } catch (error) {
-      console.error("[A2AClient] Stream error:", error);
-      yield { status: "complete", data: this.getFallbackContent(format) };
+      console.error('[A2AClient] Stream error:', error);
+      yield {status: 'complete', data: this.getFallbackContent(format)};
     }
   }
 
@@ -189,10 +188,10 @@ export class A2AClient {
    * Get or create a session ID.
    */
   private getSessionId(): string {
-    let sessionId = sessionStorage.getItem("a2ui_session_id");
+    let sessionId = sessionStorage.getItem('a2ui_session_id');
     if (!sessionId) {
       sessionId = `session_${Date.now()}_${Math.random().toString(36).slice(2)}`;
-      sessionStorage.setItem("a2ui_session_id", sessionId);
+      sessionStorage.setItem('a2ui_session_id', sessionId);
     }
     return sessionId;
   }
@@ -201,76 +200,76 @@ export class A2AClient {
    * Get fallback content for demo purposes when agent is unavailable.
    */
   private getFallbackContent(format: string): A2UIResponse {
-    const surfaceId = "learningContent";
+    const surfaceId = 'learningContent';
 
     switch (format.toLowerCase()) {
-      case "flashcards":
+      case 'flashcards':
         return {
-          format: "flashcards",
+          format: 'flashcards',
           surfaceId,
           a2ui: [
-            { beginRendering: { surfaceId, root: "mainColumn" } },
+            {beginRendering: {surfaceId, root: 'mainColumn'}},
             {
               surfaceUpdate: {
                 surfaceId,
                 components: [
                   {
-                    id: "mainColumn",
+                    id: 'mainColumn',
                     component: {
                       Column: {
-                        children: { explicitList: ["headerText", "flashcardRow"] },
-                        distribution: "start",
-                        alignment: "stretch",
+                        children: {explicitList: ['headerText', 'flashcardRow']},
+                        distribution: 'start',
+                        alignment: 'stretch',
                       },
                     },
                   },
                   {
-                    id: "headerText",
+                    id: 'headerText',
                     component: {
                       Text: {
-                        text: { literalString: "Study Flashcards: ATP & Bond Energy" },
-                        usageHint: "h3",
+                        text: {literalString: 'Study Flashcards: ATP & Bond Energy'},
+                        usageHint: 'h3',
                       },
                     },
                   },
                   {
-                    id: "flashcardRow",
+                    id: 'flashcardRow',
                     component: {
                       Row: {
-                        children: { explicitList: ["card1", "card2", "card3"] },
-                        distribution: "start",
-                        alignment: "stretch",
+                        children: {explicitList: ['card1', 'card2', 'card3']},
+                        distribution: 'start',
+                        alignment: 'stretch',
                       },
                     },
                   },
                   {
-                    id: "card1",
+                    id: 'card1',
                     component: {
                       Flashcard: {
-                        front: { literalString: "Why does ATP hydrolysis release energy?" },
+                        front: {literalString: 'Why does ATP hydrolysis release energy?'},
                         back: {
                           literalString:
                             "ATP hydrolysis releases energy because the products (ADP + Pi) are MORE STABLE than ATP. The phosphate groups in ATP repel each other due to negative charges. When the terminal phosphate is removed, this electrostatic strain is relieved, and the products achieve better resonance stabilization. It's like releasing a compressed spring - the energy comes from moving to a lower-energy state.",
                         },
-                        category: { literalString: "Biochemistry" },
+                        category: {literalString: 'Biochemistry'},
                       },
                     },
                   },
                   {
-                    id: "card2",
+                    id: 'card2',
                     component: {
                       Flashcard: {
-                        front: { literalString: "Does breaking a chemical bond release energy?" },
+                        front: {literalString: 'Does breaking a chemical bond release energy?'},
                         back: {
                           literalString:
                             "NO - this is a common MCAT trap! Breaking ANY bond REQUIRES energy input (it's endothermic). Energy is only released when NEW bonds FORM. In ATP hydrolysis, the energy released comes from forming more stable bonds in the products, not from 'breaking' the phosphate bond.",
                         },
-                        category: { literalString: "Common Trap" },
+                        category: {literalString: 'Common Trap'},
                       },
                     },
                   },
                   {
-                    id: "card3",
+                    id: 'card3',
                     component: {
                       Flashcard: {
                         front: {
@@ -281,7 +280,7 @@ export class A2AClient {
                           literalString:
                             "Bonds don't 'store' energy like batteries. Think of it like holding a plank position at the gym - you're not storing energy in your muscles, you're in a high-energy unstable state. When you release to rest (like ATP → ADP + Pi), you move to a more stable, lower-energy state. The 'energy release' is really about the stability difference between reactants and products.",
                         },
-                        category: { literalString: "MCAT Concept" },
+                        category: {literalString: 'MCAT Concept'},
                       },
                     },
                   },
@@ -291,79 +290,81 @@ export class A2AClient {
           ],
         };
 
-      case "podcast":
-      case "audio":
+      case 'podcast':
+      case 'audio':
         return {
-          format: "audio",
+          format: 'audio',
           surfaceId,
           a2ui: [
-            { beginRendering: { surfaceId, root: "audioCard" } },
+            {beginRendering: {surfaceId, root: 'audioCard'}},
             {
               surfaceUpdate: {
                 surfaceId,
                 components: [
                   {
-                    id: "audioCard",
-                    component: { Card: { child: "audioContent" } },
+                    id: 'audioCard',
+                    component: {Card: {child: 'audioContent'}},
                   },
                   {
-                    id: "audioContent",
+                    id: 'audioContent',
                     component: {
                       Column: {
                         children: {
-                          explicitList: ["audioHeader", "audioPlayer", "audioDescription"],
+                          explicitList: ['audioHeader', 'audioPlayer', 'audioDescription'],
                         },
-                        distribution: "start",
-                        alignment: "stretch",
+                        distribution: 'start',
+                        alignment: 'stretch',
                       },
                     },
                   },
                   {
-                    id: "audioHeader",
+                    id: 'audioHeader',
                     component: {
                       Row: {
-                        children: { explicitList: ["audioIcon", "audioTitle"] },
-                        distribution: "start",
-                        alignment: "center",
+                        children: {explicitList: ['audioIcon', 'audioTitle']},
+                        distribution: 'start',
+                        alignment: 'center',
                       },
                     },
                   },
                   {
-                    id: "audioIcon",
+                    id: 'audioIcon',
                     component: {
-                      Icon: { name: { literalString: "podcasts" } },
+                      Icon: {name: {literalString: 'podcasts'}},
                     },
                   },
                   {
-                    id: "audioTitle",
+                    id: 'audioTitle',
                     component: {
                       Text: {
                         text: {
-                          literalString: "ATP & Chemical Stability: Correcting the Misconception",
+                          literalString: 'ATP & Chemical Stability: Correcting the Misconception',
                         },
-                        usageHint: "h3",
+                        usageHint: 'h3',
                       },
                     },
                   },
                   {
-                    id: "audioPlayer",
+                    id: 'audioPlayer',
                     component: {
                       AudioPlayer: {
-                        url: { literalString: "/assets/podcast.m4a" },
-                        audioTitle: { literalString: "Understanding ATP Energy Release" },
-                        audioDescription: { literalString: "A personalized podcast about ATP and chemical stability" },
+                        url: {literalString: '/assets/podcast.m4a'},
+                        audioTitle: {literalString: 'Understanding ATP Energy Release'},
+                        audioDescription: {
+                          literalString: 'A personalized podcast about ATP and chemical stability',
+                        },
                       },
                     },
                   },
                   {
-                    id: "audioDescription",
+                    id: 'audioDescription',
                     component: {
                       Text: {
                         text: {
                           literalString:
                             "This personalized podcast uses gym analogies to explain why 'energy stored in bonds' is a misconception. Perfect for your MCAT prep!",
                         },
-                        usageHint: "body",
+                        usageHint: 'body',
                       },
                     },
                   },
@@ -373,58 +374,58 @@ export class A2AClient {
           ],
         };
 
-      case "video":
+      case 'video':
         return {
-          format: "video",
+          format: 'video',
           surfaceId,
           a2ui: [
-            { beginRendering: { surfaceId, root: "videoCard" } },
+            {beginRendering: {surfaceId, root: 'videoCard'}},
             {
               surfaceUpdate: {
                 surfaceId,
                 components: [
                   {
-                    id: "videoCard",
-                    component: { Card: { child: "videoContent" } },
+                    id: 'videoCard',
+                    component: {Card: {child: 'videoContent'}},
                   },
                   {
-                    id: "videoContent",
+                    id: 'videoContent',
                     component: {
                       Column: {
                         children: {
-                          explicitList: ["videoTitle", "videoPlayer", "videoDescription"],
+                          explicitList: ['videoTitle', 'videoPlayer', 'videoDescription'],
                         },
-                        distribution: "start",
-                        alignment: "stretch",
+                        distribution: 'start',
+                        alignment: 'stretch',
                       },
                     },
                   },
                   {
-                    id: "videoTitle",
+                    id: 'videoTitle',
                     component: {
                       Text: {
-                        text: { literalString: "Visual Guide: ATP Energy & Stability" },
-                        usageHint: "h3",
+                        text: {literalString: 'Visual Guide: ATP Energy & Stability'},
+                        usageHint: 'h3',
                       },
                     },
                   },
                   {
-                    id: "videoPlayer",
+                    id: 'videoPlayer',
                     component: {
                       Video: {
-                        url: { literalString: "/assets/video.mp4" },
+                        url: {literalString: '/assets/video.mp4'},
                       },
                     },
                   },
                   {
-                    id: "videoDescription",
+                    id: 'videoDescription',
                     component: {
                       Text: {
                         text: {
                           literalString:
-                            "Watch the compressed spring analogy in action to understand why ATP releases energy through stability differences.",
+                            'Watch the compressed spring analogy in action to understand why ATP releases energy through stability differences.',
                         },
-                        usageHint: "body",
+                        usageHint: 'body',
                       },
                     },
                   },
@@ -434,123 +435,119 @@ export class A2AClient {
           ],
         };
 
-      case "quiz":
+      case 'quiz':
         return {
-          format: "quiz",
+          format: 'quiz',
           surfaceId,
           a2ui: [
-            { beginRendering: { surfaceId, root: "mainColumn" } },
+            {beginRendering: {surfaceId, root: 'mainColumn'}},
             {
               surfaceUpdate: {
                 surfaceId,
                 components: [
                   {
-                    id: "mainColumn",
+                    id: 'mainColumn',
                     component: {
                       Column: {
-                        children: { explicitList: ["headerText", "quizRow"] },
-                        distribution: "start",
-                        alignment: "stretch",
+                        children: {explicitList: ['headerText', 'quizRow']},
+                        distribution: 'start',
+                        alignment: 'stretch',
                       },
                     },
                   },
                   {
-                    id: "headerText",
+                    id: 'headerText',
                     component: {
                       Text: {
-                        text: { literalString: "Quick Quiz: ATP & Bond Energy" },
-                        usageHint: "h3",
+                        text: {literalString: 'Quick Quiz: ATP & Bond Energy'},
+                        usageHint: 'h3',
                       },
                     },
                   },
                   {
-                    id: "quizRow",
+                    id: 'quizRow',
                     component: {
                       Row: {
-                        children: { explicitList: ["quiz1", "quiz2"] },
-                        distribution: "start",
-                        alignment: "stretch",
+                        children: {explicitList: ['quiz1', 'quiz2']},
+                        distribution: 'start',
+                        alignment: 'stretch',
                       },
                     },
                   },
                   {
-                    id: "quiz1",
+                    id: 'quiz1',
                     component: {
                       QuizCard: {
                         question: {
                           literalString:
-                            "What happens to the energy in bonds when ATP is hydrolyzed?",
+                            'What happens to the energy in bonds when ATP is hydrolyzed?',
                         },
                         options: [
                           {
                             label: {
-                              literalString:
-                                "Energy stored in the phosphate bond is released",
+                              literalString: 'Energy stored in the phosphate bond is released',
                             },
-                            value: "a",
+                            value: 'a',
                             isCorrect: false,
                           },
                           {
                             label: {
-                              literalString:
-                                "Energy is released because products are more stable",
+                              literalString: 'Energy is released because products are more stable',
                             },
-                            value: "b",
+                            value: 'b',
                             isCorrect: true,
                           },
                           {
                             label: {
-                              literalString:
-                                "The bond breaking itself releases energy",
+                              literalString: 'The bond breaking itself releases energy',
                             },
-                            value: "c",
+                            value: 'c',
                             isCorrect: false,
                           },
                           {
                             label: {
                               literalString: "ATP's special bonds contain more electrons",
                             },
-                            value: "d",
+                            value: 'd',
                             isCorrect: false,
                           },
                         ],
                         explanation: {
                           literalString:
-                            "ATP hydrolysis releases energy because the products (ADP + Pi) are MORE STABLE than ATP. The phosphate groups in ATP repel each other, creating strain. When this bond is broken, the products achieve better resonance stabilization - like releasing a compressed spring.",
+                            'ATP hydrolysis releases energy because the products (ADP + Pi) are MORE STABLE than ATP. The phosphate groups in ATP repel each other, creating strain. When this bond is broken, the products achieve better resonance stabilization - like releasing a compressed spring.',
                         },
-                        category: { literalString: "Thermodynamics" },
+                        category: {literalString: 'Thermodynamics'},
                       },
                     },
                   },
                   {
-                    id: "quiz2",
+                    id: 'quiz2',
                     component: {
                       QuizCard: {
                         question: {
-                          literalString:
-                            "Breaking a chemical bond requires or releases energy?",
+                          literalString: 'Breaking a chemical bond requires or releases energy?',
                         },
                         options: [
                           {
-                            label: { literalString: "Always releases energy" },
-                            value: "a",
+                            label: {literalString: 'Always releases energy'},
+                            value: 'a',
                             isCorrect: false,
                           },
                           {
-                            label: { literalString: "Always requires energy input" },
-                            value: "b",
+                            label: {literalString: 'Always requires energy input'},
+                            value: 'b',
                             isCorrect: true,
                           },
                           {
                             label: {
                               literalString: "Depends on whether it's a high-energy bond",
                             },
-                            value: "c",
+                            value: 'c',
                             isCorrect: false,
                           },
                           {
-                            label: { literalString: "Neither - bonds are energy neutral" },
-                            value: "d",
+                            label: {literalString: 'Neither - bonds are energy neutral'},
+                            value: 'd',
                             isCorrect: false,
                           },
                         ],
@@ -558,7 +555,7 @@ export class A2AClient {
                           literalString:
                             "Breaking ANY bond REQUIRES energy (it's endothermic). This is a common MCAT trap! Energy is only released when NEW bonds FORM. Think of it like pulling apart magnets - you have to put in effort to separate them.",
                         },
-                        category: { literalString: "Bond Energy" },
+                        category: {literalString: 'Bond Energy'},
                       },
                     },
                   },
@@ -572,7 +569,7 @@ export class A2AClient {
 
       default:
         return {
-          format: "error",
+          format: 'error',
           surfaceId,
           a2ui: [],
           error: `Unknown format: ${format}`,
diff --git a/samples/client/lit/personalized_learning/src/a2ui-renderer.ts b/samples/client/lit/personalized_learning/src/a2ui-renderer.ts
index ca534e391..743a5dc2c 100644
--- a/samples/client/lit/personalized_learning/src/a2ui-renderer.ts
+++ b/samples/client/lit/personalized_learning/src/a2ui-renderer.ts
@@ -21,10 +21,10 @@
  * Uses the signal-based model processor for proper reactivity.
  */
 
-import { v0_8 } from "@a2ui/web-lib";
-import type { SourceInfo } from "./a2a-client";
+import {v0_8} from '@a2ui/web-lib';
+import type {SourceInfo} from './a2a-client';
 // Import the theme provider to register the custom element
-import "./theme-provider.js";
+import './theme-provider.js';
 
 // Type alias for the processor - use the actual exported class name
 type A2UIModelProcessorInstance = InstanceType<typeof v0_8.Data.A2uiMessageProcessor>;
@@ -48,13 +48,13 @@ export class A2UIRenderer {
     }
 
     // Create a container for the A2UI content
-    const container = document.createElement("div");
-    container.className = "a2ui-container";
+    const container = document.createElement('div');
+    container.className = 'a2ui-container';
 
     // Find the message content element
-    const contentEl = messageElement.querySelector(".message-content");
+    const contentEl = messageElement.querySelector('.message-content');
     if (!contentEl) {
-      console.error("[A2UIRenderer] Message content element not found");
+      console.error('[A2UIRenderer] Message content element not found');
       return;
     }
 
@@ -67,7 +67,7 @@ export class A2UIRenderer {
     try {
       processor.processMessages(a2uiMessages as v0_8.Types.ServerToClientMessage[]);
     } catch (error) {
-      console.error("[A2UIRenderer] Error processing messages:", error);
+      console.error('[A2UIRenderer] Error processing messages:', error);
     }
 
     // Render the surfaces
@@ -87,8 +87,8 @@ export class A2UIRenderer {
    * Render source attribution below the A2UI content.
    */
   private renderSourceAttribution(container: HTMLElement, source: SourceInfo): void {
-    const attribution = document.createElement("div");
-    attribution.className = "source-attribution";
+    const attribution = document.createElement('div');
+    attribution.className = 'source-attribution';
 
     // If we have a URL, make it a link; otherwise just show the text
     if (source.url) {
@@ -117,18 +117,18 @@ export class A2UIRenderer {
     container: HTMLElement,
     surfaceId: string,
     surface: v0_8.Types.Surface,
-    processor: A2UIModelProcessorInstance
+    processor: A2UIModelProcessorInstance,
   ): void {
     // Create the theme provider wrapper which contains the a2ui-surface
-    const providerEl = document.createElement("a2ui-theme-provider") as A2UIThemeProviderElement;
+    const providerEl = document.createElement('a2ui-theme-provider') as A2UIThemeProviderElement;
 
     providerEl.surfaceId = surfaceId;
     providerEl.surface = surface;
     providerEl.processor = processor;
 
     // Add some styling for the container
-    providerEl.style.display = "block";
-    providerEl.style.marginTop = "16px";
+    providerEl.style.display = 'block';
+    providerEl.style.marginTop = '16px';
 
     container.appendChild(providerEl);
   }
diff --git a/samples/client/lit/personalized_learning/src/chat-orchestrator.ts b/samples/client/lit/personalized_learning/src/chat-orchestrator.ts
index b04ede1e7..c77b27a37 100644
--- a/samples/client/lit/personalized_learning/src/chat-orchestrator.ts
+++ b/samples/client/lit/personalized_learning/src/chat-orchestrator.ts
@@ -21,19 +21,19 @@
  * Determines when to generate A2UI content and manages async artifact generation.
  */
 
-import { A2UIRenderer } from "./a2ui-renderer";
-import { A2AClient } from "./a2a-client";
-import { getIdToken } from "./firebase-auth";
+import {A2UIRenderer} from './a2ui-renderer';
+import {A2AClient} from './a2a-client';
+import {getIdToken} from './firebase-auth';
 
 // Helper to get auth headers for API requests
 async function getAuthHeaders(): Promise<Record<string, string>> {
   const headers: Record<string, string> = {
-    "Content-Type": "application/json",
+    'Content-Type': 'application/json',
   };
 
   const token = await getIdToken();
   if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
+    headers['Authorization'] = `Bearer ${token}`;
   }
 
   return headers;
@@ -41,20 +41,13 @@ async function getAuthHeaders(): Promise<Record<string, string>> {
 
 // Types for conversation history
 interface Message {
-  role: "user" | "assistant";
+  role: 'user' | 'assistant';
   content: string;
   a2ui?: unknown[];
 }
 
 // Intent types the orchestrator can detect
-type Intent =
-  | "flashcards"
-  | "podcast"
-  | "audio"
-  | "video"
-  | "quiz"
-  | "general"
-  | "greeting";
+type Intent = 'flashcards' | 'podcast' | 'audio' | 'video' | 'quiz' | 'general' | 'greeting';
 
 export class ChatOrchestrator {
   private conversationHistory: Message[] = [];
@@ -110,36 +103,33 @@ Keep ALL responses:
    * Process a user message and generate a response.
    * Uses combined intent+response endpoint to reduce latency.
    */
-  async processMessage(
-    userMessage: string,
-    messageElement: HTMLDivElement
-  ): Promise<void> {
+  async processMessage(userMessage: string, messageElement: HTMLDivElement): Promise<void> {
     // Add to history
-    this.conversationHistory.push({ role: "user", content: userMessage });
+    this.conversationHistory.push({role: 'user', content: userMessage});
 
     // Try combined endpoint first (single LLM call for intent + response + keywords)
     let intent: Intent;
     let responseText: string;
     let keywords: string | undefined;
 
-    console.log("========================================");
-    console.log("[Orchestrator] PROCESSING USER MESSAGE");
+    console.log('========================================');
+    console.log('[Orchestrator] PROCESSING USER MESSAGE');
     console.log(`[Orchestrator] User said: "${userMessage}"`);
-    console.log("========================================");
+    console.log('========================================');
 
     try {
       const combinedResult = await this.getCombinedIntentAndResponse(userMessage);
       intent = combinedResult.intent as Intent;
       responseText = combinedResult.text;
       keywords = combinedResult.keywords;
-      console.log("========================================");
-      console.log("[Orchestrator] GEMINI RESPONSE RECEIVED");
+      console.log('========================================');
+      console.log('[Orchestrator] GEMINI RESPONSE RECEIVED');
       console.log(`[Orchestrator] Detected intent: ${intent}`);
-      console.log(`[Orchestrator] Keywords: ${keywords || "(none)"}`);
+      console.log(`[Orchestrator] Keywords: ${keywords || '(none)'}`);
       console.log(`[Orchestrator] Response text: ${responseText.substring(0, 100)}...`);
-      console.log("========================================");
+      console.log('========================================');
     } catch (error) {
-      console.warn("[Orchestrator] Combined endpoint failed, falling back to separate calls");
+      console.warn('[Orchestrator] Combined endpoint failed, falling back to separate calls');
       // Fallback to separate calls if combined endpoint fails
       intent = await this.detectIntentWithLLM(userMessage);
       console.log(`[Orchestrator] Fallback detected intent: ${intent}`);
@@ -151,40 +141,36 @@ Keep ALL responses:
     this.setMessageText(messageElement, responseText);
 
     // If we need A2UI content, fetch and render it
-    if (intent !== "general" && intent !== "greeting") {
+    if (intent !== 'general' && intent !== 'greeting') {
       // Add processing placeholder
-      const placeholder = this.addProcessingPlaceholder(
-        messageElement,
-        intent
-      );
+      const placeholder = this.addProcessingPlaceholder(messageElement, intent);
 
       try {
         // Fetch A2UI content from the agent
         // Use LLM-generated keywords if available (handles typos, adds related terms)
         // Fall back to user message + response context if keywords not available
         const topicContext = keywords
-          ? keywords  // Keywords are already corrected and expanded by Gemini
+          ? keywords // Keywords are already corrected and expanded by Gemini
           : `User request: ${userMessage}\nAssistant context: ${responseText}`;
 
-        console.log("========================================");
-        console.log("[Orchestrator] CALLING AGENT ENGINE FOR A2UI CONTENT");
+        console.log('========================================');
+        console.log('[Orchestrator] CALLING AGENT ENGINE FOR A2UI CONTENT');
         console.log(`[Orchestrator] Intent (format): ${intent}`);
         console.log(`[Orchestrator] Topic context being sent:`);
         console.log(`[Orchestrator]   "${topicContext}"`);
-        console.log(`[Orchestrator] Keywords available: ${keywords ? "YES" : "NO (using fallback)"}`);
-        console.log("========================================");
-
-        const a2uiResult = await this.a2aClient.generateContent(
-          intent,
-          topicContext
+        console.log(
+          `[Orchestrator] Keywords available: ${keywords ? 'YES' : 'NO (using fallback)'}`,
         );
+        console.log('========================================');
+
+        const a2uiResult = await this.a2aClient.generateContent(intent, topicContext);
 
-        console.log("========================================");
-        console.log("[Orchestrator] AGENT ENGINE RESPONSE RECEIVED");
+        console.log('========================================');
+        console.log('[Orchestrator] AGENT ENGINE RESPONSE RECEIVED');
         console.log(`[Orchestrator] Format: ${a2uiResult?.format}`);
         console.log(`[Orchestrator] Source: ${JSON.stringify(a2uiResult?.source)}`);
         console.log(`[Orchestrator] A2UI messages: ${a2uiResult?.a2ui?.length || 0}`);
-        console.log("========================================");
+        console.log('========================================');
 
         // Remove placeholder
         placeholder.remove();
@@ -192,11 +178,10 @@ Keep ALL responses:
         // Render A2UI content with source attribution
         if (a2uiResult && a2uiResult.a2ui) {
           this.renderer.render(messageElement, a2uiResult.a2ui, a2uiResult.source);
-          this.conversationHistory[this.conversationHistory.length - 1].a2ui =
-            a2uiResult.a2ui;
+          this.conversationHistory[this.conversationHistory.length - 1].a2ui = a2uiResult.a2ui;
         }
       } catch (error) {
-        console.error("[Orchestrator] Error fetching A2UI content:", error);
+        console.error('[Orchestrator] Error fetching A2UI content:', error);
         placeholder.innerHTML = `
           <span class="material-symbols-outlined" style="color: #f87171;">error</span>
           <span class="text">Failed to load content. Please try again.</span>
@@ -205,7 +190,7 @@ Keep ALL responses:
     }
 
     // Add assistant response to history
-    this.conversationHistory.push({ role: "assistant", content: responseText });
+    this.conversationHistory.push({role: 'assistant', content: responseText});
   }
 
   /**
@@ -213,19 +198,22 @@ Keep ALL responses:
    * This reduces latency by eliminating one round-trip.
    * For content-generating intents, also returns keywords for better content retrieval.
    */
-  private async getCombinedIntentAndResponse(message: string): Promise<{ intent: string; text: string; keywords?: string }> {
-    const recentContext = this.conversationHistory.slice(-4).map(m =>
-      `${m.role}: ${m.content}`
-    ).join("\n");
-
-    const response = await fetch("/api/chat-with-intent", {
-      method: "POST",
+  private async getCombinedIntentAndResponse(
+    message: string,
+  ): Promise<{intent: string; text: string; keywords?: string}> {
+    const recentContext = this.conversationHistory
+      .slice(-4)
+      .map(m => `${m.role}: ${m.content}`)
+      .join('\n');
+
+    const response = await fetch('/api/chat-with-intent', {
+      method: 'POST',
       headers: await getAuthHeaders(),
       body: JSON.stringify({
         systemPrompt: this.systemPrompt,
-        messages: this.conversationHistory.slice(-10).map((m) => ({
+        messages: this.conversationHistory.slice(-10).map(m => ({
           role: m.role,
-          parts: [{ text: m.content }],
+          parts: [{text: m.content}],
         })),
         userMessage: message,
         recentContext: recentContext,
@@ -244,13 +232,14 @@ Keep ALL responses:
    * Returns the detected intent for routing to appropriate content generation.
    */
   private async detectIntentWithLLM(message: string): Promise<Intent> {
-    const recentContext = this.conversationHistory.slice(-4).map(m =>
-      `${m.role}: ${m.content}`
-    ).join("\n");
+    const recentContext = this.conversationHistory
+      .slice(-4)
+      .map(m => `${m.role}: ${m.content}`)
+      .join('\n');
 
     try {
-      const response = await fetch("/api/chat", {
-        method: "POST",
+      const response = await fetch('/api/chat', {
+        method: 'POST',
         headers: await getAuthHeaders(),
         body: JSON.stringify({
           systemPrompt: `You are an intent classifier. Analyze the user's message and conversation context to determine their intent.
@@ -273,30 +262,30 @@ Examples:
 - "sure, show me" (after any content offer) → depends on what was offered
 - "explain ATP" → general
 - "hi there" → greeting`,
-          intentGuidance: "",
+          intentGuidance: '',
           messages: [],
           userMessage: `Recent conversation:\n${recentContext}\n\nCurrent message: "${message}"\n\nIntent:`,
         }),
       });
 
       if (!response.ok) {
-        console.warn("[Orchestrator] Intent API failed, falling back to keyword detection");
+        console.warn('[Orchestrator] Intent API failed, falling back to keyword detection');
         return this.detectIntentKeyword(message);
       }
 
       const data = await response.json();
-      const intentText = (data.text || "general").toLowerCase().trim();
+      const intentText = (data.text || 'general').toLowerCase().trim();
 
       // Map response to valid intent
-      if (intentText.includes("flashcard")) return "flashcards";
-      if (intentText.includes("podcast") || intentText.includes("audio")) return "podcast";
-      if (intentText.includes("video")) return "video";
-      if (intentText.includes("quiz")) return "quiz";
-      if (intentText.includes("greeting")) return "greeting";
+      if (intentText.includes('flashcard')) return 'flashcards';
+      if (intentText.includes('podcast') || intentText.includes('audio')) return 'podcast';
+      if (intentText.includes('video')) return 'video';
+      if (intentText.includes('quiz')) return 'quiz';
+      if (intentText.includes('greeting')) return 'greeting';
 
-      return "general";
+      return 'general';
     } catch (error) {
-      console.error("[Orchestrator] Intent detection error:", error);
+      console.error('[Orchestrator] Intent detection error:', error);
       return this.detectIntentKeyword(message);
     }
   }
@@ -308,68 +297,65 @@ Examples:
     const lower = message.toLowerCase();
 
     if (lower.match(/^(hi|hello|hey|good morning|good afternoon|good evening)/i)) {
-      return "greeting";
+      return 'greeting';
     }
     if (lower.match(/flash\s*card|study\s*card|review\s*card|f'?card/i)) {
-      return "flashcards";
+      return 'flashcards';
     }
     if (lower.match(/podcast|audio|listen/i)) {
-      return "podcast";
+      return 'podcast';
     }
     if (lower.match(/video|watch/i)) {
-      return "video";
+      return 'video';
     }
     if (lower.match(/quiz|test me/i)) {
-      return "quiz";
+      return 'quiz';
     }
-    return "general";
+    return 'general';
   }
 
   /**
    * Generate the main chat response using Gemini.
    */
-  private async generateResponse(
-    userMessage: string,
-    intent: Intent
-  ): Promise<{ text: string }> {
+  private async generateResponse(userMessage: string, intent: Intent): Promise<{text: string}> {
     // Build the conversation context
-    const messages = this.conversationHistory.slice(-10).map((m) => ({
+    const messages = this.conversationHistory.slice(-10).map(m => ({
       role: m.role,
-      parts: [{ text: m.content }],
+      parts: [{text: m.content}],
     }));
 
     // Add intent-specific guidance
-    let intentGuidance = "";
+    let intentGuidance = '';
     switch (intent) {
-      case "flashcards":
+      case 'flashcards':
         intentGuidance =
           "The user wants flashcards. Respond with a SHORT (1-2 sentences) conversational acknowledgment. DO NOT include the flashcard content in your response - the flashcards will be rendered separately as interactive cards below your message. Just say something brief like 'Here are some flashcards to help you review!' or 'I've created some personalized flashcards for you.'";
         break;
-      case "podcast":
-      case "audio":
+      case 'podcast':
+      case 'audio':
         intentGuidance =
           "The user wants to listen to the podcast. Respond with a SHORT (1-2 sentences) introduction. DO NOT write out the podcast transcript or script - the audio player will be rendered separately below your message. Just say something brief like 'Here's a personalized podcast about ATP!' or 'I've got a podcast that explains this with gym analogies you'll love.'";
         break;
-      case "video":
+      case 'video':
         intentGuidance =
           "The user wants to watch a video. Respond with a SHORT (1-2 sentences) introduction. DO NOT describe the video content in detail - the video player will be rendered separately below your message. Just say something brief like 'Here's a video that visualizes this concept!' or 'Check out this visual explanation.'";
         break;
-      case "quiz":
+      case 'quiz':
         intentGuidance =
           "The user wants a quiz. Respond with a SHORT (1-2 sentences) introduction. DO NOT include the quiz questions or answers in your response - the interactive quiz cards will be rendered separately below your message. Just say something brief like 'Let's test your knowledge!' or 'Here's a quick quiz to check your understanding.'";
         break;
-      case "greeting":
+      case 'greeting':
         intentGuidance =
-          "The user is greeting you. Respond warmly in 1-2 sentences and briefly mention you can help with flashcards, podcasts, videos, and quizzes for their MCAT prep.";
+          'The user is greeting you. Respond warmly in 1-2 sentences and briefly mention you can help with flashcards, podcasts, videos, and quizzes for their MCAT prep.';
         break;
       default:
         intentGuidance =
-          "Respond helpfully but concisely (2-3 sentences max). If the question is about ATP, bond energy, or thermodynamics, provide a clear explanation and offer to create flashcards or play the podcast for deeper learning.";
+          'Respond helpfully but concisely (2-3 sentences max). If the question is about ATP, bond energy, or thermodynamics, provide a clear explanation and offer to create flashcards or play the podcast for deeper learning.';
     }
 
     try {
-      const response = await fetch("/api/chat", {
-        method: "POST",
+      const response = await fetch('/api/chat', {
+        method: 'POST',
         headers: await getAuthHeaders(),
         body: JSON.stringify({
           systemPrompt: this.systemPrompt,
@@ -384,9 +370,9 @@ Examples:
       }
 
       const data = await response.json();
-      return { text: data.text || data.response || "I apologize, I couldn't generate a response." };
+      return {text: data.text || data.response || "I apologize, I couldn't generate a response."};
     } catch (error) {
-      console.error("[Orchestrator] Error calling chat API:", error);
+      console.error('[Orchestrator] Error calling chat API:', error);
 
       // Fallback responses based on intent
       return this.getFallbackResponse(intent);
@@ -396,26 +382,26 @@ Examples:
   /**
    * Get a fallback response if the API fails.
    */
-  private getFallbackResponse(intent: Intent): { text: string } {
+  private getFallbackResponse(intent: Intent): {text: string} {
     switch (intent) {
-      case "flashcards":
+      case 'flashcards':
         return {
-          text: "Here are some personalized flashcards to help you master these concepts!",
+          text: 'Here are some personalized flashcards to help you master these concepts!',
         };
-      case "podcast":
-      case "audio":
+      case 'podcast':
+      case 'audio':
         return {
           text: "Here's the personalized podcast I mentioned! It's designed specifically for you, Maria, using gym and fitness analogies to explain why 'energy stored in bonds' is a misconception. Perfect for listening during your workout!",
         };
-      case "video":
+      case 'video':
         return {
           text: "Let me show you this visual explanation. It uses the compressed spring analogy to demonstrate how ATP releases energy through stability differences, not by 'releasing stored energy from bonds.'",
         };
-      case "quiz":
+      case 'quiz':
         return {
           text: "Let's test your understanding! Here's a quick quiz on ATP and bond energy concepts.",
         };
-      case "greeting":
+      case 'greeting':
         return {
           text: "Hey Maria! How's the MCAT studying going? What's on your mind today?",
         };
@@ -430,7 +416,7 @@ Examples:
    * Update the message element with text content.
    */
   private setMessageText(messageElement: HTMLDivElement, text: string): void {
-    const textEl = messageElement.querySelector(".message-text");
+    const textEl = messageElement.querySelector('.message-text');
     if (textEl) {
       textEl.innerHTML = this.parseMarkdown(text);
     }
@@ -484,15 +470,12 @@ Examples:
   /**
    * Add a processing placeholder for async content.
    */
-  private addProcessingPlaceholder(
-    messageElement: HTMLDivElement,
-    intent: Intent
-  ): HTMLDivElement {
-    const contentEl = messageElement.querySelector(".message-content");
-    if (!contentEl) throw new Error("Message content element not found");
+  private addProcessingPlaceholder(messageElement: HTMLDivElement, intent: Intent): HTMLDivElement {
+    const contentEl = messageElement.querySelector('.message-content');
+    if (!contentEl) throw new Error('Message content element not found');
 
-    const placeholder = document.createElement("div");
-    placeholder.className = "processing-card";
+    const placeholder = document.createElement('div');
+    placeholder.className = 'processing-card';
 
     const label = this.getProcessingLabel(intent);
     placeholder.innerHTML = `
@@ -509,22 +492,22 @@ Examples:
    */
   private getProcessingLabel(intent: Intent): string {
     switch (intent) {
-      case "flashcards":
-        return "Generating personalized flashcards...";
-      case "podcast":
-      case "audio":
-        return "Loading podcast...";
-      case "video":
-        return "Loading video...";
-      case "quiz":
-        return "Creating quiz questions...";
+      case 'flashcards':
+        return 'Generating personalized flashcards...';
+      case 'podcast':
+      case 'audio':
+        return 'Loading podcast...';
+      case 'video':
+        return 'Loading video...';
+      case 'quiz':
+        return 'Creating quiz questions...';
       default:
-        return "Processing...";
+        return 'Processing...';
     }
   }
 
   private escapeHtml(text: string): string {
-    const div = document.createElement("div");
+    const div = document.createElement('div');
     div.textContent = text;
     return div.innerHTML;
   }
diff --git a/samples/client/lit/personalized_learning/src/firebase-auth.ts b/samples/client/lit/personalized_learning/src/firebase-auth.ts
index 2e589f850..baa648f26 100644
--- a/samples/client/lit/personalized_learning/src/firebase-auth.ts
+++ b/samples/client/lit/personalized_learning/src/firebase-auth.ts
@@ -34,7 +34,7 @@
  * and the app runs without requiring sign-in.
  */
 
-import { initializeApp } from "firebase/app";
+import {initializeApp} from 'firebase/app';
 import {
   getAuth,
   signInWithPopup,
@@ -43,17 +43,17 @@ import {
   signOut,
   User,
   Auth,
-} from "firebase/auth";
+} from 'firebase/auth';
 
 // Firebase configuration - reads from environment variables set in .env
 // These are populated by the Quickstart notebook or can be set manually
 const firebaseConfig = {
-  apiKey: import.meta.env.VITE_FIREBASE_API_KEY || "",
-  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || "",
-  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID || "",
-  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET || "",
-  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID || "",
-  appId: import.meta.env.VITE_FIREBASE_APP_ID || "",
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || '',
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID || '',
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET || '',
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID || '',
+  appId: import.meta.env.VITE_FIREBASE_APP_ID || '',
 };
 
 // Check if Firebase is configured (API key present)
@@ -67,7 +67,7 @@ if (isFirebaseConfigured) {
   app = initializeApp(firebaseConfig);
   auth = getAuth(app);
 } else {
-  console.log("[Auth] Firebase not configured - running in local dev mode (no auth required)");
+  console.log('[Auth] Firebase not configured - running in local dev mode (no auth required)');
 }
 
 // Google provider
@@ -76,7 +76,7 @@ if (isFirebaseConfigured) {
 const provider = new GoogleAuthProvider();
 const hintDomain = import.meta.env.VITE_ALLOWED_DOMAIN;
 if (hintDomain) {
-  provider.setCustomParameters({ hd: hintDomain });
+  provider.setCustomParameters({hd: hintDomain});
 }
 
 // ============================================================================
@@ -103,7 +103,7 @@ export async function getIdToken(): Promise<string | null> {
   try {
     return await user.getIdToken();
   } catch (error) {
-    console.error("[Auth] Failed to get ID token:", error);
+    console.error('[Auth] Failed to get ID token:', error);
     return null;
   }
 }
@@ -118,13 +118,13 @@ export async function checkServerAuthorization(): Promise<boolean> {
   if (!token) return false;
 
   try {
-    const response = await fetch("/api/check-access", {
-      method: "GET",
-      headers: { Authorization: `Bearer ${token}` },
+    const response = await fetch('/api/check-access', {
+      method: 'GET',
+      headers: {Authorization: `Bearer ${token}`},
     });
     return response.ok;
   } catch (error) {
-    console.error("[Auth] Server authorization check failed:", error);
+    console.error('[Auth] Server authorization check failed:', error);
     return false;
   }
 }
@@ -136,7 +136,7 @@ export async function checkServerAuthorization(): Promise<boolean> {
  */
 export async function signInWithGoogle(): Promise<User | null> {
   if (!auth) {
-    console.warn("[Auth] signInWithGoogle called but Firebase not configured");
+    console.warn('[Auth] signInWithGoogle called but Firebase not configured');
     return null;
   }
   try {
@@ -144,8 +144,8 @@ export async function signInWithGoogle(): Promise<User | null> {
     console.log(`[Auth] Firebase sign-in successful: ${result.user.email}`);
     return result.user;
   } catch (error: any) {
-    if (error.code === "auth/popup-closed-by-user") {
-      console.log("[Auth] Sign-in cancelled by user");
+    if (error.code === 'auth/popup-closed-by-user') {
+      console.log('[Auth] Sign-in cancelled by user');
       return null;
     }
     throw error;
@@ -158,7 +158,7 @@ export async function signInWithGoogle(): Promise<User | null> {
 export async function signOutUser(): Promise<void> {
   if (!auth) return;
   await signOut(auth);
-  console.log("[Auth] Signed out");
+  console.log('[Auth] Signed out');
 }
 
 /**
@@ -166,9 +166,7 @@ export async function signOutUser(): Promise<void> {
  * Callback receives user if authenticated, null otherwise
  * Note: This only tracks Firebase auth state, not server authorization
  */
-export function onAuthChange(
-  callback: (user: User | null) => void
-): () => void {
+export function onAuthChange(callback: (user: User | null) => void): () => void {
   // Local dev mode: no Firebase, skip auth entirely
   if (!auth) {
     setTimeout(() => callback(null), 0);
diff --git a/samples/client/lit/personalized_learning/src/flashcard.ts b/samples/client/lit/personalized_learning/src/flashcard.ts
index 1ae96d554..264ff1606 100644
--- a/samples/client/lit/personalized_learning/src/flashcard.ts
+++ b/samples/client/lit/personalized_learning/src/flashcard.ts
@@ -21,34 +21,32 @@
  * This is a custom component for the personalized learning demo.
  */
 
-import { html, css, nothing, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { v0_8 } from "@a2ui/web-lib";
-import type { StringValue } from "./types.js";
+import {html, css, nothing, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {v0_8} from '@a2ui/web-lib';
+import type {StringValue} from './types.js';
 
-type A2UIModelProcessorInstance = InstanceType<
-  typeof v0_8.Data.A2uiMessageProcessor
->;
+type A2UIModelProcessorInstance = InstanceType<typeof v0_8.Data.A2uiMessageProcessor>;
 
-@customElement("a2ui-flashcard")
+@customElement('a2ui-flashcard')
 export class Flashcard extends LitElement {
-  @property({ attribute: false })
+  @property({attribute: false})
   front: StringValue | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   back: StringValue | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   category: StringValue | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   processor: A2UIModelProcessorInstance | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   component: v0_8.Types.AnyComponentNode | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   surfaceId: string | null = null;
 
   @state()
@@ -120,7 +118,7 @@ export class Flashcard extends LitElement {
     }
 
     .flashcard-category::before {
-      content: "";
+      content: '';
       width: 8px;
       height: 8px;
       background: currentColor;
@@ -195,27 +193,31 @@ export class Flashcard extends LitElement {
   `;
 
   private resolveStringValue(value: StringValue | null): string {
-    if (!value) return "";
-
-    if (typeof value === "object") {
-      if ("literalString" in value && value.literalString !== undefined && value.literalString !== null) {
+    if (!value) return '';
+
+    if (typeof value === 'object') {
+      if (
+        'literalString' in value &&
+        value.literalString !== undefined &&
+        value.literalString !== null
+      ) {
         return value.literalString as string;
-      } else if ("literal" in value && value.literal !== undefined && value.literal !== null) {
+      } else if ('literal' in value && value.literal !== undefined && value.literal !== null) {
         return String(value.literal);
-      } else if ("path" in value && value.path) {
+      } else if ('path' in value && value.path) {
         if (!this.processor || !this.component) {
-          return "(no processor)";
+          return '(no processor)';
         }
         const resolved = this.processor.getData(
           this.component,
           value.path,
-          this.surfaceId ?? "default"
+          this.surfaceId ?? 'default',
         );
-        return typeof resolved === "string" ? resolved : "";
+        return typeof resolved === 'string' ? resolved : '';
       }
     }
 
-    return "";
+    return '';
   }
 
   private handleClick() {
@@ -230,16 +232,14 @@ export class Flashcard extends LitElement {
     return html`
       <div
         class=${classMap({
-          "flashcard-container": true,
+          'flashcard-container': true,
           flipped: this._flipped,
         })}
         @click=${this.handleClick}
       >
         <div class="flashcard-face flashcard-front">
           <span class="label-front">Q</span>
-          ${categoryText
-            ? html`<div class="flashcard-category">${categoryText}</div>`
-            : nothing}
+          ${categoryText ? html`<div class="flashcard-category">${categoryText}</div>` : nothing}
           <div class="flashcard-content">${frontText}</div>
           <div class="flashcard-hint">
             <span class="icon">↻</span>
@@ -248,9 +248,7 @@ export class Flashcard extends LitElement {
         </div>
         <div class="flashcard-face flashcard-back">
           <span class="label-back">A</span>
-          ${categoryText
-            ? html`<div class="flashcard-category">${categoryText}</div>`
-            : nothing}
+          ${categoryText ? html`<div class="flashcard-category">${categoryText}</div>` : nothing}
           <div class="flashcard-content">${backText}</div>
           <div class="flashcard-hint">
             <span class="icon">↻</span>
@@ -264,6 +262,6 @@ export class Flashcard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "a2ui-flashcard": Flashcard;
+    'a2ui-flashcard': Flashcard;
   }
 }
diff --git a/samples/client/lit/personalized_learning/src/main.ts b/samples/client/lit/personalized_learning/src/main.ts
index cbbb87618..400788377 100644
--- a/samples/client/lit/personalized_learning/src/main.ts
+++ b/samples/client/lit/personalized_learning/src/main.ts
@@ -23,10 +23,10 @@
  */
 
 // Import A2UI web components (registers custom elements, including QuizCard)
-import "@a2ui/web-lib/ui";
+import '@a2ui/web-lib/ui';
 
-import { ChatOrchestrator } from "./chat-orchestrator";
-import { A2UIRenderer } from "./a2ui-renderer";
+import {ChatOrchestrator} from './chat-orchestrator';
+import {A2UIRenderer} from './a2ui-renderer';
 import {
   onAuthChange,
   signInWithGoogle,
@@ -34,26 +34,26 @@ import {
   getIdToken,
   isFirebaseConfigured,
   checkServerAuthorization,
-} from "./firebase-auth";
+} from './firebase-auth';
 
 // Store current user for display
 let currentUserEmail: string | null = null;
 
 // Initialize the application
 async function init() {
-  console.log("[Demo] Initializing...");
+  console.log('[Demo] Initializing...');
 
   // Local dev mode: skip auth if Firebase not configured
   if (!isFirebaseConfigured) {
-    console.log("[Demo] Running in local dev mode (no auth required)");
-    currentUserEmail = "Local Dev User";
+    console.log('[Demo] Running in local dev mode (no auth required)');
+    currentUserEmail = 'Local Dev User';
     showApp();
     initializeApp();
     return;
   }
 
   // Set up auth state listener
-  onAuthChange(async (user) => {
+  onAuthChange(async user => {
     if (user) {
       // User is authenticated with Firebase, now check server authorization
       console.log(`[Demo] Firebase auth OK: ${user.email}, checking server authorization...`);
@@ -67,11 +67,11 @@ async function init() {
         // User authenticated but not authorized - sign them out
         console.log(`[Demo] Not authorized: ${user.email}`);
         await signOutUser();
-        showLoginScreen("Your email is not authorized to access this application.");
+        showLoginScreen('Your email is not authorized to access this application.');
       }
     } else {
       currentUserEmail = null;
-      console.log("[Demo] Not authenticated");
+      console.log('[Demo] Not authenticated');
       showLoginScreen();
     }
   });
@@ -79,15 +79,15 @@ async function init() {
 
 // Show login screen
 function showLoginScreen(errorMessage?: string) {
-  const appContainer = document.getElementById("app-container");
-  const loginScreen = document.getElementById("login-screen");
+  const appContainer = document.getElementById('app-container');
+  const loginScreen = document.getElementById('login-screen');
 
-  if (appContainer) appContainer.style.display = "none";
+  if (appContainer) appContainer.style.display = 'none';
 
   if (!loginScreen) {
     // Create login screen
-    const screen = document.createElement("div");
-    screen.id = "login-screen";
+    const screen = document.createElement('div');
+    screen.id = 'login-screen';
     screen.innerHTML = `
       <div class="login-container">
         <div class="login-card">
@@ -113,24 +113,24 @@ function showLoginScreen(errorMessage?: string) {
     document.body.insertBefore(screen, document.body.firstChild);
 
     // Add login button handler
-    document.getElementById("google-signin-btn")?.addEventListener("click", handleSignIn);
+    document.getElementById('google-signin-btn')?.addEventListener('click', handleSignIn);
   } else {
-    loginScreen.style.display = "flex";
+    loginScreen.style.display = 'flex';
   }
 
   // Show error message if provided
   if (errorMessage) {
-    const errorEl = document.getElementById("login-error");
+    const errorEl = document.getElementById('login-error');
     if (errorEl) errorEl.textContent = errorMessage;
   }
 }
 
 // Handle sign in
 async function handleSignIn() {
-  const errorEl = document.getElementById("login-error");
-  const btn = document.getElementById("google-signin-btn") as HTMLButtonElement;
+  const errorEl = document.getElementById('login-error');
+  const btn = document.getElementById('google-signin-btn') as HTMLButtonElement;
 
-  if (errorEl) errorEl.textContent = "";
+  if (errorEl) errorEl.textContent = '';
   if (btn) btn.disabled = true;
 
   try {
@@ -145,7 +145,7 @@ async function handleSignIn() {
   } catch (error: any) {
     // Only catches Firebase errors (network issues, etc.), not authorization errors
     if (errorEl) {
-      errorEl.textContent = error.message || "Sign in failed. Please try again.";
+      errorEl.textContent = error.message || 'Sign in failed. Please try again.';
     }
     if (btn) btn.disabled = false;
   }
@@ -153,14 +153,14 @@ async function handleSignIn() {
 
 // Show main app
 function showApp() {
-  const loginScreen = document.getElementById("login-screen");
-  const appContainer = document.getElementById("app-container");
+  const loginScreen = document.getElementById('login-screen');
+  const appContainer = document.getElementById('app-container');
 
-  if (loginScreen) loginScreen.style.display = "none";
-  if (appContainer) appContainer.style.display = "flex";
+  if (loginScreen) loginScreen.style.display = 'none';
+  if (appContainer) appContainer.style.display = 'flex';
 
   // Update user display if element exists
-  const userDisplay = document.getElementById("user-email");
+  const userDisplay = document.getElementById('user-email');
   if (userDisplay && currentUserEmail) {
     userDisplay.textContent = currentUserEmail;
   }
@@ -182,34 +182,34 @@ function initializeApp() {
   setupEventHandlers(orchestrator);
 
   // Set up sign out button
-  document.getElementById("sign-out-btn")?.addEventListener("click", async () => {
+  document.getElementById('sign-out-btn')?.addEventListener('click', async () => {
     await signOutUser();
     (window as any).__appInitialized = false;
   });
 
-  console.log("[Demo] Ready!");
+  console.log('[Demo] Ready!');
 }
 
 // Export getIdToken for use by API clients
-export { getIdToken };
+export {getIdToken};
 
 function setupEventHandlers(orchestrator: ChatOrchestrator) {
-  const chatInput = document.getElementById("chatInput") as HTMLTextAreaElement;
-  const sendBtn = document.getElementById("sendBtn") as HTMLButtonElement;
-  const chatArea = document.getElementById("chatArea") as HTMLDivElement;
+  const chatInput = document.getElementById('chatInput') as HTMLTextAreaElement;
+  const sendBtn = document.getElementById('sendBtn') as HTMLButtonElement;
+  const chatArea = document.getElementById('chatArea') as HTMLDivElement;
 
   // Auto-resize textarea
-  chatInput.addEventListener("input", () => {
-    chatInput.style.height = "auto";
-    chatInput.style.height = Math.min(chatInput.scrollHeight, 200) + "px";
+  chatInput.addEventListener('input', () => {
+    chatInput.style.height = 'auto';
+    chatInput.style.height = Math.min(chatInput.scrollHeight, 200) + 'px';
 
     // Enable/disable send button
-    sendBtn.disabled = chatInput.value.trim() === "";
+    sendBtn.disabled = chatInput.value.trim() === '';
   });
 
   // Send on Enter (without Shift)
-  chatInput.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
+  chatInput.addEventListener('keydown', e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       if (chatInput.value.trim()) {
         sendMessage(orchestrator, chatInput, chatArea);
@@ -218,19 +218,19 @@ function setupEventHandlers(orchestrator: ChatOrchestrator) {
   });
 
   // Send on button click
-  sendBtn.addEventListener("click", () => {
+  sendBtn.addEventListener('click', () => {
     if (chatInput.value.trim()) {
       sendMessage(orchestrator, chatInput, chatArea);
     }
   });
 
   // Handle suggestion chips
-  document.querySelectorAll(".suggestion-chip").forEach((chip) => {
-    chip.addEventListener("click", () => {
-      const prompt = chip.getAttribute("data-prompt");
+  document.querySelectorAll('.suggestion-chip').forEach(chip => {
+    chip.addEventListener('click', () => {
+      const prompt = chip.getAttribute('data-prompt');
       if (prompt) {
         chatInput.value = prompt;
-        chatInput.dispatchEvent(new Event("input"));
+        chatInput.dispatchEvent(new Event('input'));
         sendMessage(orchestrator, chatInput, chatArea);
       }
     });
@@ -240,18 +240,18 @@ function setupEventHandlers(orchestrator: ChatOrchestrator) {
 async function sendMessage(
   orchestrator: ChatOrchestrator,
   input: HTMLTextAreaElement,
-  chatArea: HTMLDivElement
+  chatArea: HTMLDivElement,
 ) {
   const message = input.value.trim();
   if (!message) return;
 
   // Clear input
-  input.value = "";
-  input.style.height = "auto";
-  (document.getElementById("sendBtn") as HTMLButtonElement).disabled = true;
+  input.value = '';
+  input.style.height = 'auto';
+  (document.getElementById('sendBtn') as HTMLButtonElement).disabled = true;
 
   // Hide welcome screen if visible
-  const welcomeScreen = chatArea.querySelector(".welcome-screen");
+  const welcomeScreen = chatArea.querySelector('.welcome-screen');
   if (welcomeScreen) {
     welcomeScreen.remove();
   }
@@ -269,10 +269,10 @@ async function sendMessage(
     // Process the message through the orchestrator
     await orchestrator.processMessage(message, assistantMessage);
   } catch (error) {
-    console.error("[Demo] Error processing message:", error);
+    console.error('[Demo] Error processing message:', error);
     setAssistantMessageError(
       assistantMessage,
-      "I'm sorry, I encountered an error. Please try again."
+      "I'm sorry, I encountered an error. Please try again.",
     );
   }
 
@@ -281,8 +281,8 @@ async function sendMessage(
 }
 
 function addUserMessage(chatArea: HTMLDivElement, message: string) {
-  const messageEl = document.createElement("div");
-  messageEl.className = "message user";
+  const messageEl = document.createElement('div');
+  messageEl.className = 'message user';
   messageEl.innerHTML = `
     <div class="message-avatar">M</div>
     <div class="message-content">
@@ -294,8 +294,8 @@ function addUserMessage(chatArea: HTMLDivElement, message: string) {
 }
 
 function addAssistantMessagePlaceholder(chatArea: HTMLDivElement): HTMLDivElement {
-  const messageEl = document.createElement("div");
-  messageEl.className = "message assistant";
+  const messageEl = document.createElement('div');
+  messageEl.className = 'message assistant';
   messageEl.innerHTML = `
     <div class="message-avatar">
       <span class="material-symbols-outlined">auto_awesome</span>
@@ -316,14 +316,14 @@ function addAssistantMessagePlaceholder(chatArea: HTMLDivElement): HTMLDivElemen
 }
 
 function setAssistantMessageError(messageEl: HTMLDivElement, error: string) {
-  const textEl = messageEl.querySelector(".message-text");
+  const textEl = messageEl.querySelector('.message-text');
   if (textEl) {
     textEl.innerHTML = `<p style="color: #f87171;">${escapeHtml(error)}</p>`;
   }
 }
 
 function escapeHtml(text: string): string {
-  const div = document.createElement("div");
+  const div = document.createElement('div');
   div.textContent = text;
   return div.innerHTML;
 }
diff --git a/samples/client/lit/personalized_learning/src/quiz-card.ts b/samples/client/lit/personalized_learning/src/quiz-card.ts
index 82a1294c6..a590597be 100644
--- a/samples/client/lit/personalized_learning/src/quiz-card.ts
+++ b/samples/client/lit/personalized_learning/src/quiz-card.ts
@@ -21,10 +21,10 @@
  * This is a custom component for the personalized learning demo.
  */
 
-import { html, css, nothing, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import type { StringValue } from "./types.js";
+import {html, css, nothing, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import type {StringValue} from './types.js';
 
 interface QuizOption {
   label: StringValue;
@@ -32,18 +32,18 @@ interface QuizOption {
   isCorrect: boolean;
 }
 
-@customElement("a2ui-quizcard")
+@customElement('a2ui-quizcard')
 export class QuizCard extends LitElement {
-  @property({ attribute: false })
+  @property({attribute: false})
   question: StringValue | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   options: QuizOption[] = [];
 
-  @property({ attribute: false })
+  @property({attribute: false})
   explanation: StringValue | null = null;
 
-  @property({ attribute: false })
+  @property({attribute: false})
   category: StringValue | null = null;
 
   @state()
@@ -86,7 +86,7 @@ export class QuizCard extends LitElement {
     }
 
     .category::before {
-      content: "";
+      content: '';
       width: 8px;
       height: 8px;
       background: #6366f1;
@@ -240,17 +240,21 @@ export class QuizCard extends LitElement {
   `;
 
   private resolveStringValue(value: StringValue | null): string {
-    if (!value) return "";
-
-    if (typeof value === "object") {
-      if ("literalString" in value && value.literalString !== undefined && value.literalString !== null) {
+    if (!value) return '';
+
+    if (typeof value === 'object') {
+      if (
+        'literalString' in value &&
+        value.literalString !== undefined &&
+        value.literalString !== null
+      ) {
         return value.literalString as string;
-      } else if ("literal" in value && value.literal !== undefined && value.literal !== null) {
+      } else if ('literal' in value && value.literal !== undefined && value.literal !== null) {
         return String(value.literal);
       }
     }
 
-    return "";
+    return '';
   }
 
   private handleOptionClick(value: string) {
@@ -277,9 +281,7 @@ export class QuizCard extends LitElement {
 
     return html`
       <div class="quiz-card">
-        ${categoryText
-          ? html`<div class="category">${categoryText}</div>`
-          : nothing}
+        ${categoryText ? html`<div class="category">${categoryText}</div>` : nothing}
 
         <div class="question">${questionText}</div>
 
@@ -298,7 +300,7 @@ export class QuizCard extends LitElement {
                   disabled: this.submitted,
                   correct: showCorrect && isSelected,
                   incorrect: showIncorrect,
-                  "correct-answer": showCorrect && !isSelected,
+                  'correct-answer': showCorrect && !isSelected,
                 })}
                 @click=${() => this.handleOptionClick(option.value)}
               >
@@ -328,10 +330,10 @@ export class QuizCard extends LitElement {
               </button>
             `
           : html`
-              <div class=${classMap({ explanation: true, incorrect: !isCorrect })}>
+              <div class=${classMap({explanation: true, incorrect: !isCorrect})}>
                 <div class="explanation-header">
-                  <span class="icon">${isCorrect ? "✓" : "✗"}</span>
-                  ${isCorrect ? "Correct!" : "Not quite..."}
+                  <span class="icon">${isCorrect ? '✓' : '✗'}</span>
+                  ${isCorrect ? 'Correct!' : 'Not quite...'}
                 </div>
                 <div class="explanation-text">${explanationText}</div>
               </div>
@@ -343,6 +345,6 @@ export class QuizCard extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "a2ui-quizcard": QuizCard;
+    'a2ui-quizcard': QuizCard;
   }
 }
diff --git a/samples/client/lit/personalized_learning/src/theme-provider.ts b/samples/client/lit/personalized_learning/src/theme-provider.ts
index ddce91ab0..fa80b3be3 100644
--- a/samples/client/lit/personalized_learning/src/theme-provider.ts
+++ b/samples/client/lit/personalized_learning/src/theme-provider.ts
@@ -21,36 +21,44 @@
  * required by the newer A2UI component library.
  */
 
-import { SignalWatcher } from "@lit-labs/signals";
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { provide } from "@lit/context";
-import { v0_8 } from "@a2ui/web-lib";
-import * as UI from "@a2ui/web-lib/ui";
-import { theme as defaultTheme } from "./theme.js";
+import {SignalWatcher} from '@lit-labs/signals';
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {provide} from '@lit/context';
+import {v0_8} from '@a2ui/web-lib';
+import * as UI from '@a2ui/web-lib/ui';
+import {theme as defaultTheme} from './theme.js';
 
 // Import and register custom components
-import { Flashcard } from "./flashcard.js";
-import { QuizCard } from "./quiz-card.js";
+import {Flashcard} from './flashcard.js';
+import {QuizCard} from './quiz-card.js';
 
-UI.componentRegistry.register("Flashcard", Flashcard as unknown as UI.CustomElementConstructorOf<HTMLElement>, "a2ui-flashcard");
-UI.componentRegistry.register("QuizCard", QuizCard as unknown as UI.CustomElementConstructorOf<HTMLElement>, "a2ui-quizcard");
+UI.componentRegistry.register(
+  'Flashcard',
+  Flashcard as unknown as UI.CustomElementConstructorOf<HTMLElement>,
+  'a2ui-flashcard',
+);
+UI.componentRegistry.register(
+  'QuizCard',
+  QuizCard as unknown as UI.CustomElementConstructorOf<HTMLElement>,
+  'a2ui-quizcard',
+);
 
 // Type alias for the processor - use the actual exported class name
 type A2UIModelProcessorInstance = InstanceType<typeof v0_8.Data.A2uiMessageProcessor>;
 
-@customElement("a2ui-theme-provider")
+@customElement('a2ui-theme-provider')
 export class A2UIThemeProvider extends SignalWatcher(LitElement) {
-  @provide({ context: UI.Context.themeContext })
+  @provide({context: UI.Context.themeContext})
   theme: v0_8.Types.Theme = defaultTheme;
 
-  @property({ type: String })
-  surfaceId: string = "";
+  @property({type: String})
+  surfaceId: string = '';
 
-  @property({ type: Object })
+  @property({type: Object})
   surface: v0_8.Types.Surface | undefined;
 
-  @property({ type: Object })
+  @property({type: Object})
   processor: A2UIModelProcessorInstance | undefined;
 
   static styles = css`
@@ -77,6 +85,6 @@ export class A2UIThemeProvider extends SignalWatcher(LitElement) {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "a2ui-theme-provider": A2UIThemeProvider;
+    'a2ui-theme-provider': A2UIThemeProvider;
   }
 }
diff --git a/samples/client/lit/personalized_learning/src/theme.ts b/samples/client/lit/personalized_learning/src/theme.ts
index ca085573e..caa5cf57d 100644
--- a/samples/client/lit/personalized_learning/src/theme.ts
+++ b/samples/client/lit/personalized_learning/src/theme.ts
@@ -19,7 +19,7 @@
  * Based on the shell sample's default-theme.ts but simplified.
  */
 
-import { v0_8 } from "@a2ui/web-lib";
+import {v0_8} from '@a2ui/web-lib';
 
 // Minimal theme that provides all required component styles
 export const theme: v0_8.Types.Theme = {
@@ -27,18 +27,18 @@ export const theme: v0_8.Types.Theme = {
   components: {
     AudioPlayer: {},
     Button: {
-      "layout-pt-2": true,
-      "layout-pb-2": true,
-      "layout-pl-3": true,
-      "layout-pr-3": true,
-      "border-br-12": true,
-      "border-bw-0": true,
-      "color-bgc-p30": true,
+      'layout-pt-2': true,
+      'layout-pb-2': true,
+      'layout-pl-3': true,
+      'layout-pr-3': true,
+      'border-br-12': true,
+      'border-bw-0': true,
+      'color-bgc-p30': true,
     },
     Card: {
-      "border-br-9": true,
-      "layout-p-4": true,
-      "color-bgc-n100": true
+      'border-br-9': true,
+      'layout-p-4': true,
+      'color-bgc-n100': true,
     },
     CheckBox: {
       element: {},
@@ -46,7 +46,7 @@ export const theme: v0_8.Types.Theme = {
       container: {},
     },
     Column: {
-      "layout-g-2": true,
+      'layout-g-2': true,
     },
     DateTimeInput: {
       container: {},
@@ -56,8 +56,8 @@ export const theme: v0_8.Types.Theme = {
     Divider: {},
     Image: {
       all: {
-        "border-br-5": true,
-        "layout-w-100": true,
+        'border-br-5': true,
+        'layout-w-100': true,
       },
       avatar: {},
       header: {},
@@ -68,8 +68,8 @@ export const theme: v0_8.Types.Theme = {
     },
     Icon: {},
     List: {
-      "layout-g-4": true,
-      "layout-p-2": true,
+      'layout-g-4': true,
+      'layout-p-2': true,
     },
     Modal: {
       backdrop: {},
@@ -81,7 +81,7 @@ export const theme: v0_8.Types.Theme = {
       element: {},
     },
     Row: {
-      "layout-g-4": true,
+      'layout-g-4': true,
     },
     Slider: {
       container: {},
@@ -90,42 +90,42 @@ export const theme: v0_8.Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
       all: {
-        "layout-w-100": true,
+        'layout-w-100': true,
       },
       h1: {
-        "typography-f-sf": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "typography-sz-hs": true,
+        'typography-f-sf': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'typography-sz-hs': true,
       },
       h2: {
-        "typography-f-sf": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'typography-sz-tl': true,
       },
       h3: {
-        "typography-f-sf": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'typography-sz-tl': true,
       },
       h4: {
-        "typography-f-sf": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "typography-sz-bl": true,
+        'typography-f-sf': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'typography-sz-bl': true,
       },
       h5: {
-        "typography-f-sf": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "typography-sz-bm": true,
+        'typography-f-sf': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'typography-sz-bm': true,
       },
       body: {},
       caption: {},
@@ -136,7 +136,7 @@ export const theme: v0_8.Types.Theme = {
       element: {},
     },
     Video: {
-      "border-br-5": true,
+      'border-br-5': true,
     },
   },
   elements: {
diff --git a/samples/client/lit/personalized_learning/tests/integration-tests.mjs b/samples/client/lit/personalized_learning/tests/integration-tests.mjs
index 7b3377bd6..16349c020 100644
--- a/samples/client/lit/personalized_learning/tests/integration-tests.mjs
+++ b/samples/client/lit/personalized_learning/tests/integration-tests.mjs
@@ -21,11 +21,11 @@
  * API-dependent tests are skipped but documented for manual verification.
  */
 
-import { strict as assert } from 'assert';
+import {strict as assert} from 'assert';
 
-console.log("=".repeat(60));
-console.log("Personalized Learning Demo - Integration Tests");
-console.log("=".repeat(60));
+console.log('='.repeat(60));
+console.log('Personalized Learning Demo - Integration Tests');
+console.log('='.repeat(60));
 
 let passed = 0;
 let failed = 0;
@@ -52,29 +52,29 @@ function skipTest(name, reason) {
 // Chat Flow Integration Tests
 // =============================================================================
 
-console.log("\n--- Chat Flow Integration Tests ---\n");
+console.log('\n--- Chat Flow Integration Tests ---\n');
 
 // Simulate the full chat flow from message to A2UI rendering
 function simulateChatFlow(userMessage) {
   // Step 1: Intent detection
   const lower = userMessage.toLowerCase();
-  let format = "general";
+  let format = 'general';
 
-  if (lower.includes("flashcard")) format = "flashcards";
-  else if (lower.includes("podcast") || lower.includes("audio")) format = "audio";
-  else if (lower.includes("video")) format = "video";
-  else if (lower.includes("quiz")) format = "quiz";
-  else if (lower.match(/^(hi|hello|hey)/i)) format = "greeting";
-  else if (lower.includes("explain") || lower.includes("atp")) format = "flashcards";
+  if (lower.includes('flashcard')) format = 'flashcards';
+  else if (lower.includes('podcast') || lower.includes('audio')) format = 'audio';
+  else if (lower.includes('video')) format = 'video';
+  else if (lower.includes('quiz')) format = 'quiz';
+  else if (lower.match(/^(hi|hello|hey)/i)) format = 'greeting';
+  else if (lower.includes('explain') || lower.includes('atp')) format = 'flashcards';
 
   // Step 2: Get content (simulated)
   let content;
-  if (format === "greeting") {
-    content = { format: "greeting", response: "Hello! How can I help you?" };
-  } else if (["flashcards", "audio", "video"].includes(format)) {
+  if (format === 'greeting') {
+    content = {format: 'greeting', response: 'Hello! How can I help you?'};
+  } else if (['flashcards', 'audio', 'video'].includes(format)) {
     content = getFallbackContent(format);
   } else {
-    content = { format: "general", response: "I understand. Let me help you." };
+    content = {format: 'general', response: 'I understand. Let me help you.'};
   }
 
   // Step 3: Prepare for rendering
@@ -96,52 +96,66 @@ function simulateChatFlow(userMessage) {
 }
 
 function getFallbackContent(format) {
-  const surfaceId = "learningContent";
+  const surfaceId = 'learningContent';
 
   const contents = {
     flashcards: {
-      format: "flashcards",
+      format: 'flashcards',
       surfaceId,
       a2ui: [
-        { beginRendering: { surfaceId, root: "mainColumn" } },
+        {beginRendering: {surfaceId, root: 'mainColumn'}},
         {
           surfaceUpdate: {
             surfaceId,
             components: [
-              { id: "mainColumn", component: { Column: { children: { explicitList: ["card1"] } } } },
-              { id: "card1", component: { Flashcard: { front: { literalString: "Q?" }, back: { literalString: "A!" } } } },
+              {
+                id: 'mainColumn',
+                component: {Column: {children: {explicitList: ['card1']}}},
+              },
+              {
+                id: 'card1',
+                component: {
+                  Flashcard: {front: {literalString: 'Q?'}, back: {literalString: 'A!'}},
+                },
+              },
             ],
           },
         },
       ],
     },
     audio: {
-      format: "audio",
+      format: 'audio',
       surfaceId,
       a2ui: [
-        { beginRendering: { surfaceId, root: "audioCard" } },
+        {beginRendering: {surfaceId, root: 'audioCard'}},
         {
           surfaceUpdate: {
             surfaceId,
             components: [
-              { id: "audioCard", component: { Card: { child: "audioPlayer" } } },
-              { id: "audioPlayer", component: { Audio: { src: { literalString: "/assets/podcast.m4a" } } } },
+              {id: 'audioCard', component: {Card: {child: 'audioPlayer'}}},
+              {
+                id: 'audioPlayer',
+                component: {Audio: {src: {literalString: '/assets/podcast.m4a'}}},
+              },
             ],
           },
         },
       ],
     },
     video: {
-      format: "video",
+      format: 'video',
       surfaceId,
       a2ui: [
-        { beginRendering: { surfaceId, root: "videoCard" } },
+        {beginRendering: {surfaceId, root: 'videoCard'}},
         {
           surfaceUpdate: {
             surfaceId,
             components: [
-              { id: "videoCard", component: { Card: { child: "videoPlayer" } } },
-              { id: "videoPlayer", component: { Video: { src: { literalString: "/assets/video.mp4" } } } },
+              {id: 'videoCard', component: {Card: {child: 'videoPlayer'}}},
+              {
+                id: 'videoPlayer',
+                component: {Video: {src: {literalString: '/assets/video.mp4'}}},
+              },
             ],
           },
         },
@@ -149,41 +163,41 @@ function getFallbackContent(format) {
     },
   };
 
-  return contents[format] || { format: "unknown", a2ui: [] };
+  return contents[format] || {format: 'unknown', a2ui: []};
 }
 
-test("chat flow handles flashcard request end-to-end", () => {
-  const result = simulateChatFlow("Create some flashcards about ATP");
-  assert.equal(result.detectedFormat, "flashcards");
+test('chat flow handles flashcard request end-to-end', () => {
+  const result = simulateChatFlow('Create some flashcards about ATP');
+  assert.equal(result.detectedFormat, 'flashcards');
   assert.ok(result.hasA2UI);
-  assert.equal(result.contentType, "flashcards");
+  assert.equal(result.contentType, 'flashcards');
   assert.equal(result.a2uiMessageCount, 2);
 });
 
-test("chat flow handles audio request end-to-end", () => {
-  const result = simulateChatFlow("I want to listen to the podcast");
-  assert.equal(result.detectedFormat, "audio");
+test('chat flow handles audio request end-to-end', () => {
+  const result = simulateChatFlow('I want to listen to the podcast');
+  assert.equal(result.detectedFormat, 'audio');
   assert.ok(result.hasA2UI);
-  assert.equal(result.contentType, "audio");
+  assert.equal(result.contentType, 'audio');
 });
 
-test("chat flow handles video request end-to-end", () => {
-  const result = simulateChatFlow("Show me a video about this");
-  assert.equal(result.detectedFormat, "video");
+test('chat flow handles video request end-to-end', () => {
+  const result = simulateChatFlow('Show me a video about this');
+  assert.equal(result.detectedFormat, 'video');
   assert.ok(result.hasA2UI);
-  assert.equal(result.contentType, "video");
+  assert.equal(result.contentType, 'video');
 });
 
-test("chat flow handles greeting without A2UI", () => {
-  const result = simulateChatFlow("Hello there!");
-  assert.equal(result.detectedFormat, "greeting");
+test('chat flow handles greeting without A2UI', () => {
+  const result = simulateChatFlow('Hello there!');
+  assert.equal(result.detectedFormat, 'greeting');
   assert.ok(!result.hasA2UI);
-  assert.equal(result.contentType, "greeting");
+  assert.equal(result.contentType, 'greeting');
 });
 
-test("chat flow handles general question", () => {
+test('chat flow handles general question', () => {
   const result = simulateChatFlow("What's the weather like?");
-  assert.equal(result.detectedFormat, "general");
+  assert.equal(result.detectedFormat, 'general');
   assert.ok(!result.hasA2UI);
 });
 
@@ -191,11 +205,11 @@ test("chat flow handles general question", () => {
 // A2UI Component Hierarchy Tests
 // =============================================================================
 
-console.log("\n--- A2UI Component Hierarchy Tests ---\n");
+console.log('\n--- A2UI Component Hierarchy Tests ---\n');
 
 function buildComponentTree(components) {
   const componentMap = new Map(components.map(c => [c.id, c]));
-  const tree = { roots: [], orphans: [] };
+  const tree = {roots: [], orphans: []};
   const referenced = new Set();
 
   for (const comp of components) {
@@ -220,30 +234,30 @@ function buildComponentTree(components) {
   return tree;
 }
 
-test("component tree identifies root components", () => {
+test('component tree identifies root components', () => {
   const components = [
-    { id: "root", component: { Column: { children: { explicitList: ["child1", "child2"] } } } },
-    { id: "child1", component: { Text: { text: { literalString: "A" } } } },
-    { id: "child2", component: { Text: { text: { literalString: "B" } } } },
+    {id: 'root', component: {Column: {children: {explicitList: ['child1', 'child2']}}}},
+    {id: 'child1', component: {Text: {text: {literalString: 'A'}}}},
+    {id: 'child2', component: {Text: {text: {literalString: 'B'}}}},
   ];
   const tree = buildComponentTree(components);
-  assert.deepEqual(tree.roots, ["root"]);
+  assert.deepEqual(tree.roots, ['root']);
 });
 
-test("component tree handles Card with single child", () => {
+test('component tree handles Card with single child', () => {
   const components = [
-    { id: "card", component: { Card: { child: "content" } } },
-    { id: "content", component: { Text: { text: { literalString: "Hello" } } } },
+    {id: 'card', component: {Card: {child: 'content'}}},
+    {id: 'content', component: {Text: {text: {literalString: 'Hello'}}}},
   ];
   const tree = buildComponentTree(components);
-  assert.deepEqual(tree.roots, ["card"]);
+  assert.deepEqual(tree.roots, ['card']);
 });
 
 // =============================================================================
 // Surface State Management Tests
 // =============================================================================
 
-console.log("\n--- Surface State Management Tests ---\n");
+console.log('\n--- Surface State Management Tests ---\n');
 
 class MockSurfaceManager {
   constructor() {
@@ -252,32 +266,32 @@ class MockSurfaceManager {
 
   processMessage(message) {
     if (message.beginRendering) {
-      const { surfaceId, root } = message.beginRendering;
-      this.surfaces.set(surfaceId, { root, components: new Map(), rendered: false });
-      return { action: "begin", surfaceId };
+      const {surfaceId, root} = message.beginRendering;
+      this.surfaces.set(surfaceId, {root, components: new Map(), rendered: false});
+      return {action: 'begin', surfaceId};
     }
 
     if (message.surfaceUpdate) {
-      const { surfaceId, components } = message.surfaceUpdate;
+      const {surfaceId, components} = message.surfaceUpdate;
       const surface = this.surfaces.get(surfaceId);
       if (!surface) {
-        return { action: "error", error: `Unknown surface: ${surfaceId}` };
+        return {action: 'error', error: `Unknown surface: ${surfaceId}`};
       }
 
       for (const comp of components) {
         surface.components.set(comp.id, comp.component);
       }
       surface.rendered = true;
-      return { action: "update", surfaceId, componentCount: components.length };
+      return {action: 'update', surfaceId, componentCount: components.length};
     }
 
     if (message.deleteSurface) {
-      const { surfaceId } = message.deleteSurface;
+      const {surfaceId} = message.deleteSurface;
       this.surfaces.delete(surfaceId);
-      return { action: "delete", surfaceId };
+      return {action: 'delete', surfaceId};
     }
 
-    return { action: "unknown" };
+    return {action: 'unknown'};
   }
 
   getSurface(surfaceId) {
@@ -285,44 +299,44 @@ class MockSurfaceManager {
   }
 }
 
-test("surface manager processes beginRendering", () => {
+test('surface manager processes beginRendering', () => {
   const manager = new MockSurfaceManager();
-  const result = manager.processMessage({ beginRendering: { surfaceId: "test", root: "main" } });
-  assert.equal(result.action, "begin");
-  assert.ok(manager.getSurface("test"));
+  const result = manager.processMessage({beginRendering: {surfaceId: 'test', root: 'main'}});
+  assert.equal(result.action, 'begin');
+  assert.ok(manager.getSurface('test'));
 });
 
-test("surface manager processes surfaceUpdate", () => {
+test('surface manager processes surfaceUpdate', () => {
   const manager = new MockSurfaceManager();
-  manager.processMessage({ beginRendering: { surfaceId: "test", root: "main" } });
+  manager.processMessage({beginRendering: {surfaceId: 'test', root: 'main'}});
   const result = manager.processMessage({
     surfaceUpdate: {
-      surfaceId: "test",
-      components: [{ id: "main", component: { Text: { text: { literalString: "Hello" } } } }]
-    }
+      surfaceId: 'test',
+      components: [{id: 'main', component: {Text: {text: {literalString: 'Hello'}}}}],
+    },
   });
-  assert.equal(result.action, "update");
+  assert.equal(result.action, 'update');
   assert.equal(result.componentCount, 1);
-  assert.ok(manager.getSurface("test").rendered);
+  assert.ok(manager.getSurface('test').rendered);
 });
 
-test("surface manager processes deleteSurface", () => {
+test('surface manager processes deleteSurface', () => {
   const manager = new MockSurfaceManager();
-  manager.processMessage({ beginRendering: { surfaceId: "test", root: "main" } });
-  const result = manager.processMessage({ deleteSurface: { surfaceId: "test" } });
-  assert.equal(result.action, "delete");
-  assert.ok(!manager.getSurface("test"));
+  manager.processMessage({beginRendering: {surfaceId: 'test', root: 'main'}});
+  const result = manager.processMessage({deleteSurface: {surfaceId: 'test'}});
+  assert.equal(result.action, 'delete');
+  assert.ok(!manager.getSurface('test'));
 });
 
-test("surface manager handles full A2UI payload", () => {
+test('surface manager handles full A2UI payload', () => {
   const manager = new MockSurfaceManager();
-  const payload = getFallbackContent("flashcards").a2ui;
+  const payload = getFallbackContent('flashcards').a2ui;
 
   for (const msg of payload) {
     manager.processMessage(msg);
   }
 
-  const surface = manager.getSurface("learningContent");
+  const surface = manager.getSurface('learningContent');
   assert.ok(surface);
   assert.ok(surface.rendered);
   assert.ok(surface.components.size > 0);
@@ -332,19 +346,19 @@ test("surface manager handles full A2UI payload", () => {
 // Error Handling Integration Tests
 // =============================================================================
 
-console.log("\n--- Error Handling Integration Tests ---\n");
+console.log('\n--- Error Handling Integration Tests ---\n');
 
-test("graceful handling of unknown surface update", () => {
+test('graceful handling of unknown surface update', () => {
   const manager = new MockSurfaceManager();
   const result = manager.processMessage({
-    surfaceUpdate: { surfaceId: "nonexistent", components: [] }
+    surfaceUpdate: {surfaceId: 'nonexistent', components: []},
   });
-  assert.equal(result.action, "error");
-  assert.ok(result.error.includes("Unknown surface"));
+  assert.equal(result.action, 'error');
+  assert.ok(result.error.includes('Unknown surface'));
 });
 
-test("content fallback returns valid structure for all formats", () => {
-  const formats = ["flashcards", "audio", "video"];
+test('content fallback returns valid structure for all formats', () => {
+  const formats = ['flashcards', 'audio', 'video'];
   for (const format of formats) {
     const content = getFallbackContent(format);
     assert.equal(content.format, format, `Format mismatch for ${format}`);
@@ -357,19 +371,19 @@ test("content fallback returns valid structure for all formats", () => {
 // API Integration Tests (require external services)
 // =============================================================================
 
-console.log("\n--- API Integration Tests ---\n");
+console.log('\n--- API Integration Tests ---\n');
 
-skipTest("Gemini API generates valid flashcard JSON", "requires API credentials");
-skipTest("A2A agent returns valid A2UI response", "requires agent server");
-skipTest("Full chat flow with live Gemini API", "requires API credentials");
+skipTest('Gemini API generates valid flashcard JSON', 'requires API credentials');
+skipTest('A2A agent returns valid A2UI response', 'requires agent server');
+skipTest('Full chat flow with live Gemini API', 'requires API credentials');
 
 // =============================================================================
 // Summary
 // =============================================================================
 
-console.log("\n" + "=".repeat(60));
+console.log('\n' + '='.repeat(60));
 console.log(`Integration Tests Complete: ${passed} passed, ${failed} failed, ${skipped} skipped`);
-console.log("=".repeat(60));
+console.log('='.repeat(60));
 
 if (failed > 0) {
   process.exit(1);
diff --git a/samples/client/lit/personalized_learning/tests/unit-tests.mjs b/samples/client/lit/personalized_learning/tests/unit-tests.mjs
index 282bea13a..0b666473f 100644
--- a/samples/client/lit/personalized_learning/tests/unit-tests.mjs
+++ b/samples/client/lit/personalized_learning/tests/unit-tests.mjs
@@ -21,11 +21,11 @@
  * and A2UI rendering without requiring external services.
  */
 
-import { strict as assert } from 'assert';
+import {strict as assert} from 'assert';
 
-console.log("=".repeat(60));
-console.log("Personalized Learning Demo - Unit Tests");
-console.log("=".repeat(60));
+console.log('='.repeat(60));
+console.log('Personalized Learning Demo - Unit Tests');
+console.log('='.repeat(60));
 
 let passed = 0;
 let failed = 0;
@@ -46,79 +46,88 @@ function test(name, fn) {
 // A2A Client Fallback Content Tests
 // =============================================================================
 
-console.log("\n--- A2A Client Fallback Content Tests ---\n");
+console.log('\n--- A2A Client Fallback Content Tests ---\n');
 
 // Full fallback content matching a2a-client.ts exactly
 function getFallbackContent(format) {
-  const surfaceId = "learningContent";
+  const surfaceId = 'learningContent';
 
   switch (format.toLowerCase()) {
-    case "flashcards":
+    case 'flashcards':
       return {
-        format: "flashcards",
+        format: 'flashcards',
         surfaceId,
         a2ui: [
-          { beginRendering: { surfaceId, root: "mainColumn" } },
+          {beginRendering: {surfaceId, root: 'mainColumn'}},
           {
             surfaceUpdate: {
               surfaceId,
               components: [
                 {
-                  id: "mainColumn",
+                  id: 'mainColumn',
                   component: {
                     Column: {
-                      children: { explicitList: ["headerText", "flashcardRow"] },
-                      distribution: "start",
-                      alignment: "stretch",
+                      children: {explicitList: ['headerText', 'flashcardRow']},
+                      distribution: 'start',
+                      alignment: 'stretch',
                     },
                   },
                 },
                 {
-                  id: "headerText",
+                  id: 'headerText',
                   component: {
                     Text: {
-                      text: { literalString: "Study Flashcards: ATP & Bond Energy" },
-                      usageHint: "h3",
+                      text: {literalString: 'Study Flashcards: ATP & Bond Energy'},
+                      usageHint: 'h3',
                     },
                   },
                 },
                 {
-                  id: "flashcardRow",
+                  id: 'flashcardRow',
                   component: {
                     Row: {
-                      children: { explicitList: ["card1", "card2", "card3"] },
-                      distribution: "start",
-                      alignment: "stretch",
+                      children: {explicitList: ['card1', 'card2', 'card3']},
+                      distribution: 'start',
+                      alignment: 'stretch',
                     },
                   },
                 },
                 {
-                  id: "card1",
+                  id: 'card1',
                   component: {
                     Flashcard: {
-                      front: { literalString: "Why does ATP hydrolysis release energy?" },
-                      back: { literalString: "Because the products (ADP + Pi) are MORE STABLE than ATP due to reduced electrostatic repulsion and better resonance stabilization." },
-                      category: { literalString: "Biochemistry" },
+                      front: {literalString: 'Why does ATP hydrolysis release energy?'},
+                      back: {
+                        literalString:
+                          'Because the products (ADP + Pi) are MORE STABLE than ATP due to reduced electrostatic repulsion and better resonance stabilization.',
+                      },
+                      category: {literalString: 'Biochemistry'},
                     },
                   },
                 },
                 {
-                  id: "card2",
+                  id: 'card2',
                   component: {
                     Flashcard: {
-                      front: { literalString: "Does breaking a bond release energy?" },
-                      back: { literalString: "NO! Breaking ANY bond REQUIRES energy input. Energy is released when new, more stable bonds FORM." },
-                      category: { literalString: "Chemistry" },
+                      front: {literalString: 'Does breaking a bond release energy?'},
+                      back: {
+                        literalString:
+                          'NO! Breaking ANY bond REQUIRES energy input. Energy is released when new, more stable bonds FORM.',
+                      },
+                      category: {literalString: 'Chemistry'},
                     },
                   },
                 },
                 {
-                  id: "card3",
+                  id: 'card3',
                   component: {
                     Flashcard: {
-                      front: { literalString: "Think of ATP like... (gym analogy)" },
-                      back: { literalString: "A compressed spring or holding a plank position! It's in a high-energy, unstable state. Releasing to a relaxed state (ADP + Pi) releases that stored potential energy." },
-                      category: { literalString: "MCAT Analogy" },
+                      front: {literalString: 'Think of ATP like... (gym analogy)'},
+                      back: {
+                        literalString:
+                          "A compressed spring or holding a plank position! It's in a high-energy, unstable state. Releasing to a relaxed state (ADP + Pi) releases that stored potential energy.",
+                      },
+                      category: {literalString: 'MCAT Analogy'},
                     },
                   },
                 },
@@ -128,71 +137,78 @@ function getFallbackContent(format) {
         ],
       };
 
-    case "podcast":
-    case "audio":
+    case 'podcast':
+    case 'audio':
       return {
-        format: "audio",
+        format: 'audio',
         surfaceId,
         a2ui: [
-          { beginRendering: { surfaceId, root: "audioCard" } },
+          {beginRendering: {surfaceId, root: 'audioCard'}},
           {
             surfaceUpdate: {
               surfaceId,
               components: [
                 {
-                  id: "audioCard",
-                  component: { Card: { child: "audioContent" } },
+                  id: 'audioCard',
+                  component: {Card: {child: 'audioContent'}},
                 },
                 {
-                  id: "audioContent",
+                  id: 'audioContent',
                   component: {
                     Column: {
-                      children: { explicitList: ["audioHeader", "audioPlayer", "audioDescription"] },
-                      distribution: "start",
-                      alignment: "stretch",
+                      children: {
+                        explicitList: ['audioHeader', 'audioPlayer', 'audioDescription'],
+                      },
+                      distribution: 'start',
+                      alignment: 'stretch',
                     },
                   },
                 },
                 {
-                  id: "audioHeader",
+                  id: 'audioHeader',
                   component: {
                     Row: {
-                      children: { explicitList: ["audioIcon", "audioTitle"] },
-                      distribution: "start",
-                      alignment: "center",
+                      children: {explicitList: ['audioIcon', 'audioTitle']},
+                      distribution: 'start',
+                      alignment: 'center',
                     },
                   },
                 },
                 {
-                  id: "audioIcon",
+                  id: 'audioIcon',
                   component: {
-                    Icon: { name: { literalString: "podcasts" } },
+                    Icon: {name: {literalString: 'podcasts'}},
                   },
                 },
                 {
-                  id: "audioTitle",
+                  id: 'audioTitle',
                   component: {
                     Text: {
-                      text: { literalString: "ATP & Chemical Stability: Correcting the Misconception" },
-                      usageHint: "h3",
+                      text: {
+                        literalString: 'ATP & Chemical Stability: Correcting the Misconception',
+                      },
+                      usageHint: 'h3',
                     },
                   },
                 },
                 {
-                  id: "audioPlayer",
+                  id: 'audioPlayer',
                   component: {
                     Audio: {
-                      src: { literalString: "/assets/podcast.m4a" },
-                      title: { literalString: "Understanding ATP Energy Release" },
+                      src: {literalString: '/assets/podcast.m4a'},
+                      title: {literalString: 'Understanding ATP Energy Release'},
                     },
                   },
                 },
                 {
-                  id: "audioDescription",
+                  id: 'audioDescription',
                   component: {
                     Text: {
-                      text: { literalString: "This personalized podcast uses gym analogies to explain why 'energy stored in bonds' is a misconception. Perfect for your MCAT prep!" },
-                      usageHint: "body",
+                      text: {
+                        literalString:
+                          "This personalized podcast uses gym analogies to explain why 'energy stored in bonds' is a misconception. Perfect for your MCAT prep!",
+                      },
+                      usageHint: 'body',
                     },
                   },
                 },
@@ -202,54 +218,57 @@ function getFallbackContent(format) {
         ],
       };
 
-    case "video":
+    case 'video':
       return {
-        format: "video",
+        format: 'video',
         surfaceId,
         a2ui: [
-          { beginRendering: { surfaceId, root: "videoCard" } },
+          {beginRendering: {surfaceId, root: 'videoCard'}},
           {
             surfaceUpdate: {
               surfaceId,
               components: [
                 {
-                  id: "videoCard",
-                  component: { Card: { child: "videoContent" } },
+                  id: 'videoCard',
+                  component: {Card: {child: 'videoContent'}},
                 },
                 {
-                  id: "videoContent",
+                  id: 'videoContent',
                   component: {
                     Column: {
-                      children: { explicitList: ["videoTitle", "videoPlayer", "videoDescription"] },
-                      distribution: "start",
-                      alignment: "stretch",
+                      children: {explicitList: ['videoTitle', 'videoPlayer', 'videoDescription']},
+                      distribution: 'start',
+                      alignment: 'stretch',
                     },
                   },
                 },
                 {
-                  id: "videoTitle",
+                  id: 'videoTitle',
                   component: {
                     Text: {
-                      text: { literalString: "Visual Guide: ATP Energy & Stability" },
-                      usageHint: "h3",
+                      text: {literalString: 'Visual Guide: ATP Energy & Stability'},
+                      usageHint: 'h3',
                     },
                   },
                 },
                 {
-                  id: "videoPlayer",
+                  id: 'videoPlayer',
                   component: {
                     Video: {
-                      src: { literalString: "/assets/video.mp4" },
-                      title: { literalString: "ATP Hydrolysis Explained" },
+                      src: {literalString: '/assets/video.mp4'},
+                      title: {literalString: 'ATP Hydrolysis Explained'},
                     },
                   },
                 },
                 {
-                  id: "videoDescription",
+                  id: 'videoDescription',
                   component: {
                     Text: {
-                      text: { literalString: "Watch the compressed spring analogy in action to understand why ATP releases energy through stability differences." },
-                      usageHint: "body",
+                      text: {
+                        literalString:
+                          'Watch the compressed spring analogy in action to understand why ATP releases energy through stability differences.',
+                      },
+                      usageHint: 'body',
                     },
                   },
                 },
@@ -261,7 +280,7 @@ function getFallbackContent(format) {
 
     default:
       return {
-        format: "error",
+        format: 'error',
         surfaceId,
         a2ui: [],
         error: `Unknown format: ${format}`,
@@ -269,197 +288,206 @@ function getFallbackContent(format) {
   }
 }
 
-test("getFallbackContent returns valid flashcard structure", () => {
-  const result = getFallbackContent("flashcards");
-  assert.equal(result.format, "flashcards");
-  assert.equal(result.surfaceId, "learningContent");
+test('getFallbackContent returns valid flashcard structure', () => {
+  const result = getFallbackContent('flashcards');
+  assert.equal(result.format, 'flashcards');
+  assert.equal(result.surfaceId, 'learningContent');
   assert.ok(Array.isArray(result.a2ui));
   assert.equal(result.a2ui.length, 2);
   assert.ok(result.a2ui[0].beginRendering);
   assert.ok(result.a2ui[1].surfaceUpdate);
 });
 
-test("getFallbackContent returns valid audio structure", () => {
-  const result = getFallbackContent("audio");
-  assert.equal(result.format, "audio");
+test('getFallbackContent returns valid audio structure', () => {
+  const result = getFallbackContent('audio');
+  assert.equal(result.format, 'audio');
   assert.ok(result.a2ui[0].beginRendering);
-  assert.equal(result.a2ui[0].beginRendering.root, "audioCard");
+  assert.equal(result.a2ui[0].beginRendering.root, 'audioCard');
 });
 
-test("getFallbackContent handles podcast as audio", () => {
-  const result = getFallbackContent("podcast");
-  assert.equal(result.format, "audio");
+test('getFallbackContent handles podcast as audio', () => {
+  const result = getFallbackContent('podcast');
+  assert.equal(result.format, 'audio');
 });
 
-test("getFallbackContent returns valid video structure", () => {
-  const result = getFallbackContent("video");
-  assert.equal(result.format, "video");
+test('getFallbackContent returns valid video structure', () => {
+  const result = getFallbackContent('video');
+  assert.equal(result.format, 'video');
   assert.ok(result.a2ui[0].beginRendering);
 });
 
-test("getFallbackContent returns error for unknown format", () => {
-  const result = getFallbackContent("unknown");
-  assert.equal(result.format, "error");
-  assert.ok(result.error.includes("Unknown format"));
+test('getFallbackContent returns error for unknown format', () => {
+  const result = getFallbackContent('unknown');
+  assert.equal(result.format, 'error');
+  assert.ok(result.error.includes('Unknown format'));
 });
 
 // =============================================================================
 // Intent Detection Tests (from chat-orchestrator.ts logic)
 // =============================================================================
 
-console.log("\n--- Intent Detection Tests ---\n");
+console.log('\n--- Intent Detection Tests ---\n');
 
 function detectIntent(message) {
   const lower = message.toLowerCase();
 
-  if (lower.includes("flashcard") || lower.includes("flash card") ||
-      lower.includes("study cards") || lower.includes("review cards")) {
-    return "flashcards";
+  if (
+    lower.includes('flashcard') ||
+    lower.includes('flash card') ||
+    lower.includes('study cards') ||
+    lower.includes('review cards')
+  ) {
+    return 'flashcards';
   }
 
-  if (lower.includes("podcast") || lower.includes("listen") || lower.includes("audio")) {
-    return "podcast";
+  if (lower.includes('podcast') || lower.includes('listen') || lower.includes('audio')) {
+    return 'podcast';
   }
 
-  if (lower.includes("video") || lower.includes("watch") || lower.includes("show me")) {
-    return "video";
+  if (lower.includes('video') || lower.includes('watch') || lower.includes('show me')) {
+    return 'video';
   }
 
-  if (lower.includes("quiz") || lower.includes("test me") || lower.includes("practice question")) {
-    return "quiz";
+  if (lower.includes('quiz') || lower.includes('test me') || lower.includes('practice question')) {
+    return 'quiz';
   }
 
   if (lower.match(/^(hi|hello|hey|good morning|good afternoon|good evening)/i)) {
-    return "greeting";
+    return 'greeting';
   }
 
-  if (lower.includes("help me understand") || lower.includes("explain") ||
-      lower.includes("teach me") || lower.includes("learn about") ||
-      (lower.includes("atp") && (lower.includes("energy") || lower.includes("bond"))) ||
-      lower.includes("misconception")) {
-    return "flashcards";
+  if (
+    lower.includes('help me understand') ||
+    lower.includes('explain') ||
+    lower.includes('teach me') ||
+    lower.includes('learn about') ||
+    (lower.includes('atp') && (lower.includes('energy') || lower.includes('bond'))) ||
+    lower.includes('misconception')
+  ) {
+    return 'flashcards';
   }
 
-  return "general";
+  return 'general';
 }
 
-test("detectIntent identifies flashcard requests", () => {
-  assert.equal(detectIntent("Create flashcards for me"), "flashcards");
-  assert.equal(detectIntent("Show me some study cards"), "flashcards");
-  assert.equal(detectIntent("I need review cards"), "flashcards");
+test('detectIntent identifies flashcard requests', () => {
+  assert.equal(detectIntent('Create flashcards for me'), 'flashcards');
+  assert.equal(detectIntent('Show me some study cards'), 'flashcards');
+  assert.equal(detectIntent('I need review cards'), 'flashcards');
 });
 
-test("detectIntent identifies podcast/audio requests", () => {
-  assert.equal(detectIntent("Play the podcast"), "podcast");
-  assert.equal(detectIntent("I want to listen to something"), "podcast");
-  assert.equal(detectIntent("Give me audio content"), "podcast");
+test('detectIntent identifies podcast/audio requests', () => {
+  assert.equal(detectIntent('Play the podcast'), 'podcast');
+  assert.equal(detectIntent('I want to listen to something'), 'podcast');
+  assert.equal(detectIntent('Give me audio content'), 'podcast');
 });
 
-test("detectIntent identifies video requests", () => {
-  assert.equal(detectIntent("Show me a video"), "video");
-  assert.equal(detectIntent("I want to watch something"), "video");
-  assert.equal(detectIntent("Can you show me the explanation?"), "video");
+test('detectIntent identifies video requests', () => {
+  assert.equal(detectIntent('Show me a video'), 'video');
+  assert.equal(detectIntent('I want to watch something'), 'video');
+  assert.equal(detectIntent('Can you show me the explanation?'), 'video');
 });
 
-test("detectIntent identifies quiz requests", () => {
-  assert.equal(detectIntent("Quiz me on this"), "quiz");
-  assert.equal(detectIntent("Test me please"), "quiz");
-  assert.equal(detectIntent("Give me a practice question"), "quiz");
+test('detectIntent identifies quiz requests', () => {
+  assert.equal(detectIntent('Quiz me on this'), 'quiz');
+  assert.equal(detectIntent('Test me please'), 'quiz');
+  assert.equal(detectIntent('Give me a practice question'), 'quiz');
 });
 
-test("detectIntent identifies greetings", () => {
-  assert.equal(detectIntent("Hi there!"), "greeting");
-  assert.equal(detectIntent("Hello"), "greeting");
-  assert.equal(detectIntent("Hey, how are you?"), "greeting");
-  assert.equal(detectIntent("Good morning"), "greeting");
+test('detectIntent identifies greetings', () => {
+  assert.equal(detectIntent('Hi there!'), 'greeting');
+  assert.equal(detectIntent('Hello'), 'greeting');
+  assert.equal(detectIntent('Hey, how are you?'), 'greeting');
+  assert.equal(detectIntent('Good morning'), 'greeting');
 });
 
-test("detectIntent defaults to flashcards for learning requests", () => {
-  assert.equal(detectIntent("Help me understand ATP"), "flashcards");
-  assert.equal(detectIntent("Explain bond energy to me"), "flashcards");
-  assert.equal(detectIntent("I have a misconception about this"), "flashcards");
+test('detectIntent defaults to flashcards for learning requests', () => {
+  assert.equal(detectIntent('Help me understand ATP'), 'flashcards');
+  assert.equal(detectIntent('Explain bond energy to me'), 'flashcards');
+  assert.equal(detectIntent('I have a misconception about this'), 'flashcards');
 });
 
-test("detectIntent returns general for unrecognized messages", () => {
-  assert.equal(detectIntent("What's the weather?"), "general");
-  assert.equal(detectIntent("Tell me a joke"), "general");
+test('detectIntent returns general for unrecognized messages', () => {
+  assert.equal(detectIntent("What's the weather?"), 'general');
+  assert.equal(detectIntent('Tell me a joke'), 'general');
 });
 
 // =============================================================================
 // A2UI Message Structure Tests
 // =============================================================================
 
-console.log("\n--- A2UI Message Structure Tests ---\n");
+console.log('\n--- A2UI Message Structure Tests ---\n');
 
 function validateA2UIMessage(message) {
   // A valid A2UI message should have exactly one of these keys
-  const validKeys = ["beginRendering", "surfaceUpdate", "dataModelUpdate", "deleteSurface"];
+  const validKeys = ['beginRendering', 'surfaceUpdate', 'dataModelUpdate', 'deleteSurface'];
   const keys = Object.keys(message);
   const matchingKeys = keys.filter(k => validKeys.includes(k));
 
   if (matchingKeys.length !== 1) {
-    return { valid: false, error: `Expected exactly one of ${validKeys.join(", ")}, got ${matchingKeys.length}` };
+    return {
+      valid: false,
+      error: `Expected exactly one of ${validKeys.join(', ')}, got ${matchingKeys.length}`,
+    };
   }
 
   const key = matchingKeys[0];
 
-  if (key === "beginRendering") {
+  if (key === 'beginRendering') {
     const br = message.beginRendering;
     if (!br.surfaceId || !br.root) {
-      return { valid: false, error: "beginRendering requires surfaceId and root" };
+      return {valid: false, error: 'beginRendering requires surfaceId and root'};
     }
   }
 
-  if (key === "surfaceUpdate") {
+  if (key === 'surfaceUpdate') {
     const su = message.surfaceUpdate;
     if (!su.surfaceId || !Array.isArray(su.components)) {
-      return { valid: false, error: "surfaceUpdate requires surfaceId and components array" };
+      return {valid: false, error: 'surfaceUpdate requires surfaceId and components array'};
     }
     for (const comp of su.components) {
       if (!comp.id || !comp.component) {
-        return { valid: false, error: "Each component needs id and component properties" };
+        return {valid: false, error: 'Each component needs id and component properties'};
       }
     }
   }
 
-  return { valid: true };
+  return {valid: true};
 }
 
-test("validateA2UIMessage accepts valid beginRendering", () => {
-  const msg = { beginRendering: { surfaceId: "test", root: "main" } };
+test('validateA2UIMessage accepts valid beginRendering', () => {
+  const msg = {beginRendering: {surfaceId: 'test', root: 'main'}};
   const result = validateA2UIMessage(msg);
   assert.ok(result.valid, result.error);
 });
 
-test("validateA2UIMessage rejects beginRendering without surfaceId", () => {
-  const msg = { beginRendering: { root: "main" } };
+test('validateA2UIMessage rejects beginRendering without surfaceId', () => {
+  const msg = {beginRendering: {root: 'main'}};
   const result = validateA2UIMessage(msg);
   assert.ok(!result.valid);
 });
 
-test("validateA2UIMessage accepts valid surfaceUpdate", () => {
+test('validateA2UIMessage accepts valid surfaceUpdate', () => {
   const msg = {
     surfaceUpdate: {
-      surfaceId: "test",
-      components: [
-        { id: "comp1", component: { Text: { text: { literalString: "Hello" } } } }
-      ]
-    }
+      surfaceId: 'test',
+      components: [{id: 'comp1', component: {Text: {text: {literalString: 'Hello'}}}}],
+    },
   };
   const result = validateA2UIMessage(msg);
   assert.ok(result.valid, result.error);
 });
 
-test("validateA2UIMessage rejects surfaceUpdate without components", () => {
-  const msg = { surfaceUpdate: { surfaceId: "test" } };
+test('validateA2UIMessage rejects surfaceUpdate without components', () => {
+  const msg = {surfaceUpdate: {surfaceId: 'test'}};
   const result = validateA2UIMessage(msg);
   assert.ok(!result.valid);
 });
 
-test("validateA2UIMessage rejects message with multiple action types", () => {
+test('validateA2UIMessage rejects message with multiple action types', () => {
   const msg = {
-    beginRendering: { surfaceId: "test", root: "main" },
-    surfaceUpdate: { surfaceId: "test", components: [] }
+    beginRendering: {surfaceId: 'test', root: 'main'},
+    surfaceUpdate: {surfaceId: 'test', components: []},
   };
   const result = validateA2UIMessage(msg);
   assert.ok(!result.valid);
@@ -469,7 +497,7 @@ test("validateA2UIMessage rejects message with multiple action types", () => {
 // Component ID Validation Tests
 // =============================================================================
 
-console.log("\n--- Component ID Validation Tests ---\n");
+console.log('\n--- Component ID Validation Tests ---\n');
 
 function validateComponentIds(components) {
   const ids = new Set();
@@ -477,7 +505,7 @@ function validateComponentIds(components) {
 
   for (const comp of components) {
     if (!comp.id) {
-      errors.push("Component missing id");
+      errors.push('Component missing id');
       continue;
     }
     if (ids.has(comp.id)) {
@@ -486,44 +514,41 @@ function validateComponentIds(components) {
     ids.add(comp.id);
   }
 
-  return { valid: errors.length === 0, errors };
+  return {valid: errors.length === 0, errors};
 }
 
-test("validateComponentIds accepts unique ids", () => {
+test('validateComponentIds accepts unique ids', () => {
   const components = [
-    { id: "comp1", component: {} },
-    { id: "comp2", component: {} },
-    { id: "comp3", component: {} },
+    {id: 'comp1', component: {}},
+    {id: 'comp2', component: {}},
+    {id: 'comp3', component: {}},
   ];
   const result = validateComponentIds(components);
   assert.ok(result.valid);
 });
 
-test("validateComponentIds rejects duplicate ids", () => {
+test('validateComponentIds rejects duplicate ids', () => {
   const components = [
-    { id: "comp1", component: {} },
-    { id: "comp1", component: {} },
+    {id: 'comp1', component: {}},
+    {id: 'comp1', component: {}},
   ];
   const result = validateComponentIds(components);
   assert.ok(!result.valid);
-  assert.ok(result.errors.some(e => e.includes("Duplicate")));
+  assert.ok(result.errors.some(e => e.includes('Duplicate')));
 });
 
-test("validateComponentIds rejects missing ids", () => {
-  const components = [
-    { id: "comp1", component: {} },
-    { component: {} },
-  ];
+test('validateComponentIds rejects missing ids', () => {
+  const components = [{id: 'comp1', component: {}}, {component: {}}];
   const result = validateComponentIds(components);
   assert.ok(!result.valid);
-  assert.ok(result.errors.some(e => e.includes("missing id")));
+  assert.ok(result.errors.some(e => e.includes('missing id')));
 });
 
 // =============================================================================
 // Children Reference Validation Tests
 // =============================================================================
 
-console.log("\n--- Children Reference Validation Tests ---\n");
+console.log('\n--- Children Reference Validation Tests ---\n');
 
 function validateChildrenReferences(components) {
   const ids = new Set(components.map(c => c.id).filter(Boolean));
@@ -537,7 +562,7 @@ function validateChildrenReferences(components) {
     const props = componentDef[componentType];
 
     // Check single child reference
-    if (props?.child && typeof props.child === "string") {
+    if (props?.child && typeof props.child === 'string') {
       if (!ids.has(props.child)) {
         errors.push(`Component ${comp.id} references non-existent child: ${props.child}`);
       }
@@ -553,121 +578,121 @@ function validateChildrenReferences(components) {
     }
   }
 
-  return { valid: errors.length === 0, errors };
+  return {valid: errors.length === 0, errors};
 }
 
-test("validateChildrenReferences accepts valid references", () => {
+test('validateChildrenReferences accepts valid references', () => {
   const components = [
-    { id: "parent", component: { Column: { children: { explicitList: ["child1", "child2"] } } } },
-    { id: "child1", component: { Text: { text: { literalString: "Hello" } } } },
-    { id: "child2", component: { Text: { text: { literalString: "World" } } } },
+    {id: 'parent', component: {Column: {children: {explicitList: ['child1', 'child2']}}}},
+    {id: 'child1', component: {Text: {text: {literalString: 'Hello'}}}},
+    {id: 'child2', component: {Text: {text: {literalString: 'World'}}}},
   ];
   const result = validateChildrenReferences(components);
-  assert.ok(result.valid, result.errors.join(", "));
+  assert.ok(result.valid, result.errors.join(', '));
 });
 
-test("validateChildrenReferences catches invalid child reference", () => {
+test('validateChildrenReferences catches invalid child reference', () => {
   const components = [
-    { id: "parent", component: { Column: { children: { explicitList: ["child1", "missing"] } } } },
-    { id: "child1", component: { Text: { text: { literalString: "Hello" } } } },
+    {id: 'parent', component: {Column: {children: {explicitList: ['child1', 'missing']}}}},
+    {id: 'child1', component: {Text: {text: {literalString: 'Hello'}}}},
   ];
   const result = validateChildrenReferences(components);
   assert.ok(!result.valid);
-  assert.ok(result.errors.some(e => e.includes("missing")));
+  assert.ok(result.errors.some(e => e.includes('missing')));
 });
 
-test("validateChildrenReferences validates single child prop", () => {
+test('validateChildrenReferences validates single child prop', () => {
   const components = [
-    { id: "card", component: { Card: { child: "content" } } },
-    { id: "content", component: { Text: { text: { literalString: "Hello" } } } },
+    {id: 'card', component: {Card: {child: 'content'}}},
+    {id: 'content', component: {Text: {text: {literalString: 'Hello'}}}},
   ];
   const result = validateChildrenReferences(components);
-  assert.ok(result.valid, result.errors.join(", "));
+  assert.ok(result.valid, result.errors.join(', '));
 });
 
 // =============================================================================
 // Flashcard Content Validation Tests
 // =============================================================================
 
-console.log("\n--- Flashcard Content Validation Tests ---\n");
+console.log('\n--- Flashcard Content Validation Tests ---\n');
 
 function validateFlashcard(component) {
   const errors = [];
   const fc = component.Flashcard;
 
   if (!fc) {
-    return { valid: false, errors: ["Not a Flashcard component"] };
+    return {valid: false, errors: ['Not a Flashcard component']};
   }
 
   if (!fc.front) {
-    errors.push("Flashcard missing front property");
+    errors.push('Flashcard missing front property');
   } else if (!fc.front.literalString && !fc.front.path) {
-    errors.push("Flashcard front must have literalString or path");
+    errors.push('Flashcard front must have literalString or path');
   }
 
   if (!fc.back) {
-    errors.push("Flashcard missing back property");
+    errors.push('Flashcard missing back property');
   } else if (!fc.back.literalString && !fc.back.path) {
-    errors.push("Flashcard back must have literalString or path");
+    errors.push('Flashcard back must have literalString or path');
   }
 
-  return { valid: errors.length === 0, errors };
+  return {valid: errors.length === 0, errors};
 }
 
-test("validateFlashcard accepts valid flashcard", () => {
+test('validateFlashcard accepts valid flashcard', () => {
   const component = {
     Flashcard: {
-      front: { literalString: "Question?" },
-      back: { literalString: "Answer!" },
-      category: { literalString: "Test" }
-    }
+      front: {literalString: 'Question?'},
+      back: {literalString: 'Answer!'},
+      category: {literalString: 'Test'},
+    },
   };
   const result = validateFlashcard(component);
-  assert.ok(result.valid, result.errors.join(", "));
+  assert.ok(result.valid, result.errors.join(', '));
 });
 
-test("validateFlashcard rejects flashcard without front", () => {
+test('validateFlashcard rejects flashcard without front', () => {
   const component = {
     Flashcard: {
-      back: { literalString: "Answer!" }
-    }
+      back: {literalString: 'Answer!'},
+    },
   };
   const result = validateFlashcard(component);
   assert.ok(!result.valid);
-  assert.ok(result.errors.some(e => e.includes("front")));
+  assert.ok(result.errors.some(e => e.includes('front')));
 });
 
-test("validateFlashcard rejects flashcard without back", () => {
+test('validateFlashcard rejects flashcard without back', () => {
   const component = {
     Flashcard: {
-      front: { literalString: "Question?" }
-    }
+      front: {literalString: 'Question?'},
+    },
   };
   const result = validateFlashcard(component);
   assert.ok(!result.valid);
-  assert.ok(result.errors.some(e => e.includes("back")));
+  assert.ok(result.errors.some(e => e.includes('back')));
 });
 
 // =============================================================================
 // Full A2UI Payload Validation Tests
 // =============================================================================
 
-console.log("\n--- Full A2UI Payload Validation Tests ---\n");
+console.log('\n--- Full A2UI Payload Validation Tests ---\n');
 
 function validateA2UIPayload(messages) {
   const errors = [];
 
   if (!Array.isArray(messages)) {
-    return { valid: false, errors: ["Payload must be an array"] };
+    return {valid: false, errors: ['Payload must be an array']};
   }
 
   if (messages.length === 0) {
-    return { valid: false, errors: ["Payload cannot be empty"] };
+    return {valid: false, errors: ['Payload cannot be empty']};
   }
 
   // Check that first message is beginRendering
   if (!messages[0].beginRendering) {
-    errors.push("First message should be beginRendering");
+    errors.push('First message should be beginRendering');
   }
 
   // Validate each message
@@ -698,33 +723,33 @@ function validateA2UIPayload(messages) {
     }
   }
 
-  return { valid: errors.length === 0, errors };
+  return {valid: errors.length === 0, errors};
 }
 
-test("validateA2UIPayload accepts valid flashcard payload", () => {
-  const payload = getFallbackContent("flashcards").a2ui;
+test('validateA2UIPayload accepts valid flashcard payload', () => {
+  const payload = getFallbackContent('flashcards').a2ui;
   const result = validateA2UIPayload(payload);
-  assert.ok(result.valid, result.errors.join(", "));
+  assert.ok(result.valid, result.errors.join(', '));
 });
 
-test("validateA2UIPayload accepts valid audio payload", () => {
-  const payload = getFallbackContent("audio").a2ui;
+test('validateA2UIPayload accepts valid audio payload', () => {
+  const payload = getFallbackContent('audio').a2ui;
   const result = validateA2UIPayload(payload);
-  assert.ok(result.valid, result.errors.join(", "));
+  assert.ok(result.valid, result.errors.join(', '));
 });
 
-test("validateA2UIPayload accepts valid video payload", () => {
-  const payload = getFallbackContent("video").a2ui;
+test('validateA2UIPayload accepts valid video payload', () => {
+  const payload = getFallbackContent('video').a2ui;
   const result = validateA2UIPayload(payload);
-  assert.ok(result.valid, result.errors.join(", "));
+  assert.ok(result.valid, result.errors.join(', '));
 });
 
-test("validateA2UIPayload rejects non-array", () => {
-  const result = validateA2UIPayload("not an array");
+test('validateA2UIPayload rejects non-array', () => {
+  const result = validateA2UIPayload('not an array');
   assert.ok(!result.valid);
 });
 
-test("validateA2UIPayload rejects empty array", () => {
+test('validateA2UIPayload rejects empty array', () => {
   const result = validateA2UIPayload([]);
   assert.ok(!result.valid);
 });
@@ -733,9 +758,9 @@ test("validateA2UIPayload rejects empty array", () => {
 // Summary
 // =============================================================================
 
-console.log("\n" + "=".repeat(60));
+console.log('\n' + '='.repeat(60));
 console.log(`Unit Tests Complete: ${passed} passed, ${failed} failed`);
-console.log("=".repeat(60));
+console.log('='.repeat(60));
 
 if (failed > 0) {
   process.exit(1);
diff --git a/samples/client/lit/personalized_learning/vite.config.ts b/samples/client/lit/personalized_learning/vite.config.ts
index f9837a642..b23488729 100644
--- a/samples/client/lit/personalized_learning/vite.config.ts
+++ b/samples/client/lit/personalized_learning/vite.config.ts
@@ -14,41 +14,41 @@
  * limitations under the License.
  */
 
-import { defineConfig } from "vite";
-import { resolve } from "path";
+import {defineConfig} from 'vite';
+import {resolve} from 'path';
 
 export default defineConfig({
   server: {
     port: 5174,
     proxy: {
-      "/api": {
-        target: "http://localhost:8080",
+      '/api': {
+        target: 'http://localhost:8080',
         changeOrigin: true,
       },
-      "/a2ui-agent": {
-        target: "http://localhost:8080",
+      '/a2ui-agent': {
+        target: 'http://localhost:8080',
         changeOrigin: true,
       },
-      "/log": {
-        target: "http://localhost:8080",
+      '/log': {
+        target: 'http://localhost:8080',
         changeOrigin: true,
       },
-      "/reset-log": {
-        target: "http://localhost:8080",
+      '/reset-log': {
+        target: 'http://localhost:8080',
         changeOrigin: true,
       },
     },
   },
   resolve: {
     alias: {
-      "@": resolve(__dirname, "src"),
+      '@': resolve(__dirname, 'src'),
     },
   },
   build: {
     rollupOptions: {
       input: {
-        main: resolve(__dirname, "index.html"),
-        primer: resolve(__dirname, "a2ui-primer.html"),
+        main: resolve(__dirname, 'index.html'),
+        primer: resolve(__dirname, 'a2ui-primer.html'),
       },
     },
   },
diff --git a/samples/client/lit/shell/README.md b/samples/client/lit/shell/README.md
index c463d69ac..d541ca758 100644
--- a/samples/client/lit/shell/README.md
+++ b/samples/client/lit/shell/README.md
@@ -4,8 +4,8 @@ This is a UI to generate and visualize A2UI responses.
 
 ## Prerequisites
 
-* [nodejs](https://nodejs.org/en)
-* [uv](https://docs.astral.sh/uv/getting-started/installation/)
+- [nodejs](https://nodejs.org/en)
+- [uv](https://docs.astral.sh/uv/getting-started/installation/)
 
 ## Running
 
@@ -28,7 +28,7 @@ If you hit errors around `npm i` remove the directory `node_modules` and the fil
 
 ### Open UI
 
-Follow the link in console output of the last command above. 
+Follow the link in console output of the last command above.
 
 ## Security Notice
 
@@ -38,4 +38,4 @@ All operational data received from an external agent—including its AgentCard,
 
 Similarly, any UI definition or data stream received must be treated as untrusted. Malicious agents could attempt to spoof legitimate interfaces to deceive users (phishing), inject malicious scripts via property values (XSS), or generate excessive layout complexity to degrade client performance (DoS). If your application supports optional embedded content (such as iframes or web views), additional care must be taken to prevent exposure to malicious external sites.
 
-Developer Responsibility: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.
\ No newline at end of file
+Developer Responsibility: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.
diff --git a/samples/client/lit/shell/THEMING.md b/samples/client/lit/shell/THEMING.md
index 7856730e7..63b39acf9 100644
--- a/samples/client/lit/shell/THEMING.md
+++ b/samples/client/lit/shell/THEMING.md
@@ -14,7 +14,7 @@ Lit renderer basic catalog implementation.
 Design tokens are defined in two layers:
 
 - **Web Core**: Supplies base design tokens (color palettes, typography, spacing)
-that are used by the A2UI-provided renderers via global CSS custom properties on the root element. See the [Basic Catalog default styles](renderers/web_core/src/v0_9/basic_catalog/styles/default.ts).
+  that are used by the A2UI-provided renderers via global CSS custom properties on the root element. See the [Basic Catalog default styles](renderers/web_core/src/v0_9/basic_catalog/styles/default.ts).
 - **Lit Renderer**: Each Basic Catalog component provided by the Lit renderer
   has additional design tokens to target more-specific properties (e.g., `--a2ui-button-background`). View available components and the tokens they
   expose in the [Lit Basic Catalog Components](renderers/lit/src/v0_9/catalogs/basic/components).
diff --git a/samples/client/lit/shell/app.ts b/samples/client/lit/shell/app.ts
index 876305c24..ec05ba2a2 100644
--- a/samples/client/lit/shell/app.ts
+++ b/samples/client/lit/shell/app.ts
@@ -14,41 +14,36 @@
  * limitations under the License.
  */
 
-import { SignalWatcher } from "@lit-labs/signals";
-import { provide } from "@lit/context";
-import {
-  LitElement,
-  html,
-  css,
-  nothing,
-} from "lit";
-import { customElement, state, query } from "lit/decorators.js";
+import {SignalWatcher} from '@lit-labs/signals';
+import {provide} from '@lit/context';
+import {LitElement, html, css, nothing} from 'lit';
+import {customElement, state, query} from 'lit/decorators.js';
 import {
   SnackbarAction,
   SnackbarMessage,
   SnackbarUUID,
   SnackType,
-} from "../custom-components-example/types/types.js";
-import { type Snackbar } from "../custom-components-example/ui/snackbar.js";
-import { repeat } from "lit/directives/repeat.js";
+} from '../custom-components-example/types/types.js';
+import {type Snackbar} from '../custom-components-example/ui/snackbar.js';
+import {repeat} from 'lit/directives/repeat.js';
 
 // A2UI
-import * as v0_9 from "@a2ui/web_core/v0_9";
-import { basicCatalog, Context } from "@a2ui/lit/v0_9";
-import { renderMarkdown } from "@a2ui/markdown-it";
+import * as v0_9 from '@a2ui/web_core/v0_9';
+import {basicCatalog, Context} from '@a2ui/lit/v0_9';
+import {renderMarkdown} from '@a2ui/markdown-it';
 
 // Configurations
-import { A2UIClient } from "./client.js";
-import { restaurantConfig, AppConfig } from "./configs/configs.js";
-import { styleMap } from "lit/directives/style-map.js";
+import {A2UIClient} from './client.js';
+import {restaurantConfig, AppConfig} from './configs/configs.js';
+import {styleMap} from 'lit/directives/style-map.js';
 
 const configs: Record<string, AppConfig> = {
   restaurant: restaurantConfig,
 };
 
-@customElement("a2ui-shell")
+@customElement('a2ui-shell')
 export class A2UILayoutEditor extends SignalWatcher(LitElement) {
-  @provide({ context: Context.markdown })
+  @provide({context: Context.markdown})
   accessor markdownRenderer: any = renderMarkdown;
 
   @state()
@@ -87,8 +82,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
         margin-bottom: var(--bb-grid-size-6);
         display: block;
         margin: 0 auto;
-        background: var(--background-image-light) center center / contain
-          no-repeat;
+        background: var(--background-image-light) center center / contain no-repeat;
       }
 
       #surfaces {
@@ -147,8 +141,8 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       }
 
       .material-symbols {
-        font-family: "Material Symbols Outlined", sans-serif;
-        font-variation-settings: "FILL" 1;
+        font-family: 'Material Symbols Outlined', sans-serif;
+        font-variation-settings: 'FILL' 1;
         font-weight: normal;
         font-style: normal;
         font-size: 24px;
@@ -204,18 +198,18 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
         font-size: 32px;
 
         & .material-symbols {
-          font-family: "Material Symbols Outlined";
+          font-family: 'Material Symbols Outlined';
           pointer-events: none;
 
           &::before {
-            content: "dark_mode";
+            content: 'dark_mode';
           }
         }
       }
 
       @container style(--color-scheme: dark) {
         .theme-toggle .material-symbols::before {
-          content: "light_mode";
+          content: 'light_mode';
           color: var(--n-90);
         }
 
@@ -276,9 +270,9 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   #processor = new v0_9.MessageProcessor(
     [basicCatalog],
     async (action: v0_9.A2uiClientAction): Promise<any> => {
-      console.debug("Handling action", action);
+      console.debug('Handling action', action);
 
-      const context: Record<string, any> = { ...action.context };
+      const context: Record<string, any> = {...action.context};
 
       // Do we need to update this to a more strict v0.9 type?
       const message = {
@@ -295,7 +289,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     },
   );
   #a2uiClient = new A2UIClient();
-  @query("ui-snackbar")
+  @query('ui-snackbar')
   accessor #snackbar!: Snackbar;
 
   #pendingSnackbarMessages: Array<{
@@ -316,7 +310,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
 
     // Load config from URL
     const urlParams = new URLSearchParams(window.location.search);
-    const appKey = urlParams.get("app");
+    const appKey = urlParams.get('app');
     if (appKey && !configs[appKey]) {
       this.#pendingSnackbarMessages.push({
         message: {
@@ -331,11 +325,11 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     this.config = (appKey && configs[appKey]) || restaurantConfig;
 
     // Set the CSS Overrides for the given appKey.
-    if (this.config.cssOverrides && !document.adoptedStyleSheets.includes(this.config.cssOverrides)) {
-      document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        this.config.cssOverrides,
-      ];
+    if (
+      this.config.cssOverrides &&
+      !document.adoptedStyleSheets.includes(this.config.cssOverrides)
+    ) {
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.config.cssOverrides];
     }
     document.title = this.config.title;
 
@@ -345,7 +339,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
 
   protected firstUpdated() {
     if (this.#pendingSnackbarMessages.length > 0) {
-      for (const { message, replaceAll } of this.#pendingSnackbarMessages) {
+      for (const {message, replaceAll} of this.#pendingSnackbarMessages) {
         this.#snackbar.show(message, replaceAll);
       }
       this.#pendingSnackbarMessages = [];
@@ -367,13 +361,13 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       <button
         @click=${(evt: Event) => {
           if (!(evt.target instanceof HTMLButtonElement)) return;
-          const { colorScheme } = window.getComputedStyle(evt.target);
-          if (colorScheme === "dark") {
-            document.body.classList.add("light");
-            document.body.classList.remove("dark");
+          const {colorScheme} = window.getComputedStyle(evt.target);
+          if (colorScheme === 'dark') {
+            document.body.classList.add('light');
+            document.body.classList.remove('dark');
           } else {
-            document.body.classList.add("dark");
-            document.body.classList.remove("light");
+            document.body.classList.add('dark');
+            document.body.classList.remove('light');
           }
         }}
         class="theme-toggle"
@@ -394,7 +388,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
           return;
         }
         const data = new FormData(evt.target);
-        const body = data.get("body") ?? null;
+        const body = data.get('body') ?? null;
         if (!body) {
           return;
         }
@@ -405,8 +399,8 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       ${this.config.heroImage
         ? html`<div
             style=${styleMap({
-              "--background-image-light": `url(${this.config.heroImage})`,
-              "--background-image-dark": `url(${
+              '--background-image-light': `url(${this.config.heroImage})`,
+              '--background-image-dark': `url(${
                 this.config.heroImageDark ?? this.config.heroImage
               })`,
             })}
@@ -432,15 +426,10 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   }
 
   #startLoadingAnimation() {
-    if (
-      this.config.loadingText &&
-      this.config.loadingText.length > 1
-    ) {
+    if (this.config.loadingText && this.config.loadingText.length > 1) {
       this.#loadingTextIndex = 0;
       this.#loadingInterval = window.setInterval(() => {
-        this.#loadingTextIndex =
-          (this.#loadingTextIndex + 1) %
-          this.config.loadingText!.length;
+        this.#loadingTextIndex = (this.#loadingTextIndex + 1) % this.config.loadingText!.length;
       }, 2000);
     }
   }
@@ -476,7 +465,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     if (this.#requesting) {
       const text = this.config.loadingText
         ? this.config.loadingText[this.#loadingTextIndex]
-        : "Awaiting an answer...";
+        : 'Awaiting an answer...';
 
       return html` <div class="pending">
         <div class="spinner"></div>
@@ -488,16 +477,14 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     if (surfaces.length === 0) {
       return nothing;
     }
-    console.debug("Rendering surfaces", surfaces);
+    console.debug('Rendering surfaces', surfaces);
 
     return html`<section id="surfaces">
       ${repeat(
         surfaces,
         ([surfaceId]) => surfaceId,
         ([_, surface]) => {
-          return html`<a2ui-surface
-              .surface=${surface}
-            ></a2ui-surface>`;
+          return html`<a2ui-surface .surface=${surface}></a2ui-surface>`;
         },
       )}
     </section>`;
@@ -505,15 +492,13 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
 
   async #sendAndProcessMessage(request) {
     const messages = await this.#sendMessage(request);
-    console.debug("Received messages", messages);
+    console.debug('Received messages', messages);
 
     this.#lastMessages = messages;
 
     // this.#processor.clearSurfaces();
     // Why? Shouldn't `deleteSurface` be sent from the agent to the client?
-    for (const surfaceId of Array.from(
-      this.#processor.model.surfacesMap.keys(),
-    )) {
+    for (const surfaceId of Array.from(this.#processor.model.surfacesMap.keys())) {
       this.#processor.model.deleteSurface(surfaceId);
     }
 
diff --git a/samples/client/lit/shell/client.ts b/samples/client/lit/shell/client.ts
index 1f3f32215..16b8fbbd8 100644
--- a/samples/client/lit/shell/client.ts
+++ b/samples/client/lit/shell/client.ts
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { Part, SendMessageSuccessResponse, Task } from "@a2a-js/sdk";
-import { A2AClient } from "@a2a-js/sdk/client";
-import * as v0_9 from "@a2ui/web_core/v0_9";
+import {Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
+import {A2AClient} from '@a2a-js/sdk/client';
+import * as v0_9 from '@a2ui/web_core/v0_9';
 
-const A2UI_MIME_TYPE = "application/json+a2ui";
+const A2UI_MIME_TYPE = 'application/json+a2ui';
 
 export class A2UIClient {
   #serverUrl: string;
   #client: A2AClient | null = null;
 
-  constructor(serverUrl: string = "") {
+  constructor(serverUrl: string = '') {
     this.#serverUrl = serverUrl;
   }
 
@@ -36,28 +36,20 @@ export class A2UIClient {
   async #getClient() {
     if (!this.#client) {
       // Default to localhost:10002 if no URL provided (fallback for restaurant app default)
-      const baseUrl = this.#serverUrl || "http://localhost:10002";
+      const baseUrl = this.#serverUrl || 'http://localhost:10002';
 
-      this.#client = await A2AClient.fromCardUrl(
-        `${baseUrl}/.well-known/agent-card.json`,
-        {
-          fetchImpl: async (url, init) => {
-            const headers = new Headers(init?.headers);
-            headers.set(
-              "X-A2A-Extensions",
-              "https://a2ui.org/a2a-extension/a2ui/v0.9",
-            );
-            return fetch(url, { ...init, headers });
-          }
-        }
-      );
+      this.#client = await A2AClient.fromCardUrl(`${baseUrl}/.well-known/agent-card.json`, {
+        fetchImpl: async (url, init) => {
+          const headers = new Headers(init?.headers);
+          headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.9');
+          return fetch(url, {...init, headers});
+        },
+      });
     }
     return this.#client;
   }
 
-  async send(
-    message: any | string
-  ): Promise<any[]> {
+  async send(message: any | string): Promise<any[]> {
     const client = await this.#getClient();
     let parts: Part[] = [];
 
@@ -66,40 +58,44 @@ export class A2UIClient {
       try {
         const parsed = JSON.parse(message);
         if (typeof parsed === 'object' && parsed !== null) {
-          parts = [{
-            kind: "data",
-            data: parsed as unknown as Record<string, unknown>,
-            mimeType: A2UI_MIME_TYPE,
-          } as Part];
+          parts = [
+            {
+              kind: 'data',
+              data: parsed as unknown as Record<string, unknown>,
+              mimeType: A2UI_MIME_TYPE,
+            } as Part,
+          ];
         } else {
-          parts = [{ kind: "text", text: message }];
+          parts = [{kind: 'text', text: message}];
         }
       } catch {
-        parts = [{ kind: "text", text: message }];
+        parts = [{kind: 'text', text: message}];
       }
     } else {
-      parts = [{
-        kind: "data",
-        data: message as unknown as Record<string, unknown>,
-        mimeType: A2UI_MIME_TYPE,
-      } as Part];
+      parts = [
+        {
+          kind: 'data',
+          data: message as unknown as Record<string, unknown>,
+          mimeType: A2UI_MIME_TYPE,
+        } as Part,
+      ];
     }
 
     const response = await client.sendMessage({
       message: {
         messageId: crypto.randomUUID(),
-        role: "user",
+        role: 'user',
         parts: parts,
-        kind: "message",
+        kind: 'message',
       },
     });
 
-    if ("error" in response) {
+    if ('error' in response) {
       throw new Error(response.error.message);
     }
 
     const result = (response as SendMessageSuccessResponse).result as Task;
-    if (result.kind === "task" && result.status.message?.parts) {
+    if (result.kind === 'task' && result.status.message?.parts) {
       const messages: any[] = [];
       for (const part of result.status.message.parts) {
         if (part.kind === 'data') {
diff --git a/samples/client/lit/shell/configs/configs.ts b/samples/client/lit/shell/configs/configs.ts
index b2137ef9a..eab592dfd 100644
--- a/samples/client/lit/shell/configs/configs.ts
+++ b/samples/client/lit/shell/configs/configs.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export type { AppConfig } from "./types.js";
-export { restaurantConfig } from "./restaurant.js";
+export type {AppConfig} from './types.js';
+export {restaurantConfig} from './restaurant.js';
diff --git a/samples/client/lit/shell/configs/restaurant.ts b/samples/client/lit/shell/configs/restaurant.ts
index 615eba854..ec0c1a39b 100644
--- a/samples/client/lit/shell/configs/restaurant.ts
+++ b/samples/client/lit/shell/configs/restaurant.ts
@@ -14,21 +14,21 @@
  * limitations under the License.
  */
 
-import { AppConfig } from "./types.js";
-import { restaurantThemeSheet } from "../theme/restaurant-theme.js";
+import {AppConfig} from './types.js';
+import {restaurantThemeSheet} from '../theme/restaurant-theme.js';
 
 export const restaurantConfig: AppConfig = {
-  key: "restaurant",
-  title: "Restaurant Finder",
-  heroImage: "/hero.png",
-  heroImageDark: "/hero-dark.png",
-  placeholder: "Top 5 Chinese restaurants in New York.",
+  key: 'restaurant',
+  title: 'Restaurant Finder',
+  heroImage: '/hero.png',
+  heroImageDark: '/hero-dark.png',
+  placeholder: 'Top 5 Chinese restaurants in New York.',
   loadingText: [
-    "Finding the best spots for you...",
-    "Checking reviews...",
-    "Looking for open tables...",
-    "Almost there...",
+    'Finding the best spots for you...',
+    'Checking reviews...',
+    'Looking for open tables...',
+    'Almost there...',
   ],
-  serverUrl: "http://localhost:10002",
+  serverUrl: 'http://localhost:10002',
   cssOverrides: restaurantThemeSheet,
 };
diff --git a/samples/client/lit/shell/index.html b/samples/client/lit/shell/index.html
index 9d15a1741..0e5f6c3d5 100644
--- a/samples/client/lit/shell/index.html
+++ b/samples/client/lit/shell/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2025 Google LLC
 
@@ -51,18 +51,15 @@
         --primary: #137fec;
         --text-color: #fff;
         --background: light-dark(#f6f7f8, #101922);
-        --border-color: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.15)
-        );
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --border-color: oklch(from var(--background-light) l c h / calc(alpha * 0.15));
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
         --bb-grid-size-4: calc(var(--bb-grid-size) * 4);
         --bb-grid-size-6: calc(var(--bb-grid-size) * 6);
 
-        --background: radial-gradient(
+        --background:
+          radial-gradient(
             at 0% 0%,
             light-dark(rgba(161, 196, 253, 0.3), rgba(6, 182, 212, 0.15)) 0px,
             transparent 50%
@@ -95,9 +92,8 @@
 
       html,
       body {
-        --font-family: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Outfit", "Helvetica Neue", Helvetica, Arial,
-          sans-serif;
+        --font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         background: var(--background);
diff --git a/samples/client/lit/shell/middleware/a2a.ts b/samples/client/lit/shell/middleware/a2a.ts
index a13c26ce4..9878edd19 100644
--- a/samples/client/lit/shell/middleware/a2a.ts
+++ b/samples/client/lit/shell/middleware/a2a.ts
@@ -14,33 +14,26 @@
  * limitations under the License.
  */
 
-import { IncomingMessage, ServerResponse } from "http";
-import { Plugin, ViteDevServer } from "vite";
-import { A2AClient } from "@a2a-js/sdk/client";
-import {
-  MessageSendParams,
-  Part,
-  SendMessageSuccessResponse,
-  Task,
-} from "@a2a-js/sdk";
-import { v4 as uuidv4 } from "uuid";
+import {IncomingMessage, ServerResponse} from 'http';
+import {Plugin, ViteDevServer} from 'vite';
+import {A2AClient} from '@a2a-js/sdk/client';
+import {MessageSendParams, Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
+import {v4 as uuidv4} from 'uuid';
 
-const A2UI_MIME_TYPE = "application/json+a2ui";
+const A2UI_MIME_TYPE = 'application/json+a2ui';
 
 const fetchWithCustomHeader: typeof fetch = async (url, init) => {
   const headers = new Headers(init?.headers);
-  headers.set("X-A2A-Extensions", "https://a2ui.org/a2a-extension/a2ui/v0.9");
+  headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.9');
 
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 };
 
 const isJson = (str: string) => {
   try {
     const parsed = JSON.parse(str);
-    return (
-      typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)
-    );
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed);
   } catch (err) {
     console.warn(err);
     return false;
@@ -51,10 +44,9 @@ let client: A2AClient | null = null;
 const createOrGetClient = async () => {
   if (!client) {
     // Create a client pointing to the agent's Agent Card URL.
-    client = await A2AClient.fromCardUrl(
-      "http://localhost:10002/.well-known/agent-card.json",
-      { fetchImpl: fetchWithCustomHeader }
-    );
+    client = await A2AClient.fromCardUrl('http://localhost:10002/.well-known/agent-card.json', {
+      fetchImpl: fetchWithCustomHeader,
+    });
   }
 
   return client;
@@ -62,83 +54,76 @@ const createOrGetClient = async () => {
 
 export const plugin = (): Plugin => {
   return {
-    name: "a2a-handler",
+    name: 'a2a-handler',
     configureServer(server: ViteDevServer) {
       server.middlewares.use(
-        "/a2a",
+        '/a2a',
         async (req: IncomingMessage, res: ServerResponse, next: () => void) => {
-          if (req.method === "POST") {
-            let originalBody = "";
+          if (req.method === 'POST') {
+            let originalBody = '';
 
-            req.on("data", (chunk) => {
+            req.on('data', chunk => {
               originalBody += chunk.toString();
             });
 
-            req.on("end", async () => {
+            req.on('end', async () => {
               let sendParams: MessageSendParams;
 
               if (isJson(originalBody)) {
-                console.log(
-                  "[a2a-middleware] Received JSON UI event:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received JSON UI event:', originalBody);
 
                 const clientEvent = JSON.parse(originalBody);
                 sendParams = {
                   message: {
                     messageId: uuidv4(),
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "data",
+                        kind: 'data',
                         data: clientEvent,
-                        metadata: { 'mimeType': A2UI_MIME_TYPE },
+                        metadata: {mimeType: A2UI_MIME_TYPE},
                       } as Part,
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               } else {
-                console.log(
-                  "[a2a-middleware] Received text query:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received text query:', originalBody);
                 sendParams = {
                   message: {
                     messageId: uuidv4(),
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "text",
+                        kind: 'text',
                         text: originalBody,
                       },
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               }
 
               const client = await createOrGetClient();
               const response = await client.sendMessage(sendParams);
-              if ("error" in response) {
-                console.error("Error:", response.error.message);
+              if ('error' in response) {
+                console.error('Error:', response.error.message);
                 res.statusCode = 500;
-                res.setHeader("Content-Type", "application/json");
-                res.end(JSON.stringify({ error: response.error.message }));
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({error: response.error.message}));
                 return;
               } else {
-                const result = (response as SendMessageSuccessResponse)
-                  .result as Task;
-                if (result.kind === "task") {
+                const result = (response as SendMessageSuccessResponse).result as Task;
+                if (result.kind === 'task') {
                   res.statusCode = 200;
-                  res.setHeader("Content-Type", "application/json");
+                  res.setHeader('Content-Type', 'application/json');
                   res.end(JSON.stringify(result.status.message?.parts));
                   return;
                 }
               }
 
               res.statusCode = 200;
-              res.setHeader("Content-Type", "application/json");
+              res.setHeader('Content-Type', 'application/json');
               res.end(JSON.stringify([]));
             });
 
@@ -146,7 +131,7 @@ export const plugin = (): Plugin => {
           } else {
             next();
           }
-        }
+        },
       );
     },
   };
diff --git a/samples/client/lit/shell/middleware/index.ts b/samples/client/lit/shell/middleware/index.ts
index 36099efff..c61a5cdae 100644
--- a/samples/client/lit/shell/middleware/index.ts
+++ b/samples/client/lit/shell/middleware/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export * as A2AMiddleware from "./a2a.js";
+export * as A2AMiddleware from './a2a.js';
diff --git a/samples/client/lit/shell/package.json b/samples/client/lit/shell/package.json
index cb9bc6aa6..3aa0acea8 100644
--- a/samples/client/lit/shell/package.json
+++ b/samples/client/lit/shell/package.json
@@ -86,4 +86,4 @@
     "@types/node": "^24.7.1",
     "lit": "^3.3.1"
   }
-}
\ No newline at end of file
+}
diff --git a/samples/client/lit/shell/tsconfig.json b/samples/client/lit/shell/tsconfig.json
index 99359bd07..cbf6c46b6 100644
--- a/samples/client/lit/shell/tsconfig.json
+++ b/samples/client/lit/shell/tsconfig.json
@@ -30,5 +30,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "references": [{ "path": "../../../../renderers/lit" }]
+  "references": [{"path": "../../../../renderers/lit"}]
 }
diff --git a/samples/client/lit/shell/vite.config.ts b/samples/client/lit/shell/vite.config.ts
index 5dd174239..a2227eafd 100644
--- a/samples/client/lit/shell/vite.config.ts
+++ b/samples/client/lit/shell/vite.config.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { config } from "dotenv";
-import { UserConfig } from "vite";
-import * as Middleware from "./middleware";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import {config} from 'dotenv';
+import {UserConfig} from 'vite';
+import * as Middleware from './middleware';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -26,7 +26,7 @@ export default async () => {
   config();
 
   const entry: Record<string, string> = {
-    shell: resolve(__dirname, "index.html"),
+    shell: resolve(__dirname, 'index.html'),
   };
 
   return {
@@ -36,11 +36,11 @@ export default async () => {
       rollupOptions: {
         input: entry,
       },
-      target: "esnext",
+      target: 'esnext',
     },
     define: {},
     resolve: {
-      dedupe: ["lit"],
+      dedupe: ['lit'],
     },
   } satisfies UserConfig;
 };
diff --git a/samples/client/react/shell/index.html b/samples/client/react/shell/index.html
index 426fd124e..7082785e8 100644
--- a/samples/client/react/shell/index.html
+++ b/samples/client/react/shell/index.html
@@ -14,7 +14,7 @@
  limitations under the License.
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -26,7 +26,10 @@
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=account_circle,add,arrow_back,arrow_drop_down,arrow_forward,attach_file,calendar_today,call,camera,check,check_circle,close,communication,content_copy,dark_mode,delete,download,draw,edit,error,event,favorite,favorite_off,folder,help,home,info,light_mode,location_on,lock,lock_open,mail,menu,mobile_layout,more_horiz,more_vert,notifications,notifications_off,payment,pen_size_1,person,phone,photo,print,progress_activity,rectangle,refresh,search,send,settings,share,shopping_cart,star,star_half,star_off,upload,visibility,visibility_off,warning"
     />
     <!-- Outfit font -->
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
     <style>
       :root {
         --n-100: #ffffff;
@@ -145,12 +148,8 @@
 
         --primary: #137fec;
         --text-color: #fff;
-        --border-color: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.15)
-        );
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --border-color: oklch(from var(--background-light) l c h / calc(alpha * 0.15));
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
@@ -168,7 +167,8 @@
         --bb-grid-size-15: calc(var(--bb-grid-size) * 15);
         --bb-grid-size-16: calc(var(--bb-grid-size) * 16);
 
-        --background: radial-gradient(
+        --background:
+          radial-gradient(
             at 0% 0%,
             light-dark(rgba(161, 196, 253, 0.3), rgba(6, 182, 212, 0.15)) 0px,
             transparent 50%
@@ -201,9 +201,8 @@
 
       html,
       body {
-        --font-family: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Outfit", "Helvetica Neue", Helvetica, Arial,
-          sans-serif;
+        --font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         background: var(--background);
diff --git a/samples/client/react/shell/middleware/a2a.ts b/samples/client/react/shell/middleware/a2a.ts
index 9c8ec8684..319ee0ef0 100644
--- a/samples/client/react/shell/middleware/a2a.ts
+++ b/samples/client/react/shell/middleware/a2a.ts
@@ -14,34 +14,27 @@
  * limitations under the License.
  */
 
-import { IncomingMessage, ServerResponse } from "http";
-import { Plugin, ViteDevServer } from "vite";
-import { A2AClient } from "@a2a-js/sdk/client";
-import {
-  MessageSendParams,
-  Part,
-  SendMessageSuccessResponse,
-  Task,
-} from "@a2a-js/sdk";
-import * as crypto from "crypto";
-
-const A2UI_MIME_TYPE = "application/json+a2ui";
-const enableStreaming = process.env["ENABLE_STREAMING"] !== "false";
+import {IncomingMessage, ServerResponse} from 'http';
+import {Plugin, ViteDevServer} from 'vite';
+import {A2AClient} from '@a2a-js/sdk/client';
+import {MessageSendParams, Part, SendMessageSuccessResponse, Task} from '@a2a-js/sdk';
+import * as crypto from 'crypto';
+
+const A2UI_MIME_TYPE = 'application/json+a2ui';
+const enableStreaming = process.env['ENABLE_STREAMING'] !== 'false';
 
 const fetchWithCustomHeader: typeof fetch = async (url, init) => {
   const headers = new Headers(init?.headers);
-  headers.set("X-A2A-Extensions", "https://a2ui.org/a2a-extension/a2ui/v0.9");
+  headers.set('X-A2A-Extensions', 'https://a2ui.org/a2a-extension/a2ui/v0.9');
 
-  const newInit = { ...init, headers };
+  const newInit = {...init, headers};
   return fetch(url, newInit);
 };
 
 const isJson = (str: string) => {
   try {
     const parsed = JSON.parse(str);
-    return (
-      typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)
-    );
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed);
   } catch (err) {
     return false;
   }
@@ -50,10 +43,9 @@ const isJson = (str: string) => {
 let client: A2AClient | null = null;
 const createOrGetClient = async () => {
   if (!client) {
-    client = await A2AClient.fromCardUrl(
-      "http://localhost:10002/.well-known/agent-card.json",
-      { fetchImpl: fetchWithCustomHeader }
-    );
+    client = await A2AClient.fromCardUrl('http://localhost:10002/.well-known/agent-card.json', {
+      fetchImpl: fetchWithCustomHeader,
+    });
   }
 
   return client;
@@ -61,70 +53,64 @@ const createOrGetClient = async () => {
 
 export const plugin = (): Plugin => {
   return {
-    name: "a2a-handler",
+    name: 'a2a-handler',
     configureServer(server: ViteDevServer) {
       server.middlewares.use(
-        "/a2a",
+        '/a2a',
         async (req: IncomingMessage, res: ServerResponse, next: () => void) => {
-          if (req.method === "POST") {
-            let originalBody = "";
+          if (req.method === 'POST') {
+            let originalBody = '';
             // Cap the in-memory request body so a misbehaving shell can't
             // exhaust the dev server's heap.
             const MAX_PAYLOAD_SIZE = 1024 * 1024;
 
-            req.on("data", (chunk) => {
+            req.on('data', chunk => {
               originalBody += chunk.toString();
               if (originalBody.length > MAX_PAYLOAD_SIZE) {
                 res.statusCode = 413;
-                res.setHeader("Content-Type", "application/json");
-                res.end(JSON.stringify({ error: "Payload too large" }));
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({error: 'Payload too large'}));
                 req.destroy();
               }
             });
 
-            req.on("end", async () => {
+            req.on('end', async () => {
               if (res.writableEnded) return; // Aborted by size limit.
 
               let sendParams: MessageSendParams;
 
               if (isJson(originalBody)) {
-                console.log(
-                  "[a2a-middleware] Received JSON UI event:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received JSON UI event:', originalBody);
 
                 const clientEvent = JSON.parse(originalBody) as Record<string, unknown>;
 
                 sendParams = {
                   message: {
                     messageId: crypto.randomUUID(),
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "data",
+                        kind: 'data',
                         data: clientEvent,
                         mimeType: A2UI_MIME_TYPE,
                       } as Part,
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               } else {
-                console.log(
-                  "[a2a-middleware] Received text query:",
-                  originalBody
-                );
+                console.log('[a2a-middleware] Received text query:', originalBody);
                 sendParams = {
                   message: {
                     messageId: crypto.randomUUID(),
-                    role: "user",
+                    role: 'user',
                     parts: [
                       {
-                        kind: "text",
+                        kind: 'text',
                         text: originalBody,
                       },
                     ],
-                    kind: "message",
+                    kind: 'message',
                   },
                 };
               }
@@ -136,44 +122,48 @@ export const plugin = (): Plugin => {
                   const stream = await client.sendMessageStream(sendParams);
                   res.statusCode = 200;
 
-                  res.setHeader("Content-Type", "text/event-stream");
-                  res.setHeader("Cache-Control", "no-cache");
-                  res.setHeader("Connection", "keep-alive");
+                  res.setHeader('Content-Type', 'text/event-stream');
+                  res.setHeader('Cache-Control', 'no-cache');
+                  res.setHeader('Connection', 'keep-alive');
 
                   for await (const chunk of stream) {
                     // Client disconnected; stop pulling from the agent.
                     if (res.destroyed) break;
                     // A2AClient unpacks the JSON-RPC, so chunk is an A2AStreamEventData.
-                    if (chunk.kind === "status-update" && chunk.status.message?.parts) {
+                    if (chunk.kind === 'status-update' && chunk.status.message?.parts) {
                       res.write(`data: ${JSON.stringify(chunk.status.message.parts)}\n\n`);
-                    } else if (chunk.kind === "message" && chunk.parts) {
+                    } else if (chunk.kind === 'message' && chunk.parts) {
                       res.write(`data: ${JSON.stringify(chunk.parts)}\n\n`);
                     }
                   }
                   res.end();
                 } else {
                   const response = await client.sendMessage(sendParams);
-                  res.setHeader("Cache-Control", "no-store");
-                  if ("error" in response) {
+                  res.setHeader('Cache-Control', 'no-store');
+                  if ('error' in response) {
                     res.statusCode = 500;
-                    res.setHeader("Content-Type", "application/json");
-                    res.end(JSON.stringify({ error: response.error.message }));
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(JSON.stringify({error: response.error.message}));
                   } else {
                     const result = (response as SendMessageSuccessResponse).result as Task;
                     res.statusCode = 200;
-                    res.setHeader("Content-Type", "application/json");
-                    res.end(JSON.stringify(result.kind === "task" ? result.status.message?.parts || [] : []));
+                    res.setHeader('Content-Type', 'application/json');
+                    res.end(
+                      JSON.stringify(
+                        result.kind === 'task' ? result.status.message?.parts || [] : [],
+                      ),
+                    );
                   }
                 }
               } catch (e: unknown) {
-                console.error("Error during streaming:", e);
+                console.error('Error during streaming:', e);
                 const errorMessage = e instanceof Error ? e.message : String(e);
                 if (!res.headersSent) {
                   res.statusCode = 500;
-                  res.setHeader("Content-Type", "application/json");
-                  res.end(JSON.stringify({ error: errorMessage }));
+                  res.setHeader('Content-Type', 'application/json');
+                  res.end(JSON.stringify({error: errorMessage}));
                 } else {
-                  res.write(`data: ${JSON.stringify([{ kind: "error", text: errorMessage }])}\n\n`);
+                  res.write(`data: ${JSON.stringify([{kind: 'error', text: errorMessage}])}\n\n`);
                   res.end();
                 }
               }
@@ -183,7 +173,7 @@ export const plugin = (): Plugin => {
           } else {
             next();
           }
-        }
+        },
       );
     },
   };
diff --git a/samples/client/react/shell/src/App.tsx b/samples/client/react/shell/src/App.tsx
index 3818aa43a..b4913f05e 100644
--- a/samples/client/react/shell/src/App.tsx
+++ b/samples/client/react/shell/src/App.tsx
@@ -14,22 +14,17 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useCallback, useMemo, useRef, FormEvent } from 'react';
+import {useState, useEffect, useCallback, useMemo, useRef, FormEvent} from 'react';
 import {
   A2uiSurface,
   basicCatalog,
   MarkdownContext,
   ReactComponentImplementation,
 } from '@a2ui/react/v0_9';
-import {
-  A2uiClientMessage,
-  A2uiMessage,
-  MessageProcessor,
-  SurfaceModel,
-} from '@a2ui/web_core/v0_9';
-import { renderMarkdown } from '@a2ui/markdown-it';
-import { A2UIClient } from './client';
-import { AppConfig, restaurantConfig } from './configs';
+import {A2uiClientMessage, A2uiMessage, MessageProcessor, SurfaceModel} from '@a2ui/web_core/v0_9';
+import {renderMarkdown} from '@a2ui/markdown-it';
+import {A2UIClient} from './client';
+import {AppConfig, restaurantConfig} from './configs';
 import {
   createRestaurantListMessages,
   createBookingFormMessages,
@@ -55,32 +50,26 @@ export function App() {
   }, []);
 
   // Create client instance
-  const client = useMemo(
-    () => new A2UIClient(),
-    []
-  );
+  const client = useMemo(() => new A2UIClient(), []);
 
   // Set document title and background on mount
   useEffect(() => {
     document.title = config.title;
     if (config.background) {
-      document.documentElement.style.setProperty(
-        '--background',
-        config.background
-      );
+      document.documentElement.style.setProperty('--background', config.background);
     }
   }, [config]);
 
   // Use a ref to hold the sendAndProcess function that will be set by ShellContent
-  const sendAndProcessRef = useRef<
-    ((message: A2uiClientMessage | string) => Promise<void>) | null
-  >(null);
+  const sendAndProcessRef = useRef<((message: A2uiClientMessage | string) => Promise<void>) | null>(
+    null,
+  );
 
   const processor = useMemo(() => {
-    return new MessageProcessor([basicCatalog], (action) => {
+    return new MessageProcessor([basicCatalog], action => {
       console.log('User action:', action);
       if (sendAndProcessRef.current) {
-        sendAndProcessRef.current({ version: 'v0.9', action });
+        sendAndProcessRef.current({version: 'v0.9', action});
       }
     });
   }, []);
@@ -106,7 +95,7 @@ interface ShellContentProps {
   processor: MessageProcessor<ReactComponentImplementation>;
 }
 
-function ShellContent({ config, client, sendAndProcessRef, processor }: ShellContentProps) {
+function ShellContent({config, client, sendAndProcessRef, processor}: ShellContentProps) {
   const [requesting, setRequesting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<A2uiMessage[]>([]);
@@ -120,14 +109,14 @@ function ShellContent({ config, client, sendAndProcessRef, processor }: ShellCon
   });
 
   const [surfaces, setSurfaces] = useState<SurfaceModel<ReactComponentImplementation>[]>(() =>
-    Array.from(processor.model.surfacesMap.values())
+    Array.from(processor.model.surfacesMap.values()),
   );
 
   useEffect(() => {
-    const sub1 = processor.onSurfaceCreated((surface) => {
+    const sub1 = processor.onSurfaceCreated(surface => {
       setSurfaces(prev => [...prev, surface]);
     });
-    const sub2 = processor.onSurfaceDeleted((id) => {
+    const sub2 = processor.onSurfaceDeleted(id => {
       setSurfaces(prev => prev.filter(s => s.id !== id));
     });
     return () => {
@@ -139,50 +128,46 @@ function ShellContent({ config, client, sendAndProcessRef, processor }: ShellCon
   // Loading text rotation
   useEffect(() => {
     if (!requesting) return;
-    if (!Array.isArray(config.loadingText) || config.loadingText.length <= 1)
-      return;
+    if (!Array.isArray(config.loadingText) || config.loadingText.length <= 1) return;
 
     const interval = setInterval(() => {
-      setLoadingTextIndex((prev) => (prev + 1) % config.loadingText!.length);
+      setLoadingTextIndex(prev => (prev + 1) % config.loadingText!.length);
     }, 2000);
 
     return () => clearInterval(interval);
   }, [requesting, config.loadingText]);
 
   // Generate mock response based on message/action
-  const getMockResponse = useCallback(
-    (message: A2uiClientMessage | string): A2uiMessage[] => {
-      // Handle user actions
-      if (typeof message === 'object' && 'action' in message) {
-        const action = message.action;
-        const context = action.context || {};
-
-        if (action.name === 'book_restaurant') {
-          // User clicked "Book Now" - show booking form
-          return createBookingFormMessages(
-            String(context.restaurantName || 'Restaurant'),
-            String(context.imageUrl || ''),
-            String(context.address || '')
-          );
-        }
+  const getMockResponse = useCallback((message: A2uiClientMessage | string): A2uiMessage[] => {
+    // Handle user actions
+    if (typeof message === 'object' && 'action' in message) {
+      const action = message.action;
+      const context = action.context || {};
+
+      if (action.name === 'book_restaurant') {
+        // User clicked "Book Now" - show booking form
+        return createBookingFormMessages(
+          String(context.restaurantName || 'Restaurant'),
+          String(context.imageUrl || ''),
+          String(context.address || ''),
+        );
+      }
 
-        if (action.name === 'submit_booking') {
-          // User submitted booking - show confirmation
-          return createConfirmationMessages(
-            String(context.restaurantName || 'Restaurant'),
-            String(context.partySize || '2'),
-            String(context.reservationTime || ''),
-            String(context.dietary || ''),
-            String(context.imageUrl || '')
-          );
-        }
+      if (action.name === 'submit_booking') {
+        // User submitted booking - show confirmation
+        return createConfirmationMessages(
+          String(context.restaurantName || 'Restaurant'),
+          String(context.partySize || '2'),
+          String(context.reservationTime || ''),
+          String(context.dietary || ''),
+          String(context.imageUrl || ''),
+        );
       }
+    }
 
-      // Default: show restaurant list
-      return createRestaurantListMessages();
-    },
-    []
-  );
+    // Default: show restaurant list
+    return createRestaurantListMessages();
+  }, []);
 
   // Send message to agent and process response
   const sendAndProcess = useCallback(
@@ -200,7 +185,7 @@ function ShellContent({ config, client, sendAndProcessRef, processor }: ShellCon
 
         if (isMockMode) {
           // Simulate network delay in mock mode
-          await new Promise((resolve) => setTimeout(resolve, 800));
+          await new Promise(resolve => setTimeout(resolve, 800));
           response = getMockResponse(message);
           console.log('Mock response:', response);
           processor.processMessages(response);
@@ -208,7 +193,7 @@ function ShellContent({ config, client, sendAndProcessRef, processor }: ShellCon
         } else {
           setMessages([]);
 
-          response = await client.send(message, (chunkMessages) => {
+          response = await client.send(message, chunkMessages => {
             console.log('Chunk messages:', chunkMessages);
             processor.processMessages(chunkMessages);
             setMessages(prev => [...prev, ...chunkMessages]);
@@ -227,7 +212,7 @@ function ShellContent({ config, client, sendAndProcessRef, processor }: ShellCon
         setRequesting(false);
       }
     },
-    [client, processor, getMockResponse]
+    [client, processor, getMockResponse],
   );
 
   // Expose sendAndProcess to parent via ref for action handling
@@ -245,12 +230,12 @@ function ShellContent({ config, client, sendAndProcessRef, processor }: ShellCon
 
       sendAndProcess(body);
     },
-    [sendAndProcess]
+    [sendAndProcess],
   );
 
   // Toggle dark mode
   const toggleDarkMode = useCallback(() => {
-    setIsDarkMode((prev) => {
+    setIsDarkMode(prev => {
       const newValue = !prev;
       if (newValue) {
         document.body.classList.add('dark');
@@ -334,7 +319,7 @@ function ShellContent({ config, client, sendAndProcessRef, processor }: ShellCon
       {/* Render all surfaces */}
       {hasSurfaces && (
         <section className="surfaces">
-          {surfaces.map((surface) => (
+          {surfaces.map(surface => (
             <A2uiSurface key={surface.id} surface={surface} />
           ))}
         </section>
diff --git a/samples/client/react/shell/src/client.ts b/samples/client/react/shell/src/client.ts
index 1b93b7d52..27ed3c4f6 100644
--- a/samples/client/react/shell/src/client.ts
+++ b/samples/client/react/shell/src/client.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { A2uiMessage, A2uiClientMessage } from '@a2ui/web_core/v0_9';
+import type {A2uiMessage, A2uiClientMessage} from '@a2ui/web_core/v0_9';
 
 interface Part {
   kind: 'data' | 'text' | 'error';
@@ -30,7 +30,7 @@ export class A2UIClient {
 
   async send(
     message: A2uiClientMessage | string,
-    onChunk?: (messages: A2uiMessage[]) => void
+    onChunk?: (messages: A2uiMessage[]) => void,
   ): Promise<A2uiMessage[]> {
     const body = typeof message === 'string' ? message : JSON.stringify(message);
 
@@ -58,9 +58,9 @@ export class A2UIClient {
 
       if (reader) {
         while (true) {
-          const { done, value } = await reader.read();
+          const {done, value} = await reader.read();
           if (done) break;
-          buffer += decoder.decode(value, { stream: true });
+          buffer += decoder.decode(value, {stream: true});
 
           const lines = buffer.split(/\r?\n\r?\n/);
           // Keep the last incomplete line in the buffer
@@ -78,7 +78,8 @@ export class A2UIClient {
                   }
                   if (part.kind === 'data' && part.data) {
                     const uiMessage = part.data as unknown as A2uiMessage;
-                    const createSurface = (uiMessage as { createSurface?: { surfaceId: string } }).createSurface;
+                    const createSurface = (uiMessage as {createSurface?: {surfaceId: string}})
+                      .createSurface;
                     if (createSurface) {
                       if (seenSurfaceIds.has(createSurface.surfaceId)) continue;
                       seenSurfaceIds.add(createSurface.surfaceId);
diff --git a/samples/client/react/shell/src/configs/index.ts b/samples/client/react/shell/src/configs/index.ts
index 740c67334..ec2865c58 100644
--- a/samples/client/react/shell/src/configs/index.ts
+++ b/samples/client/react/shell/src/configs/index.ts
@@ -15,4 +15,4 @@
  */
 
 export * from './types';
-export { config as restaurantConfig } from './restaurant';
+export {config as restaurantConfig} from './restaurant';
diff --git a/samples/client/react/shell/src/configs/restaurant.ts b/samples/client/react/shell/src/configs/restaurant.ts
index a513fab7e..54d3717a2 100644
--- a/samples/client/react/shell/src/configs/restaurant.ts
+++ b/samples/client/react/shell/src/configs/restaurant.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AppConfig } from './types';
+import {AppConfig} from './types';
 
 export const config: AppConfig = {
   key: 'restaurant',
diff --git a/samples/client/react/shell/src/configs/types.ts b/samples/client/react/shell/src/configs/types.ts
index 788df93c6..4458e3afc 100644
--- a/samples/client/react/shell/src/configs/types.ts
+++ b/samples/client/react/shell/src/configs/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { Theme } from '@a2ui/react';
+import type {Theme} from '@a2ui/react';
 
 /**
  * Configuration interface for the Universal App Shell.
diff --git a/samples/client/react/shell/src/main.tsx b/samples/client/react/shell/src/main.tsx
index 19fff3f06..e8509c499 100644
--- a/samples/client/react/shell/src/main.tsx
+++ b/samples/client/react/shell/src/main.tsx
@@ -16,10 +16,10 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { App } from './App';
+import {App} from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/samples/client/react/shell/src/mock/restaurantMessages.ts b/samples/client/react/shell/src/mock/restaurantMessages.ts
index c94a0a102..e4e5e7529 100644
--- a/samples/client/react/shell/src/mock/restaurantMessages.ts
+++ b/samples/client/react/shell/src/mock/restaurantMessages.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { A2uiMessage } from '@a2ui/web_core/v0_9';
+import {A2uiMessage} from '@a2ui/web_core/v0_9';
 
 /**
  * Mock A2UI messages for the restaurant finder demo.
@@ -76,7 +76,7 @@ export function createRestaurantListMessages(): A2uiMessage[] {
       createSurface: {
         surfaceId: 'default',
         catalogId: 'https://a2ui.org/specification/v0_9/basic_catalog.json',
-        theme: { primaryColor: '#FF0000', font: 'Roboto' },
+        theme: {primaryColor: '#FF0000', font: 'Roboto'},
       },
     },
     {
@@ -93,7 +93,7 @@ export function createRestaurantListMessages(): A2uiMessage[] {
             id: 'title-heading',
             component: 'Text',
             variant: 'h1',
-            text: { path: '/title' },
+            text: {path: '/title'},
           },
           {
             id: 'item-list',
@@ -117,7 +117,7 @@ export function createRestaurantListMessages(): A2uiMessage[] {
           {
             id: 'template-image',
             component: 'Image',
-            url: { path: 'imageUrl' },
+            url: {path: 'imageUrl'},
             weight: 1,
           },
           {
@@ -136,22 +136,22 @@ export function createRestaurantListMessages(): A2uiMessage[] {
             id: 'template-name',
             component: 'Text',
             variant: 'h3',
-            text: { path: 'name' },
+            text: {path: 'name'},
           },
           {
             id: 'template-rating',
             component: 'Text',
-            text: { path: 'rating' },
+            text: {path: 'rating'},
           },
           {
             id: 'template-detail',
             component: 'Text',
-            text: { path: 'detail' },
+            text: {path: 'detail'},
           },
           {
             id: 'template-link',
             component: 'Text',
-            text: { path: 'infoLink' },
+            text: {path: 'infoLink'},
           },
           {
             id: 'template-book-button',
@@ -162,9 +162,9 @@ export function createRestaurantListMessages(): A2uiMessage[] {
               event: {
                 name: 'book_restaurant',
                 context: {
-                  restaurantName: { path: 'name' },
-                  imageUrl: { path: 'imageUrl' },
-                  address: { path: 'address' },
+                  restaurantName: {path: 'name'},
+                  imageUrl: {path: 'imageUrl'},
+                  address: {path: 'address'},
                 },
               },
             },
@@ -184,7 +184,7 @@ export function createRestaurantListMessages(): A2uiMessage[] {
         path: '/',
         value: {
           title: 'Top 5 Chinese Restaurants in New York',
-          items: restaurantData.map((restaurant) => ({
+          items: restaurantData.map(restaurant => ({
             name: restaurant.name,
             rating: restaurant.rating,
             detail: restaurant.detail,
@@ -205,7 +205,7 @@ export function createRestaurantListMessages(): A2uiMessage[] {
 export function createBookingFormMessages(
   restaurantName: string,
   imageUrl: string,
-  address: string
+  address: string,
 ): A2uiMessage[] {
   return [
     {
@@ -213,7 +213,7 @@ export function createBookingFormMessages(
       createSurface: {
         surfaceId: 'booking-form',
         catalogId: 'https://a2ui.org/specification/v0_9/basic_catalog.json',
-        theme: { primaryColor: '#FF0000', font: 'Roboto' },
+        theme: {primaryColor: '#FF0000', font: 'Roboto'},
       },
     },
     {
@@ -238,30 +238,30 @@ export function createBookingFormMessages(
             id: 'booking-title',
             component: 'Text',
             variant: 'h2',
-            text: { path: '/title' },
+            text: {path: '/title'},
           },
           {
             id: 'restaurant-image',
             component: 'Image',
-            url: { path: '/imageUrl' },
+            url: {path: '/imageUrl'},
           },
           {
             id: 'restaurant-address',
             component: 'Text',
-            text: { path: '/address' },
+            text: {path: '/address'},
           },
           {
             id: 'party-size-field',
             component: 'TextField',
             label: 'Party Size',
-            value: { path: '/partySize' },
+            value: {path: '/partySize'},
             variant: 'number',
           },
           {
             id: 'datetime-field',
             component: 'DateTimeInput',
             label: 'Date & Time',
-            value: { path: '/reservationTime' },
+            value: {path: '/reservationTime'},
             enableDate: true,
             enableTime: true,
           },
@@ -269,7 +269,7 @@ export function createBookingFormMessages(
             id: 'dietary-field',
             component: 'TextField',
             label: 'Dietary Requirements',
-            value: { path: '/dietary' },
+            value: {path: '/dietary'},
           },
           {
             id: 'submit-button',
@@ -280,11 +280,11 @@ export function createBookingFormMessages(
               event: {
                 name: 'submit_booking',
                 context: {
-                  restaurantName: { path: '/restaurantName' },
-                  partySize: { path: '/partySize' },
-                  reservationTime: { path: '/reservationTime' },
-                  dietary: { path: '/dietary' },
-                  imageUrl: { path: '/imageUrl' },
+                  restaurantName: {path: '/restaurantName'},
+                  partySize: {path: '/partySize'},
+                  reservationTime: {path: '/reservationTime'},
+                  dietary: {path: '/dietary'},
+                  imageUrl: {path: '/imageUrl'},
                 },
               },
             },
@@ -325,7 +325,7 @@ export function createConfirmationMessages(
   partySize: string,
   reservationTime: string,
   dietary: string,
-  imageUrl: string
+  imageUrl: string,
 ): A2uiMessage[] {
   return [
     {
@@ -333,7 +333,7 @@ export function createConfirmationMessages(
       createSurface: {
         surfaceId: 'confirmation',
         catalogId: 'https://a2ui.org/specification/v0_9/basic_catalog.json',
-        theme: { primaryColor: '#FF0000', font: 'Roboto' },
+        theme: {primaryColor: '#FF0000', font: 'Roboto'},
       },
     },
     {
@@ -364,22 +364,22 @@ export function createConfirmationMessages(
             id: 'confirm-title',
             component: 'Text',
             variant: 'h2',
-            text: { path: '/title' },
+            text: {path: '/title'},
           },
           {
             id: 'confirm-image',
             component: 'Image',
-            url: { path: '/imageUrl' },
+            url: {path: '/imageUrl'},
           },
           {
             id: 'confirm-details',
             component: 'Text',
-            text: { path: '/bookingDetails' },
+            text: {path: '/bookingDetails'},
           },
           {
             id: 'confirm-dietary',
             component: 'Text',
-            text: { path: '/dietaryRequirements' },
+            text: {path: '/dietaryRequirements'},
           },
           {
             id: 'confirm-text',
@@ -387,9 +387,9 @@ export function createConfirmationMessages(
             variant: 'h5',
             text: 'We look forward to seeing you!',
           },
-          { id: 'divider1', component: 'Divider' },
-          { id: 'divider2', component: 'Divider' },
-          { id: 'divider3', component: 'Divider' },
+          {id: 'divider1', component: 'Divider'},
+          {id: 'divider2', component: 'Divider'},
+          {id: 'divider3', component: 'Divider'},
         ],
       },
     },
diff --git a/samples/client/react/shell/src/theme/default-theme.ts b/samples/client/react/shell/src/theme/default-theme.ts
index e6b5bf9e7..1825c20fc 100644
--- a/samples/client/react/shell/src/theme/default-theme.ts
+++ b/samples/client/react/shell/src/theme/default-theme.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { Theme } from '@a2ui/react';
+import type {Theme} from '@a2ui/react';
 
 /**
  * Default theme for the React shell - matches the Lit shell theme exactly.
@@ -215,7 +215,7 @@ export const theme: Theme = {
       'behavior-ho-70': true,
       'typography-w-400': true,
     },
-    Card: { 'border-br-9': true, 'layout-p-4': true, 'color-bgc-n100': true },
+    Card: {'border-br-9': true, 'layout-p-4': true, 'color-bgc-n100': true},
     CheckBox: {
       element: {
         'layout-m-0': true,
@@ -280,7 +280,7 @@ export const theme: Theme = {
         'layout-w-100': true,
         'layout-h-100': true,
       },
-      avatar: { 'is-avatar': true },
+      avatar: {'is-avatar': true},
       header: {},
       icon: {},
       largeFeature: {},
@@ -293,7 +293,7 @@ export const theme: Theme = {
       'layout-p-2': true,
     },
     Modal: {
-      backdrop: { 'color-bbgc-p60_20': true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
         'border-br-2': true,
         'color-bgc-p100': true,
@@ -318,7 +318,7 @@ export const theme: Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
diff --git a/samples/client/react/shell/vite.config.ts b/samples/client/react/shell/vite.config.ts
index 92002ef6d..ad845f8b5 100644
--- a/samples/client/react/shell/vite.config.ts
+++ b/samples/client/react/shell/vite.config.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
-import { plugin as a2aPlugin } from './middleware/a2a';
+import {plugin as a2aPlugin} from './middleware/a2a';
 
 export default defineConfig({
   plugins: [react(), a2aPlugin()],
diff --git a/samples/client/shared/mcp_apps_inner_iframe/README.md b/samples/client/shared/mcp_apps_inner_iframe/README.md
index 32d46d31a..c4cefa7ee 100644
--- a/samples/client/shared/mcp_apps_inner_iframe/README.md
+++ b/samples/client/shared/mcp_apps_inner_iframe/README.md
@@ -8,8 +8,8 @@ A2UI utilizes a **double-iframe isolation pattern** to run untrusted third-party
 
 ## Files
 
--   `sandbox.ts`: Logic for origin validation and message relaying between the Host and the inner iframe.
--   `sandbox.html`: The container for the outer proxy iframe.
+- `sandbox.ts`: Logic for origin validation and message relaying between the Host and the inner iframe.
+- `sandbox.html`: The container for the outer proxy iframe.
 
 ## Testing guidelines
 
diff --git a/samples/client/shared/mcp_apps_inner_iframe/sandbox.html b/samples/client/shared/mcp_apps_inner_iframe/sandbox.html
index 62997f6f4..d364046fc 100644
--- a/samples/client/shared/mcp_apps_inner_iframe/sandbox.html
+++ b/samples/client/shared/mcp_apps_inner_iframe/sandbox.html
@@ -17,9 +17,11 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="color-scheme" content="light dark">
-    <meta http-equiv="Content-Security-Policy"
-      content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; child-src 'self' blob:; frame-ancestors *;">
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; child-src 'self' blob:; frame-ancestors *;"
+    />
     <title>MCP-UI Proxy</title>
     <style>
       html,
diff --git a/samples/client/shared/mcp_apps_inner_iframe/sandbox.ts b/samples/client/shared/mcp_apps_inner_iframe/sandbox.ts
index ffda3f45d..e64a97db7 100644
--- a/samples/client/shared/mcp_apps_inner_iframe/sandbox.ts
+++ b/samples/client/shared/mcp_apps_inner_iframe/sandbox.ts
@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
-import type { McpUiSandboxProxyReadyNotification, McpUiSandboxResourceReadyNotification } from "@modelcontextprotocol/ext-apps/app-bridge";
-import { buildAllowAttribute } from "@modelcontextprotocol/ext-apps/app-bridge";
+import type {
+  McpUiSandboxProxyReadyNotification,
+  McpUiSandboxResourceReadyNotification,
+} from '@modelcontextprotocol/ext-apps/app-bridge';
+import {buildAllowAttribute} from '@modelcontextprotocol/ext-apps/app-bridge';
 
 // Allow configuring the expected host origin via environment variable for production
 const meta = import.meta as any;
@@ -25,11 +28,11 @@ const ALLOWED_REFERRER_PATTERN = allowedHostOrigin
   : /^http:\/\/(localhost|127\.0\.0\.1)(:|\/|$)/;
 
 if (window.self === window.top) {
-  throw new Error("This file is only to be used in an iframe sandbox.");
+  throw new Error('This file is only to be used in an iframe sandbox.');
 }
 
 if (!document.referrer) {
-  throw new Error("No referrer, cannot validate embedding site.");
+  throw new Error('No referrer, cannot validate embedding site.');
 }
 
 if (!document.referrer.match(ALLOWED_REFERRER_PATTERN)) {
@@ -50,55 +53,55 @@ const disableSelfTest = urlParams.get('disable_security_self_test') === 'true';
 if (!disableSelfTest) {
   // Security self-test: verify iframe isolation is working correctly.
   try {
-    window.top!.alert("If you see this, the sandbox is not setup securely.");
-    throw "FAIL";
+    window.top!.alert('If you see this, the sandbox is not setup securely.');
+    throw 'FAIL';
   } catch (e) {
-    if (e === "FAIL") {
-      throw new Error("The sandbox is not setup securely.");
+    if (e === 'FAIL') {
+      throw new Error('The sandbox is not setup securely.');
     }
   }
 }
 
 // Double-iframe sandbox architecture: THIS file is the outer sandbox proxy
 // iframe on a separate origin. It creates an inner iframe for untrusted HTML content.
-const inner = document.createElement("iframe");
-inner.style.cssText = "width:100%; height:100%; border:none;";
-inner.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-modals");
+const inner = document.createElement('iframe');
+inner.style.cssText = 'width:100%; height:100%; border:none;';
+inner.setAttribute('sandbox', 'allow-scripts allow-forms allow-popups allow-modals');
 document.body.appendChild(inner);
 
-const RESOURCE_READY_NOTIFICATION: McpUiSandboxResourceReadyNotification["method"] =
-  "ui/notifications/sandbox-resource-ready";
-const PROXY_READY_NOTIFICATION: McpUiSandboxProxyReadyNotification["method"] =
-  "ui/notifications/sandbox-proxy-ready";
+const RESOURCE_READY_NOTIFICATION: McpUiSandboxResourceReadyNotification['method'] =
+  'ui/notifications/sandbox-resource-ready';
+const PROXY_READY_NOTIFICATION: McpUiSandboxProxyReadyNotification['method'] =
+  'ui/notifications/sandbox-proxy-ready';
 
-window.addEventListener("message", async (event) => {
+window.addEventListener('message', async event => {
   if (event.source === window.parent) {
-    const normalizeOrigin = (origin: string) => origin.replace("://127.0.0.1", "://localhost");
+    const normalizeOrigin = (origin: string) => origin.replace('://127.0.0.1', '://localhost');
     if (normalizeOrigin(event.origin) !== normalizeOrigin(EXPECTED_HOST_ORIGIN)) {
       console.error(
-        "[Sandbox] Rejecting message from unexpected origin:",
+        '[Sandbox] Rejecting message from unexpected origin:',
         event.origin,
-        "expected:",
-        EXPECTED_HOST_ORIGIN
+        'expected:',
+        EXPECTED_HOST_ORIGIN,
       );
       return;
     }
 
     if (event.data && event.data.method === RESOURCE_READY_NOTIFICATION) {
-      const { html, sandbox, permissions } = event.data.params;
-      if (typeof sandbox === "string") {
-        inner.setAttribute("sandbox", sandbox);
+      const {html, sandbox, permissions} = event.data.params;
+      if (typeof sandbox === 'string') {
+        inner.setAttribute('sandbox', sandbox);
       }
       const allowAttribute = buildAllowAttribute(permissions);
       if (allowAttribute) {
-        inner.setAttribute("allow", allowAttribute);
+        inner.setAttribute('allow', allowAttribute);
       }
-      if (typeof html === "string") {
+      if (typeof html === 'string') {
         const sendInit = () => {
           if (inner.contentWindow) {
             // Use "*" because sandboxed iframes with no 'allow-same-origin' have a "null" origin.
             // A specific target origin will fail matching and block delivery.
-            inner.contentWindow.postMessage({ type: "sandbox-init" }, "*");
+            inner.contentWindow.postMessage({type: 'sandbox-init'}, '*');
           }
         };
         inner.onload = sendInit;
@@ -108,20 +111,20 @@ window.addEventListener("message", async (event) => {
     } else {
       if (inner && inner.contentWindow) {
         // Same rationale as above: target origin must be "*" to reach sandboxed 'null' windows.
-        inner.contentWindow.postMessage(event.data, "*");
+        inner.contentWindow.postMessage(event.data, '*');
       }
     }
   } else if (event.source === inner.contentWindow) {
     // MUST allow the string "null" as the origin. Without 'allow-same-origin',
     // browsers force sandboxed frames to an anonymous, unique origin that serializes to "null".
     // Security verification relies primarily on ensuring 'event.source === inner.contentWindow'.
-    if (event.origin !== OWN_ORIGIN && event.origin !== "null") {
+    if (event.origin !== OWN_ORIGIN && event.origin !== 'null') {
       console.error(
-        "[Sandbox] Rejecting message from inner iframe with unexpected origin:",
+        '[Sandbox] Rejecting message from inner iframe with unexpected origin:',
         event.origin,
-        "expected:",
+        'expected:',
         OWN_ORIGIN,
-        "or null"
+        'or null',
       );
       return;
     }
@@ -130,8 +133,11 @@ window.addEventListener("message", async (event) => {
 });
 
 // Notify Host
-window.parent.postMessage({
-  jsonrpc: "2.0",
-  method: PROXY_READY_NOTIFICATION,
-  params: {},
-}, EXPECTED_HOST_ORIGIN);
+window.parent.postMessage(
+  {
+    jsonrpc: '2.0',
+    method: PROXY_READY_NOTIFICATION,
+    params: {},
+  },
+  EXPECTED_HOST_ORIGIN,
+);
diff --git a/samples/mcp/a2ui-in-mcpapps/README.md b/samples/mcp/a2ui-in-mcpapps/README.md
index 4046ec645..03eff3ff2 100644
--- a/samples/mcp/a2ui-in-mcpapps/README.md
+++ b/samples/mcp/a2ui-in-mcpapps/README.md
@@ -4,9 +4,9 @@ This sample demonstrates a Model Context Protocol (MCP) Application Host that is
 
 ## Architecture
 
-*   **`client/`**: The host container application (Angular). It hosts the outer safe iframe.
-*   **`server/`**: The MCP Server (Python/uv) that provides the micro-app resources and tools.
-*   **`server/apps/src/`**: The source source code for the server-hosted isolated micro-app.
+- **`client/`**: The host container application (Angular). It hosts the outer safe iframe.
+- **`server/`**: The MCP Server (Python/uv) that provides the micro-app resources and tools.
+- **`server/apps/src/`**: The source source code for the server-hosted isolated micro-app.
 
 ## Communication Flow
 
@@ -23,7 +23,7 @@ sequenceDiagram
     Server-->>Host: Return MCP App resource
     Host->>Proxy: 3a. Load Sandbox Proxy
     Proxy->>App: 3b. Serve App in isolated iframe
-    
+
     Note over App: 4. CTA triggers relay request
     App->>Proxy: Request tool call
     Proxy->>Host: Relay Request
@@ -31,10 +31,10 @@ sequenceDiagram
     Server-->>Host: 5. Respond with A2UI JSON payload
     Host->>Proxy: Relay payload
     Proxy->>App: 6. Hand down payload to MCP App
-    
+
     App->>A2UI: 7. Renders A2UI Components
     Note over A2UI: Click on A2UI Button
-    
+
     A2UI->>App: 8. A2UI Button triggers UserAction
     App->>Proxy: Forward UserAction event
     Proxy->>Host: Relay UserAction to Host
@@ -60,31 +60,39 @@ sequenceDiagram
 This sample relies on some generated bundle artifacts. Some are committed for convenience, while others are ignored and must be built.
 
 ### 1. Build Client Sandbox Bridge
+
 The sandboxed iframe needs its asset bundle. Run this in the `client/` directory:
+
 ```bash
 cd client
 npm install
 npm run build:sandbox
 ```
-*(Generates `client/public/sandbox_iframe/sandbox.{js,html}`)*
+
+_(Generates `client/public/sandbox_iframe/sandbox.{js,html}`)_
 
 ### 2. Rebuild the Server Hosted App (Optional)
+
 The server serves a bundled `app.html` artifact located in `server/apps/public/app.html`. If you modify the source code in `server/apps/src/`, you must regenerate this list:
 
 Run this in the `server/apps/src/` directory:
+
 ```bash
 cd server/apps/src
 npm install
 npm run build:all
 ```
-*(Runs Angular compilation and triggers `node inline.js` to single-file inline it into `server/apps/public/app.html`)*
+
+_(Runs Angular compilation and triggers `node inline.js` to single-file inline it into `server/apps/public/app.html`)_
 
 ---
 
 ## Running the Sample
 
 ### 1. Start the MCP Server
+
 Run this in the `server/` directory:
+
 ```bash
 cd server
 uv sync
@@ -92,9 +100,12 @@ uv run python server.py --transport sse --port 8000
 ```
 
 ### 2. Start the Host Client
+
 Run this in the `client/` directory:
+
 ```bash
 cd client
 npm run start
 ```
+
 Navigate to `http://localhost:4200` to view the running host.
diff --git a/samples/mcp/a2ui-in-mcpapps/client/.prettierrc b/samples/mcp/a2ui-in-mcpapps/client/.prettierrc
deleted file mode 100644
index d6c16d7ee..000000000
--- a/samples/mcp/a2ui-in-mcpapps/client/.prettierrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true,
-  "overrides": [
-    {
-      "files": "*.html",
-      "options": {
-        "parser": "angular"
-      }
-    }
-  ]
-}
diff --git a/samples/mcp/a2ui-in-mcpapps/client/package.json b/samples/mcp/a2ui-in-mcpapps/client/package.json
index 5965cae0b..41952350b 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/package.json
+++ b/samples/mcp/a2ui-in-mcpapps/client/package.json
@@ -8,7 +8,6 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "build:sandbox": "npx esbuild ../../../client/shared/mcp_apps_inner_iframe/sandbox.ts --bundle --outfile=public/sandbox_iframe/sandbox.js --format=esm --platform=browser --alias:@modelcontextprotocol/ext-apps/app-bridge=./node_modules/@modelcontextprotocol/ext-apps/dist/src/app-bridge.js && cp ../../../client/shared/mcp_apps_inner_iframe/sandbox.html public/sandbox_iframe/sandbox.html"
-
   },
   "private": true,
   "packageManager": "npm@9.2.0",
diff --git a/samples/mcp/a2ui-in-mcpapps/client/src/app/README.md b/samples/mcp/a2ui-in-mcpapps/client/src/app/README.md
index e58d227c3..b48d165dc 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/src/app/README.md
+++ b/samples/mcp/a2ui-in-mcpapps/client/src/app/README.md
@@ -8,13 +8,13 @@ This application acts as a host container for Model Context Protocol (MCP) Appli
 
 ## Key Features
 
-*   **Security Isolation**: Implements a secure **double-iframe proxy pattern** to isolation-test untrusted components, preventing security leaks while maintaining functionality.
-*   **Host Container**: Acts as the main container for the outer safe iframe.
-*   **Tool & Message Passthrough**: Operates as a communication bridge, routing custom tools and layout messages between the isolated iframe and the database/MCP server.
-*   **UI-Agnostic Isolation Infrastructure**: Holds zero A2UI or app-specific rendering knowledge; it solely manages the infrastructure frames necessary for the isolation sandbox.
+- **Security Isolation**: Implements a secure **double-iframe proxy pattern** to isolation-test untrusted components, preventing security leaks while maintaining functionality.
+- **Host Container**: Acts as the main container for the outer safe iframe.
+- **Tool & Message Passthrough**: Operates as a communication bridge, routing custom tools and layout messages between the isolated iframe and the database/MCP server.
+- **UI-Agnostic Isolation Infrastructure**: Holds zero A2UI or app-specific rendering knowledge; it solely manages the infrastructure frames necessary for the isolation sandbox.
 
 ## Architecture Context
 
-*   **Client (This app)**: The Angular host container.
-*   **Server**: Python-based MCP server providing tools and micro-app resources.
-*   **Isolated Micro-Apps**: Served by the server and rendered inside this host.
+- **Client (This app)**: The Angular host container.
+- **Server**: Python-based MCP server providing tools and micro-app resources.
+- **Isolated Micro-Apps**: Served by the server and rendered inside this host.
diff --git a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.config.ts b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.config.ts
index 0e78e4ec9..63d9358a6 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.config.ts
+++ b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.config.ts
@@ -14,10 +14,8 @@
  * limitations under the License.
  */
 
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import {ApplicationConfig, provideBrowserGlobalErrorListeners} from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-  ]
+  providers: [provideBrowserGlobalErrorListeners()],
 };
diff --git a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.html b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.html
index e8eb732b5..f93e8afd5 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.html
+++ b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.html
@@ -24,9 +24,11 @@ <h1>Simple MCP Apps Host</h1>
   </div>
 
   <div class="content">
-    <iframe #appIframe
-            class="mcp-app-iframe"
-            style="width: 100%; height: 600px; border: 1px solid #ccc; margin-top: 20px;">
+    <iframe
+      #appIframe
+      class="mcp-app-iframe"
+      style="width: 100%; height: 600px; border: 1px solid #ccc; margin-top: 20px"
+    >
     </iframe>
   </div>
 </main>
diff --git a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.spec.ts b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.spec.ts
index c39710286..ab541dbd7 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.spec.ts
+++ b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.spec.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { TestBed } from '@angular/core/testing';
-import { App } from './app';
+import {TestBed} from '@angular/core/testing';
+import {App} from './app';
 
 describe('App', () => {
   beforeEach(async () => {
diff --git a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.ts b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.ts
index 1c6671e56..1d75921b4 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/src/app/app.ts
+++ b/samples/mcp/a2ui-in-mcpapps/client/src/app/app.ts
@@ -14,32 +14,32 @@
  * limitations under the License.
  */
 
-import { Component, signal, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
-import { Client } from '@modelcontextprotocol/sdk/client/index.js';
-import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
+import {Component, signal, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
+import {Client} from '@modelcontextprotocol/sdk/client/index.js';
+import {SSEClientTransport} from '@modelcontextprotocol/sdk/client/sse.js';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.html',
-  styleUrls: ['./app.css']
+  styleUrls: ['./app.css'],
 })
 export class App implements AfterViewInit {
   @ViewChild('appIframe') appIframe!: ElementRef<HTMLIFrameElement>;
 
   protected readonly status = signal<string>('Not connected');
-  
+
   private htmlContent: string | null = null;
   private messageListenerAdded = false;
   protected readonly mcpAppHtmlUrl = signal<string | null>(null);
   protected readonly isAppLoading = signal<boolean>(false);
 
   private mcpClient: Client | null = null;
-  
+
   ngAfterViewInit() {
     if (this.messageListenerAdded) return;
     this.messageListenerAdded = true;
 
-    window.addEventListener('message', (event) => {
+    window.addEventListener('message', event => {
       // Security: Validate origin
       if (event.origin !== window.location.origin) return;
 
@@ -51,79 +51,106 @@ export class App implements AfterViewInit {
       const data = event.data;
 
       if (data?.method === 'ui/notifications/sandbox-proxy-ready') {
-          if (this.htmlContent) {
-              console.log('[Host] Sandbox proxy ready, sending resource...');
-              iframe.contentWindow?.postMessage({
-                  jsonrpc: "2.0",
-                  method: "ui/notifications/sandbox-resource-ready",
-                  params: {
-                      html: this.htmlContent
-                  }
-              }, window.location.origin);
-          }
+        if (this.htmlContent) {
+          console.log('[Host] Sandbox proxy ready, sending resource...');
+          iframe.contentWindow?.postMessage(
+            {
+              jsonrpc: '2.0',
+              method: 'ui/notifications/sandbox-resource-ready',
+              params: {
+                html: this.htmlContent,
+              },
+            },
+            window.location.origin,
+          );
+        }
       } else if (data?.method === 'ui/ping') {
-          if (data.id && target) {
-               target.postMessage({
-                   jsonrpc: "2.0",
-                   id: data.id,
-                   result: {}
-               }, window.location.origin);
-          }
+        if (data.id && target) {
+          target.postMessage(
+            {
+              jsonrpc: '2.0',
+              id: data.id,
+              result: {},
+            },
+            window.location.origin,
+          );
+        }
       } else if (data?.method === 'ui/fetch_counter_a2ui') {
-          if (data.id && target && this.mcpClient) {
-               this.mcpClient.callTool({
-                   name: "fetch_counter_a2ui",
-                   arguments: {}
-               }).then(result => {
-                   target.postMessage({
-                       jsonrpc: "2.0",
-                       id: data.id,
-                       result: result.content
-                   }, window.location.origin);
-               }).catch(error => {
-                   target.postMessage({
-                       jsonrpc: "2.0",
-                       id: data.id,
-                       error: { message: error.message }
-                   }, window.location.origin);
-               });
-          }
+        if (data.id && target && this.mcpClient) {
+          this.mcpClient
+            .callTool({
+              name: 'fetch_counter_a2ui',
+              arguments: {},
+            })
+            .then(result => {
+              target.postMessage(
+                {
+                  jsonrpc: '2.0',
+                  id: data.id,
+                  result: result.content,
+                },
+                window.location.origin,
+              );
+            })
+            .catch(error => {
+              target.postMessage(
+                {
+                  jsonrpc: '2.0',
+                  id: data.id,
+                  error: {message: error.message},
+                },
+                window.location.origin,
+              );
+            });
+        }
       } else if (data?.method === 'ui/increase_counter') {
-          if (data.id && target && this.mcpClient) {
-               this.mcpClient.callTool({
-                   name: "increase_counter",
-                   arguments: {}
-               }).then(result => {
-                   target.postMessage({
-                       jsonrpc: "2.0",
-                       id: data.id,
-                       result: result.content
-                   }, window.location.origin);
-               }).catch(error => {
-                   target.postMessage({
-                       jsonrpc: "2.0",
-                       id: data.id,
-                       error: { message: error.message }
-                   }, window.location.origin);
-               });
-          }
-      } else if (data?.method === 'ui/initialize') {
-          if (data.id && target) {
-              target.postMessage({
-                  jsonrpc: "2.0",
+        if (data.id && target && this.mcpClient) {
+          this.mcpClient
+            .callTool({
+              name: 'increase_counter',
+              arguments: {},
+            })
+            .then(result => {
+              target.postMessage(
+                {
+                  jsonrpc: '2.0',
+                  id: data.id,
+                  result: result.content,
+                },
+                window.location.origin,
+              );
+            })
+            .catch(error => {
+              target.postMessage(
+                {
+                  jsonrpc: '2.0',
                   id: data.id,
-                  result: {
-                      hostCapabilities: {
-                          displayModes: ["inline"]
-                      }
-                  }
-              }, window.location.origin);
-          }
+                  error: {message: error.message},
+                },
+                window.location.origin,
+              );
+            });
+        }
+      } else if (data?.method === 'ui/initialize') {
+        if (data.id && target) {
+          target.postMessage(
+            {
+              jsonrpc: '2.0',
+              id: data.id,
+              result: {
+                hostCapabilities: {
+                  displayModes: ['inline'],
+                },
+              },
+            },
+            window.location.origin,
+          );
+        }
       } else if (data?.method === 'ui/resize') {
-          const height = data.params?.height;
-          if (typeof height === 'number') {
-              iframe.style.height = `${height}px`;
-          }
+        const height = data.params?.height;
+        if (typeof height === 'number') {
+          iframe.style.height = `${height}px`;
+        }
       }
     });
   }
@@ -135,12 +162,15 @@ export class App implements AfterViewInit {
     try {
       // 1. Connect to SSE
       const transport = new SSEClientTransport(new URL('http://127.0.0.1:8000/sse'));
-      const client = new Client({
-        name: "basic-host",
-        version: "1.0.0"
-      }, {
-        capabilities: {}
-      });
+      const client = new Client(
+        {
+          name: 'basic-host',
+          version: '1.0.0',
+        },
+        {
+          capabilities: {},
+        },
+      );
 
       this.status.set('Initializing MCP Client...');
       await client.connect(transport);
@@ -149,8 +179,8 @@ export class App implements AfterViewInit {
       this.status.set('Calling get_basic_app tool...');
       // 2. Call the tool to get the app
       const result = await client.callTool({
-        name: "get_basic_app",
-        arguments: {}
+        name: 'get_basic_app',
+        arguments: {},
       });
 
       // 3. Extract resource URI
@@ -163,9 +193,11 @@ export class App implements AfterViewInit {
       this.status.set(`Reading resource: ${resourceUri}`);
 
       // 4. Read the resource
-      const appResource = await client.readResource({ uri: resourceUri });
-      const htmlContentObj = appResource.contents.find((c: any) => c.mimeType === 'text/html;profile=mcp-app' || 'text' in c) as any;
-      
+      const appResource = await client.readResource({uri: resourceUri});
+      const htmlContentObj = appResource.contents.find(
+        (c: any) => c.mimeType === 'text/html;profile=mcp-app' || 'text' in c,
+      ) as any;
+
       if (!htmlContentObj || typeof htmlContentObj.text !== 'string') {
         throw new Error('Resource did not return valid HTML content');
       }
@@ -174,10 +206,9 @@ export class App implements AfterViewInit {
       this.status.set('App loaded successfully!');
 
       if (this.appIframe && this.appIframe.nativeElement) {
-         this.appIframe.nativeElement.src = '/sandbox_iframe/sandbox.html?disable_security_self_test=true';
+        this.appIframe.nativeElement.src =
+          '/sandbox_iframe/sandbox.html?disable_security_self_test=true';
       }
-
-
     } catch (e: any) {
       this.status.set(`Error: ${e.message}`);
     } finally {
diff --git a/samples/mcp/a2ui-in-mcpapps/client/src/index.html b/samples/mcp/a2ui-in-mcpapps/client/src/index.html
index fd6484d07..e9d81b0f0 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/src/index.html
+++ b/samples/mcp/a2ui-in-mcpapps/client/src/index.html
@@ -16,14 +16,14 @@
 -->
 
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Client</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Client</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/samples/mcp/a2ui-in-mcpapps/client/src/main.ts b/samples/mcp/a2ui-in-mcpapps/client/src/main.ts
index 5a40424ff..56f29a67f 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/src/main.ts
+++ b/samples/mcp/a2ui-in-mcpapps/client/src/main.ts
@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {appConfig} from './app/app.config';
+import {App} from './app/app';
 
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(App, appConfig).catch(err => console.error(err));
diff --git a/samples/mcp/a2ui-in-mcpapps/client/tsconfig.app.json b/samples/mcp/a2ui-in-mcpapps/client/tsconfig.app.json
index 264f459bf..a0dcc37c6 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/tsconfig.app.json
+++ b/samples/mcp/a2ui-in-mcpapps/client/tsconfig.app.json
@@ -6,10 +6,6 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
 }
diff --git a/samples/mcp/a2ui-in-mcpapps/client/tsconfig.spec.json b/samples/mcp/a2ui-in-mcpapps/client/tsconfig.spec.json
index d38370633..26230b0b3 100644
--- a/samples/mcp/a2ui-in-mcpapps/client/tsconfig.spec.json
+++ b/samples/mcp/a2ui-in-mcpapps/client/tsconfig.spec.json
@@ -4,12 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "vitest/globals"
-    ]
+    "types": ["vitest/globals"]
   },
-  "include": [
-    "src/**/*.d.ts",
-    "src/**/*.spec.ts"
-  ]
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
 }
diff --git a/samples/mcp/a2ui-in-mcpapps/server/README.md b/samples/mcp/a2ui-in-mcpapps/server/README.md
index ecc8e99c4..0b899d5c2 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/README.md
+++ b/samples/mcp/a2ui-in-mcpapps/server/README.md
@@ -9,17 +9,18 @@ It provides a reference implementation for serving rich, interactive UIs to an a
 - **`server.py`**: The core MCP server implementation. Defines the tools, resources, and transports.
 - **`simple_counter_a2ui.json`**: A mock data file containing sample A2UI payloads returned by the `fetch_counter_a2ui` tool.
 - **`apps/`**: Contains the source code and build artifacts for the application hosted by this server.
-    - *Note: The server specifically expects to serve a bundled artifact at `apps/public/app.html`.*
-
+  - _Note: The server specifically expects to serve a bundled artifact at `apps/public/app.html`._
 
 ---
 
 ## Exposed Interface
 
 ### Resources
+
 - **`ui://basic/app`**: Serves the self-contained `apps/public/app.html` application. (MIME type: `text/html;profile=mcp-app`)
 
 ### Tools
+
 - **`get_basic_app`**: Returns a reference to the `ui://basic/app` resource.
 - **`fetch_counter_a2ui`**: Fetches the initial counter A2UI payload (loaded from `simple_counter_a2ui.json`) to test rendering.
 - **`increase_counter`**: Increments an in-memory counter and returns a standard `dataModelUpdate` to update UI components.
@@ -44,7 +45,8 @@ Starts the server on `127.0.0.1:8000` waiting for SSE connections.
 ```bash
 uv run python server.py --transport sse --port 8000
 ```
-*(or simply `uv run python server.py` as it defaults to sse/8000)*
+
+_(or simply `uv run python server.py` as it defaults to sse/8000)_
 
 #### Option B: Run with Stdio
 
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/README.md b/samples/mcp/a2ui-in-mcpapps/server/apps/README.md
index ecd52c3be..81ff4416d 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/README.md
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/README.md
@@ -23,6 +23,7 @@ The application in `src/` is a basic Angular application (`basic-mcp-app-angular
 Due to MCP App security isolation requirements (often relying on sandboxed iframes), the application is built and then processed by `inline.js` (located in `src/`).
 
 This process:
+
 - Collects raw Angular build outputs from `dist/raw`.
 - Dynamically inlines all JavaScript and CSS files directly into `index.html`.
 - Outputs a single, self-contained `app.html` file into the `public/` directory.
@@ -34,9 +35,11 @@ This self-contained file is then served by the host server.
 The server serves a bundled `app.html` artifact located in `public/app.html`. If you modify the source code in `src/`, you must regenerate this artifact:
 
 Run this in the `src/` directory:
+
 ```bash
 cd src
 npm install
 npm run build:all
 ```
-*(Runs Angular compilation and triggers `node inline.js` to single-file inline it into `public/app.html`)*
+
+_(Runs Angular compilation and triggers `node inline.js` to single-file inline it into `public/app.html`)_
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/src/inline.js b/samples/mcp/a2ui-in-mcpapps/server/apps/src/inline.js
index 60bc8e1a6..69edf52f6 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/src/inline.js
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/src/inline.js
@@ -23,76 +23,83 @@ const outputDir = path.join(__dirname, '../public');
 const outputFile = path.join(outputDir, 'app.html');
 
 function getDir() {
-    if (fs.existsSync(path.join(rawDir, 'index.html'))) return rawDir;
-    if (fs.existsSync(path.join(fallbackDir, 'index.html'))) return fallbackDir;
-    throw new Error("Could not find index.html in raw output directories.");
+  if (fs.existsSync(path.join(rawDir, 'index.html'))) return rawDir;
+  if (fs.existsSync(path.join(fallbackDir, 'index.html'))) return fallbackDir;
+  throw new Error('Could not find index.html in raw output directories.');
 }
 
 try {
-    const buildDir = getDir();
-    console.log(`Using build directory: ${buildDir}`);
+  const buildDir = getDir();
+  console.log(`Using build directory: ${buildDir}`);
 
-    let indexHtml = fs.readFileSync(path.join(buildDir, 'index.html'), 'utf-8');
-    
-    const files = fs.readdirSync(buildDir);
-    const jsFiles = files.filter(f => f.endsWith('.js'));
-    const cssFiles = files.filter(f => f.endsWith('.css'));
+  let indexHtml = fs.readFileSync(path.join(buildDir, 'index.html'), 'utf-8');
 
-    // Remove existing script tags that point to external files and replace with inlined content
-    indexHtml = indexHtml.replace(/<script[^>]*src="([^"]+)"[^>]*><\/script>/g, (match, src) => {
-        const filePath = path.join(buildDir, src);
-        if (fs.existsSync(filePath)) {
-            let content;
-            if (src === 'main.js') {
-                console.log(`Bundling and inlining JS: ${src}`);
-                const bundledPath = path.join(buildDir, 'main.bundled.js');
-                try {
-                    // CRITICAL: Modern Angular 17+ builds use ES module code-splitting by default.
-                    // While index.html only points to 'main.js', main.js relies on external relative chunks
-                    // (like markdown renderer, zones, etc.) which browsers block when run inside a sandboxed 
-                    // 'srcdoc' iframe due to the lack of an accessible base origin.
-                    //
-                    // We use esbuild's explicit bundling feature here to automatically traverse all 
-                    // ES module imports and merge the split chunks into ONE COMPLETELY SELF-CONTAINED monolithic JS file 
-                    // before embedding it into the HTML body.
-                    require('child_process').execSync(`npx -y esbuild "${filePath}" --bundle --outfile="${bundledPath}" --format=esm --allow-overwrite`, { stdio: 'inherit' });
-                    content = fs.readFileSync(bundledPath, 'utf-8');
-                } catch (e) {
-                    console.warn(`Warning: bundling failed, falling back to original file. Error: ${e.message}`);
-                    content = fs.readFileSync(filePath, 'utf-8');
-                }
-            } else {
-                console.log(`Inlining JS: ${src}`);
-                content = fs.readFileSync(filePath, 'utf-8');
-            }
-            // Remove source maps reference if any to reduce size or avoid errors
-            const cleanedContent = content.replace(/\/\/# sourceMappingURL=.*\n?/g, '');
-            return `<script type="module">${cleanedContent}</script>`;
-        }
-        return match;
-    });
-
-    // SCRUB: Angular automatically injects `<link rel="modulepreload">` for dynamic chunks.
-    // Since we just forcibly bundled everything into main.js, these relative fetch requests will 
-    // throw noisy 404/CORS network errors inside the iframe if left in place.
-    indexHtml = indexHtml.replace(/<link rel="modulepreload"[^>]+>/g, '');
+  const files = fs.readdirSync(buildDir);
+  const jsFiles = files.filter(f => f.endsWith('.js'));
+  const cssFiles = files.filter(f => f.endsWith('.css'));
 
-    // Replace CSS links with style tags
-    indexHtml = indexHtml.replace(/<link[^>]*rel="stylesheet"[^>]*href="([^"]+)"[^>]*>/g, (match, href) => {
-        const filePath = path.join(buildDir, href);
-        if (fs.existsSync(filePath)) {
-             console.log(`Inlining CSS: ${href}`);
-             const content = fs.readFileSync(filePath, 'utf-8');
-             return `<style>${content}</style>`;
+  // Remove existing script tags that point to external files and replace with inlined content
+  indexHtml = indexHtml.replace(/<script[^>]*src="([^"]+)"[^>]*><\/script>/g, (match, src) => {
+    const filePath = path.join(buildDir, src);
+    if (fs.existsSync(filePath)) {
+      let content;
+      if (src === 'main.js') {
+        console.log(`Bundling and inlining JS: ${src}`);
+        const bundledPath = path.join(buildDir, 'main.bundled.js');
+        try {
+          // CRITICAL: Modern Angular 17+ builds use ES module code-splitting by default.
+          // While index.html only points to 'main.js', main.js relies on external relative chunks
+          // (like markdown renderer, zones, etc.) which browsers block when run inside a sandboxed
+          // 'srcdoc' iframe due to the lack of an accessible base origin.
+          //
+          // We use esbuild's explicit bundling feature here to automatically traverse all
+          // ES module imports and merge the split chunks into ONE COMPLETELY SELF-CONTAINED monolithic JS file
+          // before embedding it into the HTML body.
+          require('child_process').execSync(
+            `npx -y esbuild "${filePath}" --bundle --outfile="${bundledPath}" --format=esm --allow-overwrite`,
+            {stdio: 'inherit'},
+          );
+          content = fs.readFileSync(bundledPath, 'utf-8');
+        } catch (e) {
+          console.warn(
+            `Warning: bundling failed, falling back to original file. Error: ${e.message}`,
+          );
+          content = fs.readFileSync(filePath, 'utf-8');
         }
-        return match;
-    });
+      } else {
+        console.log(`Inlining JS: ${src}`);
+        content = fs.readFileSync(filePath, 'utf-8');
+      }
+      // Remove source maps reference if any to reduce size or avoid errors
+      const cleanedContent = content.replace(/\/\/# sourceMappingURL=.*\n?/g, '');
+      return `<script type="module">${cleanedContent}</script>`;
+    }
+    return match;
+  });
+
+  // SCRUB: Angular automatically injects `<link rel="modulepreload">` for dynamic chunks.
+  // Since we just forcibly bundled everything into main.js, these relative fetch requests will
+  // throw noisy 404/CORS network errors inside the iframe if left in place.
+  indexHtml = indexHtml.replace(/<link rel="modulepreload"[^>]+>/g, '');
 
-    fs.mkdirSync(outputDir, { recursive: true });
-    fs.writeFileSync(outputFile, indexHtml);
-    console.log(`Successfully inlined app to ${outputFile} (${fs.statSync(outputFile).size} bytes)`);
+  // Replace CSS links with style tags
+  indexHtml = indexHtml.replace(
+    /<link[^>]*rel="stylesheet"[^>]*href="([^"]+)"[^>]*>/g,
+    (match, href) => {
+      const filePath = path.join(buildDir, href);
+      if (fs.existsSync(filePath)) {
+        console.log(`Inlining CSS: ${href}`);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        return `<style>${content}</style>`;
+      }
+      return match;
+    },
+  );
 
+  fs.mkdirSync(outputDir, {recursive: true});
+  fs.writeFileSync(outputFile, indexHtml);
+  console.log(`Successfully inlined app to ${outputFile} (${fs.statSync(outputFile).size} bytes)`);
 } catch (err) {
-    console.error("Error during inlining:", err);
-    process.exit(1);
+  console.error('Error during inlining:', err);
+  process.exit(1);
 }
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/index.html b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/index.html
index fbc0e41ed..b5eebb19a 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/index.html
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2026 Google LLC
 
@@ -16,16 +16,23 @@
 -->
 
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MCP App (A2UI Renderer)</title>
     <style>
-        body { margin: 0; padding: 0; background: #f1f5f9; }
+      body {
+        margin: 0;
+        padding: 0;
+        background: #f1f5f9;
+      }
     </style>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-</head>
-<body>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
     <basic-mcp-app></basic-mcp-app>
-</body>
+  </body>
 </html>
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.css b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.css
index a06a3f528..959d988c7 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.css
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.css
@@ -14,66 +14,68 @@
  * limitations under the License.
  */
 
-:host { display: block; }
-.app-container { 
-  font-family: 'Outfit', sans-serif; 
-  padding: 24px; 
-  background: #ffffff; 
-  border-radius: 20px; 
-  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); 
+:host {
+  display: block;
+}
+.app-container {
+  font-family: 'Outfit', sans-serif;
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 20px;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
 }
-.header { 
-  display: flex; 
-  gap: 15px; 
-  align-items: center; 
-  margin-bottom: 24px; 
-  border-bottom: 1px solid #e2e8f0; 
-  padding-bottom: 16px; 
+.header {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  margin-bottom: 24px;
+  border-bottom: 1px solid #e2e8f0;
+  padding-bottom: 16px;
 }
-.header h2 { 
-  margin: 0; 
-  font-size: 1.25rem; 
-  color: #0f172a; 
+.header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #0f172a;
   font-weight: 600;
 }
-button { 
-  background: #0f172a; 
-  color: white; 
-  border: none; 
-  padding: 10px 18px; 
-  border-radius: 12px; 
-  cursor: pointer; 
-  font-weight: 500; 
-  transition: all 0.2s ease; 
+button {
+  background: #0f172a;
+  color: white;
+  border: none;
+  padding: 10px 18px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
-button:hover { 
-  background: #1e293b; 
+button:hover {
+  background: #1e293b;
   transform: translateY(-1px);
 }
-button:disabled { 
-  background: #94a3b8; 
-  color: #cbd5e1; 
-  cursor: not-allowed; 
+button:disabled {
+  background: #94a3b8;
+  color: #cbd5e1;
+  cursor: not-allowed;
   transform: none;
 }
-.status-badge { 
-  font-size: 0.85rem; 
-  color: #475569; 
-  background: #f1f5f9; 
-  padding: 6px 12px; 
-  border-radius: 20px; 
+.status-badge {
+  font-size: 0.85rem;
+  color: #475569;
+  background: #f1f5f9;
+  padding: 6px 12px;
+  border-radius: 20px;
   font-weight: 500;
 }
-.status-badge.loading { 
-  background: #fef08a; 
-  color: #854d0e; 
+.status-badge.loading {
+  background: #fef08a;
+  color: #854d0e;
 }
-.surface-area { 
-  border: 1px solid #e2e8f0; 
-  border-radius: 16px; 
-  padding: 20px; 
-  min-height: 300px; 
-  background: #f8fafc; 
+.surface-area {
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 20px;
+  min-height: 300px;
+  background: #f8fafc;
 }
 .surface-label {
   font-size: 0.75rem;
@@ -84,13 +86,13 @@ button:disabled {
   font-weight: 600;
   display: block;
 }
-.empty-state { 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-  height: 250px; 
-  color: #64748b; 
-  font-style: italic; 
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 250px;
+  color: #64748b;
+  font-style: italic;
 }
 .debug-section {
   margin-top: 20px;
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.html b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.html
index c2a94f55d..3395dcb9c 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.html
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.html
@@ -20,7 +20,7 @@ <h2>MCP App (Angular Renderer)</h2>
     <button (click)="fetchCounterA2UI()" [disabled]="isLoading()">Fetch Counter A2UI</button>
     <span class="status-badge" [class.loading]="isLoading()">Status: {{ status() }}</span>
   </div>
-  
+
   <div class="surface-area">
     <div class="surface-label">A2UI Rendering Surface</div>
     @if (surfaces().length === 0) {
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.ts b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.ts
index e60409b95..725deb8a5 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.ts
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/main.ts
@@ -14,12 +14,27 @@
  * limitations under the License.
  */
 
-import { Component, ChangeDetectionStrategy, signal, computed, inject, OnInit, AfterViewInit, ElementRef } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { provideZonelessChangeDetection } from '@angular/core';
-import { provideA2UI, MessageProcessor, Surface, DEFAULT_CATALOG, provideMarkdownRenderer } from '@a2ui/angular';
-import { renderMarkdown } from '@a2ui/markdown-it';
-import { theme } from './theme';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  signal,
+  computed,
+  inject,
+  OnInit,
+  AfterViewInit,
+  ElementRef,
+} from '@angular/core';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {provideZonelessChangeDetection} from '@angular/core';
+import {
+  provideA2UI,
+  MessageProcessor,
+  Surface,
+  DEFAULT_CATALOG,
+  provideMarkdownRenderer,
+} from '@a2ui/angular';
+import {renderMarkdown} from '@a2ui/markdown-it';
+import {theme} from './theme';
 
 const A2UI_MIME_TYPE = 'application/json+a2ui';
 
@@ -34,18 +49,18 @@ const A2UI_MIME_TYPE = 'application/json+a2ui';
 export class McpAppRoot implements OnInit, AfterViewInit {
   private processor = inject(MessageProcessor);
   private elementRef = inject(ElementRef);
-  
+
   protected status = signal('Idle');
   protected rawJson = signal<string>('');
   protected isLoading = signal(false);
-  
+
   protected surfaces = computed(() => {
     return Array.from(this.processor.getSurfaces().entries());
   });
 
   ngOnInit() {
-     this.initializeHandshake();
-     this.setupActionRouting();
+    this.initializeHandshake();
+    this.setupActionRouting();
   }
 
   ngAfterViewInit() {
@@ -57,118 +72,119 @@ export class McpAppRoot implements OnInit, AfterViewInit {
       const height = this.elementRef.nativeElement.scrollHeight;
       console.log('[MCP App] Height updated:', height);
       this.postToParent({
-        jsonrpc: "2.0",
-        method: "ui/resize",
-        params: { height }
+        jsonrpc: '2.0',
+        method: 'ui/resize',
+        params: {height},
       });
     });
     observer.observe(this.elementRef.nativeElement);
   }
 
   private initializeHandshake() {
-       this.postToParent({
-           jsonrpc: "2.0",
-           id: "init-1",
-           method: "ui/initialize",
-           params: {}
-       });
-       
-       window.addEventListener('message', (event) => {
-           if (event.data.id === 'init-1') {
-               this.status.set('Initialized');
-           }
-       });
+    this.postToParent({
+      jsonrpc: '2.0',
+      id: 'init-1',
+      method: 'ui/initialize',
+      params: {},
+    });
+
+    window.addEventListener('message', event => {
+      if (event.data.id === 'init-1') {
+        this.status.set('Initialized');
+      }
+    });
   }
 
   private setupActionRouting() {
-    this.processor.events.subscribe((event) => {
+    this.processor.events.subscribe(event => {
       if (!event.message.userAction) return;
       const requestId = 'action-' + Date.now();
       this.postToParent({
-        jsonrpc: "2.0",
+        jsonrpc: '2.0',
         id: requestId,
         method: `ui/${event.message.userAction.name}`,
-        params: event.message.userAction.context
+        params: event.message.userAction.context,
       });
 
       const handler = (msgEvent: MessageEvent) => {
-          if (msgEvent.data.id !== requestId) return;
-
-          window.removeEventListener('message', handler);
-          
-          const content = msgEvent.data.result;
-          if (!content || !Array.isArray(content)) return;
-
-          try {
-              const messages = this.getA2UIMessages(content);
-              if (!messages) return;
-              this.processor.processMessages(messages);
-          } catch (e: unknown) {
-              console.error('Failed to parse action response:', e);
-          }
+        if (msgEvent.data.id !== requestId) return;
+
+        window.removeEventListener('message', handler);
+
+        const content = msgEvent.data.result;
+        if (!content || !Array.isArray(content)) return;
+
+        try {
+          const messages = this.getA2UIMessages(content);
+          if (!messages) return;
+          this.processor.processMessages(messages);
+        } catch (e: unknown) {
+          console.error('Failed to parse action response:', e);
+        }
       };
       window.addEventListener('message', handler);
     });
   }
 
-
   fetchCounterA2UI() {
-      this.status.set('Calling fetch_counter_a2ui...');
-      this.isLoading.set(true);
-      
-      const requestId = 'ping-' + Date.now();
-      this.postToParent({
-          jsonrpc: "2.0",
-          id: requestId,
-          method: "ui/fetch_counter_a2ui",
-          params: {}
-      });
+    this.status.set('Calling fetch_counter_a2ui...');
+    this.isLoading.set(true);
+
+    const requestId = 'ping-' + Date.now();
+    this.postToParent({
+      jsonrpc: '2.0',
+      id: requestId,
+      method: 'ui/fetch_counter_a2ui',
+      params: {},
+    });
 
-      const handler = (event: MessageEvent) => {
-          if (event.data.id !== requestId) return;
-
-          this.isLoading.set(false);
-          window.removeEventListener('message', handler);
-          
-          if (event.data.error) {
-              this.status.set('Error: ' + event.data.error.message);
-              return;
-          }
-          
-          const content = event.data.result;
-          if (!Array.isArray(content)) return;
-
-          try {
-              const messages = this.getA2UIMessages(content);
-              if (!messages) {
-                  this.status.set('No A2UI payload found');
-                  return;
-              }
-              this.processor.clearSurfaces();
-              this.processor.processMessages(messages);
-              this.status.set('Rendered');
-          } catch (e: unknown) {
-              const errorMessage = e instanceof Error ? e.message : String(e);
-              this.status.set('Parse Error: ' + errorMessage);
-          }
-      };
-      window.addEventListener('message', handler);
+    const handler = (event: MessageEvent) => {
+      if (event.data.id !== requestId) return;
+
+      this.isLoading.set(false);
+      window.removeEventListener('message', handler);
+
+      if (event.data.error) {
+        this.status.set('Error: ' + event.data.error.message);
+        return;
+      }
+
+      const content = event.data.result;
+      if (!Array.isArray(content)) return;
+
+      try {
+        const messages = this.getA2UIMessages(content);
+        if (!messages) {
+          this.status.set('No A2UI payload found');
+          return;
+        }
+        this.processor.clearSurfaces();
+        this.processor.processMessages(messages);
+        this.status.set('Rendered');
+      } catch (e: unknown) {
+        const errorMessage = e instanceof Error ? e.message : String(e);
+        this.status.set('Parse Error: ' + errorMessage);
+      }
+    };
+    window.addEventListener('message', handler);
   }
 
   private getA2UIMessages(content: any[]): any[] | null {
-      const a2uiResource = content.find((c: any) => c.type === 'resource' && c.resource?.mimeType === A2UI_MIME_TYPE);
-      if (!a2uiResource || !a2uiResource.resource?.text) {
-          return null;
-      }
-      const text = a2uiResource.resource.text;
-      this.rawJson.set(text);
-      const messages = JSON.parse(text);
-      this.rawJson.set(JSON.stringify(messages, null, 2));
-      return messages;
+    const a2uiResource = content.find(
+      (c: any) => c.type === 'resource' && c.resource?.mimeType === A2UI_MIME_TYPE,
+    );
+    if (!a2uiResource || !a2uiResource.resource?.text) {
+      return null;
+    }
+    const text = a2uiResource.resource.text;
+    this.rawJson.set(text);
+    const messages = JSON.parse(text);
+    this.rawJson.set(JSON.stringify(messages, null, 2));
+    return messages;
   }
 
   private postToParent(msg: any) {
-      window.parent.postMessage(msg, 'http://localhost:4200');
+    window.parent.postMessage(msg, 'http://localhost:4200');
   }
 }
 
@@ -177,8 +193,8 @@ bootstrapApplication(McpAppRoot, {
     provideZonelessChangeDetection(),
     provideA2UI({
       catalog: DEFAULT_CATALOG,
-      theme: theme
+      theme: theme,
     }),
-    provideMarkdownRenderer(renderMarkdown)
-  ]
+    provideMarkdownRenderer(renderMarkdown),
+  ],
 }).catch(err => console.error(err));
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/theme.ts b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/theme.ts
index 3e3996db4..9f4cf678d 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/theme.ts
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/src/src/theme.ts
@@ -160,16 +160,16 @@ const video = {
   'layout-el-cv': true,
 };
 
-const aLight = Styles.merge(a, { 'color-c-p30': true });
-const inputLight = Styles.merge(input, { 'color-c-n5': true });
-const textareaLight = Styles.merge(textarea, { 'color-c-n5': true });
-const buttonLight = Styles.merge(button, { 'color-c-n100': true });
-const h1Light = Styles.merge(h1, { 'color-c-n5': true });
-const h2Light = Styles.merge(h2, { 'color-c-n5': true });
-const h3Light = Styles.merge(h3, { 'color-c-n5': true });
-const bodyLight = Styles.merge(body, { 'color-c-n5': true });
-const pLight = Styles.merge(p, { 'color-c-n60': true });
-const preLight = Styles.merge(pre, { 'color-c-n35': true });
+const aLight = Styles.merge(a, {'color-c-p30': true});
+const inputLight = Styles.merge(input, {'color-c-n5': true});
+const textareaLight = Styles.merge(textarea, {'color-c-n5': true});
+const buttonLight = Styles.merge(button, {'color-c-n100': true});
+const h1Light = Styles.merge(h1, {'color-c-n5': true});
+const h2Light = Styles.merge(h2, {'color-c-n5': true});
+const h3Light = Styles.merge(h3, {'color-c-n5': true});
+const bodyLight = Styles.merge(body, {'color-c-n5': true});
+const pLight = Styles.merge(p, {'color-c-n60': true});
+const preLight = Styles.merge(pre, {'color-c-n35': true});
 const orderedListLight = Styles.merge(orderedList, {
   'color-c-n35': true,
 });
@@ -185,7 +185,8 @@ export const theme: Types.Theme = {
     Card: {
       minWidth: '320px',
       borderRadius: '24px',
-      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%)',
+      background:
+        'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%)',
       backdropFilter: 'blur(20px)',
       border: '1px solid rgba(255, 255, 255, 0.4)',
       boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02)',
@@ -313,7 +314,7 @@ export const theme: Types.Theme = {
       'layout-p-2': true,
     },
     Modal: {
-      backdrop: { 'color-bbgc-p60_20': true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
         'border-br-2': true,
         'color-bgc-p100': true,
@@ -339,7 +340,7 @@ export const theme: Types.Theme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
@@ -478,5 +479,5 @@ export const theme: Types.Theme = {
     a: [...Object.keys(aLight)],
     strong: [],
     em: [],
-    },
+  },
 };
diff --git a/samples/mcp/a2ui-in-mcpapps/server/apps/src/tsconfig.app.json b/samples/mcp/a2ui-in-mcpapps/server/apps/src/tsconfig.app.json
index 92f2fa86e..0f6b1a88b 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/apps/src/tsconfig.app.json
+++ b/samples/mcp/a2ui-in-mcpapps/server/apps/src/tsconfig.app.json
@@ -15,12 +15,8 @@
     "outDir": "./out-tsc/app",
     "types": [],
     "paths": {
-      "@a2ui/angular": [
-        "../../../../../../renderers/angular/src/public-api.ts"
-      ],
-      "@angular/*": [
-        "./node_modules/@angular/*"
-      ]
+      "@a2ui/angular": ["../../../../../../renderers/angular/src/public-api.ts"],
+      "@angular/*": ["./node_modules/@angular/*"]
     }
   },
   "angularCompilerOptions": {
@@ -29,10 +25,6 @@
     "strictInputAccessModifiers": true,
     "strictTemplates": true
   },
-  "files": [
-    "src/main.ts"
-  ],
-  "include": [
-    "src/**/*.ts"
-  ]
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.ts"]
 }
diff --git a/samples/mcp/a2ui-in-mcpapps/server/simple_counter_a2ui.json b/samples/mcp/a2ui-in-mcpapps/server/simple_counter_a2ui.json
index f49e80862..b1499cb3a 100644
--- a/samples/mcp/a2ui-in-mcpapps/server/simple_counter_a2ui.json
+++ b/samples/mcp/a2ui-in-mcpapps/server/simple_counter_a2ui.json
@@ -28,10 +28,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "ping-text",
-                  "controls-row"
-                ]
+                "explicitList": ["ping-text", "controls-row"]
               }
             }
           }
@@ -52,10 +49,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "score-card",
-                  "ping-btn"
-                ]
+                "explicitList": ["score-card", "ping-btn"]
               },
               "alignment": "center"
             }
@@ -96,10 +90,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "score-label",
-                  "score-value"
-                ]
+                "explicitList": ["score-label", "score-value"]
               },
               "alignment": "center"
             }
diff --git a/samples/mcp/a2ui-over-mcp-recipe/recipe_a2ui.json b/samples/mcp/a2ui-over-mcp-recipe/recipe_a2ui.json
index 9c909af69..ae26ccb83 100644
--- a/samples/mcp/a2ui-over-mcp-recipe/recipe_a2ui.json
+++ b/samples/mcp/a2ui-over-mcp-recipe/recipe_a2ui.json
@@ -19,10 +19,7 @@
         {
           "id": "main-column",
           "component": "Column",
-          "children": [
-            "recipe-image",
-            "content"
-          ]
+          "children": ["recipe-image", "content"]
         },
         {
           "id": "recipe-image",
@@ -38,12 +35,7 @@
         {
           "id": "content",
           "component": "Column",
-          "children": [
-            "title",
-            "rating-row",
-            "times-row",
-            "servings"
-          ]
+          "children": ["title", "rating-row", "times-row", "servings"]
         },
         {
           "id": "title",
@@ -56,11 +48,7 @@
         {
           "id": "rating-row",
           "component": "Row",
-          "children": [
-            "star-icon",
-            "rating",
-            "review-count"
-          ],
+          "children": ["star-icon", "rating", "review-count"],
           "align": "center"
         },
         {
@@ -87,18 +75,12 @@
         {
           "id": "times-row",
           "component": "Row",
-          "children": [
-            "prep-time",
-            "cook-time"
-          ]
+          "children": ["prep-time", "cook-time"]
         },
         {
           "id": "prep-time",
           "component": "Row",
-          "children": [
-            "prep-icon",
-            "prep-text"
-          ],
+          "children": ["prep-icon", "prep-text"],
           "align": "center"
         },
         {
@@ -117,10 +99,7 @@
         {
           "id": "cook-time",
           "component": "Row",
-          "children": [
-            "cook-icon",
-            "cook-text"
-          ],
+          "children": ["cook-icon", "cook-text"],
           "align": "center"
         },
         {
diff --git a/samples/mcp/mcp-apps-calculator/README.md b/samples/mcp/mcp-apps-calculator/README.md
index aa1eb3efe..839c84293 100644
--- a/samples/mcp/mcp-apps-calculator/README.md
+++ b/samples/mcp/mcp-apps-calculator/README.md
@@ -7,13 +7,14 @@ A demo of an MCP server exposing a Calculator as an MCP Application Resource.
 The application UI is written in TypeScript and must be built before running the server.
 
 Run this in the `apps/src` directory:
+
 ```bash
 cd apps/src
 npm install
 npm run build
 ```
-This will bundle the TypeScript code and generate the self-contained `apps/public/calculator.html` file.
 
+This will bundle the TypeScript code and generate the self-contained `apps/public/calculator.html` file.
 
 ## Usage
 
diff --git a/samples/mcp/mcp-apps-calculator/apps/calculator.html b/samples/mcp/mcp-apps-calculator/apps/calculator.html
index aef3493bc..b73327f1d 100644
--- a/samples/mcp/mcp-apps-calculator/apps/calculator.html
+++ b/samples/mcp/mcp-apps-calculator/apps/calculator.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2025 Google LLC
 
@@ -14,299 +14,315 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
- 
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>MCP Calculator</title>
-<style>
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    background-color: #f0f0f0;
-  }
-  .calculator {
-    background: #fff;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-    width: 300px;
-  }
-  .display {
-    width: 100%;
-    height: 60px;
-    margin-bottom: 20px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    font-size: 2em;
-    text-align: right;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-x: auto;
-  }
-  .buttons {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 10px;
-  }
-  button {
-    padding: 15px;
-    font-size: 1.2em;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    background-color: #e0e0e0;
-    transition: background-color 0.2s;
-  }
-  button:hover {
-    background-color: #d0d0d0;
-  }
-  button.operator {
-    background-color: #ff9f0a;
-    color: white;
-  }
-  button.operator:hover {
-    background-color: #e08900;
-  }
-  button.equals {
-    background-color: #34c759;
-    color: white;
-  }
-  button.equals:hover {
-    background-color: #2da84e;
-  }
-  button.mcp-equals {
-    background-color: #5856d6;
-    color: white;
-  }
-  button.mcp-equals:hover {
-    background-color: #4342a1;
-  }
-  button.clear {
-    background-color: #ff3b30;
-    color: white;
-    grid-column: span 2;
-  }
-  button.clear:hover {
-    background-color: #d6332a;
-  }
-  button.zero {
-    grid-column: span 2;
-  }
-</style>
-</head>
-<body>
 
-<div class="calculator">
-  <div class="display" id="display">0</div>
-  <div class="buttons">
-    <button class="clear" onclick="clearDisplay()">AC</button>
-    <button class="operator" onclick="appendOperator('/')">÷</button>
-    <button class="operator" onclick="appendOperator('*')">×</button>
-    <button onclick="appendNumber('7')">7</button>
-    <button onclick="appendNumber('8')">8</button>
-    <button onclick="appendNumber('9')">9</button>
-    <button class="operator" onclick="appendOperator('-')">-</button>
-    <button onclick="appendNumber('4')">4</button>
-    <button onclick="appendNumber('5')">5</button>
-    <button onclick="appendNumber('6')">6</button>
-    <button class="operator" onclick="appendOperator('+')">+</button>
-    <button onclick="appendNumber('1')">1</button>
-    <button onclick="appendNumber('2')">2</button>
-    <button onclick="appendNumber('3')">3</button>
-    <button class="equals" title="Local JavaScript Calculation" onclick="calculateJavascript()">💻 =</button>
-    <button class="zero" onclick="appendNumber('0')">0</button>
-    <button onclick="appendPoint()">.</button>
-    <button class="mcp-equals" title="MCP Agent Calculation" onclick="calculateToolCall()">🤖 =</button>
-  </div>
-</div>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MCP Calculator</title>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #f0f0f0;
+      }
+      .calculator {
+        background: #fff;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        width: 300px;
+      }
+      .display {
+        width: 100%;
+        height: 60px;
+        margin-bottom: 20px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        font-size: 2em;
+        text-align: right;
+        padding: 10px;
+        box-sizing: border-box;
+        overflow-x: auto;
+      }
+      .buttons {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px;
+      }
+      button {
+        padding: 15px;
+        font-size: 1.2em;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        background-color: #e0e0e0;
+        transition: background-color 0.2s;
+      }
+      button:hover {
+        background-color: #d0d0d0;
+      }
+      button.operator {
+        background-color: #ff9f0a;
+        color: white;
+      }
+      button.operator:hover {
+        background-color: #e08900;
+      }
+      button.equals {
+        background-color: #34c759;
+        color: white;
+      }
+      button.equals:hover {
+        background-color: #2da84e;
+      }
+      button.mcp-equals {
+        background-color: #5856d6;
+        color: white;
+      }
+      button.mcp-equals:hover {
+        background-color: #4342a1;
+      }
+      button.clear {
+        background-color: #ff3b30;
+        color: white;
+        grid-column: span 2;
+      }
+      button.clear:hover {
+        background-color: #d6332a;
+      }
+      button.zero {
+        grid-column: span 2;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="calculator">
+      <div class="display" id="display">0</div>
+      <div class="buttons">
+        <button class="clear" onclick="clearDisplay()">AC</button>
+        <button class="operator" onclick="appendOperator('/')">÷</button>
+        <button class="operator" onclick="appendOperator('*')">×</button>
+        <button onclick="appendNumber('7')">7</button>
+        <button onclick="appendNumber('8')">8</button>
+        <button onclick="appendNumber('9')">9</button>
+        <button class="operator" onclick="appendOperator('-')">-</button>
+        <button onclick="appendNumber('4')">4</button>
+        <button onclick="appendNumber('5')">5</button>
+        <button onclick="appendNumber('6')">6</button>
+        <button class="operator" onclick="appendOperator('+')">+</button>
+        <button onclick="appendNumber('1')">1</button>
+        <button onclick="appendNumber('2')">2</button>
+        <button onclick="appendNumber('3')">3</button>
+        <button class="equals" title="Local JavaScript Calculation" onclick="calculateJavascript()">
+          💻 =
+        </button>
+        <button class="zero" onclick="appendNumber('0')">0</button>
+        <button onclick="appendPoint()">.</button>
+        <button class="mcp-equals" title="MCP Agent Calculation" onclick="calculateToolCall()">
+          🤖 =
+        </button>
+      </div>
+    </div>
 
-<script>
-  let currentInput = '';
-  let previousInput = '';
-  let operator = null;
-  const displayElement = document.getElementById('display');
+    <script>
+      let currentInput = '';
+      let previousInput = '';
+      let operator = null;
+      const displayElement = document.getElementById('display');
 
-  function updateDisplay() {
-    displayElement.textContent = currentInput || '0';
-  }
+      function updateDisplay() {
+        displayElement.textContent = currentInput || '0';
+      }
 
-  function appendNumber(number) {
-    if (currentInput === '0' && number !== '.') {
-      currentInput = number;
-    } else {
-      currentInput += number;
-    }
-    updateDisplay();
-  }
+      function appendNumber(number) {
+        if (currentInput === '0' && number !== '.') {
+          currentInput = number;
+        } else {
+          currentInput += number;
+        }
+        updateDisplay();
+      }
 
-  function appendPoint() {
-    if (!currentInput.includes('.')) {
-      currentInput += '.';
-      updateDisplay();
-    }
-  }
+      function appendPoint() {
+        if (!currentInput.includes('.')) {
+          currentInput += '.';
+          updateDisplay();
+        }
+      }
 
-  function appendOperator(op) {
-    if (currentInput === '') return;
-    if (previousInput !== '') {
-      calculateJavascript();
-    }
-    operator = op;
-    previousInput = currentInput;
-    currentInput = '';
-  }
+      function appendOperator(op) {
+        if (currentInput === '') return;
+        if (previousInput !== '') {
+          calculateJavascript();
+        }
+        operator = op;
+        previousInput = currentInput;
+        currentInput = '';
+      }
 
-  function clearDisplay() {
-    currentInput = '';
-    previousInput = '';
-    operator = null;
-    updateDisplay();
-  }
+      function clearDisplay() {
+        currentInput = '';
+        previousInput = '';
+        operator = null;
+        updateDisplay();
+      }
 
-  function calculateJavascript() {
-    if (previousInput === '' || currentInput === '') return;
-    let result;
-    const prevVal = parseFloat(previousInput);
-    const currentVal = parseFloat(currentInput);
-    if (isNaN(prevVal) || isNaN(currentVal)) return;
+      function calculateJavascript() {
+        if (previousInput === '' || currentInput === '') return;
+        let result;
+        const prevVal = parseFloat(previousInput);
+        const currentVal = parseFloat(currentInput);
+        if (isNaN(prevVal) || isNaN(currentVal)) return;
 
-    switch (operator) {
-      case '+':
-        result = prevVal + currentVal;
-        break;
-      case '-':
-        result = prevVal - currentVal;
-        break;
-      case '*':
-        result = prevVal * currentVal;
-        break;
-      case '/':
-        if (currentVal === 0) {
-          currentInput = 'Error';
-          operator = null;
-          previousInput = '';
-          updateDisplay();
-          return;
+        switch (operator) {
+          case '+':
+            result = prevVal + currentVal;
+            break;
+          case '-':
+            result = prevVal - currentVal;
+            break;
+          case '*':
+            result = prevVal * currentVal;
+            break;
+          case '/':
+            if (currentVal === 0) {
+              currentInput = 'Error';
+              operator = null;
+              previousInput = '';
+              updateDisplay();
+              return;
+            }
+            result = prevVal / currentVal;
+            break;
+          default:
+            return;
         }
-        result = prevVal / currentVal;
-        break;
-      default:
-        return;
-    }
-    currentInput = result.toString();
-    updateDisplay();
-    
-    // Log calculation to host
-    sendNotification('notifications/message', {
-      level: 'info',
-      data: `Calculated: ${prevVal} ${operator} ${currentVal} = ${result}`
-    });
+        currentInput = result.toString();
+        updateDisplay();
+
+        // Log calculation to host
+        sendNotification('notifications/message', {
+          level: 'info',
+          data: `Calculated: ${prevVal} ${operator} ${currentVal} = ${result}`,
+        });
+
+        operator = null;
+        previousInput = '';
+      }
 
-    operator = null;
-    previousInput = '';
-  }
+      function calculateToolCall() {
+        if (previousInput === '' || currentInput === '') return;
+        const prevVal = parseFloat(previousInput);
+        const currentVal = parseFloat(currentInput);
+        if (isNaN(prevVal) || isNaN(currentVal)) return;
 
-  function calculateToolCall() {
-    if (previousInput === '' || currentInput === '') return;
-    const prevVal = parseFloat(previousInput);
-    const currentVal = parseFloat(currentInput);
-    if (isNaN(prevVal) || isNaN(currentVal)) return;
+        let opName = '';
+        switch (operator) {
+          case '+':
+            opName = 'add';
+            break;
+          case '-':
+            opName = 'subtract';
+            break;
+          case '*':
+            opName = 'multiply';
+            break;
+          case '/':
+            opName = 'divide';
+            break;
+          default:
+            return;
+        }
 
-    let opName = '';
-    switch (operator) {
-      case '+': opName = 'add'; break;
-      case '-': opName = 'subtract'; break;
-      case '*': opName = 'multiply'; break;
-      case '/': opName = 'divide'; break;
-      default: return;
-    }
+        sendRequest('tools/call', {
+          name: 'calculate',
+          arguments: {
+            operation: opName,
+            a: prevVal,
+            b: currentVal,
+          },
+        })
+          .then(result => {
+            console.log('Tool call result:', result);
+          })
+          .catch(err => {
+            console.error('Tool call failed:', err);
+          });
 
-    sendRequest('tools/call', {
-      name: 'calculate',
-      arguments: {
-        operation: opName,
-        a: prevVal,
-        b: currentVal
+        // Reset state locally as per user requirement (UI can forget about it)
+        currentInput = '';
+        previousInput = '';
+        operator = null;
+        updateDisplay();
       }
-    }).then(result => {
-       console.log("Tool call result:", result);
-    }).catch(err => {
-       console.error("Tool call failed:", err);
-    });
 
-    // Reset state locally as per user requirement (UI can forget about it)
-    currentInput = '';
-    previousInput = '';
-    operator = null;
-    updateDisplay();
-  }
+      // MCP Communication
+      let nextId = 1;
+      const PARENT_ORIGIN = 'http://localhost:4200';
 
-  // MCP Communication
-  let nextId = 1;
-  const PARENT_ORIGIN = 'http://localhost:4200';
+      function sendRequest(method, params) {
+        const id = nextId++;
+        window.parent.postMessage({jsonrpc: '2.0', id, method, params}, PARENT_ORIGIN);
+        return new Promise((resolve, reject) => {
+          const listener = event => {
+            if (event.origin !== PARENT_ORIGIN) {
+              console.warn('Message from untrusted origin ignored:', event.origin);
+              return;
+            }
+            if (event.data?.id === id) {
+              window.removeEventListener('message', listener);
+              if (event.data?.result) {
+                resolve(event.data.result);
+              } else if (event.data?.error) {
+                reject(new Error(event.data.error.message || JSON.stringify(event.data.error)));
+              }
+            }
+          };
+          window.addEventListener('message', listener);
+        });
+      }
+
+      function sendNotification(method, params) {
+        window.parent.postMessage({jsonrpc: '2.0', method, params}, PARENT_ORIGIN);
+      }
 
-  function sendRequest(method, params) {
-    const id = nextId++;
-    window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, PARENT_ORIGIN);
-    return new Promise((resolve, reject) => {
-      const listener = (event) => {
+      window.addEventListener('message', event => {
         if (event.origin !== PARENT_ORIGIN) {
           console.warn('Message from untrusted origin ignored:', event.origin);
           return;
         }
-        if (event.data?.id === id) {
-          window.removeEventListener('message', listener);
-          if (event.data?.result) {
-            resolve(event.data.result);
-          } else if (event.data?.error) {
-            reject(new Error(event.data.error.message || JSON.stringify(event.data.error)));
+        const data = event.data;
+        if (data?.method === 'ping') {
+          // The host sends a 'ping' to check if the app is responsive (liveness check).
+          // Since this example does not use an MCP SDK, we must manually reply with an empty result
+          // to acknowledge the ping and keep the connection alive.
+          if (data.id) {
+            window.parent.postMessage({jsonrpc: '2.0', id: data.id, result: {}}, PARENT_ORIGIN);
           }
         }
-      };
-      window.addEventListener('message', listener);
-    });
-  }
+      });
 
-  function sendNotification(method, params) {
-    window.parent.postMessage({ jsonrpc: "2.0", method, params }, PARENT_ORIGIN);
-  }
-
-  window.addEventListener('message', (event) => {
-    if (event.origin !== PARENT_ORIGIN) {
-      console.warn('Message from untrusted origin ignored:', event.origin);
-      return;
-    }
-    const data = event.data;
-    if (data?.method === 'ping') {
-      // The host sends a 'ping' to check if the app is responsive (liveness check).
-      // Since this example does not use an MCP SDK, we must manually reply with an empty result
-      // to acknowledge the ping and keep the connection alive.
-      if (data.id) {
-         window.parent.postMessage({ jsonrpc: "2.0", id: data.id, result: {} }, PARENT_ORIGIN);
-      }
-    }
-  });
-
-  // Initialize
-  sendRequest("ui/initialize", {
-      appCapabilities: {
+      // Initialize
+      sendRequest('ui/initialize', {
+        appCapabilities: {
           experimental: {},
-          tools: { listChanged: false },
-          availableDisplayModes: ["inline"]
-      }
-  }).then((result) => {
-      console.log("Initialized with host:", result);
-      sendNotification("ui/notifications/initialized", {});
-  }).catch(err => {
-      console.error("Initialization failed:", err);
-  });
-
-</script>
-</body>
+          tools: {listChanged: false},
+          availableDisplayModes: ['inline'],
+        },
+      })
+        .then(result => {
+          console.log('Initialized with host:', result);
+          sendNotification('ui/notifications/initialized', {});
+        })
+        .catch(err => {
+          console.error('Initialization failed:', err);
+        });
+    </script>
+  </body>
 </html>
diff --git a/samples/mcp/mcp-apps-calculator/apps/src/calculator.html b/samples/mcp/mcp-apps-calculator/apps/src/calculator.html
index 7fac93761..95628ce7b 100644
--- a/samples/mcp/mcp-apps-calculator/apps/src/calculator.html
+++ b/samples/mcp/mcp-apps-calculator/apps/src/calculator.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2025 Google LLC
 
@@ -14,118 +14,122 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
- 
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>MCP Calculator</title>
-<style>
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    background-color: #f0f0f0;
-  }
-  .calculator {
-    background: #fff;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
-    width: 300px;
-  }
-  .display {
-    width: 100%;
-    height: 60px;
-    margin-bottom: 20px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    font-size: 2em;
-    text-align: right;
-    padding: 10px;
-    box-sizing: border-box;
-    overflow-x: auto;
-  }
-  .buttons {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 10px;
-  }
-  button {
-    padding: 15px;
-    font-size: 1.2em;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    background-color: #e0e0e0;
-    transition: background-color 0.2s;
-  }
-  button:hover {
-    background-color: #d0d0d0;
-  }
-  button.operator {
-    background-color: #ff9f0a;
-    color: white;
-  }
-  button.operator:hover {
-    background-color: #e08900;
-  }
-  button.equals {
-    background-color: #34c759;
-    color: white;
-  }
-  button.equals:hover {
-    background-color: #2da84e;
-  }
-  button.mcp-equals {
-    background-color: #5856d6;
-    color: white;
-  }
-  button.mcp-equals:hover {
-    background-color: #4342a1;
-  }
-  button.clear {
-    background-color: #ff3b30;
-    color: white;
-    grid-column: span 2;
-  }
-  button.clear:hover {
-    background-color: #d6332a;
-  }
-  button.zero {
-    grid-column: span 2;
-  }
-</style>
-</head>
-<body>
 
-<div class="calculator">
-  <div class="display" id="display">0</div>
-  <div class="buttons">
-    <button class="clear" onclick="clearDisplay()">AC</button>
-    <button class="operator" onclick="appendOperator('/')">÷</button>
-    <button class="operator" onclick="appendOperator('*')">×</button>
-    <button onclick="appendNumber('7')">7</button>
-    <button onclick="appendNumber('8')">8</button>
-    <button onclick="appendNumber('9')">9</button>
-    <button class="operator" onclick="appendOperator('-')">-</button>
-    <button onclick="appendNumber('4')">4</button>
-    <button onclick="appendNumber('5')">5</button>
-    <button onclick="appendNumber('6')">6</button>
-    <button class="operator" onclick="appendOperator('+')">+</button>
-    <button onclick="appendNumber('1')">1</button>
-    <button onclick="appendNumber('2')">2</button>
-    <button onclick="appendNumber('3')">3</button>
-    <button class="equals" title="Local JavaScript Calculation" onclick="calculateJavascript()">💻 =</button>
-    <button class="zero" onclick="appendNumber('0')">0</button>
-    <button onclick="appendPoint()">.</button>
-    <button class="mcp-equals" title="MCP Agent Calculation" onclick="calculateToolCall()">🤖 =</button>
-  </div>
-</div>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MCP Calculator</title>
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #f0f0f0;
+      }
+      .calculator {
+        background: #fff;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        width: 300px;
+      }
+      .display {
+        width: 100%;
+        height: 60px;
+        margin-bottom: 20px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        font-size: 2em;
+        text-align: right;
+        padding: 10px;
+        box-sizing: border-box;
+        overflow-x: auto;
+      }
+      .buttons {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px;
+      }
+      button {
+        padding: 15px;
+        font-size: 1.2em;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        background-color: #e0e0e0;
+        transition: background-color 0.2s;
+      }
+      button:hover {
+        background-color: #d0d0d0;
+      }
+      button.operator {
+        background-color: #ff9f0a;
+        color: white;
+      }
+      button.operator:hover {
+        background-color: #e08900;
+      }
+      button.equals {
+        background-color: #34c759;
+        color: white;
+      }
+      button.equals:hover {
+        background-color: #2da84e;
+      }
+      button.mcp-equals {
+        background-color: #5856d6;
+        color: white;
+      }
+      button.mcp-equals:hover {
+        background-color: #4342a1;
+      }
+      button.clear {
+        background-color: #ff3b30;
+        color: white;
+        grid-column: span 2;
+      }
+      button.clear:hover {
+        background-color: #d6332a;
+      }
+      button.zero {
+        grid-column: span 2;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="calculator">
+      <div class="display" id="display">0</div>
+      <div class="buttons">
+        <button class="clear" onclick="clearDisplay()">AC</button>
+        <button class="operator" onclick="appendOperator('/')">÷</button>
+        <button class="operator" onclick="appendOperator('*')">×</button>
+        <button onclick="appendNumber('7')">7</button>
+        <button onclick="appendNumber('8')">8</button>
+        <button onclick="appendNumber('9')">9</button>
+        <button class="operator" onclick="appendOperator('-')">-</button>
+        <button onclick="appendNumber('4')">4</button>
+        <button onclick="appendNumber('5')">5</button>
+        <button onclick="appendNumber('6')">6</button>
+        <button class="operator" onclick="appendOperator('+')">+</button>
+        <button onclick="appendNumber('1')">1</button>
+        <button onclick="appendNumber('2')">2</button>
+        <button onclick="appendNumber('3')">3</button>
+        <button class="equals" title="Local JavaScript Calculation" onclick="calculateJavascript()">
+          💻 =
+        </button>
+        <button class="zero" onclick="appendNumber('0')">0</button>
+        <button onclick="appendPoint()">.</button>
+        <button class="mcp-equals" title="MCP Agent Calculation" onclick="calculateToolCall()">
+          🤖 =
+        </button>
+      </div>
+    </div>
 
-<script type="module" src="./calculator.ts"></script>
-</body>
+    <script type="module" src="./calculator.ts"></script>
+  </body>
 </html>
diff --git a/samples/mcp/mcp-apps-calculator/apps/src/calculator.ts b/samples/mcp/mcp-apps-calculator/apps/src/calculator.ts
index 8a767b4e4..86a6f68df 100644
--- a/samples/mcp/mcp-apps-calculator/apps/src/calculator.ts
+++ b/samples/mcp/mcp-apps-calculator/apps/src/calculator.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { App } from "@modelcontextprotocol/ext-apps";
+import {App} from '@modelcontextprotocol/ext-apps';
 
 let currentInput = '';
 let previousInput = '';
 let operator: string | null = null;
 let displayElement: HTMLElement | null = null;
 
-const app = new App({ name: "MCP Calculator", version: "1.0.0" });
+const app = new App({name: 'MCP Calculator', version: '1.0.0'});
 
 function updateDisplay() {
   if (displayElement) {
@@ -94,11 +94,11 @@ function calculateJavascript() {
   }
   currentInput = result.toString();
   updateDisplay();
-  
+
   // Log calculation to host
   app.sendLog({
     level: 'info',
-    data: `Calculated: ${prevVal} ${operator} ${currentVal} = ${result}`
+    data: `Calculated: ${prevVal} ${operator} ${currentVal} = ${result}`,
   });
 
   operator = null;
@@ -113,26 +113,35 @@ async function calculateToolCall() {
 
   let opName = '';
   switch (operator) {
-    case '+': opName = 'add'; break;
-    case '-': opName = 'subtract'; break;
-    case '*': opName = 'multiply'; break;
-    case '/': opName = 'divide'; break;
-    default: return;
+    case '+':
+      opName = 'add';
+      break;
+    case '-':
+      opName = 'subtract';
+      break;
+    case '*':
+      opName = 'multiply';
+      break;
+    case '/':
+      opName = 'divide';
+      break;
+    default:
+      return;
   }
 
   try {
-    console.log("Calling tool calculate...");
+    console.log('Calling tool calculate...');
     const result = await app.callServerTool({
       name: 'calculate',
       arguments: {
         operation: opName,
         a: prevVal,
-        b: currentVal
-      }
+        b: currentVal,
+      },
     });
-    console.log("Tool call result:", result);
+    console.log('Tool call result:', result);
   } catch (err) {
-    console.error("Tool call failed:", err);
+    console.error('Tool call failed:', err);
   }
 
   // Reset state locally as per user requirement (UI can forget about it)
@@ -145,7 +154,7 @@ async function calculateToolCall() {
 function init() {
   displayElement = document.getElementById('display');
   updateDisplay();
-  
+
   // Attach to window for HTML onclick handlers
   (window as any).appendNumber = appendNumber;
   (window as any).appendPoint = appendPoint;
@@ -162,8 +171,11 @@ if (document.readyState === 'loading') {
 }
 
 // Connect to host
-app.connect().then(() => {
-  console.log("MCP App Connected");
-}).catch(err => {
-  console.error("Failed to connect to host:", err);
-});
+app
+  .connect()
+  .then(() => {
+    console.log('MCP App Connected');
+  })
+  .catch(err => {
+    console.error('Failed to connect to host:', err);
+  });
diff --git a/samples/mcp/mcp-apps-calculator/apps/src/vite.config.js b/samples/mcp/mcp-apps-calculator/apps/src/vite.config.js
index dd4269db5..3d39ec87f 100644
--- a/samples/mcp/mcp-apps-calculator/apps/src/vite.config.js
+++ b/samples/mcp/mcp-apps-calculator/apps/src/vite.config.js
@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
-import { defineConfig } from "vite";
-import { viteSingleFile } from "vite-plugin-singlefile";
-import path from "path";
+import {defineConfig} from 'vite';
+import {viteSingleFile} from 'vite-plugin-singlefile';
+import path from 'path';
 
 export default defineConfig({
   plugins: [viteSingleFile()],
   build: {
-    outDir: path.resolve(__dirname, "../public"),
+    outDir: path.resolve(__dirname, '../public'),
     emptyOutDir: true,
     rollupOptions: {
-      input: path.resolve(__dirname, "calculator.html"),
+      input: path.resolve(__dirname, 'calculator.html'),
     },
   },
 });
diff --git a/scripts/auto-assignment.mjs b/scripts/auto-assignment.mjs
index 8fd31029b..015777d1a 100644
--- a/scripts/auto-assignment.mjs
+++ b/scripts/auto-assignment.mjs
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export default async function autoAssign({ github, context }) {
+export default async function autoAssign({github, context}) {
   console.log('A2UI Issue Auto-assignment script started');
 
   let issueNumber;
@@ -59,4 +59,4 @@ export default async function autoAssign({ github, context }) {
   }
 
   console.log('A2UI Issue Auto-assignment script completed');
-}
\ No newline at end of file
+}
diff --git a/scripts/fix_format.sh b/scripts/fix_format.sh
new file mode 100755
index 000000000..c67b2aee7
--- /dev/null
+++ b/scripts/fix_format.sh
@@ -0,0 +1,55 @@
+#!/bin/bash
+# Copyright 2026 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+set -euo pipefail
+
+CHECK_ONLY=false
+if [[ "${1:-}" == "--check" ]]; then
+  CHECK_ONLY=true
+fi
+
+# Get repo root
+REPO_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+cd "$REPO_ROOT"
+
+echo "Running Prettier..."
+if [ "$CHECK_ONLY" = true ]; then
+  npx prettier --config .prettierrc --check .
+else
+  npx prettier --config .prettierrc --write .
+fi
+
+echo "Running Pyink for Python..."
+cd "$REPO_ROOT/agent_sdks/python"
+if [ "$CHECK_ONLY" = true ]; then
+  uv run pyink --check src tests
+else
+  uv run pyink src tests
+fi
+
+echo "Running Dart format..."
+cd "$REPO_ROOT"
+# Check if dart is available before running
+if command -v dart >/dev/null 2>&1; then
+  if [ "$CHECK_ONLY" = true ]; then
+    dart format --output=none --set-exit-if-changed .
+  else
+    dart format .
+  fi
+else
+  echo "Warning: dart command not found. Skipping Dart formatting."
+fi
+
+echo "Done."
diff --git a/specification/v0_10/docs/a2ui_custom_functions.md b/specification/v0_10/docs/a2ui_custom_functions.md
index e31806e8c..871230b44 100644
--- a/specification/v0_10/docs/a2ui_custom_functions.md
+++ b/specification/v0_10/docs/a2ui_custom_functions.md
@@ -22,7 +22,7 @@ Use the `functions` property to define a map of function schemas.
       "type": "object",
       "description": "Removes whitespace (or other characters) from the beginning and end of a string.",
       "properties": {
-        "call": { "const": "trim" },
+        "call": {"const": "trim"},
         "args": {
           "type": "object",
           "properties": {
@@ -38,7 +38,7 @@ Use the `functions` property to define a map of function schemas.
           "required": ["value"],
           "unevaluatedProperties": false
         },
-        "returnType": { "const": "string" }
+        "returnType": {"const": "string"}
       },
       "required": ["call", "args"],
       "unevaluatedProperties": false
@@ -47,7 +47,7 @@ Use the `functions` property to define a map of function schemas.
       "type": "object",
       "description": "Queries hardware for screen resolution.",
       "properties": {
-        "call": { "const": "getScreenResolution" },
+        "call": {"const": "getScreenResolution"},
         "args": {
           "type": "object",
           "properties": {
@@ -58,7 +58,7 @@ Use the `functions` property to define a map of function schemas.
           },
           "unevaluatedProperties": false
         },
-        "returnType": { "const": "array" }
+        "returnType": {"const": "array"}
       },
       "required": ["call", "args"],
       "unevaluatedProperties": false
@@ -71,14 +71,12 @@ Use the `functions` property to define a map of function schemas.
 
 The `FunctionCall` definition refers to a [catalog-agnostic reference](a2ui_protocol.md#the-basic-catalog).
 In your catalog, you simply need to define the `anyFunction` reference:
+
 ```json
 {
   "$defs": {
     "anyFunction": {
-      "oneOf": [
-        {"$ref": "#/functions/trim"},
-        {"$ref": "#/functions/getScreenResolution"}
-      ]
+      "oneOf": [{"$ref": "#/functions/trim"}, {"$ref": "#/functions/getScreenResolution"}]
     }
   }
 }
@@ -86,6 +84,7 @@ In your catalog, you simply need to define the `anyFunction` reference:
 
 If you want to incorporate functions defined in the [`basic_catalog.json`],
 those can be added too:
+
 ```json
 {
   "$defs": {
@@ -93,7 +92,7 @@ those can be added too:
       "oneOf": [
         {"$ref": "#/functions/trim"},
         {"$ref": "#/functions/getScreenResolution"},
-        {"$ref": "basic_catalog.json#/$defs/anyFunction" }
+        {"$ref": "basic_catalog.json#/$defs/anyFunction"}
       ]
     }
   }
@@ -107,11 +106,11 @@ When a `FunctionCall` is validated:
 1. **Discriminator Lookup:** The validator looks at the `call` property of the
    object.
 2. **Schema Matching:**
-    * If `call` is "length", it matches `Functions` -> `length`
-      and validates the named arguments in `args` against the length rules.
-    * If `call` is "trim", it matches `CustomFunctions` -> `trim` and
-      validates against your custom rules.
-    * If `call` is "unknownFunc", validation FAILS immediately (strict mode).
+   - If `call` is "length", it matches `Functions` -> `length`
+     and validates the named arguments in `args` against the length rules.
+   - If `call` is "trim", it matches `CustomFunctions` -> `trim` and
+     validates against your custom rules.
+   - If `call` is "unknownFunc", validation FAILS immediately (strict mode).
 
 This strict-by-default approach ensures typos are caught early, while the
 modular structure makes it easy to add new capabilities with full type safety.
diff --git a/specification/v0_10/docs/a2ui_extension_specification.md b/specification/v0_10/docs/a2ui_extension_specification.md
index 058badb83..46045f900 100644
--- a/specification/v0_10/docs/a2ui_extension_specification.md
+++ b/specification/v0_10/docs/a2ui_extension_specification.md
@@ -50,11 +50,14 @@ Example AgentExtension block:
 ```
 
 ### Parameter definitions
+
 The `params` object corresponds to the `v0.10` object in the `server_capabilities.json` schema:
+
 - `params.supportedCatalogIds`: (OPTIONAL) An array of strings, where each string is an ID identifying a Catalog Definition Schema that the agent can generate. This is not necessarily a resolvable URI.
 - `params.acceptsInlineCatalogs`: (OPTIONAL) A boolean indicating if the agent can accept an `inlineCatalogs` array in the client's `a2uiClientCapabilities`. If omitted, this defaults to `false`.
 
 ## Extension activation
+
 Clients indicate their desire to use the A2UI extension by specifying it via the transport-defined A2A extension activation mechanism.
 
 For JSON-RPC and HTTP transports, this is indicated via the X-A2A-Extensions HTTP header.
diff --git a/specification/v0_10/docs/a2ui_protocol.md b/specification/v0_10/docs/a2ui_protocol.md
index 7493175fd..cc4704457 100644
--- a/specification/v0_10/docs/a2ui_protocol.md
+++ b/specification/v0_10/docs/a2ui_protocol.md
@@ -285,16 +285,17 @@ This message is sent by the server to respond to a client-initiated `action` tha
 
 - `actionId` (string, required): The unique ID of the action call this response belongs to. MUST match the `actionId` sent by the client.
 - `actionResponse` (object, required): The payload containing the response.
-    - `value` (any): The return value of the action. Present on success.
-    - `error` (object): Error details if the action failed.
-        - `code` (string): Error code.
-        - `message` (string): Description of the error.
+  - `value` (any): The return value of the action. Present on success.
+  - `error` (object): Error details if the action failed.
+    - `code` (string): Error code.
+    - `message` (string): Description of the error.
 
 Exactly one of `value` or `error` must be present.
 
 **Example:**
 
 Client sends this to the server:
+
 ```json
 {
   "version": "v0.10",
@@ -312,6 +313,7 @@ Client sends this to the server:
 ```
 
 Server responds with:
+
 ```json
 {
   "version": "v0.10",
@@ -464,8 +466,8 @@ When a container component (such as `Column`, `Row`, or `List`) utilizes the **T
 {
   "company": "Acme Corp",
   "employees": [
-    { "name": "Alice", "role": "Engineer" },
-    { "name": "Bob", "role": "Designer" }
+    {"name": "Alice", "role": "Engineer"},
+    {"name": "Bob", "role": "Designer"}
   ]
 }
 ```
@@ -609,8 +611,8 @@ _Replace the entire data model:_
   "updateDataModel": {
     "surfaceId": "surface_123",
     "value": {
-      "user": { "firstName": "Alice", "lastName": "Smith" },
-      "preferences": { "theme": "dark" }
+      "user": {"firstName": "Alice", "lastName": "Smith"},
+      "preferences": {"theme": "dark"}
     }
   }
 }
@@ -669,7 +671,7 @@ Buttons can also define `checks`. If any check fails, the button is automaticall
           "values": [
             {
               "call": "required",
-              "args": { "value": { "path": "/formData/terms" } }
+              "args": {"value": {"path": "/formData/terms"}}
             },
             {
               "call": "or",
@@ -677,11 +679,11 @@ Buttons can also define `checks`. If any check fails, the button is automaticall
                 "values": [
                   {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/email" } }
+                    "args": {"value": {"path": "/formData/email"}}
                   },
                   {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/phone" } }
+                    "args": {"value": {"path": "/formData/phone"}}
                   }
                 ]
               }
diff --git a/specification/v0_10/docs/evolution_guide.md b/specification/v0_10/docs/evolution_guide.md
index f30fb1928..fe9a49bf8 100644
--- a/specification/v0_10/docs/evolution_guide.md
+++ b/specification/v0_10/docs/evolution_guide.md
@@ -54,4 +54,4 @@ Version 0.10 differs from 0.9 in the following ways:
 
 ## 3. Migration Guide
 
-- <TBD>
\ No newline at end of file
+- <TBD>
diff --git a/specification/v0_10/eval/README.md b/specification/v0_10/eval/README.md
index 359d43e06..d7a18b7fd 100644
--- a/specification/v0_10/eval/README.md
+++ b/specification/v0_10/eval/README.md
@@ -70,11 +70,13 @@ By default, the script prints a progress bar and the final summary table to the
 ### Examples
 
 Run with debug output in console:
+
 ```bash
 pnpm run eval -- --log-level=debug
 ```
 
 Run 5 times per prompt and clean previous results:
+
 ```bash
 pnpm run eval -- --runs-per-prompt=5 --clean-results
 ```
@@ -82,5 +84,6 @@ pnpm run eval -- --runs-per-prompt=5 --clean-results
 ## Rate Limiting
 
 The framework includes a two-tiered rate limiting system:
+
 1. **Proactive Limiting**: Locally tracks token and request usage to stay within configured limits (defined in `src/models.ts`).
 2. **Reactive Circuit Breaker**: Automatically pauses requests to a model if a `RESOURCE_EXHAUSTED` (429) error is received, resuming only after the requested retry duration.
diff --git a/specification/v0_10/eval/genkit.conf.js b/specification/v0_10/eval/genkit.conf.js
index eb9235559..c269a586f 100644
--- a/specification/v0_10/eval/genkit.conf.js
+++ b/specification/v0_10/eval/genkit.conf.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { configure } from "genkit";
+import {googleAI} from '@genkit-ai/google-genai';
+import {configure} from 'genkit';
 
 export default configure({
   plugins: [googleAI()],
-  logLevel: "debug",
+  logLevel: 'debug',
   enableTracingAndMetrics: true,
 });
diff --git a/specification/v0_10/eval/package.json b/specification/v0_10/eval/package.json
index 02442b603..a242b2377 100644
--- a/specification/v0_10/eval/package.json
+++ b/specification/v0_10/eval/package.json
@@ -44,4 +44,4 @@
     "winston": "^3.19.0",
     "zod": "^3.25.76"
   }
-}
\ No newline at end of file
+}
diff --git a/specification/v0_10/eval/pnpm-workspace.yaml b/specification/v0_10/eval/pnpm-workspace.yaml
index 719ee0b40..02052098a 100644
--- a/specification/v0_10/eval/pnpm-workspace.yaml
+++ b/specification/v0_10/eval/pnpm-workspace.yaml
@@ -13,6 +13,6 @@
 # limitations under the License.
 
 onlyBuiltDependencies:
-  - '@firebase/util'
+  - "@firebase/util"
   - esbuild
   - protobufjs
diff --git a/specification/v0_10/eval/src/ai.ts b/specification/v0_10/eval/src/ai.ts
index b343ad037..5e413dca9 100644
--- a/specification/v0_10/eval/src/ai.ts
+++ b/specification/v0_10/eval/src/ai.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright 2025 Google LLC
  *
@@ -15,16 +14,16 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { genkit } from "genkit";
-import { openAI } from "@genkit-ai/compat-oai/openai";
-import { anthropic } from "genkitx-anthropic";
-import { logger } from "./logger";
+import {googleAI} from '@genkit-ai/google-genai';
+import {genkit} from 'genkit';
+import {openAI} from '@genkit-ai/compat-oai/openai';
+import {anthropic} from 'genkitx-anthropic';
+import {logger} from './logger';
 
 const plugins = [];
 
 if (process.env.GEMINI_API_KEY) {
-  logger.info("Initializing Google AI plugin...");
+  logger.info('Initializing Google AI plugin...');
   plugins.push(
     googleAI({
       apiKey: process.env.GEMINI_API_KEY!,
@@ -33,12 +32,12 @@ if (process.env.GEMINI_API_KEY) {
   );
 }
 if (process.env.OPENAI_API_KEY) {
-  logger.info("Initializing OpenAI plugin...");
+  logger.info('Initializing OpenAI plugin...');
   plugins.push(openAI());
 }
 if (process.env.ANTHROPIC_API_KEY) {
-  logger.info("Initializing Anthropic plugin...");
-  plugins.push(anthropic({ apiKey: process.env.ANTHROPIC_API_KEY! }));
+  logger.info('Initializing Anthropic plugin...');
+  plugins.push(anthropic({apiKey: process.env.ANTHROPIC_API_KEY!}));
 }
 
 export const ai = genkit({
diff --git a/specification/v0_10/eval/src/analysis_flow.ts b/specification/v0_10/eval/src/analysis_flow.ts
index 53de0e8d4..214b6dadb 100644
--- a/specification/v0_10/eval/src/analysis_flow.ts
+++ b/specification/v0_10/eval/src/analysis_flow.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { z } from "genkit";
-import { ai } from "./ai";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
+import {z} from 'genkit';
+import {ai} from './ai';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
 
 export const analysisFlow = ai.defineFlow(
   {
-    name: "analysisFlow",
+    name: 'analysisFlow',
     inputSchema: z.object({
       modelName: z.string(),
       failures: z.array(
@@ -38,21 +38,21 @@ export const analysisFlow = ai.defineFlow(
     }),
     outputSchema: z.string(),
   },
-  async ({ modelName, failures, numRuns, evalModel }) => {
+  async ({modelName, failures, numRuns, evalModel}) => {
     const failureDetails = failures
-      .map((f) => {
+      .map(f => {
         let details = `Prompt: ${f.promptName} (Run ${f.runNumber})\nType: ${f.failureType}\nReason: ${f.reason}`;
         if (f.issues && f.issues.length > 0) {
-          details += `\nIssues:\n- ${f.issues.join("\n- ")}`;
+          details += `\nIssues:\n- ${f.issues.join('\n- ')}`;
         }
         return details;
       })
-      .join("\n\n---\n\n");
+      .join('\n\n---\n\n');
 
     const analysisPrompt = `You are an expert AI analyst.
 Your task is to analyze the following failures from an evaluation run of the model "${modelName}".
 
-Out of the ${failures.length} failures, ${failures.filter((f) => f.failureType === "Schema Validation").length} are schema validation failures, ${failures.filter((f) => f.failureType === "Missing Components").length} are missing components failures, and ${failures.filter((f) => f.failureType === "Incorrect Logic").length} are incorrect logic failures.
+Out of the ${failures.length} failures, ${failures.filter(f => f.failureType === 'Schema Validation').length} are schema validation failures, ${failures.filter(f => f.failureType === 'Missing Components').length} are missing components failures, and ${failures.filter(f => f.failureType === 'Incorrect Logic').length} are incorrect logic failures.
 
 There were ${numRuns - failures.length} successful runs. Take this into account in the final summary of the analysis.
 
@@ -73,8 +73,8 @@ Return a Markdown formatted summary. Use headers and bullet points.
     // Calculate estimated tokens for rate limiting
     const estimatedInputTokens = Math.ceil(analysisPrompt.length / 2.5);
 
-    const { modelsToTest } = await import("./models");
-    let evalModelConfig = modelsToTest.find((m) => m.name === evalModel);
+    const {modelsToTest} = await import('./models');
+    let evalModelConfig = modelsToTest.find(m => m.name === evalModel);
 
     if (!evalModelConfig) {
       evalModelConfig = {
@@ -93,17 +93,17 @@ Return a Markdown formatted summary. Use headers and bullet points.
         model: evalModelConfig.model || evalModel,
         config: evalModelConfig.config,
         output: {
-          format: "text",
+          format: 'text',
         },
       });
 
       const output = response.output;
       if (!output) {
-        throw new Error("No output from analysis model");
+        throw new Error('No output from analysis model');
       }
 
-      if (typeof output !== "string") {
-        return "Analysis failed: Output was not a string.";
+      if (typeof output !== 'string') {
+        return 'Analysis failed: Output was not a string.';
       }
 
       return output;
diff --git a/specification/v0_10/eval/src/dev.ts b/specification/v0_10/eval/src/dev.ts
index f13d6d696..dd819602a 100644
--- a/specification/v0_10/eval/src/dev.ts
+++ b/specification/v0_10/eval/src/dev.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-import "./generation_flow";
-import "./evaluation_flow";
+import './generation_flow';
+import './evaluation_flow';
diff --git a/specification/v0_10/eval/src/evaluation_flow.ts b/specification/v0_10/eval/src/evaluation_flow.ts
index c67294d0b..da72c53d7 100644
--- a/specification/v0_10/eval/src/evaluation_flow.ts
+++ b/specification/v0_10/eval/src/evaluation_flow.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { z } from "genkit";
-import { ai } from "./ai";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
-import * as yaml from "js-yaml";
+import {z} from 'genkit';
+import {ai} from './ai';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
+import * as yaml from 'js-yaml';
 
 // Define an evaluation flow
 export const evaluationFlow = ai.defineFlow(
   {
-    name: "evaluationFlow",
+    name: 'evaluationFlow',
     inputSchema: z.object({
       originalPrompt: z.string(),
       generatedOutput: z.string(),
@@ -37,33 +37,31 @@ export const evaluationFlow = ai.defineFlow(
         .array(
           z.object({
             issue: z.string(),
-            severity: z.enum(["minor", "significant", "critical"]),
+            severity: z.enum(['minor', 'significant', 'critical']),
           }),
         )
         .optional(),
       evalPrompt: z.string().optional(),
     }),
   },
-  async ({ originalPrompt, generatedOutput, evalModel, schemas }) => {
+  async ({originalPrompt, generatedOutput, evalModel, schemas}) => {
     const schemaDefs = Object.values(schemas)
       .map((s: any) => JSON.stringify(s, null, 2))
-      .join("\n\n");
+      .join('\n\n');
 
     const EvalResultSchema = z.object({
-      pass: z
-        .boolean()
-        .describe("Whether the generated UI meets the requirements"),
-      reason: z.string().describe("Summary of the reason for a failure."),
+      pass: z.boolean().describe('Whether the generated UI meets the requirements'),
+      reason: z.string().describe('Summary of the reason for a failure.'),
       issues: z
         .array(
           z.object({
-            issue: z.string().describe("Description of the issue"),
+            issue: z.string().describe('Description of the issue'),
             severity: z
-              .enum(["minor", "significant", "critical"])
-              .describe("Severity of the issue"),
+              .enum(['minor', 'significant', 'critical'])
+              .describe('Severity of the issue'),
           }),
         )
-        .describe("List of specific issues found."),
+        .describe('List of specific issues found.'),
     });
 
     const evalPrompt = `You are an expert QA evaluator for a UI generation system.
@@ -143,8 +141,8 @@ Return a JSON object with the following schema:
     const estimatedInputTokens = Math.ceil(evalPrompt.length / 2.5);
 
     // Lookup eval model config to enforce rate limits, or generate a safe default fallback.
-    const { modelsToTest } = await import("./models");
-    let evalModelConfig = modelsToTest.find((m) => m.name === evalModel);
+    const {modelsToTest} = await import('./models');
+    let evalModelConfig = modelsToTest.find(m => m.name === evalModel);
 
     if (!evalModelConfig) {
       evalModelConfig = {
@@ -170,12 +168,12 @@ Return a JSON object with the following schema:
       // Parse the output
       const result = response.output;
       if (!result) {
-        throw new Error("No output from evaluation model");
+        throw new Error('No output from evaluation model');
       }
 
       return {
         pass: result.pass,
-        reason: result.reason || "No reason provided",
+        reason: result.reason || 'No reason provided',
         issues: result.issues || [],
         evalPrompt: evalPrompt,
       };
diff --git a/specification/v0_10/eval/src/evaluator.ts b/specification/v0_10/eval/src/evaluator.ts
index 3f052e9c5..63ac5d470 100644
--- a/specification/v0_10/eval/src/evaluator.ts
+++ b/specification/v0_10/eval/src/evaluator.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { evaluationFlow } from "./evaluation_flow";
-import { ValidatedResult, EvaluatedResult } from "./types";
-import { logger } from "./logger";
-import { rateLimiter } from "./rateLimiter";
-import * as fs from "fs";
-import * as path from "path";
-import * as yaml from "js-yaml";
-import { IssueSeverity } from "./types";
+import {evaluationFlow} from './evaluation_flow';
+import {ValidatedResult, EvaluatedResult} from './types';
+import {logger} from './logger';
+import {rateLimiter} from './rateLimiter';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as yaml from 'js-yaml';
+import {IssueSeverity} from './types';
 
 export class Evaluator {
   constructor(
@@ -31,9 +31,7 @@ export class Evaluator {
   ) {}
 
   async run(results: ValidatedResult[]): Promise<EvaluatedResult[]> {
-    const passedResults = results.filter(
-      (r) => r.validationErrors.length === 0 && r.components,
-    );
+    const passedResults = results.filter(r => r.validationErrors.length === 0 && r.components);
     const skippedCount = results.length - passedResults.length;
 
     logger.info(
@@ -52,40 +50,37 @@ export class Evaluator {
           ...result,
           evaluationResult: {
             pass: false,
-            reason: "Schema validation failure",
+            reason: 'Schema validation failure',
             issues: [
               {
-                issue: result.validationErrors.join("\n"),
-                severity: "criticalSchema",
+                issue: result.validationErrors.join('\n'),
+                severity: 'criticalSchema',
               },
             ],
-            overallSeverity: "criticalSchema",
+            overallSeverity: 'criticalSchema',
           },
         });
       } else if (!result.components) {
-        evaluatedResults.push({ ...result });
+        evaluatedResults.push({...result});
       }
     }
 
     if (totalJobs === 0) {
-      logger.info("Phase 3: Evaluation Complete (No items to evaluate)");
+      logger.info('Phase 3: Evaluation Complete (No items to evaluate)');
       return evaluatedResults;
     }
 
     const progressInterval = setInterval(() => {
       const queuedCount = rateLimiter.waitingCount;
-      const inProgressCount =
-        totalJobs - completedCount - failedCount - queuedCount;
-      const pct = Math.round(
-        ((completedCount + failedCount) / totalJobs) * 100,
-      );
+      const inProgressCount = totalJobs - completedCount - failedCount - queuedCount;
+      const pct = Math.round(((completedCount + failedCount) / totalJobs) * 100);
       process.stderr.write(
         `\r[Phase 3] Progress: ${pct}% | Completed: ${completedCount} | In Progress: ${inProgressCount} | Queued: ${queuedCount} | Failed: ${failedCount}          `,
       );
     }, 1000);
 
-    const promises = passedResults.map((result) =>
-      this.runJob(result).then((evalResult) => {
+    const promises = passedResults.map(result =>
+      this.runJob(result).then(evalResult => {
         if (evalResult.evaluationResult) {
           completedCount++;
         } else {
@@ -98,8 +93,8 @@ export class Evaluator {
 
     await Promise.all(promises);
     clearInterval(progressInterval);
-    process.stderr.write("\n");
-    logger.info("Phase 3: Evaluation Complete");
+    process.stderr.write('\n');
+    logger.info('Phase 3: Evaluation Complete');
 
     return evaluatedResults;
   }
@@ -110,7 +105,7 @@ export class Evaluator {
       | {
           pass: boolean;
           reason: string;
-          issues?: { issue: string; severity: IssueSeverity }[];
+          issues?: {issue: string; severity: IssueSeverity}[];
         }
       | undefined;
 
@@ -118,7 +113,7 @@ export class Evaluator {
       try {
         evaluationResult = await evaluationFlow({
           originalPrompt: result.prompt.promptText,
-          generatedOutput: result.rawText || "",
+          generatedOutput: result.rawText || '',
           evalModel: this.evalModel,
           schemas: this.schemas,
         });
@@ -133,22 +128,20 @@ export class Evaluator {
             reason: `Evaluation flow failed: ${e.message}`,
           };
         } else {
-          await new Promise((resolve) =>
-            setTimeout(resolve, 1000 * Math.pow(2, evalRetry)),
-          );
+          await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, evalRetry)));
         }
       }
     }
 
     let overallSeverity: IssueSeverity | undefined;
     if (evaluationResult && !evaluationResult.pass && evaluationResult.issues) {
-      const severities = evaluationResult.issues.map((i) => i.severity);
-      if (severities.includes("critical")) {
-        overallSeverity = "critical";
-      } else if (severities.includes("significant")) {
-        overallSeverity = "significant";
-      } else if (severities.includes("minor")) {
-        overallSeverity = "minor";
+      const severities = evaluationResult.issues.map(i => i.severity);
+      if (severities.includes('critical')) {
+        overallSeverity = 'critical';
+      } else if (severities.includes('significant')) {
+        overallSeverity = 'significant';
+      } else if (severities.includes('minor')) {
+        overallSeverity = 'minor';
       }
     }
 
@@ -158,9 +151,7 @@ export class Evaluator {
 
     return {
       ...result,
-      evaluationResult: evaluationResult
-        ? { ...evaluationResult, overallSeverity }
-        : undefined,
+      evaluationResult: evaluationResult ? {...evaluationResult, overallSeverity} : undefined,
     };
   }
 
@@ -169,7 +160,7 @@ export class Evaluator {
     evaluationResult: {
       pass: boolean;
       reason: string;
-      issues?: { issue: string; severity: IssueSeverity }[];
+      issues?: {issue: string; severity: IssueSeverity}[];
       evalPrompt?: string;
     },
     overallSeverity?: IssueSeverity,
@@ -179,25 +170,16 @@ export class Evaluator {
     // Only save if the evaluation failed
     if (evaluationResult.pass) return;
 
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${result.modelName.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
+    const modelDir = path.join(this.outputDir, `output-${result.modelName.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
     fs.writeFileSync(
-      path.join(
-        detailsDir,
-        `${result.prompt.name}.${result.runNumber}.failed.yaml`,
-      ),
-      yaml.dump({ ...evaluationResult, overallSeverity }),
+      path.join(detailsDir, `${result.prompt.name}.${result.runNumber}.failed.yaml`),
+      yaml.dump({...evaluationResult, overallSeverity}),
     );
 
     if (evaluationResult.evalPrompt) {
       fs.writeFileSync(
-        path.join(
-          detailsDir,
-          `${result.prompt.name}.${result.runNumber}.eval_prompt.txt`,
-        ),
+        path.join(detailsDir, `${result.prompt.name}.${result.runNumber}.eval_prompt.txt`),
         evaluationResult.evalPrompt,
       );
     }
diff --git a/specification/v0_10/eval/src/generation_flow.ts b/specification/v0_10/eval/src/generation_flow.ts
index 8c36817b0..a9999eb1e 100644
--- a/specification/v0_10/eval/src/generation_flow.ts
+++ b/specification/v0_10/eval/src/generation_flow.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { z } from "genkit";
-import { ai } from "./ai";
-import { ModelConfiguration } from "./models";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
+import {z} from 'genkit';
+import {ai} from './ai';
+import {ModelConfiguration} from './models';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
 
 // Define a UI component generator flow
 export const componentGeneratorFlow = ai.defineFlow(
   {
-    name: "componentGeneratorFlow",
+    name: 'componentGeneratorFlow',
     inputSchema: z.object({
       prompt: z.string(),
       modelConfig: z.any(), // Ideally, we'd have a Zod schema for ModelConfiguration
@@ -32,10 +32,10 @@ export const componentGeneratorFlow = ai.defineFlow(
     }),
     outputSchema: z.any(),
   },
-  async ({ prompt, modelConfig, schemas, catalogRules }) => {
+  async ({prompt, modelConfig, schemas, catalogRules}) => {
     const schemaDefs = Object.values(schemas)
       .map((s: any) => JSON.stringify(s, null, 2))
-      .join("\n\n");
+      .join('\n\n');
 
     const fullPrompt = `You are an AI assistant. Based on the following request, generate a stream of JSON messages that conform to the provided JSON Schemas.
 The output MUST be a series of JSON objects, each enclosed in a markdown code block (or a single block with multiple objects).
@@ -57,7 +57,7 @@ Standard Instructions:
 14. Do NOT invent properties that are not in the schema. Check the 'properties' list for each component type.
 15. Use 'checks' property for validation rules if required.
 16. EVERY message object MUST include the property "version": "v0.10" at the top level.
-${catalogRules ? `\nInstructions specific to this catalog:\n${catalogRules}` : ""}
+${catalogRules ? `\nInstructions specific to this catalog:\n${catalogRules}` : ''}
 
 Schemas:
 ${schemaDefs}
@@ -66,10 +66,7 @@ Request:
 ${prompt}
 `;
     const estimatedInputTokens = Math.ceil(fullPrompt.length / 2.5);
-    await rateLimiter.acquirePermit(
-      modelConfig as ModelConfiguration,
-      estimatedInputTokens,
-    );
+    await rateLimiter.acquirePermit(modelConfig as ModelConfiguration, estimatedInputTokens);
 
     // Generate text response
     let response;
@@ -87,7 +84,7 @@ ${prompt}
     }
     const latency = Date.now() - startTime;
 
-    if (!response) throw new Error("Failed to generate component");
+    if (!response) throw new Error('Failed to generate component');
 
     let candidate = (response as any).candidates?.[0];
 
@@ -97,7 +94,7 @@ ${prompt}
       candidate = {
         index: 0,
         content: message.content,
-        finishReason: "STOP", // Assume STOP if not provided in this format
+        finishReason: 'STOP', // Assume STOP if not provided in this format
         message: message,
       };
     }
@@ -106,13 +103,10 @@ ${prompt}
       logger.error(
         `No candidates returned in response. Full response: ${JSON.stringify(response, null, 2)}`,
       );
-      throw new Error("No candidates returned");
+      throw new Error('No candidates returned');
     }
 
-    if (
-      candidate.finishReason !== "STOP" &&
-      candidate.finishReason !== undefined
-    ) {
+    if (candidate.finishReason !== 'STOP' && candidate.finishReason !== undefined) {
       logger.warn(
         `Model finished with reason: ${candidate.finishReason}. Content: ${JSON.stringify(
           candidate.content,
@@ -124,20 +118,13 @@ ${prompt}
     const inputTokens = response.usage?.inputTokens || 0;
     const outputTokens = response.usage?.outputTokens || 0;
 
-    const additionalInputTokens = Math.max(
-      0,
-      inputTokens - estimatedInputTokens,
-    );
+    const additionalInputTokens = Math.max(0, inputTokens - estimatedInputTokens);
     const tokensToAdd = additionalInputTokens + outputTokens;
 
     if (tokensToAdd > 0) {
-      rateLimiter.recordUsage(
-        modelConfig as ModelConfiguration,
-        tokensToAdd,
-        false,
-      );
+      rateLimiter.recordUsage(modelConfig as ModelConfiguration, tokensToAdd, false);
     }
 
-    return { text: response.text, latency };
+    return {text: response.text, latency};
   },
 );
diff --git a/specification/v0_10/eval/src/generator.ts b/specification/v0_10/eval/src/generator.ts
index af5e0a341..6d59a316b 100644
--- a/specification/v0_10/eval/src/generator.ts
+++ b/specification/v0_10/eval/src/generator.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { componentGeneratorFlow } from "./generation_flow";
-import { ModelConfiguration } from "./models";
-import { TestPrompt } from "./prompts";
-import { GeneratedResult } from "./types";
-import { extractJsonFromMarkdown } from "./utils";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
-import * as fs from "fs";
-import * as path from "path";
+import {componentGeneratorFlow} from './generation_flow';
+import {ModelConfiguration} from './models';
+import {TestPrompt} from './prompts';
+import {GeneratedResult} from './types';
+import {extractJsonFromMarkdown} from './utils';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
+import * as fs from 'fs';
+import * as path from 'path';
 
 export class Generator {
   constructor(
@@ -46,12 +46,9 @@ export class Generator {
 
     const progressInterval = setInterval(() => {
       const queuedCount = rateLimiter.waitingCount;
-      const inProgressCount =
-        totalJobs - completedCount - failedCount - queuedCount;
+      const inProgressCount = totalJobs - completedCount - failedCount - queuedCount;
       const pct =
-        totalJobs > 0
-          ? Math.round(((completedCount + failedCount) / totalJobs) * 100)
-          : 0;
+        totalJobs > 0 ? Math.round(((completedCount + failedCount) / totalJobs) * 100) : 0;
       process.stderr.write(
         `\r[Phase 1] Progress: ${pct}% | Completed: ${completedCount} | In Progress: ${inProgressCount} | Queued: ${queuedCount} | Failed: ${failedCount}          `,
       );
@@ -61,7 +58,7 @@ export class Generator {
       for (const prompt of prompts) {
         for (let i = 1; i <= runsPerPrompt; i++) {
           promises.push(
-            this.runJob(model, prompt, i).then((result) => {
+            this.runJob(model, prompt, i).then(result => {
               if (result.error) {
                 failedCount++;
               } else {
@@ -77,8 +74,8 @@ export class Generator {
 
     await Promise.all(promises);
     clearInterval(progressInterval);
-    process.stderr.write("\n");
-    logger.info("Phase 1: Generation Complete");
+    process.stderr.write('\n');
+    logger.info('Phase 1: Generation Complete');
 
     return results;
   }
@@ -116,7 +113,7 @@ export class Generator {
           }
         }
       } else {
-        error = new Error("No output text returned from model");
+        error = new Error('No output text returned from model');
       }
 
       return {
@@ -151,35 +148,29 @@ export class Generator {
     components: any[],
   ) {
     if (!this.outputDir) return;
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${model.name.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
-    fs.mkdirSync(detailsDir, { recursive: true });
+    const modelDir = path.join(this.outputDir, `output-${model.name.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
+    fs.mkdirSync(detailsDir, {recursive: true});
 
     fs.writeFileSync(
       path.join(detailsDir, `${prompt.name}.${runIndex}.json`),
       JSON.stringify(components, null, 2),
     );
 
-    const samplePath = path.join(
-      detailsDir,
-      `${prompt.name}.${runIndex}.sample`,
-    );
+    const samplePath = path.join(detailsDir, `${prompt.name}.${runIndex}.sample`);
     const yamlHeader = `---
 description: ${prompt.description}
 name: ${prompt.name}
 prompt: |
 ${prompt.promptText
-  .split("\n")
-  .map((line) => "  " + line)
-  .join("\n")}
+  .split('\n')
+  .map(line => '  ' + line)
+  .join('\n')}
 ---
 `;
-    let jsonlBody = "";
+    let jsonlBody = '';
     for (const comp of components) {
-      jsonlBody += JSON.stringify(comp) + "\n";
+      jsonlBody += JSON.stringify(comp) + '\n';
     }
     fs.writeFileSync(samplePath, yamlHeader + jsonlBody);
   }
@@ -192,20 +183,17 @@ ${prompt.promptText
     error: any,
   ) {
     if (!this.outputDir) return;
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${model.name.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
-    fs.mkdirSync(detailsDir, { recursive: true });
+    const modelDir = path.join(this.outputDir, `output-${model.name.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
+    fs.mkdirSync(detailsDir, {recursive: true});
 
     fs.writeFileSync(
       path.join(detailsDir, `${prompt.name}.${runIndex}.output.txt`),
-      text || "No output",
+      text || 'No output',
     );
     fs.writeFileSync(
       path.join(detailsDir, `${prompt.name}.${runIndex}.error.json`),
-      JSON.stringify({ message: error.message, stack: error.stack }, null, 2),
+      JSON.stringify({message: error.message, stack: error.stack}, null, 2),
     );
   }
 }
diff --git a/specification/v0_10/eval/src/index.ts b/specification/v0_10/eval/src/index.ts
index 383f5c659..3c1374a5e 100644
--- a/specification/v0_10/eval/src/index.ts
+++ b/specification/v0_10/eval/src/index.ts
@@ -14,46 +14,41 @@
  * limitations under the License.
  */
 
-import * as fs from "fs";
-import * as path from "path";
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import { logger, setupLogger } from "./logger";
-import { modelsToTest } from "./models";
-import { prompts, TestPrompt } from "./prompts";
-import { Generator } from "./generator";
-import { Validator } from "./validator";
-import { Evaluator } from "./evaluator";
-import { EvaluatedResult } from "./types";
-import { analysisFlow } from "./analysis_flow";
+import * as fs from 'fs';
+import * as path from 'path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
+import {logger, setupLogger} from './logger';
+import {modelsToTest} from './models';
+import {prompts, TestPrompt} from './prompts';
+import {Generator} from './generator';
+import {Validator} from './validator';
+import {Evaluator} from './evaluator';
+import {EvaluatedResult} from './types';
+import {analysisFlow} from './analysis_flow';
 
 const schemaFiles = [
-  "../../json/common_types.json",
-  "../../json/basic_catalog.json",
-  "../../json/server_to_client.json",
+  '../../json/common_types.json',
+  '../../json/basic_catalog.json',
+  '../../json/server_to_client.json',
 ];
 
 function loadSchemas(): Record<string, any> {
   const schemas: Record<string, any> = {};
   for (const file of schemaFiles) {
-    const schemaString = fs.readFileSync(path.join(__dirname, file), "utf-8");
+    const schemaString = fs.readFileSync(path.join(__dirname, file), 'utf-8');
     const schema = JSON.parse(schemaString);
     schemas[path.basename(file)] = schema;
   }
 
   // Alias basic_catalog.json to catalog.json to match server_to_client.json references
   // This mirrors the logic in run_tests.py
-  if (schemas["basic_catalog.json"]) {
-    const catalogSchema = JSON.parse(
-      JSON.stringify(schemas["basic_catalog.json"]),
-    );
-    if (catalogSchema["$id"]) {
-      catalogSchema["$id"] = catalogSchema["$id"].replace(
-        "basic_catalog.json",
-        "catalog.json",
-      );
+  if (schemas['basic_catalog.json']) {
+    const catalogSchema = JSON.parse(JSON.stringify(schemas['basic_catalog.json']));
+    if (catalogSchema['$id']) {
+      catalogSchema['$id'] = catalogSchema['$id'].replace('basic_catalog.json', 'catalog.json');
     }
-    schemas["catalog.json"] = catalogSchema;
+    schemas['catalog.json'] = catalogSchema;
   }
 
   return schemas;
@@ -77,25 +72,23 @@ function generateSummary(
     resultsByModel[result.modelName].push(result);
   }
 
-  let summary = "# Evaluation Summary";
+  let summary = '# Evaluation Summary';
   for (const modelName in resultsByModel) {
     summary += `\n\n## Model: ${modelName}\n\n`;
-    const header = `| ${"Prompt Name".padEnd(
+    const header = `| ${'Prompt Name'.padEnd(
       promptNameWidth,
-    )} | ${"Avg Latency (ms)".padEnd(latencyWidth)} | ${"Schema Fail".padEnd(
+    )} | ${'Avg Latency (ms)'.padEnd(latencyWidth)} | ${'Schema Fail'.padEnd(
       failedRunsWidth,
-    )} | ${"Eval Fail".padEnd(failedRunsWidth)} | ${"Minor".padEnd(
-      severityWidth,
-    )} | ${"Significant".padEnd(severityWidth)} | ${"Critical".padEnd(
+    )} | ${'Eval Fail'.padEnd(failedRunsWidth)} | ${'Minor'.padEnd(
       severityWidth,
-    )} |`;
-    const divider = `|${"-".repeat(promptNameWidth + 2)}|${"-".repeat(
+    )} | ${'Significant'.padEnd(severityWidth)} | ${'Critical'.padEnd(severityWidth)} |`;
+    const divider = `|${'-'.repeat(promptNameWidth + 2)}|${'-'.repeat(
       latencyWidth + 2,
-    )}|${"-".repeat(failedRunsWidth + 2)}|${"-".repeat(
+    )}|${'-'.repeat(failedRunsWidth + 2)}|${'-'.repeat(
       failedRunsWidth + 2,
-    )}|${"-".repeat(severityWidth + 2)}|${"-".repeat(
+    )}|${'-'.repeat(severityWidth + 2)}|${'-'.repeat(
       severityWidth + 2,
-    )}|${"-".repeat(severityWidth + 2)}|`;
+    )}|${'-'.repeat(severityWidth + 2)}|`;
     summary += header;
     summary += `\n${divider}`;
 
@@ -115,20 +108,16 @@ function generateSummary(
     for (const promptName of sortedPromptNames) {
       const runs = promptsInModel[promptName];
       const totalRuns = runs.length;
-      const schemaFailedRuns = runs.filter(
-        (r) => r.error || r.validationErrors.length > 0,
-      ).length;
+      const schemaFailedRuns = runs.filter(r => r.error || r.validationErrors.length > 0).length;
       const evalFailedRuns = runs.filter(
-        (r) => r.evaluationResult && !r.evaluationResult.pass,
+        r => r.evaluationResult && !r.evaluationResult.pass,
       ).length;
 
       const totalLatency = runs.reduce((acc, r) => acc + r.latency, 0);
       const avgLatency = (totalLatency / totalRuns).toFixed(0);
 
-      const schemaFailedStr =
-        schemaFailedRuns > 0 ? `${schemaFailedRuns} / ${totalRuns}` : "";
-      const evalFailedStr =
-        evalFailedRuns > 0 ? `${evalFailedRuns} / ${totalRuns}` : "";
+      const schemaFailedStr = schemaFailedRuns > 0 ? `${schemaFailedRuns} / ${totalRuns}` : '';
+      const evalFailedStr = evalFailedRuns > 0 ? `${evalFailedRuns} / ${totalRuns}` : '';
 
       let minorCount = 0;
       let significantCount = 0;
@@ -137,16 +126,16 @@ function generateSummary(
       for (const r of runs) {
         if (r.evaluationResult?.issues) {
           for (const issue of r.evaluationResult.issues) {
-            if (issue.severity === "minor") minorCount++;
-            else if (issue.severity === "significant") significantCount++;
-            else if (issue.severity === "critical") criticalCount++;
+            if (issue.severity === 'minor') minorCount++;
+            else if (issue.severity === 'significant') significantCount++;
+            else if (issue.severity === 'critical') criticalCount++;
           }
         }
       }
 
-      const minorStr = minorCount > 0 ? `${minorCount}` : "";
-      const significantStr = significantCount > 0 ? `${significantCount}` : "";
-      const criticalStr = criticalCount > 0 ? `${criticalCount}` : "";
+      const minorStr = minorCount > 0 ? `${minorCount}` : '';
+      const significantStr = significantCount > 0 ? `${significantCount}` : '';
+      const criticalStr = criticalCount > 0 ? `${criticalCount}` : '';
 
       summary += `\n| ${promptName.padEnd(
         promptNameWidth,
@@ -154,32 +143,28 @@ function generateSummary(
         failedRunsWidth,
       )} | ${evalFailedStr.padEnd(failedRunsWidth)} | ${minorStr.padEnd(
         severityWidth,
-      )} | ${significantStr.padEnd(severityWidth)} | ${criticalStr.padEnd(
-        severityWidth,
-      )} |`;
+      )} | ${significantStr.padEnd(severityWidth)} | ${criticalStr.padEnd(severityWidth)} |`;
     }
 
     const totalRunsForModel = modelResults.length;
     const successfulRuns = modelResults.filter(
-      (r) =>
+      r =>
         !r.error &&
         r.validationErrors.length === 0 &&
         (!r.evaluationResult || r.evaluationResult.pass),
     ).length;
 
     const schemaSuccessfulRuns = modelResults.filter(
-      (r) => !r.error && r.validationErrors.length === 0,
+      r => !r.error && r.validationErrors.length === 0,
     ).length;
 
     const schemaSuccessPercentage =
       totalRunsForModel === 0
-        ? "0.0"
+        ? '0.0'
         : ((schemaSuccessfulRuns / totalRunsForModel) * 100.0).toFixed(1);
 
     const successPercentage =
-      totalRunsForModel === 0
-        ? "0.0"
-        : ((successfulRuns / totalRunsForModel) * 100.0).toFixed(1);
+      totalRunsForModel === 0 ? '0.0' : ((successfulRuns / totalRunsForModel) * 100.0).toFixed(1);
 
     summary += `\n\n**Schema successful runs:** ${schemaSuccessfulRuns} / ${totalRunsForModel} (${schemaSuccessPercentage}% schema success)`;
     summary += `\n**Total successful eval runs:** ${successfulRuns} / ${totalRunsForModel} (${successPercentage}% overall success)`;
@@ -189,28 +174,26 @@ function generateSummary(
     }
   }
 
-  summary += "\n\n---\n\n## Overall Summary\n";
+  summary += '\n\n---\n\n## Overall Summary\n';
   const totalRuns = results.length;
-  const totalToolErrorRuns = results.filter((r) => r.error).length;
+  const totalToolErrorRuns = results.filter(r => r.error).length;
   const totalRunsWithAnyFailure = results.filter(
-    (r) =>
-      r.error ||
-      r.validationErrors.length > 0 ||
-      (r.evaluationResult && !r.evaluationResult.pass),
+    r =>
+      r.error || r.validationErrors.length > 0 || (r.evaluationResult && !r.evaluationResult.pass),
   ).length;
 
   const modelsWithFailures = [
     ...new Set(
       results
         .filter(
-          (r) =>
+          r =>
             r.error ||
             r.validationErrors.length > 0 ||
             (r.evaluationResult && !r.evaluationResult.pass),
         )
-        .map((r) => r.modelName),
+        .map(r => r.modelName),
     ),
-  ].join(", ");
+  ].join(', ');
 
   let totalMinor = 0;
   let totalSignificant = 0;
@@ -220,10 +203,10 @@ function generateSummary(
   for (const r of results) {
     if (r.evaluationResult?.issues) {
       for (const issue of r.evaluationResult.issues) {
-        if (issue.severity === "minor") totalMinor++;
-        else if (issue.severity === "significant") totalSignificant++;
-        else if (issue.severity === "critical") totalCritical++;
-        else if (issue.severity === "criticalSchema") totalCriticalSchema++;
+        if (issue.severity === 'minor') totalMinor++;
+        else if (issue.severity === 'significant') totalSignificant++;
+        else if (issue.severity === 'critical') totalCritical++;
+        else if (issue.severity === 'criticalSchema') totalCriticalSchema++;
       }
     }
   }
@@ -231,10 +214,8 @@ function generateSummary(
   summary += `\n- **Total tool failures:** ${totalToolErrorRuns} / ${totalRuns}`;
   const successPercentage =
     totalRuns === 0
-      ? "0.0"
-      : (((totalRuns - totalRunsWithAnyFailure) / totalRuns) * 100.0).toFixed(
-          1,
-        );
+      ? '0.0'
+      : (((totalRuns - totalRunsWithAnyFailure) / totalRuns) * 100.0).toFixed(1);
   summary += `\n- **Number of runs with any failure (tool error, validation, or eval):** ${totalRunsWithAnyFailure} / ${totalRuns} (${successPercentage}% success)`;
   summary += `\n- **Severity Breakdown:**`;
   summary += `\n  - **Minor:** ${totalMinor}`;
@@ -242,10 +223,9 @@ function generateSummary(
   summary += `\n  - **Critical (Eval):** ${totalCritical}`;
   summary += `\n  - **Critical (Schema):** ${totalCriticalSchema}`;
 
-  const latencies = results.map((r) => r.latency).sort((a, b) => a - b);
+  const latencies = results.map(r => r.latency).sort((a, b) => a - b);
   const totalLatency = latencies.reduce((acc, l) => acc + l, 0);
-  const meanLatency =
-    totalRuns > 0 ? (totalLatency / totalRuns).toFixed(0) : "0";
+  const meanLatency = totalRuns > 0 ? (totalLatency / totalRuns).toFixed(0) : '0';
   let medianLatency = 0;
   if (latencies.length > 0) {
     const mid = Math.floor(latencies.length / 2);
@@ -267,59 +247,59 @@ function generateSummary(
 
 async function main() {
   const argv = await yargs(hideBin(process.argv))
-    .option("log-level", {
-      type: "string",
-      description: "Set the logging level",
-      default: "info",
-      choices: ["debug", "info", "warn", "error"],
+    .option('log-level', {
+      type: 'string',
+      description: 'Set the logging level',
+      default: 'info',
+      choices: ['debug', 'info', 'warn', 'error'],
     })
-    .option("results", {
-      type: "string",
+    .option('results', {
+      type: 'string',
       description:
-        "Directory to keep output files. If not specified, uses results/output-<model>. If specified, uses the provided directory (appending output-<model>).",
-      coerce: (arg) => (arg === undefined ? true : arg),
+        'Directory to keep output files. If not specified, uses results/output-<model>. If specified, uses the provided directory (appending output-<model>).',
+      coerce: arg => (arg === undefined ? true : arg),
       default: true,
     })
-    .option("runs-per-prompt", {
-      type: "number",
-      description: "Number of times to run each prompt",
+    .option('runs-per-prompt', {
+      type: 'number',
+      description: 'Number of times to run each prompt',
       default: 1,
     })
-    .option("model", {
-      type: "string",
+    .option('model', {
+      type: 'string',
       array: true,
-      description: "Filter models by exact name",
+      description: 'Filter models by exact name',
       default: [],
-      choices: modelsToTest.map((m) => m.name),
+      choices: modelsToTest.map(m => m.name),
     })
-    .option("prompt", {
-      type: "string",
+    .option('prompt', {
+      type: 'string',
       array: true,
-      description: "Filter prompts by name prefix",
+      description: 'Filter prompts by name prefix',
     })
-    .option("eval-model", {
-      type: "string",
-      description: "Model to use for evaluation",
-      default: "gemini-2.5-flash",
-      choices: modelsToTest.map((m) => m.name),
+    .option('eval-model', {
+      type: 'string',
+      description: 'Model to use for evaluation',
+      default: 'gemini-2.5-flash',
+      choices: modelsToTest.map(m => m.name),
     })
-    .option("clean-results", {
-      type: "boolean",
-      description: "Clear the output directory before starting",
+    .option('clean-results', {
+      type: 'boolean',
+      description: 'Clear the output directory before starting',
       default: false,
     })
 
     .help()
-    .alias("h", "help")
+    .alias('h', 'help')
     .strict().argv;
 
   // Filter Models
   let filteredModels = modelsToTest;
   if (argv.model && argv.model.length > 0) {
     const modelNames = argv.model as string[];
-    filteredModels = modelsToTest.filter((m) => modelNames.includes(m.name));
+    filteredModels = modelsToTest.filter(m => modelNames.includes(m.name));
     if (filteredModels.length === 0) {
-      logger.error(`No models found matching: ${modelNames.join(", ")}.`);
+      logger.error(`No models found matching: ${modelNames.join(', ')}.`);
       process.exit(1);
     }
   }
@@ -328,13 +308,9 @@ async function main() {
   let filteredPrompts = prompts;
   if (argv.prompt && argv.prompt.length > 0) {
     const promptPrefixes = argv.prompt as string[];
-    filteredPrompts = prompts.filter((p) =>
-      promptPrefixes.some((prefix) => p.name.startsWith(prefix)),
-    );
+    filteredPrompts = prompts.filter(p => promptPrefixes.some(prefix => p.name.startsWith(prefix)));
     if (filteredPrompts.length === 0) {
-      logger.error(
-        `No prompt found with prefix "${promptPrefixes.join(", ")}".`,
-      );
+      logger.error(`No prompt found with prefix "${promptPrefixes.join(', ')}".`);
       process.exit(1);
     }
   }
@@ -344,46 +320,39 @@ async function main() {
   // But we need a base output dir to pass to them.
   let resultsBaseDir: string | undefined;
   const resultsArg = argv.results;
-  if (typeof resultsArg === "string") {
+  if (typeof resultsArg === 'string') {
     resultsBaseDir = resultsArg;
   } else if (resultsArg === true) {
-    resultsBaseDir = "results";
+    resultsBaseDir = 'results';
   }
 
   // Clean Results
-  if (
-    argv["clean-results"] &&
-    resultsBaseDir &&
-    fs.existsSync(resultsBaseDir)
-  ) {
+  if (argv['clean-results'] && resultsBaseDir && fs.existsSync(resultsBaseDir)) {
     // Only force clean known result directories for safety if the user provides the flag.
-    if (resultsBaseDir === "results") {
-      fs.rmSync(resultsBaseDir, { recursive: true, force: true });
+    if (resultsBaseDir === 'results') {
+      fs.rmSync(resultsBaseDir, {recursive: true, force: true});
     } else {
-      fs.rmSync(resultsBaseDir, { recursive: true, force: true });
+      fs.rmSync(resultsBaseDir, {recursive: true, force: true});
     }
   }
 
   // Configure global logger. File logging is currently only supported when testing a single model.
   if (resultsBaseDir) {
     if (filteredModels.length === 1) {
-      const modelDirName = `output-${filteredModels[0].name.replace(/[\/:]/g, "_")}`;
-      setupLogger(path.join(resultsBaseDir, modelDirName), argv["log-level"]);
+      const modelDirName = `output-${filteredModels[0].name.replace(/[\/:]/g, '_')}`;
+      setupLogger(path.join(resultsBaseDir, modelDirName), argv['log-level']);
     } else {
-      setupLogger(undefined, argv["log-level"]);
+      setupLogger(undefined, argv['log-level']);
     }
   } else {
-    setupLogger(undefined, argv["log-level"]);
+    setupLogger(undefined, argv['log-level']);
   }
 
   const schemas = loadSchemas();
-  const catalogRulesPath = path.join(
-    __dirname,
-    "../../json/basic_catalog_rules.txt",
-  );
+  const catalogRulesPath = path.join(__dirname, '../../json/basic_catalog_rules.txt');
   let catalogRules: string | undefined;
   if (fs.existsSync(catalogRulesPath)) {
-    catalogRules = fs.readFileSync(catalogRulesPath, "utf-8");
+    catalogRules = fs.readFileSync(catalogRulesPath, 'utf-8');
   } else {
     logger.warn(
       `Catalog rules file not found at ${catalogRulesPath}. Proceeding without specific catalog rules.`,
@@ -395,7 +364,7 @@ async function main() {
   const generatedResults = await generator.run(
     filteredPrompts,
     filteredModels,
-    argv["runs-per-prompt"],
+    argv['runs-per-prompt'],
   );
 
   // Phase 2: Validation
@@ -403,7 +372,7 @@ async function main() {
   const validatedResults = await validator.run(generatedResults);
 
   // Phase 3: Evaluation
-  const evaluator = new Evaluator(schemas, argv["eval-model"], resultsBaseDir);
+  const evaluator = new Evaluator(schemas, argv['eval-model'], resultsBaseDir);
   const evaluatedResults = await evaluator.run(validatedResults);
 
   // Phase 4: Failure Analysis
@@ -420,30 +389,28 @@ async function main() {
     const modelResults = resultsByModel[modelName];
     const failures = modelResults
       .filter(
-        (r) =>
+        r =>
           r.error ||
           r.validationErrors.length > 0 ||
           (r.evaluationResult && !r.evaluationResult.pass),
       )
-      .map((r) => {
-        let failureType = "Unknown";
-        let reason = "Unknown";
+      .map(r => {
+        let failureType = 'Unknown';
+        let reason = 'Unknown';
         let issues: string[] = [];
 
         if (r.error) {
-          failureType = "Tool Error";
+          failureType = 'Tool Error';
           reason = r.error.message || String(r.error);
         } else if (r.validationErrors.length > 0) {
-          failureType = "Schema Validation";
-          reason = "Schema validation failed";
+          failureType = 'Schema Validation';
+          reason = 'Schema validation failed';
           issues = r.validationErrors;
         } else if (r.evaluationResult && !r.evaluationResult.pass) {
-          failureType = "Evaluation Failure";
+          failureType = 'Evaluation Failure';
           reason = r.evaluationResult.reason;
           if (r.evaluationResult.issues) {
-            issues = r.evaluationResult.issues.map(
-              (i) => `${i.severity}: ${i.issue}`,
-            );
+            issues = r.evaluationResult.issues.map(i => `${i.severity}: ${i.issue}`);
           }
         }
 
@@ -463,12 +430,12 @@ async function main() {
           modelName,
           failures,
           numRuns: modelResults.length,
-          evalModel: argv["eval-model"],
+          evalModel: argv['eval-model'],
         });
         analysisResults[modelName] = analysis;
       } catch (e) {
         logger.error(`Failed to run failure analysis for ${modelName}: ${e}`);
-        analysisResults[modelName] = "Failed to run analysis.";
+        analysisResults[modelName] = 'Failed to run analysis.';
       }
     }
   }
@@ -480,10 +447,10 @@ async function main() {
   if (resultsBaseDir) {
     // Save a copy of the evaluation summary to each model's output directory.
     for (const model of filteredModels) {
-      const modelDirName = `output-${model.name.replace(/[\/:]/g, "_")}`;
+      const modelDirName = `output-${model.name.replace(/[\/:]/g, '_')}`;
       const modelDir = path.join(resultsBaseDir, modelDirName);
       if (fs.existsSync(modelDir)) {
-        fs.writeFileSync(path.join(modelDir, "summary.md"), summary);
+        fs.writeFileSync(path.join(modelDir, 'summary.md'), summary);
       }
     }
   }
diff --git a/specification/v0_10/eval/src/logger.ts b/specification/v0_10/eval/src/logger.ts
index 0a87b505f..ea598dff3 100644
--- a/specification/v0_10/eval/src/logger.ts
+++ b/specification/v0_10/eval/src/logger.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import * as winston from "winston";
-import * as path from "path";
+import * as winston from 'winston';
+import * as path from 'path';
 
 let fileTransport: winston.transport | null = null;
 
 const consoleTransport = new winston.transports.Console({
-  level: "info", // Default to info, can be updated later
+  level: 'info', // Default to info, can be updated later
   format: winston.format.combine(
     winston.format.colorize(),
-    winston.format.printf(({ timestamp, level, message }) => {
+    winston.format.printf(({timestamp, level, message}) => {
       // Clear the current line (where progress bar might be) before logging
       // \r clears the line, \x1b[K clears from cursor to end of line
       return `\r\x1b[K${timestamp} [${level}]: ${message}`;
@@ -33,10 +33,10 @@ const consoleTransport = new winston.transports.Console({
 
 // Create a default logger instance that logs to console only initially
 export const logger = winston.createLogger({
-  level: "debug", // Allow all logs to flow through (transports can filter)
+  level: 'debug', // Allow all logs to flow through (transports can filter)
   format: winston.format.combine(
     winston.format.timestamp(),
-    winston.format.printf(({ timestamp, level, message }) => {
+    winston.format.printf(({timestamp, level, message}) => {
       return `${timestamp} [${level}]: ${message}`;
     }),
   ),
@@ -45,7 +45,7 @@ export const logger = winston.createLogger({
 
 export function setupLogger(outputDir: string | undefined, logLevel: string) {
   // Ensure the global level allows debug logs so they reach the file transport
-  logger.level = "debug";
+  logger.level = 'debug';
 
   // Update Console transport level to match user preference directly
   consoleTransport.level = logLevel;
@@ -57,12 +57,9 @@ export function setupLogger(outputDir: string | undefined, logLevel: string) {
 
   if (outputDir) {
     fileTransport = new winston.transports.File({
-      filename: path.join(outputDir, "output.log"),
-      level: "debug", // Always capture everything in the file
-      format: winston.format.combine(
-        winston.format.timestamp(),
-        winston.format.json(),
-      ),
+      filename: path.join(outputDir, 'output.log'),
+      level: 'debug', // Always capture everything in the file
+      format: winston.format.combine(winston.format.timestamp(), winston.format.json()),
     });
 
     logger.add(fileTransport);
diff --git a/specification/v0_10/eval/src/models.ts b/specification/v0_10/eval/src/models.ts
index 7effadc76..b09d768ad 100644
--- a/specification/v0_10/eval/src/models.ts
+++ b/specification/v0_10/eval/src/models.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { openAI } from "@genkit-ai/compat-oai/openai";
-import { claude35Haiku, claude4Sonnet } from "genkitx-anthropic";
+import {googleAI} from '@genkit-ai/google-genai';
+import {openAI} from '@genkit-ai/compat-oai/openai';
+import {claude35Haiku, claude4Sonnet} from 'genkitx-anthropic';
 
 export interface ModelConfiguration {
   model: any;
@@ -28,71 +28,71 @@ export interface ModelConfiguration {
 
 export const modelsToTest: ModelConfiguration[] = [
   {
-    model: openAI.model("gpt-5.1"),
-    name: "gpt-5.1",
-    config: { reasoning_effort: "minimal" },
+    model: openAI.model('gpt-5.1'),
+    name: 'gpt-5.1',
+    config: {reasoning_effort: 'minimal'},
     requestsPerMinute: 500,
     tokensPerMinute: 30000,
   },
   {
-    model: openAI.model("gpt-5-mini"),
-    name: "gpt-5-mini",
-    config: { reasoning_effort: "minimal" },
+    model: openAI.model('gpt-5-mini'),
+    name: 'gpt-5-mini',
+    config: {reasoning_effort: 'minimal'},
     requestsPerMinute: 500,
     tokensPerMinute: 500000,
   },
   {
-    model: openAI.model("gpt-5-nano"),
-    name: "gpt-5-nano",
+    model: openAI.model('gpt-5-nano'),
+    name: 'gpt-5-nano',
     config: {},
     requestsPerMinute: 500,
     tokensPerMinute: 200000,
   },
   {
-    model: googleAI.model("gemini-2.5-pro"),
-    name: "gemini-2.5-pro",
-    config: { thinkingConfig: { thinkingBudget: 1000 } },
+    model: googleAI.model('gemini-2.5-pro'),
+    name: 'gemini-2.5-pro',
+    config: {thinkingConfig: {thinkingBudget: 1000}},
     requestsPerMinute: 150,
     tokensPerMinute: 2000000,
   },
   {
-    model: googleAI.model("gemini-3-flash-preview"),
-    name: "gemini-3-flash",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-3-flash-preview'),
+    name: 'gemini-3-flash',
+    config: {thinkingConfig: {thinkingBudget: 0}},
     requestsPerMinute: 1000,
     tokensPerMinute: 1000000,
   },
   {
-    model: googleAI.model("gemini-3.1-pro-preview"),
-    name: "gemini-3.1-pro",
-    config: { thinkingConfig: { thinkingBudget: 1000 } },
+    model: googleAI.model('gemini-3.1-pro-preview'),
+    name: 'gemini-3.1-pro',
+    config: {thinkingConfig: {thinkingBudget: 1000}},
     requestsPerMinute: 25,
     tokensPerMinute: 1000000,
   },
   {
-    model: googleAI.model("gemini-2.5-flash"),
-    name: "gemini-2.5-flash",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-2.5-flash'),
+    name: 'gemini-2.5-flash',
+    config: {thinkingConfig: {thinkingBudget: 0}},
     requestsPerMinute: 1000,
     tokensPerMinute: 1000000,
   },
   {
-    model: googleAI.model("gemini-2.5-flash-lite"),
-    name: "gemini-2.5-flash-lite",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-2.5-flash-lite'),
+    name: 'gemini-2.5-flash-lite',
+    config: {thinkingConfig: {thinkingBudget: 0}},
     requestsPerMinute: 4000,
     tokensPerMinute: 4000000,
   },
   {
     model: claude4Sonnet,
-    name: "claude-4-sonnet",
+    name: 'claude-4-sonnet',
     config: {},
     requestsPerMinute: 50,
     tokensPerMinute: 30000,
   },
   {
     model: claude35Haiku,
-    name: "claude-35-haiku",
+    name: 'claude-35-haiku',
     config: {},
     requestsPerMinute: 50,
     tokensPerMinute: 50000,
diff --git a/specification/v0_10/eval/src/prompts.ts b/specification/v0_10/eval/src/prompts.ts
index a311b4011..4a4057905 100644
--- a/specification/v0_10/eval/src/prompts.ts
+++ b/specification/v0_10/eval/src/prompts.ts
@@ -22,14 +22,13 @@ export interface TestPrompt {
 
 export const prompts: TestPrompt[] = [
   {
-    name: "deleteSurface",
-    description: "A DeleteSurface message to remove a UI surface.",
+    name: 'deleteSurface',
+    description: 'A DeleteSurface message to remove a UI surface.',
     promptText: `Generate a JSON message containing a deleteSurface for the surface 'dashboard-surface-1'.`,
   },
   {
-    name: "dogBreedGenerator",
-    description:
-      "A prompt to generate a UI for a dog breed information and generator tool.",
+    name: 'dogBreedGenerator',
+    description: 'A prompt to generate a UI for a dog breed information and generator tool.',
     promptText: `Use a surfaceId of 'main'. Then, generate a 'createSurface' message followed by 'updateComponents' message to describe the following UI:
 
 A vertical list with:
@@ -50,20 +49,19 @@ The dog generator is another card which is a form that generates a fictional dog
 `,
   },
   {
-    name: "loginForm",
+    name: 'loginForm',
     description:
       'A simple login form with username, password, a "remember me" checkbox, and a submit button.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a login form. It should have a "Login" text (variant 'h1'), two text fields for username and password (bound to /login/username and /login/password), a checkbox for "Remember Me" (bound to /login/rememberMe), and a "Sign In" button. The button's action should have a 'event' property with 'name': 'login', and a 'context' containing the username, password, and rememberMe status.`,
   },
   {
-    name: "productGallery",
-    description: "A gallery of products using a list with a template.",
+    name: 'productGallery',
+    description: 'A gallery of products using a list with a template.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a product gallery. It should display a list of products from the data model at '/products'. Use a template for the list items. Each item should be a Card containing a Column. The Column should contain an Image (from '/products/item/imageUrl'), a Text component for the product name (from '/products/item/name'), and a Button labeled "Add to Cart". The button's action should have a 'event' with 'name': 'addToCart' and a 'context' with the product ID, for example, 'productId': 'static-id-123' (use this exact literal string). You should create a template component and then a list that uses it.`,
   },
   {
-    name: "productGalleryData",
-    description:
-      "An updateDataModel message to populate the product gallery data.",
+    name: 'productGalleryData',
+    description: 'An updateDataModel message to populate the product gallery data.',
     promptText: `Generate a 'createSurface' message with surfaceId 'main', followed by an updateDataModel message to populate the data model for the product gallery. The update should target the path '/products' and include at least two products. Each product in the map should have keys 'id', 'name', and 'imageUrl'. For example:
     {
       "product1": {
@@ -74,18 +72,18 @@ The dog generator is another card which is a form that generates a fictional dog
     }`,
   },
   {
-    name: "settingsPage",
-    description: "A settings page with tabs and a modal dialog.",
+    name: 'settingsPage',
+    description: 'A settings page with tabs and a modal dialog.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a user settings page. Use a Tabs component with two tabs: "Profile" and "Notifications". The "Profile" tab should contain a simple column with a text field for the user's name. The "Notifications" tab should contain a checkbox for "Enable email notifications". Also, include a Modal component. The modal's trigger should be a button labeled "Delete Account", and its content should be a column with a confirmation text and two buttons: "Confirm Deletion" and "Cancel".`,
   },
   {
-    name: "updateDataModel",
-    description: "An updateDataModel message to update user data.",
+    name: 'updateDataModel',
+    description: 'An updateDataModel message to update user data.',
     promptText: `Generate a 'createSurface' message with surfaceId 'main', followed by an updateDataModel message. This is used to update the client's data model. The scenario is that a user has just logged in, and we need to populate their profile information. Create a single data model update message to set '/user/name' to "John Doe" and '/user/email' to "john.doe@example.com".`,
   },
   {
-    name: "animalKingdomExplorer",
-    description: "A simple, explicit UI to display a hierarchy of animals.",
+    name: 'animalKingdomExplorer',
+    description: 'A simple, explicit UI to display a hierarchy of animals.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a simplified UI explorer for the Animal Kingdom.
 
 The UI must have a main 'Text' (variant 'h1') with the text "Simple Animal Explorer".
@@ -123,58 +121,58 @@ IMPORTANT: Do not skip any of the classes, orders, or species above. Include eve
 `,
   },
   {
-    name: "recipeCard",
-    description: "A UI to display a recipe with ingredients and instructions.",
+    name: 'recipeCard',
+    description: 'A UI to display a recipe with ingredients and instructions.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a recipe card. It should have a 'Text' (variant 'h1') for the recipe title, "Classic Lasagna". Below the title, an 'Image' of the lasagna. Then, a 'Row' containing two 'Column's. The first column has a 'Text' (variant 'h2') "Ingredients" and a 'List' of ingredients (use 'Text' components for items: "Pasta", "Cheese", "Sauce"). The second column has a 'Text' (variant 'h2') "Instructions" and a 'List' of step-by-step instructions (use 'Text' components: "Boil pasta", "Layer ingredients", "Bake"). Finally, a 'Button' at the bottom labeled "Watch Video Tutorial".`,
   },
   {
-    name: "musicPlayer",
-    description: "A simple music player UI.",
+    name: 'musicPlayer',
+    description: 'A simple music player UI.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a music player. It should be a 'Card' containing a 'Column'. Inside the column, there's an 'Image' for the album art, a 'Text' for the song title "Bohemian Rhapsody", another 'Text' for the artist "Queen", a 'Slider' labeled "Progress", and a 'Row' with three 'Button' components. Each Button should have a child 'Text' component. The Text components should have the labels "Previous", "Play", and "Next" respectively.`,
   },
   {
-    name: "weatherForecast",
-    description: "A UI to display the weather forecast.",
+    name: 'weatherForecast',
+    description: 'A UI to display the weather forecast.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a weather forecast UI. It should have a 'Text' (variant 'h1') with the city name, "New York". Below it, a 'Row' with the current temperature as a 'Text' component ("68°F") and an 'Image' for the weather icon (e.g., a sun). Below that, a 'Divider'. Then, a 'List' component to display the 5-day forecast. Each item in the list should be a 'Row' with the day, an icon, and high/low temperatures.`,
   },
   {
-    name: "surveyForm",
-    description: "A customer feedback survey form.",
+    name: 'surveyForm',
+    description: 'A customer feedback survey form.',
     promptText: `Create a customer feedback survey form. It should have a 'Text' (variant 'h1') "Customer Feedback". Then a 'ChoicePicker' (variant 'mutuallyExclusive') with label "How would you rate our service?" and options "Excellent", "Good", "Average", "Poor". Then a 'ChoicePicker' (variant 'multipleSelection') with label "What did you like?" and options "Product Quality", "Price", "Customer Support". Finally, a 'TextField' with the label "Any other comments?" and a 'Button' labeled "Submit Feedback".`,
   },
   {
-    name: "flightBooker",
-    description: "A form to search for flights.",
+    name: 'flightBooker',
+    description: 'A form to search for flights.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a flight booking form. It should have a 'Text' (variant 'h1') "Book a Flight". Then a 'Row' with two 'TextField's for "Origin" and "Destination". Below that, a 'Row' with two 'DateTimeInput's for "Departure Date" and "Return Date" (initialize with empty values). Add a 'Slider' labeled "Passengers" (min 1, max 10, value 1). Finally, a 'Button' labeled "Search Flights".`,
   },
   {
-    name: "dashboard",
-    description: "A simple dashboard with statistics.",
+    name: 'dashboard',
+    description: 'A simple dashboard with statistics.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a simple dashboard. It should have a 'Text' (variant 'h1') "Sales Dashboard". Below, a 'Row' containing three 'Card's. The first card has a 'Text' "Revenue" and another 'Text' "$50,000". The second card has "New Customers" and "1,200". The third card has "Conversion Rate" and "4.5%".`,
   },
   {
-    name: "contactCard",
-    description: "A UI to display contact information.",
+    name: 'contactCard',
+    description: 'A UI to display contact information.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a contact card. The root component of the surface must be a 'Card'. This Card should contain a 'Row'. The row contains an 'Image' (as an avatar) and a 'Column'. The column contains a 'Text' for the name "Jane Doe", a 'Text' for the email "jane.doe@example.com", and a 'Text' for the phone number "(123) 456-7890". Below the main row, add a 'Button' labeled "View on Map" (using a child 'Text' component).`,
   },
   {
-    name: "calendarEventCreator",
-    description: "A form to create a new calendar event.",
+    name: 'calendarEventCreator',
+    description: 'A form to create a new calendar event.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a calendar event creation form. It should have a 'Text' (variant 'h1') "New Event". Include a 'TextField' for the "Event Title". Use a 'Row' for two 'DateTimeInput's for "Start Time" and "End Time" (initialize both with a literal empty string value: '' (do not bind to a data path)). Add a 'CheckBox' labeled "All-day event". Finally, a 'Row' with two 'Button's: "Save" and "Cancel".`,
   },
   {
-    name: "checkoutPage",
-    description: "A simplified e-commerce checkout page.",
+    name: 'checkoutPage',
+    description: 'A simplified e-commerce checkout page.',
     promptText: `Create a simplified e-commerce checkout page. It should have a 'Text' (variant 'h1') "Checkout". A 'Column' for shipping info with 'TextField's for "Name", "Address", "City", "Zip Code". A 'Column' for payment info with 'TextField's for "Card Number", "Expiry Date", "CVV". Finally, a 'Text' "Total: $99.99" and a 'Button' "Place Order".`,
   },
   {
-    name: "socialMediaPost",
-    description: "A component representing a social media post.",
+    name: 'socialMediaPost',
+    description: 'A component representing a social media post.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a social media post. It should be a 'Card' containing a 'Column'. The first item is a 'Row' with an 'Image' (user avatar) and a 'Text' (username "user123"). Below that, a 'Text' component for the post content: "Enjoying the beautiful weather today!". Then, an 'Image' for the main post picture. Finally, a 'Row' with three 'Button's: "Like", "Comment", and "Share".`,
   },
   {
-    name: "eCommerceProductPage",
-    description: "A detailed product page for an e-commerce website.",
+    name: 'eCommerceProductPage',
+    description: 'A detailed product page for an e-commerce website.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a product details page.
 The main layout should be a 'Row'.
 The left side of the row is a 'Column' containing a large main 'Image' of the product, and below it, a 'Row' of three smaller thumbnail 'Image' components.
@@ -188,8 +186,8 @@ The right side of the row is another 'Column' for product information:
 - A 'Text' component for the product description below the button.`,
   },
   {
-    name: "interactiveDashboard",
-    description: "A dashboard with filters and data cards.",
+    name: 'interactiveDashboard',
+    description: 'A dashboard with filters and data cards.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for an interactive analytics dashboard.
   At the top, a 'Text' (variant 'h1') "Company Dashboard".
   Below the text heading, a 'Card' containing a 'Row' of filter controls:
@@ -202,8 +200,8 @@ The right side of the row is another 'Column' for product information:
   Finally, a large 'Card' at the bottom with a 'Text' (variant 'h2') "Revenue Over Time" and a placeholder 'Image' with a valid URL to represent a line chart.`,
   },
   {
-    name: "travelItinerary",
-    description: "A multi-day travel itinerary display.",
+    name: 'travelItinerary',
+    description: 'A multi-day travel itinerary display.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a travel itinerary for a trip to Paris.
 It should have a main 'Text' component with variant 'h1' and text "Paris Adventure".
 Below, use a 'List' to display three days. Each item in the list should be a 'Card'.
@@ -213,8 +211,8 @@ Below, use a 'List' to display three days. Each item in the list should be a 'Ca
 Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to mark as complete, with an empty label '') and a 'Text' component with the activity description.`,
   },
   {
-    name: "kanbanBoard",
-    description: "A Kanban-style task tracking board.",
+    name: 'kanbanBoard',
+    description: 'A Kanban-style task tracking board.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a Kanban board. It should have a 'Text' (variant 'h1') "Project Tasks". Below, a 'Row' containing three 'Column's representing "To Do", "In Progress", and "Done". Each column should have a 'Text' (variant 'h2') header and a list of 'Card's.
     - "To Do" column: Card "Research", Card "Design".
     - "In Progress" column: Card "Implementation".
@@ -222,56 +220,56 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     Each card should just contain a 'Text' with the task name.`,
   },
   {
-    name: "videoCallInterface",
-    description: "A video conference UI.",
+    name: 'videoCallInterface',
+    description: 'A video conference UI.',
     promptText: `Create a video call interface. It should have a 'Text' (variant 'h1') "Video Call". A 'Video' component with a valid placeholder URL (e.g. 'https://example.com/video.mp4'). Below that, a 'Row' with three 'Button's, each with a child 'Text' component with the text "Mute", "Camera", and "End Call" respectively.`,
   },
   {
-    name: "fileBrowser",
-    description: "A file explorer list.",
+    name: 'fileBrowser',
+    description: 'A file explorer list.',
     promptText: `Create a file browser. It should have a 'Text' (variant 'h1') "My Files". A 'List' of 'Row's. Each row has an 'Icon' (folder or attachFile) and a 'Text' (filename). Examples (create these as static rows, not data bound): "Documents", "Images", "Work.txt".`,
   },
   {
-    name: "chatRoom",
-    description: "A chat application interface.",
+    name: 'chatRoom',
+    description: 'A chat application interface.',
     promptText: `Create a chat room interface. It should have a 'Column' for the message history. Inside, include several 'Card's representing messages, each with a 'Text' for the sender and a 'Text' for the message body. Specifically include these messages: "Alice: Hi there!", "Bob: Hello!". At the bottom, a 'Row' with a 'TextField' (label "Type a message...") and a 'Button' labeled "Send".`,
   },
   {
-    name: "fitnessTracker",
-    description: "A daily activity summary.",
+    name: 'fitnessTracker',
+    description: 'A daily activity summary.',
     promptText: `Create a fitness tracker dashboard. It should have a 'Text' (variant 'h1') "Daily Activity", and a 'Row' of 'Card's. Each card should contain a 'Column' with a 'Text' label (e.g. "Steps") and a 'Text' value (e.g. "10,000"). Create cards for "Steps" ("10,000"), "Calories" ("500 kcal"), "Distance" ("5 km"). Below that, a 'Slider' labeled "Daily Goal" (initialize value to 50). Finally, a 'List' of recent workouts. Use 'Text' components for the list items, for example: "Morning Run", "Evening Yoga", "Gym Session".`,
   },
   {
-    name: "smartHome",
-    description: "A smart home control panel.",
+    name: 'smartHome',
+    description: 'A smart home control panel.',
     promptText: `Create a smart home dashboard. It should have a 'Text' (variant 'h1') "Living Room". A 'Grid' of 'Card's. To create the grid, use a 'Column' that contains multiple 'Row's. Each 'Row' should contain 'Card's. Create a row with cards for "Lights" (CheckBox, label "Lights", value true) and "Thermostat" (Slider, label "Thermostat", value 72). Create another row with a card for "Music" (CheckBox, label "Music", value false). Ensure the CheckBox labels are exactly "Lights" and "Music".`,
   },
   {
-    name: "restaurantMenu",
-    description: "A restaurant menu with tabs.",
+    name: 'restaurantMenu',
+    description: 'A restaurant menu with tabs.',
     promptText: `Create a restaurant menu with tabs. It should have a 'Text' (variant 'h1') "Gourmet Bistro". A 'Tabs' component with "Starters", "Mains", "Desserts".
     - "Starters": 'List' containing IDs of separate 'Row' components (Name, Price). Create rows for "Soup - $8", "Salad - $10".
     - "Mains": 'List' containing IDs of separate 'Row' components. Create rows for "Steak - $25", "Pasta - $18".
     - "Desserts": 'List' containing IDs of separate 'Row' components. Create rows for "Cake - $8", "Pie - $7".`,
   },
   {
-    name: "newsAggregator",
-    description: "A news feed with article cards.",
+    name: 'newsAggregator',
+    description: 'A news feed with article cards.',
     promptText: `Create a news aggregator. The root component should be a 'Column'. Inside this column, place a 'Text' (variant 'h1') "Top Headlines". Below the text, place a 'List' of 'Card's. The 'List' should be a sibling of the 'Text', not a parent. Each card has a 'Column' with an 'Image', a 'Text' (headline), and a 'Text' (summary). Include headlines "Tech Breakthrough" and "Local Sports". Each card should have a 'Button' labeled "Read More". Create these as static components, not data bound.`,
   },
   {
-    name: "photoEditor",
-    description: "A photo editing interface with sliders.",
+    name: 'photoEditor',
+    description: 'A photo editing interface with sliders.',
     promptText: `Create a photo editor. It should have a large 'Image' (photo). Below it, a 'Row' of 'Button's (Filters, Crop, Adjust). Below that, a 'Slider' labeled "Intensity" (initialize value to 50).`,
   },
   {
-    name: "triviaQuiz",
-    description: "A trivia question card.",
+    name: 'triviaQuiz',
+    description: 'A trivia question card.',
     promptText: `Create a trivia quiz. It should have a 'Text' (variant 'h1') "Question 1". A 'Text' "What is the capital of France?". A 'ChoicePicker' (variant 'mutuallyExclusive') for answers (options: "Paris", "London", "Berlin", "Madrid"). A 'Button' "Submit Answer".`,
   },
   {
-    name: "simpleCalculator",
-    description: "A basic calculator layout.",
+    name: 'simpleCalculator',
+    description: 'A basic calculator layout.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a calculator. It should have a 'Card'. Inside the card, there MUST be a single 'Column' that contains two things: a 'Text' (display) showing "0", and a nested 'Column' of 'Row's for the buttons.
     - Row 1: "7", "8", "9", "/"
     - Row 2: "4", "5", "6", "*"
@@ -280,28 +278,28 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     Each button should be a 'Button' component with a child 'Text' component for the label (e.g. '7', '+').`,
   },
   {
-    name: "jobApplication",
-    description: "A job application form.",
+    name: 'jobApplication',
+    description: 'A job application form.',
     promptText: `Create a job application form. It should have 'TextField's for "Name", "Email", "Phone", "Resume URL". A 'ChoicePicker' (variant 'mutuallyExclusive') labeled "Years of Experience" (options: "0-1", "2-5", "5+"). A 'Button' "Submit Application".`,
   },
   {
-    name: "courseSyllabus",
-    description: "A course syllabus outline.",
+    name: 'courseSyllabus',
+    description: 'A course syllabus outline.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a course syllabus. 'Text' (h1) "Introduction to Computer Science". 'List' of modules.
 - For module 1, a 'Card' with 'Text' "Algorithms" and 'List' ("Sorting", "Searching").
 - For module 2, a 'Card' with 'Text' "Data Structures" and 'List' ("Arrays", "Linked Lists").`,
   },
   {
-    name: "stockWatchlist",
-    description: "A stock market watchlist.",
+    name: 'stockWatchlist',
+    description: 'A stock market watchlist.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a stock watchlist. 'Text' (h1) "Market Watch". 'List' of 'Row's.
     - Row 1: 'Text' "AAPL", 'Text' "$150.00", 'Text' "+1.2%".
     - Row 2: 'Text' "GOOGL", 'Text' "$2800.00", 'Text' "-0.5%".
     - Row 3: 'Text' "AMZN", 'Text' "$3400.00", 'Text' "+0.8%".`,
   },
   {
-    name: "podcastEpisode",
-    description: "A podcast player interface.",
+    name: 'podcastEpisode',
+    description: 'A podcast player interface.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a podcast player. 'Card' containing:
     - 'Image' (Cover Art).
     - 'Text' (h2) "Episode 42: The Future of AI".
@@ -311,20 +309,20 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     Create these as static components, not data bound.`,
   },
   {
-    name: "hotelSearchResults",
-    description: "Hotel search results list.",
+    name: 'hotelSearchResults',
+    description: 'Hotel search results list.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for hotel search results. 'Text' (h1) "Hotels in Tokyo". 'List' of 'Card's.
     - Card 1: 'Row' with 'Image', 'Column' ('Text' "Grand Hotel", 'Text' "5 Stars", 'Text' "$200/night"), 'Button' "Book".
     - Card 2: 'Row' with 'Image', 'Column' ('Text' "City Inn", 'Text' "3 Stars", 'Text' "$100/night"), 'Button' "Book".`,
   },
   {
-    name: "notificationCenter",
-    description: "A list of notifications.",
+    name: 'notificationCenter',
+    description: 'A list of notifications.',
     promptText: `Create a notification center. It should have a 'Text' (variant 'h1') "Notifications". A 'List' of 'Card's. Include cards for "New message from Sarah" and "Your order has shipped". Each card should have a 'Button' "Dismiss".`,
   },
   {
-    name: "nestedDataBinding",
-    description: "A project dashboard with deeply nested data binding.",
+    name: 'nestedDataBinding',
+    description: 'A project dashboard with deeply nested data binding.',
     promptText: `Generate a stream of JSON messages for a Project Management Dashboard.
     The output must consist of exactly three JSON objects, one after the other.
 
@@ -353,13 +351,13 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
   },
 
   {
-    name: "profileEditor",
-    description: "A user profile editing form.",
+    name: 'profileEditor',
+    description: 'A user profile editing form.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for editing a profile. 'Text' (h1) "Edit Profile". 'Image' (Current Avatar). 'Button' "Change Photo". 'TextField' "Display Name". 'TextField' "Bio" (multiline). 'TextField' "Website". 'Button' "Save Changes".`,
   },
   {
-    name: "cinemaSeatSelection",
-    description: "A seat selection grid.",
+    name: 'cinemaSeatSelection',
+    description: 'A seat selection grid.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for cinema seat selection. 'Text' (h1) "Select Seats". 'Text' "Screen" (centered). 'Column' of 'Row's representing rows of seats.
     - Row A: 4 'CheckBox'es.
     - Row B: 4 'CheckBox'es.
@@ -367,20 +365,20 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     'Button' "Confirm Selection".`,
   },
   {
-    name: "flashcardApp",
-    description: "A language learning flashcard.",
+    name: 'flashcardApp',
+    description: 'A language learning flashcard.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a flashcard app. 'Text' (h1) "Spanish Vocabulary". 'Card' (the flashcard). Inside the card, a 'Column' with 'Text' (h2) "Hola" (Front). 'Divider'. 'Text' "Hello" (Back - conceptually hidden, but rendered here). 'Row' of buttons: "Hard", "Good", "Easy".`,
   },
   {
-    name: "clientSideValidation",
-    description: "A text field with client-side validation requirements.",
+    name: 'clientSideValidation',
+    description: 'A text field with client-side validation requirements.',
     promptText: `Create a 'createSurface' and 'updateComponents' message for a registration form with validation. Surface ID 'main'.
     Include a 'TextField' for "Username" that MUST match the regex "^[a-zA-Z0-9]{3,}$". If it fails, show error "Username must be at least 3 alphanumeric characters".
     Include a 'Button' labeled "Register".`,
   },
   {
-    name: "standardFunctions",
-    description: "Usage of pluralize.",
+    name: 'standardFunctions',
+    description: 'Usage of pluralize.',
     promptText: `Create a 'createSurface' and 'updateComponents' message for a shopping cart summary. Surface ID 'main'.
     Display a 'Text' component.
     The text value should be a 'pluralize' function call with returnType 'string'.
@@ -390,15 +388,15 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     'other': "\${/cart/count} items"`,
   },
   {
-    name: "openUrlAction",
-    description: "A button that opens an external URL.",
+    name: 'openUrlAction',
+    description: 'A button that opens an external URL.',
     promptText: `Create a 'createSurface' and 'updateComponents' message. Surface ID 'main'.
     Include a 'Button' labeled "Visit Website".
     The button's action should be a client-side function call to 'openUrl' with the argument 'url': 'https://a2ui.org'.`,
   },
   {
-    name: "nestedLayoutRecursive",
-    description: "A deeply nested layout to test component recursion.",
+    name: 'nestedLayoutRecursive',
+    description: 'A deeply nested layout to test component recursion.',
     promptText: `Create a 'createSurface' and 'updateComponents' message with surfaceId 'main'.
     Create a layout with at least 5 levels of depth:
     Level 1: Card
diff --git a/specification/v0_10/eval/src/rateLimiter.ts b/specification/v0_10/eval/src/rateLimiter.ts
index 49d67dd4b..5b593970e 100644
--- a/specification/v0_10/eval/src/rateLimiter.ts
+++ b/specification/v0_10/eval/src/rateLimiter.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { logger } from "./logger";
-import { ModelConfiguration } from "./models";
+import {logger} from './logger';
+import {ModelConfiguration} from './models';
 
 interface UsageRecord {
   timestamp: number;
@@ -39,7 +39,7 @@ export class RateLimiter {
 
   private getModelState(modelName: string): ModelRateLimitState {
     if (!this.modelStates.has(modelName)) {
-      this.modelStates.set(modelName, { usageRecords: [] });
+      this.modelStates.set(modelName, {usageRecords: []});
     }
     return this.modelStates.get(modelName)!;
   }
@@ -47,21 +47,19 @@ export class RateLimiter {
   private cleanUpRecords(state: ModelRateLimitState): void {
     // Use 65 seconds to be safe against clock drift and server bucket alignment
     const minuteAgo = Date.now() - 65 * 1000;
-    state.usageRecords = state.usageRecords.filter(
-      (record) => record.timestamp > minuteAgo,
-    );
+    state.usageRecords = state.usageRecords.filter(record => record.timestamp > minuteAgo);
   }
 
   reportError(modelConfig: ModelConfiguration, error: any): void {
     const isResourceExhausted =
-      error?.status === "RESOURCE_EXHAUSTED" ||
+      error?.status === 'RESOURCE_EXHAUSTED' ||
       error?.code === 429 ||
-      (error?.message && error.message.includes("429"));
+      (error?.message && error.message.includes('429'));
 
     if (isResourceExhausted) {
       // Try to parse "Please retry in X s" or similar from error message
       // Example: "Please retry in 22.648565753s."
-      const message = error?.originalMessage || error?.message || "";
+      const message = error?.originalMessage || error?.message || '';
       const match = message.match(/retry in ([0-9.]+)\s*s/i);
 
       let retrySeconds = 60; // Default to 60s if not found
@@ -81,13 +79,10 @@ export class RateLimiter {
     }
   }
 
-  async acquirePermit(
-    modelConfig: ModelConfiguration,
-    tokensCost: number = 0,
-  ): Promise<void> {
+  async acquirePermit(modelConfig: ModelConfiguration, tokensCost: number = 0): Promise<void> {
     this._waitingCount++;
     try {
-      const { name, requestsPerMinute, tokensPerMinute } = modelConfig;
+      const {name, requestsPerMinute, tokensPerMinute} = modelConfig;
       if (!requestsPerMinute && !tokensPerMinute) {
         return; // No limits
       }
@@ -100,10 +95,8 @@ export class RateLimiter {
         const pausedUntil = this.modelPauses.get(name);
         if (pausedUntil && pausedUntil > Date.now()) {
           const pauseWait = pausedUntil - Date.now();
-          logger.verbose(
-            `Rate limiting ${name}: Paused by circuit breaker for ${pauseWait}ms`,
-          );
-          await new Promise((resolve) => setTimeout(resolve, pauseWait));
+          logger.verbose(`Rate limiting ${name}: Paused by circuit breaker for ${pauseWait}ms`);
+          await new Promise(resolve => setTimeout(resolve, pauseWait));
           // After waiting, loop again to check normal rate limits
           continue;
         }
@@ -115,14 +108,12 @@ export class RateLimiter {
 
         let currentTokens = 0;
         let currentRequests = 0;
-        state.usageRecords.forEach((r) => {
+        state.usageRecords.forEach(r => {
           currentTokens += r.tokensUsed;
           if (r.isRequest) currentRequests++;
         });
 
-        const effectiveTokensPerMinute = tokensPerMinute
-          ? Math.floor(tokensPerMinute * 0.9)
-          : 0;
+        const effectiveTokensPerMinute = tokensPerMinute ? Math.floor(tokensPerMinute * 0.9) : 0;
 
         logger.debug(
           `RateLimiter check for ${name}: Cost=${tokensCost}, CurrentTokens=${currentTokens}, Limit=${effectiveTokensPerMinute}, Requests=${currentRequests}, RPM=${requestsPerMinute}`,
@@ -131,12 +122,9 @@ export class RateLimiter {
         // Check RPM
         if (requestsPerMinute && currentRequests + 1 > requestsPerMinute) {
           // Find the oldest REQUEST record
-          const oldestRequest = state.usageRecords.find((r) => r.isRequest);
+          const oldestRequest = state.usageRecords.find(r => r.isRequest);
           if (oldestRequest) {
-            rpmWait = Math.max(
-              0,
-              oldestRequest.timestamp + 60 * 1000 - currentNow,
-            );
+            rpmWait = Math.max(0, oldestRequest.timestamp + 60 * 1000 - currentNow);
           }
         }
 
@@ -149,16 +137,12 @@ export class RateLimiter {
             // Check if we are ALREADY over limit for the next call
             // We need to shed enough tokens so that (current - shed + cost) <= limit
             // shed >= current + cost - limit
-            let tokensToShed =
-              currentTokens + tokensCost - effectiveTokensPerMinute;
+            let tokensToShed = currentTokens + tokensCost - effectiveTokensPerMinute;
             let cumulativeTokens = 0;
             for (const record of state.usageRecords) {
               cumulativeTokens += record.tokensUsed;
               if (cumulativeTokens >= tokensToShed) {
-                tpmWait = Math.max(
-                  tpmWait,
-                  record.timestamp + 60 * 1000 - currentNow,
-                );
+                tpmWait = Math.max(tpmWait, record.timestamp + 60 * 1000 - currentNow);
                 break;
               }
             }
@@ -179,7 +163,7 @@ export class RateLimiter {
         logger.verbose(
           `Rate limiting ${name}: Waiting ${requiredWait}ms (RPM wait: ${rpmWait}ms, TPM wait: ${tpmWait}ms)`,
         );
-        await new Promise((resolve) => setTimeout(resolve, requiredWait));
+        await new Promise(resolve => setTimeout(resolve, requiredWait));
       }
     } finally {
       this._waitingCount--;
diff --git a/specification/v0_10/eval/src/types.ts b/specification/v0_10/eval/src/types.ts
index 77ffca320..c79582c67 100644
--- a/specification/v0_10/eval/src/types.ts
+++ b/specification/v0_10/eval/src/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TestPrompt } from "./prompts";
+import {TestPrompt} from './prompts';
 
 export interface GeneratedResult {
   modelName: string;
@@ -30,17 +30,13 @@ export interface ValidatedResult extends GeneratedResult {
   validationErrors: string[];
 }
 
-export type IssueSeverity =
-  | "minor"
-  | "significant"
-  | "critical"
-  | "criticalSchema";
+export type IssueSeverity = 'minor' | 'significant' | 'critical' | 'criticalSchema';
 
 export interface EvaluatedResult extends ValidatedResult {
   evaluationResult?: {
     pass: boolean;
     reason: string;
-    issues?: { issue: string; severity: IssueSeverity }[];
+    issues?: {issue: string; severity: IssueSeverity}[];
     overallSeverity?: IssueSeverity;
     evalPrompt?: string;
   };
diff --git a/specification/v0_10/eval/src/utils.ts b/specification/v0_10/eval/src/utils.ts
index aed120e0a..b53fe823a 100644
--- a/specification/v0_10/eval/src/utils.ts
+++ b/specification/v0_10/eval/src/utils.ts
@@ -27,7 +27,7 @@ export function extractJsonFromMarkdown(markdown: string): any[] {
         results.push(JSON.parse(content));
       } catch (error) {
         // If that fails, try parsing as JSONL (line by line)
-        const lines = content.split("\n");
+        const lines = content.split('\n');
         for (const line of lines) {
           if (line.trim()) {
             try {
diff --git a/specification/v0_10/eval/src/validator.ts b/specification/v0_10/eval/src/validator.ts
index bd69120c4..0c02f896b 100644
--- a/specification/v0_10/eval/src/validator.ts
+++ b/specification/v0_10/eval/src/validator.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import Ajv from "ajv/dist/2020";
-import addFormats from "ajv-formats";
-import * as fs from "fs";
-import * as path from "path";
-import * as yaml from "js-yaml";
+import Ajv from 'ajv/dist/2020';
+import addFormats from 'ajv-formats';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as yaml from 'js-yaml';
 
-import { GeneratedResult, ValidatedResult, IssueSeverity } from "./types";
-import { logger } from "./logger";
+import {GeneratedResult, ValidatedResult, IssueSeverity} from './types';
+import {logger} from './logger';
 
 export class Validator {
   private ajv: Ajv;
@@ -33,21 +33,21 @@ export class Validator {
     private outputDir?: string,
   ) {
     // Set strict: false to be lenient with unknown keywords, if any.
-    this.ajv = new Ajv({ allErrors: true, strict: false });
+    this.ajv = new Ajv({allErrors: true, strict: false});
     addFormats(this.ajv);
     for (const [name, schema] of Object.entries(schemas)) {
       this.ajv.addSchema(schema, name);
     }
     this.validateFn = this.ajv.getSchema(
-      "https://a2ui.org/specification/v0_10/server_to_client.json",
+      'https://a2ui.org/specification/v0_10/server_to_client.json',
     );
 
     // Populate basic functions from the catalog schema
     // schemas are keyed by filename in index.ts
-    const catalogSchema = schemas["basic_catalog.json"];
+    const catalogSchema = schemas['basic_catalog.json'];
     if (
       catalogSchema &&
-      typeof catalogSchema.functions === "object" &&
+      typeof catalogSchema.functions === 'object' &&
       catalogSchema.functions !== null
     ) {
       for (const funcName of Object.keys(catalogSchema.functions)) {
@@ -63,9 +63,7 @@ export class Validator {
   }
 
   async run(results: GeneratedResult[]): Promise<ValidatedResult[]> {
-    logger.info(
-      `Starting Phase 2: Schema Validation (${results.length} items)`,
-    );
+    logger.info(`Starting Phase 2: Schema Validation (${results.length} items)`);
     const validatedResults: ValidatedResult[] = [];
     let passedCount = 0;
     let failedCount = 0;
@@ -74,7 +72,7 @@ export class Validator {
 
     for (const result of results) {
       if (result.error || !result.components) {
-        validatedResults.push({ ...result, validationErrors: [] }); // Already failed generation
+        validatedResults.push({...result, validationErrors: []}); // Already failed generation
         continue;
       }
 
@@ -87,29 +85,16 @@ export class Validator {
           // Smart validation: check which key is present and validate against that specific definition
           // to avoid noisy "oneOf" errors.
           let validated = false;
-          const schemaUri =
-            "https://a2ui.org/specification/v0_10/server_to_client.json";
+          const schemaUri = 'https://a2ui.org/specification/v0_10/server_to_client.json';
 
           if (message.createSurface) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/CreateSurfaceMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/CreateSurfaceMessage`, message);
           } else if (message.updateComponents) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/UpdateComponentsMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/UpdateComponentsMessage`, message);
           } else if (message.updateDataModel) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/UpdateDataModelMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/UpdateDataModelMessage`, message);
           } else if (message.deleteSurface) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/DeleteSurfaceMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/DeleteSurfaceMessage`, message);
           } else {
             // Fallback to top-level validation if no known key matches (or if it's empty/invalid structure)
             validated = this.validateFn(message);
@@ -156,7 +141,7 @@ export class Validator {
                 targetedErrors.push({
                   instancePath: path,
                   message: `Unknown or hallucinated component type '${componentName}'`,
-                  params: { component: componentName }
+                  params: {component: componentName},
                 });
                 isValid = true; // prevents further noise collection, we already handled it
               }
@@ -166,7 +151,7 @@ export class Validator {
                   // Prepend the base path so the error correctly identifies where in the message it occurred
                   targetedErrors.push({
                     ...err,
-                    instancePath: `${path}${err.instancePath}`
+                    instancePath: `${path}${err.instancePath}`,
                   });
                 });
               }
@@ -180,7 +165,10 @@ export class Validator {
 
               // If this error happened inside a path we already handled, drop it
               for (const handledPath of handledPaths) {
-                if (err.instancePath === handledPath || err.instancePath.startsWith(`${handledPath}/`)) {
+                if (
+                  err.instancePath === handledPath ||
+                  err.instancePath.startsWith(`${handledPath}/`)
+                ) {
                   return false;
                 }
               }
@@ -208,15 +196,18 @@ export class Validator {
 
                 let msg = `${err.instancePath}${componentNameStr} ${err.message}`;
                 if (err.params && Object.keys(err.params).length > 0) {
-                  msg += " (\n";
+                  msg += ' (\n';
                   for (const [key, value] of Object.entries(err.params)) {
-                    const formattedValue = typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value);
+                    const formattedValue =
+                      typeof value === 'object' && value !== null
+                        ? JSON.stringify(value)
+                        : String(value);
                     msg += `    ${key}: ${formattedValue}\n`;
                   }
-                  msg += "  )";
+                  msg += '  )';
                 }
                 return msg;
-              })
+              }),
             );
           }
         }
@@ -240,34 +231,26 @@ export class Validator {
       });
     }
 
-    logger.info(
-      `Phase 2: Validation Complete. Passed: ${passedCount}, Failed: ${failedCount}`,
-    );
+    logger.info(`Phase 2: Validation Complete. Passed: ${passedCount}, Failed: ${failedCount}`);
     return validatedResults;
   }
 
   private saveFailure(result: GeneratedResult, errors: string[]) {
     if (!this.outputDir) return;
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${result.modelName.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
+    const modelDir = path.join(this.outputDir, `output-${result.modelName.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
     const failureData = {
       pass: false,
-      reason: "Schema validation failure",
-      issues: errors.map((e) => ({
+      reason: 'Schema validation failure',
+      issues: errors.map(e => ({
         issue: e,
-        severity: "criticalSchema" as IssueSeverity,
+        severity: 'criticalSchema' as IssueSeverity,
       })),
-      overallSeverity: "criticalSchema" as IssueSeverity,
+      overallSeverity: 'criticalSchema' as IssueSeverity,
     };
 
     fs.writeFileSync(
-      path.join(
-        detailsDir,
-        `${result.prompt.name}.${result.runNumber}.failed.yaml`,
-      ),
+      path.join(detailsDir, `${result.prompt.name}.${result.runNumber}.failed.yaml`),
       yaml.dump(failureData),
     );
   }
@@ -292,7 +275,7 @@ export class Validator {
         // Check for root component in this message
         if (message.updateComponents.components) {
           for (const comp of message.updateComponents.components) {
-            if (comp.id === "root") {
+            if (comp.id === 'root') {
               hasRootComponent = true;
             }
           }
@@ -307,9 +290,7 @@ export class Validator {
       } else if (message.deleteSurface) {
         this.validateDeleteSurface(message.deleteSurface, errors);
       } else {
-        errors.push(
-          `Unknown message type in output: ${JSON.stringify(message)}`,
-        );
+        errors.push(`Unknown message type in output: ${JSON.stringify(message)}`);
       }
     }
 
@@ -324,7 +305,7 @@ export class Validator {
   }
 
   private validateFunctionCalls(root: any, errors: string[]) {
-    if (!root || typeof root !== "object") return;
+    if (!root || typeof root !== 'object') return;
 
     if (Array.isArray(root)) {
       for (const item of root) {
@@ -336,7 +317,7 @@ export class Validator {
     // Check if it's a FunctionCall
     if (
       root.call &&
-      typeof root.call === "string" &&
+      typeof root.call === 'string' &&
       (Object.keys(root).length === 2 || Object.keys(root).length === 3)
     ) {
       const functionName = root.call;
@@ -363,7 +344,7 @@ export class Validator {
     if (data.catalogId === undefined) {
       errors.push("createSurface must have a 'catalogId' property.");
     }
-    const allowed = ["surfaceId", "catalogId"];
+    const allowed = ['surfaceId', 'catalogId'];
     for (const key in data) {
       if (!allowed.includes(key)) {
         errors.push(`createSurface has unexpected property: ${key}`);
@@ -375,7 +356,7 @@ export class Validator {
     if (data.surfaceId === undefined) {
       errors.push("DeleteSurface must have a 'surfaceId' property.");
     }
-    const allowed = ["surfaceId"];
+    const allowed = ['surfaceId'];
     for (const key in data) {
       if (!allowed.includes(key)) {
         errors.push(`DeleteSurface has unexpected property: ${key}`);
@@ -405,8 +386,7 @@ export class Validator {
       // Smart Component Validation
       if (this.ajv && c.component) {
         const componentType = c.component;
-        const schemaUri =
-          "https://a2ui.org/specification/v0_10/basic_catalog.json";
+        const schemaUri = 'https://a2ui.org/specification/v0_10/basic_catalog.json';
 
         const defRef = `${schemaUri}#/components/${componentType}`;
 
@@ -415,9 +395,7 @@ export class Validator {
           errors.push(
             ...(this.ajv.errors || []).map(
               (err: any) =>
-                `${err.instancePath} ${err.message} (in component '${
-                  c.id || "unknown"
-                }')`,
+                `${err.instancePath} ${err.message} (in component '${c.id || 'unknown'}')`,
             ),
           );
         }
@@ -437,11 +415,7 @@ export class Validator {
     // If path is missing and value is missing, it deletes the entire root (valid but rare).
   }
 
-  private validateComponent(
-    component: any,
-    allIds: Set<string>,
-    errors: string[],
-  ) {
+  private validateComponent(component: any, allIds: Set<string>, errors: string[]) {
     const id = component.id;
     if (!id) {
       errors.push(`Component is missing an 'id'.`);
@@ -449,7 +423,7 @@ export class Validator {
     }
 
     const componentType = component.component;
-    if (!componentType || typeof componentType !== "string") {
+    if (!componentType || typeof componentType !== 'string') {
       errors.push(`Component '${id}' is missing 'component' property.`);
       return;
     }
@@ -460,44 +434,39 @@ export class Validator {
     const checkRefs = (ids: (string | undefined)[]) => {
       for (const id of ids) {
         if (id && !allIds.has(id)) {
-          errors.push(
-            `Component ${JSON.stringify(id)} references non-existent component ID.`,
-          );
+          errors.push(`Component ${JSON.stringify(id)} references non-existent component ID.`);
         }
       }
     };
 
     switch (componentType) {
-      case "Row":
-      case "Column":
-      case "List":
+      case 'Row':
+      case 'Column':
+      case 'List':
         if (component.children) {
           if (Array.isArray(component.children)) {
             checkRefs(component.children);
-          } else if (
-            typeof component.children === "object" &&
-            component.children !== null
-          ) {
+          } else if (typeof component.children === 'object' && component.children !== null) {
             if (component.children.componentId) {
               checkRefs([component.children.componentId]);
             }
           }
         }
         break;
-      case "Card":
+      case 'Card':
         checkRefs([component.child]);
         break;
-      case "Tabs":
+      case 'Tabs':
         if (component.tabs && Array.isArray(component.tabs)) {
           component.tabs.forEach((tab: any) => {
             checkRefs([tab.child]);
           });
         }
         break;
-      case "Modal":
+      case 'Modal':
         checkRefs([component.trigger, component.content]);
         break;
-      case "Button":
+      case 'Button':
         checkRefs([component.child]);
         break;
     }
diff --git a/specification/v0_10/eval/tsconfig.json b/specification/v0_10/eval/tsconfig.json
index cb2bc5954..12f02b5f9 100644
--- a/specification/v0_10/eval/tsconfig.json
+++ b/specification/v0_10/eval/tsconfig.json
@@ -9,4 +9,4 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
   }
-}
\ No newline at end of file
+}
diff --git a/specification/v0_10/json/basic_catalog.json b/specification/v0_10/json/basic_catalog.json
index 4da0b885b..fdf602abd 100644
--- a/specification/v0_10/json/basic_catalog.json
+++ b/specification/v0_10/json/basic_catalog.json
@@ -8,12 +8,12 @@
     "Text": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Text" },
+            "component": {"const": "Text"},
             "text": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The text content to display. While simple Markdown formatting is supported (i.e. without HTML, images, or links), utilizing dedicated UI components is generally preferred for a richer and more structured presentation."
@@ -33,12 +33,12 @@
     "Image": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Image" },
+            "component": {"const": "Image"},
             "url": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The URL of the image to display."
@@ -56,14 +56,7 @@
             "variant": {
               "type": "string",
               "description": "A hint for the image size and style.",
-              "enum": [
-                "icon",
-                "avatar",
-                "smallFeature",
-                "mediumFeature",
-                "largeFeature",
-                "header"
-              ],
+              "enum": ["icon", "avatar", "smallFeature", "mediumFeature", "largeFeature", "header"],
               "default": "mediumFeature"
             }
           },
@@ -75,12 +68,12 @@
     "Icon": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Icon" },
+            "component": {"const": "Icon"},
             "name": {
               "description": "The name of the icon to display.",
               "oneOf": [
@@ -151,7 +144,7 @@
                 {
                   "type": "object",
                   "properties": {
-                    "path": { "type": "string" }
+                    "path": {"type": "string"}
                   },
                   "required": ["path"],
                   "additionalProperties": false
@@ -167,12 +160,12 @@
     "Video": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Video" },
+            "component": {"const": "Video"},
             "url": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The URL of the video to display."
@@ -186,12 +179,12 @@
     "AudioPlayer": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "AudioPlayer" },
+            "component": {"const": "AudioPlayer"},
             "url": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The URL of the audio to be played."
@@ -209,13 +202,13 @@
     "Row": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "description": "A layout component that arranges its children horizontally. To create a grid layout, nest Columns within this Row.",
           "properties": {
-            "component": { "const": "Row" },
+            "component": {"const": "Row"},
             "children": {
               "description": "Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID.",
               "$ref": "common_types.json#/$defs/ChildList"
@@ -249,13 +242,13 @@
     "Column": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "description": "A layout component that arranges its children vertically. To create a grid layout, nest Rows within this Column.",
           "properties": {
-            "component": { "const": "Column" },
+            "component": {"const": "Column"},
             "children": {
               "description": "Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID.",
               "$ref": "common_types.json#/$defs/ChildList"
@@ -289,12 +282,12 @@
     "List": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "List" },
+            "component": {"const": "List"},
             "children": {
               "description": "Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list.",
               "$ref": "common_types.json#/$defs/ChildList"
@@ -320,12 +313,12 @@
     "Card": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Card" },
+            "component": {"const": "Card"},
             "child": {
               "$ref": "common_types.json#/$defs/ComponentId",
               "description": "The ID of the single child component to be rendered inside the card. To display multiple elements, you MUST wrap them in a layout component (like Column or Row) and pass that container's ID here. Do NOT pass multiple IDs or a non-existent ID. Do NOT define the child component inline."
@@ -339,12 +332,12 @@
     "Tabs": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Tabs" },
+            "component": {"const": "Tabs"},
             "tabs": {
               "type": "array",
               "description": "An array of objects, where each object defines a tab with a title and a child component.",
@@ -374,12 +367,12 @@
     "Modal": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Modal" },
+            "component": {"const": "Modal"},
             "trigger": {
               "$ref": "common_types.json#/$defs/ComponentId",
               "description": "The ID of the component that opens the modal when interacted with (e.g., a button). Do NOT define the component inline."
@@ -397,12 +390,12 @@
     "Divider": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Divider" },
+            "component": {"const": "Divider"},
             "axis": {
               "type": "string",
               "description": "The orientation of the divider.",
@@ -418,13 +411,13 @@
     "Button": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "common_types.json#/$defs/Checkable" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Button" },
+            "component": {"const": "Button"},
             "child": {
               "$ref": "common_types.json#/$defs/ComponentId",
               "description": "The ID of the child component. Use a 'Text' component for a labeled button. Only use an 'Icon' if the requirements explicitly ask for an icon-only button. Do NOT define the child component inline."
@@ -447,13 +440,13 @@
     "TextField": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "common_types.json#/$defs/Checkable" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "TextField" },
+            "component": {"const": "TextField"},
             "label": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The text label for the input field."
@@ -477,13 +470,13 @@
     "CheckBox": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "common_types.json#/$defs/Checkable" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "CheckBox" },
+            "component": {"const": "CheckBox"},
             "label": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The text to display next to the checkbox."
@@ -501,14 +494,14 @@
     "ChoicePicker": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "common_types.json#/$defs/Checkable" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "description": "A component that allows selecting one or more options from a list.",
           "properties": {
-            "component": { "const": "ChoicePicker" },
+            "component": {"const": "ChoicePicker"},
             "label": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The label for the group of options."
@@ -562,13 +555,13 @@
     "Slider": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "common_types.json#/$defs/Checkable" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Slider" },
+            "component": {"const": "Slider"},
             "label": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The label for the slider."
@@ -595,13 +588,13 @@
     "DateTimeInput": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "common_types.json#/$defs/Checkable" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "DateTimeInput" },
+            "component": {"const": "DateTimeInput"},
             "value": {
               "$ref": "common_types.json#/$defs/DynamicString",
               "description": "The selected date and/or time value in ISO 8601 format. If not yet set, initialize with an empty string."
@@ -714,7 +707,7 @@
         "args": {
           "type": "object",
           "properties": {
-            "value": { "$ref": "common_types.json#/$defs/DynamicString" },
+            "value": {"$ref": "common_types.json#/$defs/DynamicString"},
             "pattern": {
               "type": "string",
               "description": "The regex pattern to match against."
@@ -740,7 +733,7 @@
         "args": {
           "type": "object",
           "properties": {
-            "value": { "$ref": "common_types.json#/$defs/DynamicString" },
+            "value": {"$ref": "common_types.json#/$defs/DynamicString"},
             "min": {
               "type": "integer",
               "minimum": 0,
@@ -753,7 +746,7 @@
             }
           },
           "required": ["value"],
-          "anyOf": [{ "required": ["min"] }, { "required": ["max"] }],
+          "anyOf": [{"required": ["min"]}, {"required": ["max"]}],
           "unevaluatedProperties": false
         },
         "returnType": {
@@ -773,7 +766,7 @@
         "args": {
           "type": "object",
           "properties": {
-            "value": { "$ref": "common_types.json#/$defs/DynamicNumber" },
+            "value": {"$ref": "common_types.json#/$defs/DynamicNumber"},
             "min": {
               "type": "number",
               "description": "The minimum allowed value."
@@ -784,7 +777,7 @@
             }
           },
           "required": ["value"],
-          "anyOf": [{ "required": ["min"] }, { "required": ["max"] }],
+          "anyOf": [{"required": ["min"]}, {"required": ["max"]}],
           "unevaluatedProperties": false
         },
         "returnType": {
@@ -804,7 +797,7 @@
         "args": {
           "type": "object",
           "properties": {
-            "value": { "$ref": "common_types.json#/$defs/DynamicString" }
+            "value": {"$ref": "common_types.json#/$defs/DynamicString"}
           },
           "required": ["value"],
           "unevaluatedProperties": false
@@ -826,7 +819,7 @@
         "args": {
           "type": "object",
           "properties": {
-            "value": { "$ref": "common_types.json#/$defs/DynamicString" }
+            "value": {"$ref": "common_types.json#/$defs/DynamicString"}
           },
           "required": ["value"],
           "unevaluatedProperties": false
@@ -1128,24 +1121,24 @@
     },
     "anyComponent": {
       "oneOf": [
-        { "$ref": "#/components/Text" },
-        { "$ref": "#/components/Image" },
-        { "$ref": "#/components/Icon" },
-        { "$ref": "#/components/Video" },
-        { "$ref": "#/components/AudioPlayer" },
-        { "$ref": "#/components/Row" },
-        { "$ref": "#/components/Column" },
-        { "$ref": "#/components/List" },
-        { "$ref": "#/components/Card" },
-        { "$ref": "#/components/Tabs" },
-        { "$ref": "#/components/Modal" },
-        { "$ref": "#/components/Divider" },
-        { "$ref": "#/components/Button" },
-        { "$ref": "#/components/TextField" },
-        { "$ref": "#/components/CheckBox" },
-        { "$ref": "#/components/ChoicePicker" },
-        { "$ref": "#/components/Slider" },
-        { "$ref": "#/components/DateTimeInput" }
+        {"$ref": "#/components/Text"},
+        {"$ref": "#/components/Image"},
+        {"$ref": "#/components/Icon"},
+        {"$ref": "#/components/Video"},
+        {"$ref": "#/components/AudioPlayer"},
+        {"$ref": "#/components/Row"},
+        {"$ref": "#/components/Column"},
+        {"$ref": "#/components/List"},
+        {"$ref": "#/components/Card"},
+        {"$ref": "#/components/Tabs"},
+        {"$ref": "#/components/Modal"},
+        {"$ref": "#/components/Divider"},
+        {"$ref": "#/components/Button"},
+        {"$ref": "#/components/TextField"},
+        {"$ref": "#/components/CheckBox"},
+        {"$ref": "#/components/ChoicePicker"},
+        {"$ref": "#/components/Slider"},
+        {"$ref": "#/components/DateTimeInput"}
       ],
       "discriminator": {
         "propertyName": "component"
@@ -1153,20 +1146,20 @@
     },
     "anyFunction": {
       "oneOf": [
-        { "$ref": "#/functions/required" },
-        { "$ref": "#/functions/regex" },
-        { "$ref": "#/functions/length" },
-        { "$ref": "#/functions/numeric" },
-        { "$ref": "#/functions/email" },
-        { "$ref": "#/functions/formatString" },
-        { "$ref": "#/functions/formatNumber" },
-        { "$ref": "#/functions/formatCurrency" },
-        { "$ref": "#/functions/formatDate" },
-        { "$ref": "#/functions/pluralize" },
-        { "$ref": "#/functions/openUrl" },
-        { "$ref": "#/functions/and" },
-        { "$ref": "#/functions/or" },
-        { "$ref": "#/functions/not" }
+        {"$ref": "#/functions/required"},
+        {"$ref": "#/functions/regex"},
+        {"$ref": "#/functions/length"},
+        {"$ref": "#/functions/numeric"},
+        {"$ref": "#/functions/email"},
+        {"$ref": "#/functions/formatString"},
+        {"$ref": "#/functions/formatNumber"},
+        {"$ref": "#/functions/formatCurrency"},
+        {"$ref": "#/functions/formatDate"},
+        {"$ref": "#/functions/pluralize"},
+        {"$ref": "#/functions/openUrl"},
+        {"$ref": "#/functions/and"},
+        {"$ref": "#/functions/or"},
+        {"$ref": "#/functions/not"}
       ]
     }
   }
diff --git a/specification/v0_10/json/client_capabilities.json b/specification/v0_10/json/client_capabilities.json
index c5122d2aa..9b1eeb48b 100644
--- a/specification/v0_10/json/client_capabilities.json
+++ b/specification/v0_10/json/client_capabilities.json
@@ -12,12 +12,12 @@
         "supportedCatalogIds": {
           "type": "array",
           "description": "The URI of each of the component and function catalogs that is supported by the client.",
-          "items": { "type": "string" }
+          "items": {"type": "string"}
         },
         "inlineCatalogs": {
           "type": "array",
           "description": "An array of inline catalog definitions, which can contain both components and functions. This should only be provided if the agent declares 'acceptsInlineCatalogs: true' in its capabilities.",
-          "items": { "$ref": "#/$defs/Catalog" }
+          "items": {"$ref": "#/$defs/Catalog"}
         }
       },
       "required": ["supportedCatalogIds"]
@@ -44,15 +44,7 @@
         },
         "returnType": {
           "type": "string",
-          "enum": [
-            "string",
-            "number",
-            "boolean",
-            "array",
-            "object",
-            "any",
-            "void"
-          ],
+          "enum": ["string", "number", "boolean", "array", "object", "any", "void"],
           "description": "The type of value this function returns."
         }
       },
diff --git a/specification/v0_10/json/client_to_server.json b/specification/v0_10/json/client_to_server.json
index 39580c620..391c8d19f 100644
--- a/specification/v0_10/json/client_to_server.json
+++ b/specification/v0_10/json/client_to_server.json
@@ -46,13 +46,7 @@
           "description": "Unique ID for this action call. Only needed if wantResponse is true."
         }
       },
-      "required": [
-        "name",
-        "surfaceId",
-        "sourceComponentId",
-        "timestamp",
-        "context"
-      ]
+      "required": ["name", "surfaceId", "sourceComponentId", "timestamp", "context"]
     },
     "functionResponse": {
       "properties": {
@@ -66,14 +60,7 @@
         },
         "value": {
           "description": "The return value of the function invocation.",
-          "type": [
-            "string",
-            "number",
-            "boolean",
-            "array",
-            "object",
-            "null"
-          ]
+          "type": ["string", "number", "boolean", "array", "object", "null"]
         }
       },
       "required": ["functionCallId", "call", "value"],
diff --git a/specification/v0_10/json/client_to_server_list_wrapper.json b/specification/v0_10/json/client_to_server_list_wrapper.json
index 95047c190..b9e1229e4 100644
--- a/specification/v0_10/json/client_to_server_list_wrapper.json
+++ b/specification/v0_10/json/client_to_server_list_wrapper.json
@@ -10,7 +10,5 @@
     }
   },
   "additionalProperties": false,
-  "required": [
-    "messages"
-  ]
+  "required": ["messages"]
 }
diff --git a/specification/v0_10/json/common_types.json b/specification/v0_10/json/common_types.json
index 85bececdd..58fb0558c 100644
--- a/specification/v0_10/json/common_types.json
+++ b/specification/v0_10/json/common_types.json
@@ -207,11 +207,7 @@
       "properties": {
         "callableFrom": {
           "description": "Specifies where this function can be invoked from.",
-          "enum": [
-            "clientOnly",
-            "remoteOnly",
-            "clientOrRemote"
-          ],
+          "enum": ["clientOnly", "remoteOnly", "clientOrRemote"],
           "default": "clientOnly"
         },
         "call": {
@@ -235,21 +231,12 @@
         },
         "returnType": {
           "description": "The expected return type of the function call.",
-          "enum": [
-            "array",
-            "boolean",
-            "number",
-            "object",
-            "string",
-            "void"
-          ],
+          "enum": ["array", "boolean", "number", "object", "string", "void"],
           "default": "boolean"
         }
       },
       "required": ["call"],
-      "oneOf": [
-        { "$ref": "catalog.json#/$defs/anyFunction" }
-      ]
+      "oneOf": [{"$ref": "catalog.json#/$defs/anyFunction"}]
     },
     "CheckRule": {
       "type": "object",
diff --git a/specification/v0_10/json/server_capabilities.json b/specification/v0_10/json/server_capabilities.json
index bc2fa66dc..03e5a46d5 100644
--- a/specification/v0_10/json/server_capabilities.json
+++ b/specification/v0_10/json/server_capabilities.json
@@ -12,7 +12,7 @@
         "supportedCatalogIds": {
           "type": "array",
           "description": "An array of strings, where each string is an ID identifying a Catalog Definition Schema that the server can generate. This is not necessarily a resolvable URI.",
-          "items": { "type": "string" }
+          "items": {"type": "string"}
         },
         "acceptsInlineCatalogs": {
           "type": "boolean",
diff --git a/specification/v0_10/json/server_to_client.json b/specification/v0_10/json/server_to_client.json
index 6df90d66b..780a55530 100644
--- a/specification/v0_10/json/server_to_client.json
+++ b/specification/v0_10/json/server_to_client.json
@@ -5,12 +5,12 @@
   "description": "Describes a JSON payload for an A2UI (Agent to UI) message, which is used to dynamically construct and update user interfaces.",
   "type": "object",
   "oneOf": [
-    { "$ref": "#/$defs/CreateSurfaceMessage" },
-    { "$ref": "#/$defs/UpdateComponentsMessage" },
-    { "$ref": "#/$defs/UpdateDataModelMessage" },
-    { "$ref": "#/$defs/DeleteSurfaceMessage" },
-    { "$ref": "#/$defs/CallFunctionMessage" },
-    { "$ref": "#/$defs/ActionResponseMessage" }
+    {"$ref": "#/$defs/CreateSurfaceMessage"},
+    {"$ref": "#/$defs/UpdateComponentsMessage"},
+    {"$ref": "#/$defs/UpdateDataModelMessage"},
+    {"$ref": "#/$defs/DeleteSurfaceMessage"},
+    {"$ref": "#/$defs/CallFunctionMessage"},
+    {"$ref": "#/$defs/ActionResponseMessage"}
   ],
   "$defs": {
     "CreateSurfaceMessage": {
@@ -153,10 +153,7 @@
               "properties": {
                 "callableFrom": {
                   "description": "Specifies where this function can be invoked from.",
-                  "enum": [
-                    "remoteOnly",
-                    "clientOrRemote"
-                  ]
+                  "enum": ["remoteOnly", "clientOrRemote"]
                 }
               }
             }
@@ -184,26 +181,23 @@
           "properties": {
             "value": {
               "description": "The return value of the action.",
-              "type": [ "string", "number", "boolean", "array", "object", "null" ]
+              "type": ["string", "number", "boolean", "array", "object", "null"]
             },
             "error": {
               "type": "object",
               "properties": {
-                "code": { "type": "string" },
-                "message": { "type": "string" }
+                "code": {"type": "string"},
+                "message": {"type": "string"}
               },
-              "required": [ "code", "message" ],
+              "required": ["code", "message"],
               "additionalProperties": false
             }
           },
-          "oneOf": [
-            { "required": [ "value" ] },
-            { "required": [ "error" ] }
-          ],
+          "oneOf": [{"required": ["value"]}, {"required": ["error"]}],
           "additionalProperties": false
         }
       },
-      "required": [ "version", "actionResponse", "actionId" ],
+      "required": ["version", "actionResponse", "actionId"],
       "additionalProperties": false
     }
   }
diff --git a/specification/v0_10/json/server_to_client_list_wrapper.json b/specification/v0_10/json/server_to_client_list_wrapper.json
index 60e094bfb..e2993f3df 100644
--- a/specification/v0_10/json/server_to_client_list_wrapper.json
+++ b/specification/v0_10/json/server_to_client_list_wrapper.json
@@ -10,7 +10,5 @@
     }
   },
   "additionalProperties": false,
-  "required": [
-    "messages"
-  ]
+  "required": ["messages"]
 }
diff --git a/specification/v0_10/test/README.md b/specification/v0_10/test/README.md
index 608142780..fe3cd2130 100644
--- a/specification/v0_10/test/README.md
+++ b/specification/v0_10/test/README.md
@@ -25,6 +25,7 @@ python3 specification/v0_10/test/run_tests.py
 ```
 
 The script will:
+
 1. Load all schemas from `specification/v0_10/json`.
 2. Execute all test suites defined in `specification/v0_10/test/cases/*.json`.
 3. Report pass/fail status for each test case.
diff --git a/specification/v0_10/test/cases/button_checks.json b/specification/v0_10/test/cases/button_checks.json
index eef6e0ebb..a6780c6e9 100644
--- a/specification/v0_10/test/cases/button_checks.json
+++ b/specification/v0_10/test/cases/button_checks.json
@@ -13,7 +13,7 @@
               "id": "btn1",
               "component": "Button",
               "child": "txt1",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "checks": [
                 {
                   "condition": {
@@ -22,7 +22,7 @@
                       "values": [
                         {
                           "call": "required",
-                          "args": { "value": { "path": "/formData/terms" } },
+                          "args": {"value": {"path": "/formData/terms"}},
                           "returnType": "boolean"
                         },
                         {
@@ -31,12 +31,12 @@
                             "values": [
                               {
                                 "call": "required",
-                                "args": { "value": { "path": "/formData/email" } },
+                                "args": {"value": {"path": "/formData/email"}},
                                 "returnType": "boolean"
                               },
                               {
                                 "call": "required",
-                                "args": { "value": { "path": "/formData/phone" } },
+                                "args": {"value": {"path": "/formData/phone"}},
                                 "returnType": "boolean"
                               }
                             ]
@@ -51,7 +51,7 @@
                 }
               ]
             },
-            { "id": "txt1", "component": "Text", "text": "Submit" }
+            {"id": "txt1", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -68,10 +68,10 @@
               "id": "btn2",
               "component": "Button",
               "child": "txt2",
-              "action": { "event": { "name": "submit" } },
-              "enabled": { "path": "/some/path" }
+              "action": {"event": {"name": "submit"}},
+              "enabled": {"path": "/some/path"}
             },
-            { "id": "txt2", "component": "Text", "text": "Submit" }
+            {"id": "txt2", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -88,19 +88,19 @@
               "id": "btn3",
               "component": "Button",
               "child": "txt3",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": "foo" },
+                    "args": {"value": "foo"},
                     "returnType": "not_a_valid_type"
                   },
                   "message": "Msg"
                 }
               ]
             },
-            { "id": "txt3", "component": "Text", "text": "Submit" }
+            {"id": "txt3", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -117,12 +117,12 @@
               "id": "btn4",
               "component": "Button",
               "child": "txt4",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "checks": [
                 {
                   "condition": {
                     "call": "and",
-                    "args": { "values": [] },
+                    "args": {"values": []},
                     "returnType": "boolean"
                   },
                   "message": "foo",
@@ -130,7 +130,7 @@
                 }
               ]
             },
-            { "id": "txt4", "component": "Text", "text": "Submit" }
+            {"id": "txt4", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -147,10 +147,10 @@
               "id": "btn_primary",
               "component": "Button",
               "child": "txt_primary",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "variant": "primary"
             },
-            { "id": "txt_primary", "component": "Text", "text": "Submit" }
+            {"id": "txt_primary", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -167,10 +167,10 @@
               "id": "btn_borderless",
               "component": "Button",
               "child": "txt_borderless",
-              "action": { "event": { "name": "cancel" } },
+              "action": {"event": {"name": "cancel"}},
               "variant": "borderless"
             },
-            { "id": "txt_borderless", "component": "Text", "text": "Cancel" }
+            {"id": "txt_borderless", "component": "Text", "text": "Cancel"}
           ]
         }
       }
@@ -187,10 +187,10 @@
               "id": "btn_dep",
               "component": "Button",
               "child": "txt_dep",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "primary": true
             },
-            { "id": "txt_dep", "component": "Text", "text": "Submit" }
+            {"id": "txt_dep", "component": "Text", "text": "Submit"}
           ]
         }
       }
diff --git a/specification/v0_10/test/cases/call_function_message.json b/specification/v0_10/test/cases/call_function_message.json
index 5be22de0d..edd4ca208 100644
--- a/specification/v0_10/test/cases/call_function_message.json
+++ b/specification/v0_10/test/cases/call_function_message.json
@@ -56,7 +56,7 @@
         "version": "v0.10",
         "callFunction": {
           "call": "required",
-          "args": { "value": "bar" },
+          "args": {"value": "bar"},
           "returnType": "boolean",
           "callableFrom": "clientOrRemote"
         }
@@ -77,7 +77,7 @@
         "version": "v0.10",
         "callFunction": {
           "call": "required",
-          "args": { "value": "bar" },
+          "args": {"value": "bar"},
           "returnType": "boolean",
           "callableFrom": "clientOnly"
         },
@@ -91,7 +91,7 @@
         "version": "v0.10",
         "callFunction": {
           "call": "required",
-          "args": { "value": "bar" },
+          "args": {"value": "bar"},
           "returnType": "boolean"
         },
         "functionCallId": "unique-call-id-126b"
@@ -105,7 +105,7 @@
         "callFunction": {
           "call": "required",
           "args": {
-            "value": { "nested": "object" }
+            "value": {"nested": "object"}
           },
           "returnType": "boolean",
           "callableFrom": "clientOrRemote"
@@ -121,7 +121,7 @@
         "callFunction": {
           "call": "required",
           "args": {
-            "value": [{ "nested": "object" }]
+            "value": [{"nested": "object"}]
           },
           "returnType": "boolean",
           "callableFrom": "clientOrRemote"
@@ -136,7 +136,7 @@
         "version": "v0.10",
         "callFunction": {
           "call": "required",
-          "args": { "value": "bar" },
+          "args": {"value": "bar"},
           "returnType": "object",
           "callableFrom": "clientOrRemote"
         },
diff --git a/specification/v0_10/test/cases/checkable_components.json b/specification/v0_10/test/cases/checkable_components.json
index 1a5c9bd9a..7c6dbc584 100644
--- a/specification/v0_10/test/cases/checkable_components.json
+++ b/specification/v0_10/test/cases/checkable_components.json
@@ -13,12 +13,12 @@
               "id": "tf1",
               "component": "TextField",
               "label": "Email",
-              "value": { "path": "/formData/email" },
+              "value": {"path": "/formData/email"},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/email" } },
+                    "args": {"value": {"path": "/formData/email"}},
                     "returnType": "boolean"
                   },
                   "message": "Email is required"
@@ -26,7 +26,7 @@
                 {
                   "condition": {
                     "call": "email",
-                    "args": { "value": { "path": "/formData/email" } },
+                    "args": {"value": {"path": "/formData/email"}},
                     "returnType": "boolean"
                   },
                   "message": "Must be valid email"
@@ -51,16 +51,16 @@
               "label": "Interests",
               "variant": "multipleSelection",
               "options": [
-                { "label": "Code", "value": "code" },
-                { "label": "Design", "value": "design" }
+                {"label": "Code", "value": "code"},
+                {"label": "Design", "value": "design"}
               ],
-              "value": { "path": "/formData/interests" },
+              "value": {"path": "/formData/interests"},
               "checks": [
                 {
                   "condition": {
                     "call": "length",
                     "args": {
-                      "value": { "path": "/formData/interests" },
+                      "value": {"path": "/formData/interests"},
                       "min": 1
                     },
                     "returnType": "boolean"
@@ -87,13 +87,13 @@
               "label": "Rating",
               "min": 1,
               "max": 5,
-              "value": { "path": "/formData/rating" },
+              "value": {"path": "/formData/rating"},
               "checks": [
                 {
                   "condition": {
                     "call": "numeric",
                     "args": {
-                      "value": { "path": "/formData/rating" },
+                      "value": {"path": "/formData/rating"},
                       "min": 3
                     },
                     "returnType": "boolean"
@@ -118,12 +118,12 @@
               "id": "cb1",
               "component": "CheckBox",
               "label": "I agree",
-              "value": { "path": "/formData/agreed" },
+              "value": {"path": "/formData/agreed"},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/agreed" } },
+                    "args": {"value": {"path": "/formData/agreed"}},
                     "returnType": "boolean"
                   },
                   "message": "Must agree"
@@ -146,12 +146,12 @@
               "id": "dt1",
               "component": "DateTimeInput",
               "label": "Date",
-              "value": { "path": "/formData/date" },
+              "value": {"path": "/formData/date"},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/date" } },
+                    "args": {"value": {"path": "/formData/date"}},
                     "returnType": "boolean"
                   },
                   "message": "Date required"
@@ -174,13 +174,13 @@
               "id": "tf_regex",
               "component": "TextField",
               "label": "Phone",
-              "value": { "path": "/formData/phone" },
+              "value": {"path": "/formData/phone"},
               "checks": [
                 {
                   "condition": {
                     "call": "regex",
                     "args": {
-                      "value": { "path": "/formData/phone" },
+                      "value": {"path": "/formData/phone"},
                       "pattern": "^\\d{10}$"
                     },
                     "returnType": "boolean"
@@ -205,13 +205,13 @@
               "id": "tf_len",
               "component": "TextField",
               "label": "Password",
-              "value": { "path": "/formData/pw" },
+              "value": {"path": "/formData/pw"},
               "checks": [
                 {
                   "condition": {
                     "call": "length",
                     "args": {
-                      "value": { "path": "/formData/pw" },
+                      "value": {"path": "/formData/pw"},
                       "min": 8,
                       "max": 64
                     },
@@ -239,13 +239,13 @@
               "label": "Score",
               "min": 0,
               "max": 100,
-              "value": { "path": "/formData/score" },
+              "value": {"path": "/formData/score"},
               "checks": [
                 {
                   "condition": {
                     "call": "numeric",
                     "args": {
-                      "value": { "path": "/formData/score" },
+                      "value": {"path": "/formData/score"},
                       "min": 0,
                       "max": 100
                     },
@@ -271,7 +271,7 @@
               "id": "tf_complex",
               "component": "TextField",
               "label": "Secret Code",
-              "value": { "path": "/formData/code" },
+              "value": {"path": "/formData/code"},
               "checks": [
                 {
                   "condition": {
@@ -280,7 +280,7 @@
                       "values": [
                         {
                           "call": "required",
-                          "args": { "value": { "path": "/formData/code" } },
+                          "args": {"value": {"path": "/formData/code"}},
                           "returnType": "boolean"
                         },
                         {
@@ -290,7 +290,7 @@
                               {
                                 "call": "regex",
                                 "args": {
-                                  "value": { "path": "/formData/code" },
+                                  "value": {"path": "/formData/code"},
                                   "pattern": "^[A-Z]"
                                 },
                                 "returnType": "boolean"
@@ -301,7 +301,7 @@
                                   "value": {
                                     "call": "regex",
                                     "args": {
-                                      "value": { "path": "/formData/code" },
+                                      "value": {"path": "/formData/code"},
                                       "pattern": "^[0-9]"
                                     },
                                     "returnType": "boolean"
@@ -337,12 +337,12 @@
               "id": "tf_invalid",
               "component": "TextField",
               "label": "Email",
-              "value": { "path": "/formData/email" },
+              "value": {"path": "/formData/email"},
               "checks": [
                 {
                   "condition": {
                     "call": "email",
-                    "args": { "value": { "path": "/formData/email" } },
+                    "args": {"value": {"path": "/formData/email"}},
                     "returnType": "boolean"
                   }
                 }
@@ -364,12 +364,12 @@
               "id": "tf_wrong_type",
               "component": "TextField",
               "label": "Name",
-              "value": { "path": "/formData/name" },
+              "value": {"path": "/formData/name"},
               "checks": [
                 {
                   "condition": {
                     "call": "formatString",
-                    "args": { "value": "Hello ${/formData/name}" },
+                    "args": {"value": "Hello ${/formData/name}"},
                     "returnType": "string"
                   },
                   "message": "This should fail because returnType is string, not boolean"
@@ -394,17 +394,17 @@
               "label": "Interests",
               "variant": "multipleSelection",
               "options": [
-                { "label": "A", "value": "a" },
-                { "label": "B", "value": "b" },
-                { "label": "C", "value": "c" }
+                {"label": "A", "value": "a"},
+                {"label": "B", "value": "b"},
+                {"label": "C", "value": "c"}
               ],
-              "value": { "path": "/formData/interests" },
+              "value": {"path": "/formData/interests"},
               "checks": [
                 {
                   "condition": {
                     "call": "length",
                     "args": {
-                      "value": { "path": "/formData/interests" },
+                      "value": {"path": "/formData/interests"},
                       "min": 2,
                       "max": 2
                     },
diff --git a/specification/v0_10/test/cases/client_messages.json b/specification/v0_10/test/cases/client_messages.json
index 774e0601f..6009d8e32 100644
--- a/specification/v0_10/test/cases/client_messages.json
+++ b/specification/v0_10/test/cases/client_messages.json
@@ -1,7 +1,6 @@
 {
   "schema": "client_to_server.json",
   "tests": [
-
     {
       "description": "Valid action message",
       "valid": true,
diff --git a/specification/v0_10/test/cases/contact_form_example_test.json b/specification/v0_10/test/cases/contact_form_example_test.json
index 73a338330..581d2f651 100644
--- a/specification/v0_10/test/cases/contact_form_example_test.json
+++ b/specification/v0_10/test/cases/contact_form_example_test.json
@@ -46,7 +46,7 @@
               "id": "first_name_field",
               "component": "TextField",
               "label": "First Name",
-              "value": { "path": "/contact/firstName" },
+              "value": {"path": "/contact/firstName"},
               "variant": "shortText"
             },
             {
@@ -58,41 +58,41 @@
               "id": "last_name_field",
               "component": "TextField",
               "label": "Last Name",
-              "value": { "path": "/contact/lastName" },
+              "value": {"path": "/contact/lastName"},
               "variant": "shortText"
             },
-            { "id": "email_label", "component": "Text", "text": "Email" },
+            {"id": "email_label", "component": "Text", "text": "Email"},
             {
               "id": "email_field",
               "component": "TextField",
               "label": "Email",
-              "value": { "path": "/contact/email" },
+              "value": {"path": "/contact/email"},
               "variant": "shortText",
               "checks": [
                 {
                   "condition": {
                     "call": "email",
-                    "args": { "value": { "path": "/contact/email" } },
+                    "args": {"value": {"path": "/contact/email"}},
                     "returnType": "boolean"
                   },
                   "message": "Please enter a valid email address."
                 }
               ]
             },
-            { "id": "phone_label", "component": "Text", "text": "Phone" },
+            {"id": "phone_label", "component": "Text", "text": "Phone"},
             {
               "id": "phone_field",
               "component": "TextField",
               "label": "Phone",
-              "value": { "path": "/contact/phone" },
+              "value": {"path": "/contact/phone"},
               "variant": "shortText"
             },
-            { "id": "notes_label", "component": "Text", "text": "Notes" },
+            {"id": "notes_label", "component": "Text", "text": "Notes"},
             {
               "id": "notes_field",
               "component": "TextField",
               "label": "Notes",
-              "value": { "path": "/contact/notes" },
+              "value": {"path": "/contact/notes"},
               "variant": "longText"
             },
             {
@@ -105,7 +105,7 @@
               "component": "Button",
               "child": "submit_button_label",
               "variant": "primary",
-              "action": { "event": { "name": "submitContactForm" } }
+              "action": {"event": {"name": "submitContactForm"}}
             }
           ]
         }
diff --git a/specification/v0_10/test/cases/function_catalog_validation.json b/specification/v0_10/test/cases/function_catalog_validation.json
index fb6d964ec..5e77d2169 100644
--- a/specification/v0_10/test/cases/function_catalog_validation.json
+++ b/specification/v0_10/test/cases/function_catalog_validation.json
@@ -18,7 +18,7 @@
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/val" } },
+                    "args": {"value": {"path": "/val"}},
                     "returnType": "boolean"
                   },
                   "message": "Required"
@@ -42,7 +42,7 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "required", "args": {} }, "message": "Msg" }]
+              "checks": [{"condition": {"call": "required", "args": {}}, "message": "Msg"}]
             }
           ]
         }
@@ -61,7 +61,16 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "required", "args": {"value": {"path": "/val"}}, "returnType": "string" }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "required",
+                    "args": {"value": {"path": "/val"}},
+                    "returnType": "string"
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -84,7 +93,7 @@
                 {
                   "condition": {
                     "call": "regex",
-                    "args": { "value": { "path": "/val" }, "pattern": "^abc$" }
+                    "args": {"value": {"path": "/val"}, "pattern": "^abc$"}
                   },
                   "message": "Match"
                 }
@@ -107,7 +116,12 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "regex", "args": { "value": { "path": "/val" } } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {"call": "regex", "args": {"value": {"path": "/val"}}},
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -126,7 +140,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "min": 5 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "min": 5}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -145,7 +167,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "max": 10 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "max": 10}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -164,7 +194,12 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" } } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {"call": "length", "args": {"value": {"path": "/val"}}},
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -183,7 +218,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "numeric", "args": { "value": { "path": "/val" }, "min": 0, "max": 100 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "numeric",
+                    "args": {"value": {"path": "/val"}, "min": 0, "max": 100}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -202,7 +245,12 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "email", "args": { "value": { "path": "/val" } } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {"call": "email", "args": {"value": {"path": "/val"}}},
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -221,7 +269,7 @@
               "component": "Text",
               "text": {
                 "call": "formatString",
-                "args": { "value": "Hello ${/name}" },
+                "args": {"value": "Hello ${/name}"},
                 "returnType": "string"
               }
             }
@@ -242,7 +290,7 @@
               "component": "Text",
               "text": {
                 "call": "formatString",
-                "args": { "value": "Hi" },
+                "args": {"value": "Hi"},
                 "returnType": "boolean"
               }
             }
@@ -263,7 +311,7 @@
               "component": "Text",
               "text": {
                 "call": "formatNumber",
-                "args": { "value": 1234.567, "decimals": 2, "grouping": true },
+                "args": {"value": 1234.567, "decimals": 2, "grouping": true},
                 "returnType": "string"
               }
             }
@@ -284,7 +332,7 @@
               "component": "Text",
               "text": {
                 "call": "formatNumber",
-                "args": { "value": 1234.567, "decimals": "2" },
+                "args": {"value": 1234.567, "decimals": "2"},
                 "returnType": "string"
               }
             }
@@ -305,7 +353,7 @@
               "component": "Text",
               "text": {
                 "call": "formatCurrency",
-                "args": { "value": 99.99, "currency": "USD" },
+                "args": {"value": 99.99, "currency": "USD"},
                 "returnType": "string"
               }
             }
@@ -326,7 +374,7 @@
               "component": "Text",
               "text": {
                 "call": "formatCurrency",
-                "args": { "value": 99.99 },
+                "args": {"value": 99.99},
                 "returnType": "string"
               }
             }
@@ -347,7 +395,7 @@
               "component": "Text",
               "text": {
                 "call": "formatDate",
-                "args": { "value": "2023-01-01", "format": "MMM d" },
+                "args": {"value": "2023-01-01", "format": "MMM d"},
                 "returnType": "string"
               }
             }
@@ -368,7 +416,7 @@
               "component": "Text",
               "text": {
                 "call": "pluralize",
-                "args": { "value": 5, "one": "item", "other": "items" },
+                "args": {"value": 5, "one": "item", "other": "items"},
                 "returnType": "string"
               }
             }
@@ -389,7 +437,7 @@
               "component": "Text",
               "text": {
                 "call": "pluralize",
-                "args": { "value": 5, "one": "item" },
+                "args": {"value": 5, "one": "item"},
                 "returnType": "string"
               }
             }
@@ -412,12 +460,12 @@
               "action": {
                 "functionCall": {
                   "call": "openUrl",
-                  "args": { "url": "https://example.com" },
+                  "args": {"url": "https://example.com"},
                   "returnType": "void"
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -442,7 +490,7 @@
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -462,12 +510,12 @@
               "action": {
                 "functionCall": {
                   "call": "openUrl",
-                  "args": { "url": "https://example.com" },
+                  "args": {"url": "https://example.com"},
                   "returnType": "boolean"
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -485,7 +533,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "min": "5" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "min": "5"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -504,7 +560,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "max": -2 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "max": -2}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -523,7 +587,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "numeric", "args": { "value": { "path": "/val" }, "min": "10" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "numeric",
+                    "args": {"value": {"path": "/val"}, "min": "10"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -542,7 +614,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "numeric", "args": { "value": { "path": "/val" }, "max": "20" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "numeric",
+                    "args": {"value": {"path": "/val"}, "max": "20"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -561,7 +641,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "regex", "args": { "value": { "path": "/val" }, "pattern": 123 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "regex",
+                    "args": {"value": {"path": "/val"}, "pattern": 123}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -580,7 +668,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "email", "args": { "value": { "path": "/val" }, "extra": "foo" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "email",
+                    "args": {"value": {"path": "/val"}, "extra": "foo"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -599,7 +695,7 @@
               "component": "Text",
               "text": {
                 "call": "formatString",
-                "args": { "value": 123 },
+                "args": {"value": 123},
                 "returnType": "string"
               }
             }
@@ -620,7 +716,7 @@
               "component": "Text",
               "text": {
                 "call": "formatNumber",
-                "args": { "value": 123.456, "decimals": true },
+                "args": {"value": 123.456, "decimals": true},
                 "returnType": "string"
               }
             }
@@ -641,7 +737,7 @@
               "component": "Text",
               "text": {
                 "call": "formatCurrency",
-                "args": { "value": 123.45, "currency": 840 },
+                "args": {"value": 123.45, "currency": 840},
                 "returnType": "string"
               }
             }
@@ -662,7 +758,7 @@
               "component": "Text",
               "text": {
                 "call": "formatDate",
-                "args": { "value": "2023-01-01", "format": null },
+                "args": {"value": "2023-01-01", "format": null},
                 "returnType": "string"
               }
             }
@@ -685,12 +781,12 @@
               "action": {
                 "functionCall": {
                   "call": "openUrl",
-                  "args": { "url": "not a uri" },
+                  "args": {"url": "not a uri"},
                   "returnType": "void"
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -742,7 +838,7 @@
                 {
                   "condition": {
                     "call": "and",
-                    "args": { "values": [true] }
+                    "args": {"values": [true]}
                   },
                   "message": "Msg"
                 }
@@ -799,7 +895,7 @@
                 {
                   "condition": {
                     "call": "or",
-                    "args": { "values": [true] }
+                    "args": {"values": [true]}
                   },
                   "message": "Msg"
                 }
@@ -856,7 +952,7 @@
                 {
                   "condition": {
                     "call": "not",
-                    "args": { "value": "true" },
+                    "args": {"value": "true"},
                     "returnType": "boolean"
                   },
                   "message": "Msg"
@@ -884,7 +980,7 @@
                 {
                   "condition": {
                     "call": "not",
-                    "args": { "value": true },
+                    "args": {"value": true},
                     "returnType": "string"
                   },
                   "message": "Msg"
@@ -912,7 +1008,7 @@
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/val" }, "extra": 1 },
+                    "args": {"value": {"path": "/val"}, "extra": 1},
                     "returnType": "boolean"
                   },
                   "message": "Required"
@@ -940,7 +1036,7 @@
                 {
                   "condition": {
                     "call": "regex",
-                    "args": { "value": { "path": "/val" }, "pattern": "^abc$" },
+                    "args": {"value": {"path": "/val"}, "pattern": "^abc$"},
                     "returnType": "string"
                   },
                   "message": "Match"
@@ -968,7 +1064,7 @@
                 {
                   "condition": {
                     "call": "and",
-                    "args": { "values": [true, false] },
+                    "args": {"values": [true, false]},
                     "returnType": "string"
                   },
                   "message": "Msg"
diff --git a/specification/v0_10/test/cases/function_response.json b/specification/v0_10/test/cases/function_response.json
index ba727b99e..73554494e 100644
--- a/specification/v0_10/test/cases/function_response.json
+++ b/specification/v0_10/test/cases/function_response.json
@@ -84,12 +84,7 @@
         "functionResponse": {
           "functionCallId": "unique-call-id-131e",
           "call": "someFunction",
-          "value": [
-            "one",
-            2,
-            true,
-            null
-          ]
+          "value": ["one", 2, true, null]
         }
       }
     },
@@ -102,7 +97,7 @@
           "functionCallId": "unique-call-id-131",
           "call": "someFunction",
           "value": {
-            "result": { "nested": "object" }
+            "result": {"nested": "object"}
           }
         }
       }
diff --git a/specification/v0_10/test/cases/text_variants.json b/specification/v0_10/test/cases/text_variants.json
index 47e7d38cf..811d013c6 100644
--- a/specification/v0_10/test/cases/text_variants.json
+++ b/specification/v0_10/test/cases/text_variants.json
@@ -38,4 +38,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_10/test/testing_catalog.json b/specification/v0_10/test/testing_catalog.json
index 9a433912d..f839f4601 100644
--- a/specification/v0_10/test/testing_catalog.json
+++ b/specification/v0_10/test/testing_catalog.json
@@ -8,11 +8,11 @@
     "Text": {
       "type": "object",
       "allOf": [
-        { "$ref": "common_types.json#/$defs/ComponentCommon" },
+        {"$ref": "common_types.json#/$defs/ComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Text" },
+            "component": {"const": "Text"},
             "text": {
               "$ref": "common_types.json#/$defs/DynamicString"
             }
@@ -92,18 +92,13 @@
       "additionalProperties": true
     },
     "anyComponent": {
-      "oneOf": [
-        { "$ref": "#/components/Text" }
-      ],
+      "oneOf": [{"$ref": "#/components/Text"}],
       "discriminator": {
         "propertyName": "component"
       }
     },
     "anyFunction": {
-      "oneOf": [
-        { "$ref": "#/functions/openUrl" },
-        { "$ref": "#/functions/pingServer"}
-      ]
+      "oneOf": [{"$ref": "#/functions/openUrl"}, {"$ref": "#/functions/pingServer"}]
     }
   }
 }
diff --git a/specification/v0_8/docs/a2ui_extension_specification.md b/specification/v0_8/docs/a2ui_extension_specification.md
index e1569a43d..f4d35febc 100644
--- a/specification/v0_8/docs/a2ui_extension_specification.md
+++ b/specification/v0_8/docs/a2ui_extension_specification.md
@@ -50,10 +50,12 @@ Example AgentExtension block:
 ```
 
 ### Parameter definitions
+
 - `params.supportedCatalogIds`: (OPTIONAL) An array of strings, where each string is a URI pointing to a component Catalog Definition Schema that the agent can generate.
 - `params.acceptsInlineCatalogs`: (OPTIONAL) A boolean indicating if the agent can accept an `inlineCatalogs` array in the client's `a2uiClientCapabilities`. If omitted, this defaults to `false`.
 
 ## Extension activation
+
 Clients indicate their desire to use the A2UI extension by specifying it via the transport-defined A2A extension activation mechanism.
 
 For JSON-RPC and HTTP transports, this is indicated via the X-A2A-Extensions HTTP header.
@@ -78,7 +80,7 @@ Example A2UI DataPart:
 {
   "data": {
     "beginRendering": {
-      "surfaceId": "outlier_stores_map_surface",
+      "surfaceId": "outlier_stores_map_surface"
     }
   },
   "kind": "data",
diff --git a/specification/v0_8/docs/a2ui_protocol.md b/specification/v0_8/docs/a2ui_protocol.md
index 967eee8f3..4d64569cc 100644
--- a/specification/v0_8/docs/a2ui_protocol.md
+++ b/specification/v0_8/docs/a2ui_protocol.md
@@ -101,7 +101,6 @@ The A2UI protocol is composed of a server-to-client stream describing UI and ind
 
 1.  **Server Stream:** The server begins sending the JSONL stream over an SSE connection.
 2.  **Client-Side Buffering:** The client receives messages and buffers them:
-
     - `surfaceUpdate`: Component definitions are stored in a `Map<String, Component>`, organized by `surfaceId`. If a surface doesn't exist, it is created.
     - `dataModelUpdate`: The client's internal JSON data model is built or updated.
 
@@ -183,6 +182,7 @@ The server (agent) advertises its capabilities in its Agent Card as part of the
 - `acceptsInlineCatalogs` (boolean, optional): If `true`, the server can process `inlineCatalogs` sent by the client. Defaults to `false`.
 
 **Example Server Agent Card Snippet:**
+
 ```json
 {
   "name": "Restaurant Finder",
@@ -213,6 +213,7 @@ In **every** message sent to the server, the client includes an `a2uiClientCapab
 - `inlineCatalogs` (array of objects, optional): An array of full Catalog Definition Documents. This allows a client to provide custom, on-the-fly catalogs, typically for use in local development workflows where it is faster to update a catalog in one place on the client. This may only be provided if the server has advertised `acceptsInlineCatalogs: true`.
 
 **Example A2A Message with Client Capabilities:**
+
 ```json
 {
   "metadata": {
@@ -227,7 +228,7 @@ In **every** message sent to the server, the client includes an `a2uiClientCapab
           "components": {
             "SignaturePad": {
               "type": "object",
-              "properties": { "penColor": { "type": "string" } }
+              "properties": {"penColor": {"type": "string"}}
             }
           },
           "styles": {}
@@ -252,6 +253,7 @@ The server receives the client's capabilities and chooses a catalog to use for a
 If the `catalogId` is omitted, the client **MUST** default to the standard catalog for the protocol version (`https://a2ui.org/specification/v0_8/standard_catalog_definition.json`).
 
 **Example `beginRendering` Message:**
+
 ```json
 {
   "beginRendering": {
@@ -406,7 +408,7 @@ Container components (`Row`, `Column`, `List`) define their children using a `ch
       "type": "object",
       "description": "Defines a template for rendering dynamic lists of children.",
       "properties": {
-        "dataBinding": { "$ref": "#/definitions/DataPath" },
+        "dataBinding": {"$ref": "#/definitions/DataPath"},
         "componentId": {
           "type": "string",
           "description": "The ID of the component to use as a template for each item in the data-bound list."
@@ -451,13 +453,13 @@ This message is the only way to modify the client's data model.
     "surfaceId": "main_content_area",
     "path": "user",
     "contents": [
-      { "key": "name", "valueString": "Bob" },
-      { "key": "isVerified", "valueBoolean": true },
+      {"key": "name", "valueString": "Bob"},
+      {"key": "isVerified", "valueBoolean": true},
       {
         "key": "address",
         "valueMap": [
-          { "key": "street", "valueString": "123 Main St" },
-          { "key": "city", "valueString": "Anytown" }
+          {"key": "street", "valueString": "123 Main St"},
+          {"key": "city", "valueString": "Anytown"}
         ]
       }
     ]
@@ -480,7 +482,7 @@ From the catalog schema, a bound `text` property looks like this:
       "type": "string",
       "description": "A static string value."
     },
-    "path": { "$ref": "#/definitions/DataPath" }
+    "path": {"$ref": "#/definitions/DataPath"}
   },
   "minProperties": 1,
   "additionalProperties": false
@@ -502,7 +504,6 @@ A component can also bind to numbers (`literalNumber`), booleans (`literalBoolea
   ```
 
 - **Path and Literal Value (Initialization Shorthand)**: If **both** `path` and a `literal*` value are provided, it serves as a shorthand for data model initialization. The client MUST:
-
   1.  Update the data model at the specified `path` with the provided `literal*` value. This is an implicit `dataModelUpdate`.
   2.  Bind the component property to that `path` for rendering and future updates.
 
@@ -554,7 +555,7 @@ This message provides a feedback mechanism for the server. It is sent when the c
             "id": "submit_btn_text",
             "component": {
               "Text": {
-                "text": { "literalString": "Submit" }
+                "text": {"literalString": "Submit"}
               }
             }
           },
@@ -568,9 +569,9 @@ This message provides a feedback mechanism for the server. It is sent when the c
                   "context": [
                     {
                       "key": "userInput",
-                      "value": { "path": "/form/textField" }
+                      "value": {"path": "/form/textField"}
                     },
-                    { "key": "formId", "value": { "literalString": "f-123" } }
+                    {"key": "formId", "value": {"literalString": "f-123"}}
                   ]
                 }
               }
@@ -588,7 +589,7 @@ This message provides a feedback mechanism for the server. It is sent when the c
       "dataModelUpdate": {
         "surfaceId": "main_content_area",
         "path": "form",
-        "contents": [{ "key": "textField", "valueString": "User input text" }]
+        "contents": [{"key": "textField", "valueString": "User input text"}]
       }
     }
     ```
diff --git a/specification/v0_8/eval/README.md b/specification/v0_8/eval/README.md
index 5620d92b0..39b7669d7 100644
--- a/specification/v0_8/eval/README.md
+++ b/specification/v0_8/eval/README.md
@@ -25,7 +25,7 @@ You also need to install dependencies before running:
 pnpm install
 ```
 
-## Running all evals (warning: can use *lots* of model quota)
+## Running all evals (warning: can use _lots_ of model quota)
 
 To run the flow, use the following command:
 
diff --git a/specification/v0_8/eval/genkit.conf.js b/specification/v0_8/eval/genkit.conf.js
index eb9235559..c269a586f 100644
--- a/specification/v0_8/eval/genkit.conf.js
+++ b/specification/v0_8/eval/genkit.conf.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { configure } from "genkit";
+import {googleAI} from '@genkit-ai/google-genai';
+import {configure} from 'genkit';
 
 export default configure({
   plugins: [googleAI()],
-  logLevel: "debug",
+  logLevel: 'debug',
   enableTracingAndMetrics: true,
 });
diff --git a/specification/v0_8/eval/pnpm-workspace.yaml b/specification/v0_8/eval/pnpm-workspace.yaml
index 719ee0b40..02052098a 100644
--- a/specification/v0_8/eval/pnpm-workspace.yaml
+++ b/specification/v0_8/eval/pnpm-workspace.yaml
@@ -13,6 +13,6 @@
 # limitations under the License.
 
 onlyBuiltDependencies:
-  - '@firebase/util'
+  - "@firebase/util"
   - esbuild
   - protobufjs
diff --git a/specification/v0_8/eval/src/basic_schema_matcher.ts b/specification/v0_8/eval/src/basic_schema_matcher.ts
index 78d38b247..336589d27 100644
--- a/specification/v0_8/eval/src/basic_schema_matcher.ts
+++ b/specification/v0_8/eval/src/basic_schema_matcher.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { SchemaMatcher, ValidationResult } from "./schema_matcher";
+import {SchemaMatcher, ValidationResult} from './schema_matcher';
 
 export class BasicSchemaMatcher extends SchemaMatcher {
   constructor(
@@ -28,15 +28,15 @@ export class BasicSchemaMatcher extends SchemaMatcher {
     if (!schema) {
       const result: ValidationResult = {
         success: false,
-        error: "Schema is undefined.",
+        error: 'Schema is undefined.',
       };
       return result;
     }
 
-    const pathParts = this.propertyPath.split(".");
+    const pathParts = this.propertyPath.split('.');
     let actualValue = schema;
     for (const part of pathParts) {
-      if (actualValue && typeof actualValue === "object") {
+      if (actualValue && typeof actualValue === 'object') {
         actualValue = actualValue[part];
       } else {
         actualValue = undefined;
@@ -46,20 +46,18 @@ export class BasicSchemaMatcher extends SchemaMatcher {
 
     if (actualValue === undefined) {
       const error = `Failed to find property '${this.propertyPath}'.`;
-      return { success: false, error };
+      return {success: false, error};
     }
 
     if (this.propertyValue !== undefined) {
       if (JSON.stringify(actualValue) !== JSON.stringify(this.propertyValue)) {
-        const error = `Property '${
-          this.propertyPath
-        }' has value '${JSON.stringify(
+        const error = `Property '${this.propertyPath}' has value '${JSON.stringify(
           actualValue,
         )}', but expected '${JSON.stringify(this.propertyValue)}'.`;
-        return { success: false, error };
+        return {success: false, error};
       }
     }
 
-    return { success: true };
+    return {success: true};
   }
 }
diff --git a/specification/v0_8/eval/src/dev.ts b/specification/v0_8/eval/src/dev.ts
index 7cbde539d..d5495c1b4 100644
--- a/specification/v0_8/eval/src/dev.ts
+++ b/specification/v0_8/eval/src/dev.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-import "./flows";
+import './flows';
diff --git a/specification/v0_8/eval/src/flows.ts b/specification/v0_8/eval/src/flows.ts
index 6396646c0..34b8934e8 100644
--- a/specification/v0_8/eval/src/flows.ts
+++ b/specification/v0_8/eval/src/flows.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { genkit, z } from "genkit";
-import { openAI } from "@genkit-ai/compat-oai/openai";
-import { anthropic } from "genkitx-anthropic";
+import {googleAI} from '@genkit-ai/google-genai';
+import {genkit, z} from 'genkit';
+import {openAI} from '@genkit-ai/compat-oai/openai';
+import {anthropic} from 'genkitx-anthropic';
 
 const plugins = [];
 
 if (process.env.GEMINI_API_KEY) {
-  console.log("Initializing Google AI plugin...");
+  console.log('Initializing Google AI plugin...');
   plugins.push(
     googleAI({
       apiKey: process.env.GEMINI_API_KEY!,
@@ -31,12 +31,12 @@ if (process.env.GEMINI_API_KEY) {
   );
 }
 if (process.env.OPENAI_API_KEY) {
-  console.log("Initializing OpenAI plugin...");
+  console.log('Initializing OpenAI plugin...');
   plugins.push(openAI());
 }
 if (process.env.ANTHROPIC_API_KEY) {
-  console.log("Initializing Anthropic plugin...");
-  plugins.push(anthropic({ apiKey: process.env.ANTHROPIC_API_KEY! }));
+  console.log('Initializing Anthropic plugin...');
+  plugins.push(anthropic({apiKey: process.env.ANTHROPIC_API_KEY!}));
 }
 
 export const ai = genkit({
@@ -46,7 +46,7 @@ export const ai = genkit({
 // Define a UI component generator flow
 export const componentGeneratorFlow = ai.defineFlow(
   {
-    name: "componentGeneratorFlow",
+    name: 'componentGeneratorFlow',
     inputSchema: z.object({
       prompt: z.string(),
       model: z.any(),
@@ -55,16 +55,16 @@ export const componentGeneratorFlow = ai.defineFlow(
     }),
     outputSchema: z.any(),
   },
-  async ({ prompt, model, config, schema }) => {
+  async ({prompt, model, config, schema}) => {
     // Generate structured component data using the schema from the file
-    const { output } = await ai.generate({
+    const {output} = await ai.generate({
       prompt,
       model,
-      output: { contentType: "application/json", jsonSchema: schema },
+      output: {contentType: 'application/json', jsonSchema: schema},
       config,
     });
 
-    if (!output) throw new Error("Failed to generate component");
+    if (!output) throw new Error('Failed to generate component');
 
     return output;
   },
diff --git a/specification/v0_8/eval/src/index.ts b/specification/v0_8/eval/src/index.ts
index 4f1946e34..8d845dd6f 100644
--- a/specification/v0_8/eval/src/index.ts
+++ b/specification/v0_8/eval/src/index.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { componentGeneratorFlow, ai } from "./flows";
-import * as fs from "fs";
-import * as path from "path";
-import { modelsToTest } from "./models";
-import { prompts, TestPrompt } from "./prompts";
-import { validateSchema } from "./validator";
+import {componentGeneratorFlow, ai} from './flows';
+import * as fs from 'fs';
+import * as path from 'path';
+import {modelsToTest} from './models';
+import {prompts, TestPrompt} from './prompts';
+import {validateSchema} from './validator';
 
 interface InferenceResult {
   modelName: string;
@@ -40,19 +40,17 @@ function generateSummary(
   const failedRunsWidth = 15;
   const toolErrorRunsWidth = 20;
 
-  let summary = "# Evaluation Summary";
+  let summary = '# Evaluation Summary';
   for (const modelName in resultsByModel) {
     summary += `\n\n## Model: ${modelName}\n\n`;
-    const header = `| ${"Prompt Name".padEnd(
+    const header = `| ${'Prompt Name'.padEnd(
       promptNameWidth,
-    )} | ${"Avg Latency (ms)".padEnd(latencyWidth)} | ${"Failed Runs".padEnd(
+    )} | ${'Avg Latency (ms)'.padEnd(latencyWidth)} | ${'Failed Runs'.padEnd(
       failedRunsWidth,
-    )} | ${"Tool Error Runs".padEnd(toolErrorRunsWidth)} |`;
-    const divider = `|${"-".repeat(promptNameWidth + 2)}|${"-".repeat(
+    )} | ${'Tool Error Runs'.padEnd(toolErrorRunsWidth)} |`;
+    const divider = `|${'-'.repeat(promptNameWidth + 2)}|${'-'.repeat(
       latencyWidth + 2,
-    )}|${"-".repeat(failedRunsWidth + 2)}|${"-".repeat(
-      toolErrorRunsWidth + 2,
-    )}|`;
+    )}|${'-'.repeat(failedRunsWidth + 2)}|${'-'.repeat(toolErrorRunsWidth + 2)}|`;
     summary += header;
     summary += `\n${divider}`;
 
@@ -72,18 +70,15 @@ function generateSummary(
     for (const promptName in promptsInModel) {
       const runs = promptsInModel[promptName];
       const totalRuns = runs.length;
-      const errorRuns = runs.filter((r) => r.error).length;
-      const failedRuns = runs.filter(
-        (r) => r.error || r.validationResults.length > 0,
-      ).length;
+      const errorRuns = runs.filter(r => r.error).length;
+      const failedRuns = runs.filter(r => r.error || r.validationResults.length > 0).length;
       const totalLatency = runs.reduce((acc, r) => acc + r.latency, 0);
       const avgLatency = (totalLatency / totalRuns).toFixed(0);
 
       totalModelFailedRuns += failedRuns;
 
-      const failedRunsStr =
-        failedRuns > 0 ? `${failedRuns} / ${totalRuns}` : "";
-      const errorRunsStr = errorRuns > 0 ? `${errorRuns} / ${totalRuns}` : "";
+      const failedRunsStr = failedRuns > 0 ? `${failedRuns} / ${totalRuns}` : '';
+      const errorRunsStr = errorRuns > 0 ? `${errorRuns} / ${totalRuns}` : '';
 
       summary += `\n| ${promptName.padEnd(
         promptNameWidth,
@@ -96,23 +91,21 @@ function generateSummary(
     summary += `\n\n**Total failed runs:** ${totalModelFailedRuns} / ${totalRunsForModel}`;
   }
 
-  summary += "\n\n---\n\n## Overall Summary\n";
+  summary += '\n\n---\n\n## Overall Summary\n';
   const totalRuns = results.length;
-  const totalToolErrorRuns = results.filter((r) => r.error).length;
+  const totalToolErrorRuns = results.filter(r => r.error).length;
   const totalRunsWithAnyFailure = results.filter(
-    (r) => r.error || r.validationResults.length > 0,
+    r => r.error || r.validationResults.length > 0,
   ).length;
   const modelsWithFailures = [
     ...new Set(
-      results
-        .filter((r) => r.error || r.validationResults.length > 0)
-        .map((r) => r.modelName),
+      results.filter(r => r.error || r.validationResults.length > 0).map(r => r.modelName),
     ),
-  ].join(", ");
+  ].join(', ');
 
   summary += `\n- **Number of tool error runs:** ${totalToolErrorRuns} / ${totalRuns}`;
   summary += `\n- **Number of runs with any failure (tool error or validation):** ${totalRunsWithAnyFailure} / ${totalRuns}`;
-  const latencies = results.map((r) => r.latency).sort((a, b) => a - b);
+  const latencies = results.map(r => r.latency).sort((a, b) => a - b);
   const totalLatency = latencies.reduce((acc, l) => acc + l, 0);
   const meanLatency = (totalLatency / totalRuns).toFixed(0);
   let medianLatency = 0;
@@ -133,76 +126,74 @@ function generateSummary(
   return summary;
 }
 
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
 
 // Run the flow
 async function main() {
   const argv = await yargs(hideBin(process.argv))
-    .option("verbose", {
-      alias: "v",
-      type: "boolean",
-      description: "Run with verbose logging",
+    .option('verbose', {
+      alias: 'v',
+      type: 'boolean',
+      description: 'Run with verbose logging',
       default: false,
     })
-    .option("keep", {
-      type: "string",
+    .option('keep', {
+      type: 'string',
       description:
-        "Directory to keep output files. If no path is provided, a temporary directory will be created.",
-      coerce: (arg) => (arg === undefined ? true : arg),
+        'Directory to keep output files. If no path is provided, a temporary directory will be created.',
+      coerce: arg => (arg === undefined ? true : arg),
     })
-    .option("runs-per-prompt", {
-      type: "number",
-      description: "Number of times to run each prompt",
+    .option('runs-per-prompt', {
+      type: 'number',
+      description: 'Number of times to run each prompt',
       default: 1,
     })
-    .option("model", {
-      type: "string",
+    .option('model', {
+      type: 'string',
       array: true,
-      description: "Filter models by exact name",
+      description: 'Filter models by exact name',
       default: [],
-      choices: modelsToTest.map((m) => m.name),
+      choices: modelsToTest.map(m => m.name),
     })
-    .option("prompt", {
-      type: "string",
-      description: "Filter prompts by name prefix",
+    .option('prompt', {
+      type: 'string',
+      description: 'Filter prompts by name prefix',
     })
     .help()
-    .alias("h", "help").argv;
+    .alias('h', 'help').argv;
 
   const verbose = argv.verbose;
   const keep = argv.keep;
   let outputDir: string | null = null;
 
   if (keep) {
-    if (typeof keep === "string") {
+    if (typeof keep === 'string') {
       outputDir = keep;
     } else {
-      outputDir = fs.mkdtempSync(path.join(process.cwd(), "a2ui-eval-"));
+      outputDir = fs.mkdtempSync(path.join(process.cwd(), 'a2ui-eval-'));
     }
     if (!fs.existsSync(outputDir)) {
-      fs.mkdirSync(outputDir, { recursive: true });
+      fs.mkdirSync(outputDir, {recursive: true});
     }
     console.log(`Keeping output in: ${outputDir}`);
   }
 
-  const runsPerPrompt = argv["runs-per-prompt"];
+  const runsPerPrompt = argv['runs-per-prompt'];
 
   let filteredModels = modelsToTest;
   if (argv.model && argv.model.length > 0) {
     const modelNames = argv.model as string[];
-    filteredModels = modelsToTest.filter((m) => modelNames.includes(m.name));
+    filteredModels = modelsToTest.filter(m => modelNames.includes(m.name));
     if (filteredModels.length === 0) {
-      console.error(`No models found matching: ${modelNames.join(", ")}.`);
+      console.error(`No models found matching: ${modelNames.join(', ')}.`);
       process.exit(1);
     }
   }
 
   let filteredPrompts = prompts;
   if (argv.prompt) {
-    filteredPrompts = prompts.filter((p) =>
-      p.name.startsWith(argv.prompt as string)
-    );
+    filteredPrompts = prompts.filter(p => p.name.startsWith(argv.prompt as string));
     if (filteredPrompts.length === 0) {
       console.error(`No prompt found with prefix "${argv.prompt}".`);
       process.exit(1);
@@ -212,22 +203,17 @@ async function main() {
   const generationPromises: Promise<InferenceResult>[] = [];
 
   for (const prompt of filteredPrompts) {
-    const schemaString = fs.readFileSync(
-      path.join(__dirname, prompt.schemaPath),
-      "utf-8"
-    );
+    const schemaString = fs.readFileSync(path.join(__dirname, prompt.schemaPath), 'utf-8');
     const schema = JSON.parse(schemaString);
     for (const modelConfig of filteredModels) {
-      const modelDirName = modelConfig.name.replace(/[\/:]/g, "_");
-      const modelOutputDir = outputDir
-        ? path.join(outputDir, modelDirName)
-        : null;
+      const modelDirName = modelConfig.name.replace(/[\/:]/g, '_');
+      const modelOutputDir = outputDir ? path.join(outputDir, modelDirName) : null;
       if (modelOutputDir && !fs.existsSync(modelOutputDir)) {
-        fs.mkdirSync(modelOutputDir, { recursive: true });
+        fs.mkdirSync(modelOutputDir, {recursive: true});
       }
       for (let i = 1; i <= runsPerPrompt; i++) {
         console.log(
-          `Queueing generation for model: ${modelConfig.name}, prompt: ${prompt.name} (run ${i})`
+          `Queueing generation for model: ${modelConfig.name}, prompt: ${prompt.name} (run ${i})`,
         );
         const startTime = Date.now();
         generationPromises.push(
@@ -237,27 +223,18 @@ async function main() {
             config: modelConfig.config,
             schema,
           })
-            .then((component) => {
+            .then(component => {
               if (modelOutputDir) {
-                const inputPath = path.join(
-                  modelOutputDir,
-                  `${prompt.name}.input.txt`
-                );
+                const inputPath = path.join(modelOutputDir, `${prompt.name}.input.txt`);
                 fs.writeFileSync(inputPath, prompt.promptText);
 
-                const outputPath = path.join(
-                  modelOutputDir,
-                  `${prompt.name}.output.json`
-                );
-                fs.writeFileSync(
-                  outputPath,
-                  JSON.stringify(component, null, 2)
-                );
+                const outputPath = path.join(modelOutputDir, `${prompt.name}.output.json`);
+                fs.writeFileSync(outputPath, JSON.stringify(component, null, 2));
               }
               const validationResults = validateSchema(
                 component,
                 prompt.schemaPath,
-                prompt.matchers
+                prompt.matchers,
               );
               return {
                 modelName: modelConfig.name,
@@ -269,27 +246,18 @@ async function main() {
                 runNumber: i,
               };
             })
-            .catch((error) => {
+            .catch(error => {
               if (modelOutputDir) {
-                const inputPath = path.join(
-                  modelOutputDir,
-                  `${prompt.name}.input.txt`
-                );
+                const inputPath = path.join(modelOutputDir, `${prompt.name}.input.txt`);
                 fs.writeFileSync(inputPath, prompt.promptText);
 
-                const errorPath = path.join(
-                  modelOutputDir,
-                  `${prompt.name}.error.json`
-                );
+                const errorPath = path.join(modelOutputDir, `${prompt.name}.error.json`);
                 const errorOutput = {
                   message: error.message,
                   stack: error.stack,
                   ...error,
                 };
-                fs.writeFileSync(
-                  errorPath,
-                  JSON.stringify(errorOutput, null, 2)
-                );
+                fs.writeFileSync(errorPath, JSON.stringify(errorOutput, null, 2));
               }
               return {
                 modelName: modelConfig.name,
@@ -300,7 +268,7 @@ async function main() {
                 validationResults: [],
                 runNumber: i,
               };
-            })
+            }),
         );
       }
     }
@@ -317,7 +285,7 @@ async function main() {
     resultsByModel[result.modelName].push(result);
   }
 
-  console.log("\n--- Generation Results ---");
+  console.log('\n--- Generation Results ---');
   for (const modelName in resultsByModel) {
     for (const result of resultsByModel[modelName]) {
       const hasError = !!result.error;
@@ -331,17 +299,15 @@ async function main() {
         console.log(`\nQuery: ${result.prompt.name} (run ${result.runNumber})`);
 
         if (hasError) {
-          console.error("Error generating component:", result.error);
+          console.error('Error generating component:', result.error);
         } else if (hasComponent) {
           if (hasValidationFailures) {
-            console.log("Validation Failures:");
-            result.validationResults.forEach((failure) =>
-              console.log(`- ${failure}`)
-            );
+            console.log('Validation Failures:');
+            result.validationResults.forEach(failure => console.log(`- ${failure}`));
           }
           if (verbose) {
             if (hasValidationFailures) {
-              console.log("Generated schema:");
+              console.log('Generated schema:');
               console.log(JSON.stringify(result.component, null, 2));
             }
           }
@@ -353,7 +319,7 @@ async function main() {
   const summary = generateSummary(resultsByModel, results);
   console.log(summary);
   if (outputDir) {
-    const summaryPath = path.join(outputDir, "summary.md");
+    const summaryPath = path.join(outputDir, 'summary.md');
     fs.writeFileSync(summaryPath, summary);
   }
 }
diff --git a/specification/v0_8/eval/src/message_type_matcher.ts b/specification/v0_8/eval/src/message_type_matcher.ts
index a63d2ad0b..e3b6c5c23 100644
--- a/specification/v0_8/eval/src/message_type_matcher.ts
+++ b/specification/v0_8/eval/src/message_type_matcher.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { SchemaMatcher, ValidationResult } from "./schema_matcher";
+import {SchemaMatcher, ValidationResult} from './schema_matcher';
 
 /**
  * A concrete matcher that verifies the top-level message type.
@@ -25,21 +25,21 @@ export class MessageTypeMatcher extends SchemaMatcher {
   }
 
   validate(response: object): ValidationResult {
-    if (!response || typeof response !== "object") {
+    if (!response || typeof response !== 'object') {
       return {
         success: false,
-        error: "Response is not a valid object.",
+        error: 'Response is not a valid object.',
       };
     }
     const keys = Object.keys(response);
     if (keys.length === 1 && keys[0] === this.messageType) {
-      return { success: true };
+      return {success: true};
     } else {
       return {
         success: false,
         error: `Expected top-level message type to be '${
           this.messageType
-        }', but found '${keys.join(", ")}'`,
+        }', but found '${keys.join(', ')}'`,
       };
     }
   }
diff --git a/specification/v0_8/eval/src/models.ts b/specification/v0_8/eval/src/models.ts
index 82170ba44..272cbe58a 100644
--- a/specification/v0_8/eval/src/models.ts
+++ b/specification/v0_8/eval/src/models.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { openAI } from "@genkit-ai/compat-oai/openai";
-import { claude35Haiku, claude4Sonnet } from "genkitx-anthropic";
+import {googleAI} from '@genkit-ai/google-genai';
+import {openAI} from '@genkit-ai/compat-oai/openai';
+import {claude35Haiku, claude4Sonnet} from 'genkitx-anthropic';
 
 export interface ModelConfiguration {
   model: any;
@@ -26,43 +26,43 @@ export interface ModelConfiguration {
 
 export const modelsToTest: ModelConfiguration[] = [
   {
-    model: openAI.model("gpt-5"),
-    name: "gpt-5",
-    config: { reasoning_effort: "minimal" },
+    model: openAI.model('gpt-5'),
+    name: 'gpt-5',
+    config: {reasoning_effort: 'minimal'},
   },
   {
-    model: openAI.model("gpt-5-mini"),
-    name: "gpt-5-mini",
-    config: { reasoning_effort: "minimal" },
+    model: openAI.model('gpt-5-mini'),
+    name: 'gpt-5-mini',
+    config: {reasoning_effort: 'minimal'},
   },
   {
-    model: openAI.model("gpt-4.1"),
-    name: "gpt-4.1",
+    model: openAI.model('gpt-4.1'),
+    name: 'gpt-4.1',
     config: {},
   },
   {
-    model: googleAI.model("gemini-2.5-pro"),
-    name: "gemini-2.5-pro-thinking",
-    config: { thinkingConfig: { thinkingBudget: 1000 } },
+    model: googleAI.model('gemini-2.5-pro'),
+    name: 'gemini-2.5-pro-thinking',
+    config: {thinkingConfig: {thinkingBudget: 1000}},
   },
   {
-    model: googleAI.model("gemini-2.5-flash"),
-    name: "gemini-2.5-flash",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-2.5-flash'),
+    name: 'gemini-2.5-flash',
+    config: {thinkingConfig: {thinkingBudget: 0}},
   },
   {
-    model: googleAI.model("gemini-2.5-flash-lite"),
-    name: "gemini-2.5-flash-lite",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-2.5-flash-lite'),
+    name: 'gemini-2.5-flash-lite',
+    config: {thinkingConfig: {thinkingBudget: 0}},
   },
   {
     model: claude4Sonnet,
-    name: "claude-4-sonnet",
+    name: 'claude-4-sonnet',
     config: {},
   },
   {
     model: claude35Haiku,
-    name: "claude-35-haiku",
+    name: 'claude-35-haiku',
     config: {},
   },
 ];
diff --git a/specification/v0_8/eval/src/prompts.ts b/specification/v0_8/eval/src/prompts.ts
index 313fa8d99..882dcb520 100644
--- a/specification/v0_8/eval/src/prompts.ts
+++ b/specification/v0_8/eval/src/prompts.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { BasicSchemaMatcher } from "./basic_schema_matcher";
-import { MessageTypeMatcher } from "./message_type_matcher";
-import { SchemaMatcher } from "./schema_matcher";
-import { SurfaceUpdateSchemaMatcher } from "./surface_update_schema_matcher";
+import {BasicSchemaMatcher} from './basic_schema_matcher';
+import {MessageTypeMatcher} from './message_type_matcher';
+import {SchemaMatcher} from './schema_matcher';
+import {SurfaceUpdateSchemaMatcher} from './surface_update_schema_matcher';
 
 export interface TestPrompt {
   name: string;
@@ -27,24 +27,23 @@ export interface TestPrompt {
   matchers: SchemaMatcher[];
 }
 
-const schemaPath = "../../json/server_to_client_with_standard_catalog.json";
+const schemaPath = '../../json/server_to_client_with_standard_catalog.json';
 
 export const prompts: TestPrompt[] = [
   {
-    name: "deleteSurface",
-    description: "A DeleteSurface message to remove a UI surface.",
+    name: 'deleteSurface',
+    description: 'A DeleteSurface message to remove a UI surface.',
     schemaPath,
     promptText: `Generate a JSON message containing a deleteSurface for the surface 'dashboard-surface-1'.`,
     matchers: [
-      new MessageTypeMatcher("deleteSurface"),
-      new BasicSchemaMatcher("deleteSurface"),
-      new BasicSchemaMatcher("deleteSurface.surfaceId", "dashboard-surface-1"),
+      new MessageTypeMatcher('deleteSurface'),
+      new BasicSchemaMatcher('deleteSurface'),
+      new BasicSchemaMatcher('deleteSurface.surfaceId', 'dashboard-surface-1'),
     ],
   },
   {
-    name: "dogBreedGenerator",
-    description:
-      "A prompt to generate a UI for a dog breed information and generator tool.",
+    name: 'dogBreedGenerator',
+    description: 'A prompt to generate a UI for a dog breed information and generator tool.',
     schemaPath,
     promptText: `Generate a JSON message containing a surfaceUpdate to describe the following UI:
 
@@ -67,57 +66,46 @@ The dog generator is another card which is a form that generates a fictional dog
 - A section which shows the generated content
 `,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher(
-        "TextField",
-        "label",
-        "Dog breed name",
-        true
-      ),
-      new SurfaceUpdateSchemaMatcher(
-        "TextField",
-        "label",
-        "Number of legs",
-        true
-      ),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Generate"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Dog breed name', true),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Number of legs', true),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Generate'),
     ],
   },
   {
-    name: "loginForm",
+    name: 'loginForm',
     description:
       'A simple login form with username, password, a "remember me" checkbox, and a submit button.',
     schemaPath,
     promptText: `Generate a JSON message containing a surfaceUpdate for a login form. It should have a "Login" heading, two text fields for username and password (bound to /login/username and /login/password), a checkbox for "Remember Me" (bound to /login/rememberMe), and a "Sign In" button. The button should trigger a 'login' action, passing the username, password, and rememberMe status in the dynamicContext.`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Login"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "username", true),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "password", true),
-      new SurfaceUpdateSchemaMatcher("CheckBox", "label", "Remember Me"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Sign In"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Login'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'username', true),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'password', true),
+      new SurfaceUpdateSchemaMatcher('CheckBox', 'label', 'Remember Me'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Sign In'),
     ],
   },
   {
-    name: "productGallery",
-    description: "A gallery of products using a list with a template.",
+    name: 'productGallery',
+    description: 'A gallery of products using a list with a template.',
     schemaPath,
     promptText: `Generate a JSON message containing a surfaceUpdate for a product gallery. It should display a list of products from the data model at '/products'. Use a template for the list items. Each item should be a Card containing an Image (from '/products/item/imageUrl'), a Text component for the product name (from '/products/item/name'), and a Button labeled "Add to Cart". The button's action should be 'addToCart' and include a staticContext with the product ID, for example, 'productId': 'product123'. You should create a template component and then a list that uses it.`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("Card"),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher("Text"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Add to Cart"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('Card'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('Text'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Add to Cart'),
     ],
   },
   {
-    name: "productGalleryData",
-    description:
-      "A DataModelUpdate message to populate the product gallery data.",
+    name: 'productGalleryData',
+    description: 'A DataModelUpdate message to populate the product gallery data.',
     schemaPath,
     promptText: `Generate a JSON message containing a dataModelUpdate to populate the data model for the product gallery. The update should target the path '/products' and include at least two products. Each product in the map should have keys 'id', 'name', and 'imageUrl'. For example:
     {
@@ -129,47 +117,43 @@ The dog generator is another card which is a form that generates a fictional dog
       ]
     }`,
     matchers: [
-      new MessageTypeMatcher("dataModelUpdate"),
-      new BasicSchemaMatcher("dataModelUpdate.path", "/products"),
-      new BasicSchemaMatcher("dataModelUpdate.contents.0.key"), // Check that the first product key exists
-      new BasicSchemaMatcher("dataModelUpdate.contents.0.valueMap"), // Check that valueMap exists
+      new MessageTypeMatcher('dataModelUpdate'),
+      new BasicSchemaMatcher('dataModelUpdate.path', '/products'),
+      new BasicSchemaMatcher('dataModelUpdate.contents.0.key'), // Check that the first product key exists
+      new BasicSchemaMatcher('dataModelUpdate.contents.0.valueMap'), // Check that valueMap exists
     ],
   },
   {
-    name: "settingsPage",
-    description: "A settings page with tabs and a modal dialog.",
+    name: 'settingsPage',
+    description: 'A settings page with tabs and a modal dialog.',
     schemaPath,
     promptText: `Generate a JSON message containing a surfaceUpdate for a user settings page. Use a Tabs component with two tabs: "Profile" and "Notifications". The "Profile" tab should contain a simple column with a text field for the user's name. The "Notifications" tab should contain a checkbox for "Enable email notifications". Also, include a Modal component. The modal's entry point should be a button labeled "Delete Account", and its content should be a column with a confirmation text and two buttons: "Confirm Deletion" and "Cancel".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "name", true),
-      new SurfaceUpdateSchemaMatcher(
-        "CheckBox",
-        "label",
-        "Enable email notifications"
-      ),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Delete Account"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Confirm Deletion"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Cancel"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'name', true),
+      new SurfaceUpdateSchemaMatcher('CheckBox', 'label', 'Enable email notifications'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Delete Account'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Confirm Deletion'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Cancel'),
     ],
   },
   {
-    name: "dataModelUpdate",
-    description: "A DataModelUpdate message to update user data.",
+    name: 'dataModelUpdate',
+    description: 'A DataModelUpdate message to update user data.',
     schemaPath,
     promptText: `Generate a JSON message with a 'dataModelUpdate' property. This is used to update the client's data model. The scenario is that a user has just logged in, and we need to populate their profile information. Create a single data model update message to set '/user/name' to "John Doe" and '/user/email' to "john.doe@example.com".`,
-    matchers: [new MessageTypeMatcher("dataModelUpdate")],
+    matchers: [new MessageTypeMatcher('dataModelUpdate')],
   },
   {
-    name: "uiRoot",
-    description: "A UIRoot message to set the initial UI and data roots.",
+    name: 'uiRoot',
+    description: 'A UIRoot message to set the initial UI and data roots.',
     schemaPath,
     promptText: `Generate a JSON message with a 'beginRendering' property. This message tells the client where to start rendering the UI. Set the UI root to a component with ID "mainLayout".`,
-    matchers: [new MessageTypeMatcher("beginRendering")],
+    matchers: [new MessageTypeMatcher('beginRendering')],
   },
   {
-    name: "animalKingdomExplorer",
-    description: "A simple, explicit UI to display a hierarchy of animals.",
+    name: 'animalKingdomExplorer',
+    description: 'A simple, explicit UI to display a hierarchy of animals.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a simplified UI explorer for the Animal Kingdom.
 
@@ -207,200 +191,188 @@ Each Class and Order card must contain a 'Column' with a 'Text' component with t
 IMPORTANT: Do not skip any of the classes, orders, or species above. Include every item that is mentioned.
 `,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher(
-        "Heading",
-        "text",
-        "Simple Animal Explorer"
-      ),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Search..."),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Class: Mammalia"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Order: Carnivora"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Lion"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Tiger"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Wolf"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Order: Artiodactyla"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Giraffe"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Hippopotamus"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Class: Aves"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Order: Accipitriformes"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Bald Eagle"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Order: Struthioniformes"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Ostrich"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Order: Sphenisciformes"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Penguin"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Class: Reptilia"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Order: Crocodilia"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Nile Crocodile"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Order: Squamata"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Komodo Dragon"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Ball Python"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Simple Animal Explorer'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Search...'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Class: Mammalia'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Order: Carnivora'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Lion'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Tiger'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Wolf'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Order: Artiodactyla'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Giraffe'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Hippopotamus'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Class: Aves'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Order: Accipitriformes'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Bald Eagle'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Order: Struthioniformes'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Ostrich'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Order: Sphenisciformes'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Penguin'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Class: Reptilia'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Order: Crocodilia'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Nile Crocodile'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Order: Squamata'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Komodo Dragon'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Ball Python'),
     ],
   },
   {
-    name: "recipeCard",
-    description: "A UI to display a recipe with ingredients and instructions.",
+    name: 'recipeCard',
+    description: 'A UI to display a recipe with ingredients and instructions.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a recipe card. It should have a 'Heading' for the recipe title, "Classic Lasagna". Below the title, an 'Image' of the lasagna. Then, a 'Row' containing two 'Column's. The first column has a 'Text' heading "Ingredients" and a 'List' of ingredients. The second column has a 'Text' heading "Instructions" and a 'List' of step-by-step instructions. Finally, a 'Button' at the bottom labeled "Watch Video Tutorial".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Classic Lasagna"),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Ingredients"),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Instructions"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Watch Video Tutorial"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Classic Lasagna'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Ingredients'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Instructions'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Watch Video Tutorial'),
     ],
   },
   {
-    name: "musicPlayer",
-    description: "A simple music player UI.",
+    name: 'musicPlayer',
+    description: 'A simple music player UI.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a music player. It should be a 'Card' containing a 'Column'. Inside the column, there's an 'Image' for the album art, a 'Text' for the song title "Bohemian Rhapsody", another 'Text' for the artist "Queen", a 'Slider' for the song progress, and a 'Row' with three 'Button's: "Previous", "Play", and "Next".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Bohemian Rhapsody"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Queen"),
-      new SurfaceUpdateSchemaMatcher("Slider"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Previous"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Play"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Next"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Bohemian Rhapsody'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Queen'),
+      new SurfaceUpdateSchemaMatcher('Slider'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Previous'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Play'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Next'),
     ],
   },
   {
-    name: "weatherForecast",
-    description: "A UI to display the weather forecast.",
+    name: 'weatherForecast',
+    description: 'A UI to display the weather forecast.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a weather forecast UI. It should have a 'Heading' with the city name, "New York". Below it, a 'Row' with the current temperature as a 'Text' component ("68°F") and an 'Image' for the weather icon (e.g., a sun). Below that, a 'Divider'. Then, a 'List' component to display the 5-day forecast. Each item in the list should be a 'Row' with the day, an icon, and high/low temperatures.`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "New York"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "68°F"),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher("List"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'New York'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '68°F'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('List'),
     ],
   },
   {
-    name: "surveyForm",
-    description: "A customer feedback survey form.",
+    name: 'surveyForm',
+    description: 'A customer feedback survey form.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a survey form. It should have a 'Heading' "Customer Feedback". Then a 'MultipleChoice' question "How would you rate our service?" with options "Excellent", "Good", "Average", "Poor". Then a 'CheckBox' section for "What did you like?" with options "Product Quality", "Price", "Customer Support". Finally, a 'TextField' with the label "Any other comments?" and a 'Button' labeled "Submit Feedback".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Customer Feedback"),
-      new SurfaceUpdateSchemaMatcher("MultipleChoice", "options", "Excellent"),
-      new SurfaceUpdateSchemaMatcher("CheckBox", "label", "Product Quality"),
-      new SurfaceUpdateSchemaMatcher(
-        "TextField",
-        "label",
-        "Any other comments?"
-      ),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Submit Feedback"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Customer Feedback'),
+      new SurfaceUpdateSchemaMatcher('MultipleChoice', 'options', 'Excellent'),
+      new SurfaceUpdateSchemaMatcher('CheckBox', 'label', 'Product Quality'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Any other comments?'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Submit Feedback'),
     ],
   },
   {
-    name: "flightBooker",
-    description: "A form to search for flights.",
+    name: 'flightBooker',
+    description: 'A form to search for flights.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a flight booking form. It should have a 'Heading' "Book a Flight". Use a 'Row' for two 'TextField's: "Departure City" and "Arrival City". Below that, another 'Row' for two 'DateTimeInput's: "Departure Date" and "Return Date". Add a 'CheckBox' for "One-way trip". Finally, a 'Button' labeled "Search Flights".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Book a Flight"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Departure City"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Arrival City"),
-      new SurfaceUpdateSchemaMatcher("DateTimeInput"),
-      new SurfaceUpdateSchemaMatcher("CheckBox", "label", "One-way trip"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Search Flights"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Book a Flight'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Departure City'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Arrival City'),
+      new SurfaceUpdateSchemaMatcher('DateTimeInput'),
+      new SurfaceUpdateSchemaMatcher('CheckBox', 'label', 'One-way trip'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Search Flights'),
     ],
   },
   {
-    name: "dashboard",
-    description: "A simple dashboard with statistics.",
+    name: 'dashboard',
+    description: 'A simple dashboard with statistics.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a simple dashboard. It should have a 'Heading' "Sales Dashboard". Below, a 'Row' containing three 'Card's. The first card has a 'Text' "Revenue" and another 'Text' "$50,000". The second card has "New Customers" and "1,200". The third card has "Conversion Rate" and "4.5%".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Sales Dashboard"),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Revenue"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "$50,000"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "New Customers"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "1,200"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Conversion Rate"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "4.5%"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Sales Dashboard'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Revenue'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '$50,000'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'New Customers'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '1,200'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Conversion Rate'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '4.5%'),
     ],
   },
   {
-    name: "contactCard",
-    description: "A UI to display contact information.",
+    name: 'contactCard',
+    description: 'A UI to display contact information.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a contact card. It should be a 'Card' with a 'Row'. The row contains an 'Image' (as an avatar) and a 'Column'. The column contains a 'Text' for the name "Jane Doe", a 'Text' for the email "jane.doe@example.com", and a 'Text' for the phone number "(123) 456-7890". Below the main row, add a 'Button' labeled "View on Map".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Jane Doe"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "jane.doe@example.com"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "(123) 456-7890"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "View on Map"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Jane Doe'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'jane.doe@example.com'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '(123) 456-7890'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'View on Map'),
     ],
   },
   {
-    name: "calendarEventCreator",
-    description: "A form to create a new calendar event.",
+    name: 'calendarEventCreator',
+    description: 'A form to create a new calendar event.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a calendar event creation form. It should have a 'Heading' "New Event". Include a 'TextField' for the "Event Title". Use a 'Row' for two 'DateTimeInput's for "Start Time" and "End Time". Add a 'CheckBox' labeled "All-day event". Finally, a 'Row' with two 'Button's: "Save" and "Cancel".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "New Event"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Event Title"),
-      new SurfaceUpdateSchemaMatcher("DateTimeInput"),
-      new SurfaceUpdateSchemaMatcher("CheckBox", "label", "All-day event"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Save"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Cancel"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'New Event'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Event Title'),
+      new SurfaceUpdateSchemaMatcher('DateTimeInput'),
+      new SurfaceUpdateSchemaMatcher('CheckBox', 'label', 'All-day event'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Save'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Cancel'),
     ],
   },
   {
-    name: "checkoutPage",
-    description: "A simplified e-commerce checkout page.",
+    name: 'checkoutPage',
+    description: 'A simplified e-commerce checkout page.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a checkout page. It should have a 'Heading' "Checkout". Create a 'Column' for "Shipping Information" with 'TextField's for "Full Name" and "Address". Create another 'Column' for "Payment Information" with 'TextField's for "Card Number" and "Expiry Date". Add a 'Divider'. Show an order summary with a 'Text' component: "Total: $99.99". Finally, a 'Button' labeled "Place Order".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Checkout"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Full Name"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Address"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Card Number"),
-      new SurfaceUpdateSchemaMatcher("TextField", "label", "Expiry Date"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Total: $99.99"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Place Order"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Checkout'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Full Name'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Address'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Card Number'),
+      new SurfaceUpdateSchemaMatcher('TextField', 'label', 'Expiry Date'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Total: $99.99'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Place Order'),
     ],
   },
   {
-    name: "socialMediaPost",
-    description: "A component representing a social media post.",
+    name: 'socialMediaPost',
+    description: 'A component representing a social media post.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a social media post. It should be a 'Card' containing a 'Column'. The first item is a 'Row' with an 'Image' (user avatar) and a 'Text' (username "user123"). Below that, a 'Text' component for the post content: "Enjoying the beautiful weather today!". Then, an 'Image' for the main post picture. Finally, a 'Row' with three 'Button's: "Like", "Comment", and "Share".`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "user123"),
-      new SurfaceUpdateSchemaMatcher(
-        "Text",
-        "text",
-        "Enjoying the beautiful weather today!"
-      ),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Like"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Comment"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Share"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'user123'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Enjoying the beautiful weather today!'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Like'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Comment'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Share'),
     ],
   },
   {
-    name: "eCommerceProductPage",
-    description: "A detailed product page for an e-commerce website.",
+    name: 'eCommerceProductPage',
+    description: 'A detailed product page for an e-commerce website.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a product details page.
 The main layout should be a 'Row'.
@@ -414,22 +386,18 @@ The right side of the row is another 'Column' for product information:
 - A 'Button' with the label "Add to Cart".
 - A 'Text' component for the product description below the button.`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher(
-        "Heading",
-        "text",
-        "Premium Leather Jacket"
-      ),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "$299.99"),
-      new SurfaceUpdateSchemaMatcher("Image"),
-      new SurfaceUpdateSchemaMatcher("MultipleChoice", "options", "S"),
-      new SurfaceUpdateSchemaMatcher("MultipleChoice", "options", "Black"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Add to Cart"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Premium Leather Jacket'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '$299.99'),
+      new SurfaceUpdateSchemaMatcher('Image'),
+      new SurfaceUpdateSchemaMatcher('MultipleChoice', 'options', 'S'),
+      new SurfaceUpdateSchemaMatcher('MultipleChoice', 'options', 'Black'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Add to Cart'),
     ],
   },
   {
-    name: "interactiveDashboard",
-    description: "A dashboard with filters and data cards.",
+    name: 'interactiveDashboard',
+    description: 'A dashboard with filters and data cards.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for an interactive analytics dashboard.
 At the top, a 'Heading' "Company Dashboard".
@@ -442,21 +410,21 @@ Below the filters card, a 'Row' containing two 'Card's for key metrics:
 - The second 'Card' has a 'Heading' "New Users" and a 'Text' component showing "4,321".
 Finally, a large 'Card' at the bottom with a 'Heading' "Revenue Over Time" and a placeholder 'Image' to represent a line chart.`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Company Dashboard"),
-      new SurfaceUpdateSchemaMatcher("DateTimeInput"),
-      new SurfaceUpdateSchemaMatcher("Button", "label", "Apply Filters"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Total Revenue"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "$1,234,567"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "New Users"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "4,321"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Revenue Over Time"),
-      new SurfaceUpdateSchemaMatcher("Image"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Company Dashboard'),
+      new SurfaceUpdateSchemaMatcher('DateTimeInput'),
+      new SurfaceUpdateSchemaMatcher('Button', 'label', 'Apply Filters'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Total Revenue'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '$1,234,567'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'New Users'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', '4,321'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Revenue Over Time'),
+      new SurfaceUpdateSchemaMatcher('Image'),
     ],
   },
   {
-    name: "travelItinerary",
-    description: "A multi-day travel itinerary display.",
+    name: 'travelItinerary',
+    description: 'A multi-day travel itinerary display.',
     schemaPath,
     promptText: `Generate a JSON message with a surfaceUpdate property for a travel itinerary for a trip to Paris.
 It should have a main 'Heading' "Paris Adventure".
@@ -466,28 +434,16 @@ Below, use a 'List' to display three days. Each item in the list should be a 'Ca
 - The third 'Card' (Day 3) should contain a 'Heading' "Day 3: Art & Departure", and a 'List' of activities: "Visit Musée d'Orsay", "Explore Montmartre", "Depart from CDG".
 Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to mark as complete) and a 'Text' component with the activity description.`,
     matchers: [
-      new MessageTypeMatcher("surfaceUpdate"),
-      new SurfaceUpdateSchemaMatcher("Heading", "text", "Paris Adventure"),
-      new SurfaceUpdateSchemaMatcher(
-        "Heading",
-        "text",
-        "Day 1: Arrival & Eiffel Tower"
-      ),
-      new SurfaceUpdateSchemaMatcher(
-        "Heading",
-        "text",
-        "Day 2: Museums & Culture"
-      ),
-      new SurfaceUpdateSchemaMatcher(
-        "Heading",
-        "text",
-        "Day 3: Art & Departure"
-      ),
-      new SurfaceUpdateSchemaMatcher("Column"),
-      new SurfaceUpdateSchemaMatcher("CheckBox"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Visit the Eiffel Tower"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Visit the Louvre Museum"),
-      new SurfaceUpdateSchemaMatcher("Text", "text", "Explore Montmartre"),
+      new MessageTypeMatcher('surfaceUpdate'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Paris Adventure'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Day 1: Arrival & Eiffel Tower'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Day 2: Museums & Culture'),
+      new SurfaceUpdateSchemaMatcher('Heading', 'text', 'Day 3: Art & Departure'),
+      new SurfaceUpdateSchemaMatcher('Column'),
+      new SurfaceUpdateSchemaMatcher('CheckBox'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Visit the Eiffel Tower'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Visit the Louvre Museum'),
+      new SurfaceUpdateSchemaMatcher('Text', 'text', 'Explore Montmartre'),
     ],
   },
 ];
diff --git a/specification/v0_8/eval/src/surface_update_schema_matcher.ts b/specification/v0_8/eval/src/surface_update_schema_matcher.ts
index f248acc17..e6e1c1caf 100644
--- a/specification/v0_8/eval/src/surface_update_schema_matcher.ts
+++ b/specification/v0_8/eval/src/surface_update_schema_matcher.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { SchemaMatcher, ValidationResult } from "./schema_matcher";
+import {SchemaMatcher, ValidationResult} from './schema_matcher';
 
 /**
  * A schema matcher that validates the presence of a component type within a
@@ -26,7 +26,7 @@ export class SurfaceUpdateSchemaMatcher extends SchemaMatcher {
     public componentType: string,
     public propertyName?: string,
     public propertyValue?: any,
-    public caseInsensitive: boolean = false
+    public caseInsensitive: boolean = false,
   ) {
     super();
   }
@@ -55,13 +55,13 @@ export class SurfaceUpdateSchemaMatcher extends SchemaMatcher {
       if (c.component && Object.keys(c.component).length > 1) {
         return {
           success: false,
-          error: `Component ID '${c.id}' has multiple component types defined: ${Object.keys(c.component).join(", ")}`,
+          error: `Component ID '${c.id}' has multiple component types defined: ${Object.keys(c.component).join(', ')}`,
         };
       }
     }
 
     const matchingComponents = components.filter(
-      (c: any) => c.component && c.component[this.componentType]
+      (c: any) => c.component && c.component[this.componentType],
     );
 
     if (matchingComponents.length === 0) {
@@ -72,7 +72,7 @@ export class SurfaceUpdateSchemaMatcher extends SchemaMatcher {
     }
 
     if (!this.propertyName) {
-      return { success: true };
+      return {success: true};
     }
 
     for (const component of matchingComponents) {
@@ -81,32 +81,21 @@ export class SurfaceUpdateSchemaMatcher extends SchemaMatcher {
         // Check for property directly on the component
         if (properties[this.propertyName] !== undefined) {
           if (this.propertyValue === undefined) {
-            return { success: true };
+            return {success: true};
           }
           const actualValue = properties[this.propertyName];
           if (this.valueMatches(actualValue, this.propertyValue)) {
-            return { success: true };
+            return {success: true};
           }
         }
 
         // Specifically for Buttons, check for label in a child Text component
-        if (
-          this.componentType === "Button" &&
-          this.propertyName === "label" &&
-          properties.child
-        ) {
-          const childComponent = this.getComponentById(
-            components,
-            properties.child
-          );
-          if (
-            childComponent &&
-            childComponent.component &&
-            childComponent.component.Text
-          ) {
+        if (this.componentType === 'Button' && this.propertyName === 'label' && properties.child) {
+          const childComponent = this.getComponentById(components, properties.child);
+          if (childComponent && childComponent.component && childComponent.component.Text) {
             const textValue = childComponent.component.Text.text;
             if (this.valueMatches(textValue, this.propertyValue)) {
-              return { success: true };
+              return {success: true};
             }
           }
         }
@@ -132,16 +121,14 @@ export class SurfaceUpdateSchemaMatcher extends SchemaMatcher {
     }
 
     const compareStrings = (s1: string, s2: string) => {
-      return this.caseInsensitive
-        ? s1.toLowerCase() === s2.toLowerCase()
-        : s1 === s2;
+      return this.caseInsensitive ? s1.toLowerCase() === s2.toLowerCase() : s1 === s2;
     };
 
     // Handle new literal/path object structure
-    if (typeof actualValue === "object" && !Array.isArray(actualValue)) {
+    if (typeof actualValue === 'object' && !Array.isArray(actualValue)) {
       if (actualValue.literalString !== undefined) {
         return (
-          typeof expectedValue === "string" &&
+          typeof expectedValue === 'string' &&
           compareStrings(actualValue.literalString, expectedValue)
         );
       }
@@ -157,31 +144,24 @@ export class SurfaceUpdateSchemaMatcher extends SchemaMatcher {
     // Handle array cases (e.g., for MultipleChoice options)
     if (Array.isArray(actualValue)) {
       for (const item of actualValue) {
-        if (typeof item === "object" && item !== null) {
+        if (typeof item === 'object' && item !== null) {
           // Check if the item itself is a bound value object
           if (
             item.literalString !== undefined &&
-            typeof expectedValue === "string" &&
+            typeof expectedValue === 'string' &&
             compareStrings(item.literalString, expectedValue)
           )
             return true;
-          if (
-            item.literalNumber !== undefined &&
-            item.literalNumber === expectedValue
-          )
-            return true;
-          if (
-            item.literalBoolean !== undefined &&
-            item.literalBoolean === expectedValue
-          )
+          if (item.literalNumber !== undefined && item.literalNumber === expectedValue) return true;
+          if (item.literalBoolean !== undefined && item.literalBoolean === expectedValue)
             return true;
 
           // Check for structures like MultipleChoice options {label: {literalString: ...}, value: ...}
           if (
             item.label &&
-            typeof item.label === "object" &&
+            typeof item.label === 'object' &&
             item.label.literalString !== undefined &&
-            typeof expectedValue === "string" &&
+            typeof expectedValue === 'string' &&
             compareStrings(item.label.literalString, expectedValue)
           ) {
             return true;
@@ -190,8 +170,8 @@ export class SurfaceUpdateSchemaMatcher extends SchemaMatcher {
             return true;
           }
         } else if (
-          typeof item === "string" &&
-          typeof expectedValue === "string" &&
+          typeof item === 'string' &&
+          typeof expectedValue === 'string' &&
           compareStrings(item, expectedValue)
         ) {
           return true;
diff --git a/specification/v0_8/eval/src/validator.ts b/specification/v0_8/eval/src/validator.ts
index 63e86c78d..d1b1a58ee 100644
--- a/specification/v0_8/eval/src/validator.ts
+++ b/specification/v0_8/eval/src/validator.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { SurfaceUpdateSchemaMatcher } from "./surface_update_schema_matcher";
-import { SchemaMatcher } from "./schema_matcher";
+import {SurfaceUpdateSchemaMatcher} from './surface_update_schema_matcher';
+import {SchemaMatcher} from './schema_matcher';
 
 export function validateSchema(
   data: any,
@@ -33,7 +33,7 @@ export function validateSchema(
     validateDeleteSurface(data.deleteSurface, errors);
   } else {
     errors.push(
-      "A2UI Protocol message must have one of: surfaceUpdate, dataModelUpdate, beginRendering, deleteSurface.",
+      'A2UI Protocol message must have one of: surfaceUpdate, dataModelUpdate, beginRendering, deleteSurface.',
     );
   }
 
@@ -53,7 +53,7 @@ function validateDeleteSurface(data: any, errors: string[]) {
   if (data.surfaceId === undefined) {
     errors.push("DeleteSurface must have a 'surfaceId' property.");
   }
-  const allowed = ["surfaceId"];
+  const allowed = ['surfaceId'];
   for (const key in data) {
     if (!allowed.includes(key)) {
       errors.push(`DeleteSurface has unexpected property: ${key}`);
@@ -90,7 +90,7 @@ function validateDataModelUpdate(data: any, errors: string[]) {
     errors.push("DataModelUpdate must have a 'surfaceId' property.");
   }
 
-  const allowedTopLevel = ["surfaceId", "path", "contents"];
+  const allowedTopLevel = ['surfaceId', 'path', 'contents'];
   for (const key in data) {
     if (!allowedTopLevel.includes(key)) {
       errors.push(`DataModelUpdate has unexpected property: ${key}`);
@@ -102,19 +102,10 @@ function validateDataModelUpdate(data: any, errors: string[]) {
     return;
   }
 
-  const validateValueProperty = (
-    item: any,
-    itemErrors: string[],
-    prefix: string,
-  ) => {
-    const valueProps = [
-      "valueString",
-      "valueNumber",
-      "valueBoolean",
-      "valueMap",
-    ];
+  const validateValueProperty = (item: any, itemErrors: string[], prefix: string) => {
+    const valueProps = ['valueString', 'valueNumber', 'valueBoolean', 'valueMap'];
     let valueCount = 0;
-    let foundValueProp = "";
+    let foundValueProp = '';
     for (const prop of valueProps) {
       if (item[prop] !== undefined) {
         valueCount++;
@@ -123,23 +114,21 @@ function validateDataModelUpdate(data: any, errors: string[]) {
     }
     if (valueCount !== 1) {
       itemErrors.push(
-        `${prefix} must have exactly one value property (${valueProps.join(", ")}), found ${valueCount}.`,
+        `${prefix} must have exactly one value property (${valueProps.join(', ')}), found ${valueCount}.`,
       );
       return;
     }
 
-    if (foundValueProp === "valueMap") {
+    if (foundValueProp === 'valueMap') {
       if (!Array.isArray(item.valueMap)) {
         itemErrors.push(`${prefix} 'valueMap' must be an array.`);
         return;
       }
       item.valueMap.forEach((mapItem: any, index: number) => {
         if (!mapItem.key) {
-          itemErrors.push(
-            `${prefix} 'valueMap' item at index ${index} is missing a 'key'.`,
-          );
+          itemErrors.push(`${prefix} 'valueMap' item at index ${index} is missing a 'key'.`);
         }
-        const mapValueProps = ["valueString", "valueNumber", "valueBoolean"];
+        const mapValueProps = ['valueString', 'valueNumber', 'valueBoolean'];
         let mapValueCount = 0;
         for (const prop of mapValueProps) {
           if (mapItem[prop] !== undefined) {
@@ -148,10 +137,10 @@ function validateDataModelUpdate(data: any, errors: string[]) {
         }
         if (mapValueCount !== 1) {
           itemErrors.push(
-            `${prefix} 'valueMap' item at index ${index} must have exactly one value property (${mapValueProps.join(", ")}), found ${mapValueCount}.`,
+            `${prefix} 'valueMap' item at index ${index} must have exactly one value property (${mapValueProps.join(', ')}), found ${mapValueCount}.`,
           );
         }
-        const allowedMapKeys = ["key", ...mapValueProps];
+        const allowedMapKeys = ['key', ...mapValueProps];
         for (const key in mapItem) {
           if (!allowedMapKeys.includes(key)) {
             itemErrors.push(
@@ -165,22 +154,10 @@ function validateDataModelUpdate(data: any, errors: string[]) {
 
   data.contents.forEach((item: any, index: number) => {
     if (!item.key) {
-      errors.push(
-        `DataModelUpdate 'contents' item at index ${index} is missing a 'key'.`,
-      );
+      errors.push(`DataModelUpdate 'contents' item at index ${index} is missing a 'key'.`);
     }
-    validateValueProperty(
-      item,
-      errors,
-      `DataModelUpdate 'contents' item at index ${index}`,
-    );
-    const allowedKeys = [
-      "key",
-      "valueString",
-      "valueNumber",
-      "valueBoolean",
-      "valueMap",
-    ];
+    validateValueProperty(item, errors, `DataModelUpdate 'contents' item at index ${index}`);
+    const allowedKeys = ['key', 'valueString', 'valueNumber', 'valueBoolean', 'valueMap'];
     for (const key in item) {
       if (!allowedKeys.includes(key)) {
         errors.push(
@@ -207,19 +184,14 @@ function validateBoundValue(
   componentType: string,
   errors: string[],
 ) {
-  if (typeof prop !== "object" || prop === null || Array.isArray(prop)) {
+  if (typeof prop !== 'object' || prop === null || Array.isArray(prop)) {
     errors.push(
       `Component '${componentId}' of type '${componentType}' property '${propName}' must be an object.`,
     );
     return;
   }
   const keys = Object.keys(prop);
-  const allowedKeys = [
-    "literalString",
-    "literalNumber",
-    "literalBoolean",
-    "path",
-  ];
+  const allowedKeys = ['literalString', 'literalNumber', 'literalBoolean', 'path'];
   let validKeyCount = 0;
   for (const key of keys) {
     if (allowedKeys.includes(key)) {
@@ -228,16 +200,12 @@ function validateBoundValue(
   }
   if (validKeyCount !== 1 || keys.length !== 1) {
     errors.push(
-      `Component '${componentId}' of type '${componentType}' property '${propName}' must have exactly one key from [${allowedKeys.join(", ")}]. Found: ${keys.join(", ")}`,
+      `Component '${componentId}' of type '${componentType}' property '${propName}' must have exactly one key from [${allowedKeys.join(', ')}]. Found: ${keys.join(', ')}`,
     );
   }
 }
 
-function validateComponent(
-  component: any,
-  allIds: Set<string>,
-  errors: string[],
-) {
+function validateComponent(component: any, allIds: Set<string>, errors: string[]) {
   if (!component.id) {
     errors.push(`Component is missing an 'id'.`);
     return;
@@ -271,112 +239,62 @@ function validateComponent(
   const checkRefs = (ids: (string | undefined)[]) => {
     for (const id of ids) {
       if (id && !allIds.has(id)) {
-        errors.push(
-          `Component '${component.id}' references non-existent component ID '${id}'.`,
-        );
+        errors.push(`Component '${component.id}' references non-existent component ID '${id}'.`);
       }
     }
   };
 
   switch (componentType) {
-    case "Heading":
-      checkRequired(["text"]);
+    case 'Heading':
+      checkRequired(['text']);
       if (properties.text)
-        validateBoundValue(
-          properties.text,
-          "text",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.text, 'text', component.id, componentType, errors);
       break;
-    case "Text":
-      checkRequired(["text"]);
+    case 'Text':
+      checkRequired(['text']);
       if (properties.text)
-        validateBoundValue(
-          properties.text,
-          "text",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.text, 'text', component.id, componentType, errors);
       break;
-    case "Image":
-      checkRequired(["url"]);
+    case 'Image':
+      checkRequired(['url']);
       if (properties.url)
-        validateBoundValue(
-          properties.url,
-          "url",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.url, 'url', component.id, componentType, errors);
       break;
-    case "Video":
-      checkRequired(["url"]);
+    case 'Video':
+      checkRequired(['url']);
       if (properties.url)
-        validateBoundValue(
-          properties.url,
-          "url",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.url, 'url', component.id, componentType, errors);
       break;
-    case "AudioPlayer":
-      checkRequired(["url"]);
+    case 'AudioPlayer':
+      checkRequired(['url']);
       if (properties.url)
-        validateBoundValue(
-          properties.url,
-          "url",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.url, 'url', component.id, componentType, errors);
       if (properties.description)
         validateBoundValue(
           properties.description,
-          "description",
+          'description',
           component.id,
           componentType,
           errors,
         );
       break;
-    case "TextField":
-      checkRequired(["label"]);
+    case 'TextField':
+      checkRequired(['label']);
       if (properties.label)
-        validateBoundValue(
-          properties.label,
-          "label",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.label, 'label', component.id, componentType, errors);
       if (properties.text)
-        validateBoundValue(
-          properties.text,
-          "text",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.text, 'text', component.id, componentType, errors);
       break;
-    case "DateTimeInput":
-      checkRequired(["value"]);
+    case 'DateTimeInput':
+      checkRequired(['value']);
       if (properties.value)
-        validateBoundValue(
-          properties.value,
-          "value",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.value, 'value', component.id, componentType, errors);
       break;
-    case "MultipleChoice":
-      checkRequired(["selections", "options"]);
+    case 'MultipleChoice':
+      checkRequired(['selections', 'options']);
       if (properties.selections) {
         if (
-          typeof properties.selections !== "object" ||
+          typeof properties.selections !== 'object' ||
           properties.selections === null ||
           (!properties.selections.literalArray && !properties.selections.path)
         ) {
@@ -388,58 +306,30 @@ function validateComponent(
       if (Array.isArray(properties.options)) {
         properties.options.forEach((option: any, index: number) => {
           if (!option.label)
-            errors.push(
-              `Component '${component.id}' option at index ${index} missing 'label'.`,
-            );
+            errors.push(`Component '${component.id}' option at index ${index} missing 'label'.`);
           if (option.label)
-            validateBoundValue(
-              option.label,
-              "label",
-              component.id,
-              componentType,
-              errors,
-            );
+            validateBoundValue(option.label, 'label', component.id, componentType, errors);
           if (!option.value)
-            errors.push(
-              `Component '${component.id}' option at index ${index} missing 'value'.`,
-            );
+            errors.push(`Component '${component.id}' option at index ${index} missing 'value'.`);
         });
       }
       break;
-    case "Slider":
-      checkRequired(["value"]);
+    case 'Slider':
+      checkRequired(['value']);
       if (properties.value)
-        validateBoundValue(
-          properties.value,
-          "value",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.value, 'value', component.id, componentType, errors);
       break;
-    case "CheckBox":
-      checkRequired(["value", "label"]);
+    case 'CheckBox':
+      checkRequired(['value', 'label']);
       if (properties.value)
-        validateBoundValue(
-          properties.value,
-          "value",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.value, 'value', component.id, componentType, errors);
       if (properties.label)
-        validateBoundValue(
-          properties.label,
-          "label",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.label, 'label', component.id, componentType, errors);
       break;
-    case "Row":
-    case "Column":
-    case "List":
-      checkRequired(["children"]);
+    case 'Row':
+    case 'Column':
+    case 'List':
+      checkRequired(['children']);
       if (properties.children && Array.isArray(properties.children)) {
         const hasExplicit = !!properties.children.explicitList;
         const hasTemplate = !!properties.children.template;
@@ -456,66 +346,46 @@ function validateComponent(
         }
       }
       break;
-    case "Card":
-      checkRequired(["child"]);
+    case 'Card':
+      checkRequired(['child']);
       checkRefs([properties.child]);
       break;
-    case "Tabs":
-      checkRequired(["tabItems"]);
+    case 'Tabs':
+      checkRequired(['tabItems']);
       if (properties.tabItems && Array.isArray(properties.tabItems)) {
         properties.tabItems.forEach((tab: any) => {
           if (!tab.title) {
-            errors.push(
-              `Tab item in component '${component.id}' is missing a 'title'.`,
-            );
+            errors.push(`Tab item in component '${component.id}' is missing a 'title'.`);
           }
           if (!tab.child) {
-            errors.push(
-              `Tab item in component '${component.id}' is missing a 'child'.`,
-            );
+            errors.push(`Tab item in component '${component.id}' is missing a 'child'.`);
           }
           checkRefs([tab.child]);
           if (tab.title)
-            validateBoundValue(
-              tab.title,
-              "title",
-              component.id,
-              componentType,
-              errors,
-            );
+            validateBoundValue(tab.title, 'title', component.id, componentType, errors);
         });
       }
       break;
-    case "Modal":
-      checkRequired(["entryPointChild", "contentChild"]);
+    case 'Modal':
+      checkRequired(['entryPointChild', 'contentChild']);
       checkRefs([properties.entryPointChild, properties.contentChild]);
       break;
-    case "Button":
-      checkRequired(["child", "action"]);
+    case 'Button':
+      checkRequired(['child', 'action']);
       checkRefs([properties.child]);
       if (!properties.action || !properties.action.name) {
-        errors.push(
-          `Component '${component.id}' Button action is missing a 'name'.`,
-        );
+        errors.push(`Component '${component.id}' Button action is missing a 'name'.`);
       }
       break;
-    case "Divider":
+    case 'Divider':
       // No required properties
       break;
-    case "Icon":
-      checkRequired(["name"]);
+    case 'Icon':
+      checkRequired(['name']);
       if (properties.name)
-        validateBoundValue(
-          properties.name,
-          "name",
-          component.id,
-          componentType,
-          errors,
-        );
+        validateBoundValue(properties.name, 'name', component.id, componentType, errors);
       break;
     default:
-      errors.push(
-        `Unknown component type '${componentType}' in component '${component.id}'.`,
-      );
+      errors.push(`Unknown component type '${componentType}' in component '${component.id}'.`);
   }
 }
diff --git a/specification/v0_8/eval/tsconfig.json b/specification/v0_8/eval/tsconfig.json
index cb2bc5954..12f02b5f9 100644
--- a/specification/v0_8/eval/tsconfig.json
+++ b/specification/v0_8/eval/tsconfig.json
@@ -9,4 +9,4 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
   }
-}
\ No newline at end of file
+}
diff --git a/specification/v0_8/json/README.md b/specification/v0_8/json/README.md
index 2c1ecc839..6f41d3d78 100644
--- a/specification/v0_8/json/README.md
+++ b/specification/v0_8/json/README.md
@@ -4,14 +4,14 @@ This directory contains the formal JSON Schema definitions for the A2UI protocol
 
 ## Schema Descriptions
 
--   `server_to_client.json`: This is the core, catalog-agnostic schema for messages sent from the server to the client. It defines the four main message types (`beginRendering`, `surfaceUpdate`, `dataModelUpdate`, `deleteSurface`) and their structure. In this schema, the `component` object within a `surfaceUpdate` message is generic (`"additionalProperties": true`), allowing any component definitions to be passed.
+- `server_to_client.json`: This is the core, catalog-agnostic schema for messages sent from the server to the client. It defines the four main message types (`beginRendering`, `surfaceUpdate`, `dataModelUpdate`, `deleteSurface`) and their structure. In this schema, the `component` object within a `surfaceUpdate` message is generic (`"additionalProperties": true`), allowing any component definitions to be passed.
 
--   `client_to_server.json`: This schema defines the structure for event messages sent from the client to the server. This includes user-initiated actions (`userAction`), error reporting (`error`), and the crucial `clientUiCapabilities` message, which allows a client to inform the server about the component catalog it supports.
+- `client_to_server.json`: This schema defines the structure for event messages sent from the client to the server. This includes user-initiated actions (`userAction`), error reporting (`error`), and the crucial `clientUiCapabilities` message, which allows a client to inform the server about the component catalog it supports.
 
--   `catalog_description_schema.json`: This is a meta-schema that defines the structure of an A2UI component catalog. A catalog consists of a `components` object and a `styles` object, where each key is a component/style name and the value is a JSON schema defining its properties. This allows for the creation of custom component sets.
+- `catalog_description_schema.json`: This is a meta-schema that defines the structure of an A2UI component catalog. A catalog consists of a `components` object and a `styles` object, where each key is a component/style name and the value is a JSON schema defining its properties. This allows for the creation of custom component sets.
 
--   `standard_catalog_definition.json`: This file is a concrete implementation of a catalog, conforming to the `catalog_description_schema.json`. It defines the standard set of components (e.g., `Text`, `Image`, `Row`, `Card`) and styles that are part of the baseline A2UI specification.
+- `standard_catalog_definition.json`: This file is a concrete implementation of a catalog, conforming to the `catalog_description_schema.json`. It defines the standard set of components (e.g., `Text`, `Image`, `Row`, `Card`) and styles that are part of the baseline A2UI specification.
 
--   `server_to_client_with_standard_catalog.json`: This is a resolved, LLM-friendly version of the server-to-client schema. It is generated by combining `server_to_client.json` with the `standard_catalog_definition.json`. In this version, the generic `component` object is replaced with a strict `oneOf` definition that includes every component from the standard catalog. This provides a complete, strictly-typed schema that is ideal for LLMs to use for generating valid A2UI messages without ambiguity.
+- `server_to_client_with_standard_catalog.json`: This is a resolved, LLM-friendly version of the server-to-client schema. It is generated by combining `server_to_client.json` with the `standard_catalog_definition.json`. In this version, the generic `component` object is replaced with a strict `oneOf` definition that includes every component from the standard catalog. This provides a complete, strictly-typed schema that is ideal for LLMs to use for generating valid A2UI messages without ambiguity.
 
--   `catalogs/minimal/minimal_catalog.json`: This is a strict subset of the standard catalog, containing only a core set of fundamental components (`Text`, `Row`, `Column`, `Button`, `TextField`). It is designed for testing new renderer implementations and serves as a simpler entry point for development.
+- `catalogs/minimal/minimal_catalog.json`: This is a strict subset of the standard catalog, containing only a core set of fundamental components (`Text`, `Row`, `Column`, `Button`, `TextField`). It is designed for testing new renderer implementations and serves as a simpler entry point for development.
diff --git a/specification/v0_8/json/catalog_description_schema.json b/specification/v0_8/json/catalog_description_schema.json
index 8338c37a9..09fc0db67 100644
--- a/specification/v0_8/json/catalog_description_schema.json
+++ b/specification/v0_8/json/catalog_description_schema.json
@@ -26,9 +26,5 @@
       }
     }
   },
-  "required": [
-    "catalogId",
-    "components",
-    "styles"
-  ]
+  "required": ["catalogId", "components", "styles"]
 }
diff --git a/specification/v0_8/json/catalogs/basic/examples/01_flight-status.json b/specification/v0_8/json/catalogs/basic/examples/01_flight-status.json
index 1898acff3..f491c6185 100644
--- a/specification/v0_8/json/catalogs/basic/examples/01_flight-status.json
+++ b/specification/v0_8/json/catalogs/basic/examples/01_flight-status.json
@@ -16,12 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header-row",
-                  "route-row",
-                  "divider",
-                  "times-row"
-                ]
+                "explicitList": ["header-row", "route-row", "divider", "times-row"]
               },
               "alignment": "stretch"
             }
@@ -32,10 +27,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "header-left",
-                  "date"
-                ]
+                "explicitList": ["header-left", "date"]
               },
               "distribution": "spaceBetween",
               "alignment": "center"
@@ -47,10 +39,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "flight-indicator",
-                  "flight-number"
-                ]
+                "explicitList": ["flight-indicator", "flight-number"]
               },
               "alignment": "center"
             }
@@ -93,11 +82,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "origin",
-                  "arrow",
-                  "destination"
-                ]
+                "explicitList": ["origin", "arrow", "destination"]
               },
               "alignment": "center"
             }
@@ -147,11 +132,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "departure-col",
-                  "status-col",
-                  "arrival-col"
-                ]
+                "explicitList": ["departure-col", "status-col", "arrival-col"]
               },
               "distribution": "spaceBetween"
             }
@@ -162,10 +143,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "departure-label",
-                  "departure-time"
-                ]
+                "explicitList": ["departure-label", "departure-time"]
               },
               "alignment": "start"
             }
@@ -198,10 +176,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "status-label",
-                  "status-value"
-                ]
+                "explicitList": ["status-label", "status-value"]
               },
               "alignment": "center"
             }
@@ -234,10 +209,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "arrival-label",
-                  "arrival-time"
-                ]
+                "explicitList": ["arrival-label", "arrival-time"]
               },
               "alignment": "end"
             }
@@ -309,4 +281,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/02_email-compose.json b/specification/v0_8/json/catalogs/basic/examples/02_email-compose.json
index 85a458de5..f44e6e4db 100644
--- a/specification/v0_8/json/catalogs/basic/examples/02_email-compose.json
+++ b/specification/v0_8/json/catalogs/basic/examples/02_email-compose.json
@@ -33,10 +33,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "from-label",
-                  "from-value"
-                ]
+                "explicitList": ["from-label", "from-value"]
               },
               "alignment": "center"
             }
@@ -69,10 +66,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "to-label",
-                  "to-value"
-                ]
+                "explicitList": ["to-label", "to-value"]
               },
               "alignment": "center"
             }
@@ -105,10 +99,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "subject-label",
-                  "subject-value"
-                ]
+                "explicitList": ["subject-label", "subject-value"]
               },
               "alignment": "center"
             }
@@ -147,12 +138,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "greeting",
-                  "body-text",
-                  "closing",
-                  "signature"
-                ]
+                "explicitList": ["greeting", "body-text", "closing", "signature"]
               }
             }
           }
@@ -206,10 +192,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "send-btn",
-                  "discard-btn"
-                ]
+                "explicitList": ["send-btn", "discard-btn"]
               }
             }
           }
@@ -302,4 +285,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/03_calendar-day.json b/specification/v0_8/json/catalogs/basic/examples/03_calendar-day.json
index 5754e5b61..c7f66a729 100644
--- a/specification/v0_8/json/catalogs/basic/examples/03_calendar-day.json
+++ b/specification/v0_8/json/catalogs/basic/examples/03_calendar-day.json
@@ -16,11 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header-row",
-                  "divider",
-                  "actions"
-                ]
+                "explicitList": ["header-row", "divider", "actions"]
               }
             }
           }
@@ -30,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "date-col",
-                  "events-col"
-                ]
+                "explicitList": ["date-col", "events-col"]
               }
             }
           }
@@ -43,10 +36,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "day-name",
-                  "day-number"
-                ]
+                "explicitList": ["day-name", "day-number"]
               },
               "alignment": "start"
             }
@@ -79,11 +69,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "event1",
-                  "event2",
-                  "event3"
-                ]
+                "explicitList": ["event1", "event2", "event3"]
               }
             }
           }
@@ -93,10 +79,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "event1-title",
-                  "event1-time"
-                ]
+                "explicitList": ["event1-title", "event1-time"]
               }
             }
           }
@@ -128,10 +111,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "event2-title",
-                  "event2-time"
-                ]
+                "explicitList": ["event2-title", "event2-time"]
               }
             }
           }
@@ -163,10 +143,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "event3-title",
-                  "event3-time"
-                ]
+                "explicitList": ["event3-title", "event3-time"]
               }
             }
           }
@@ -204,10 +181,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "add-btn",
-                  "discard-btn"
-                ]
+                "explicitList": ["add-btn", "discard-btn"]
               }
             }
           }
@@ -319,4 +293,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/04_weather-current.json b/specification/v0_8/json/catalogs/basic/examples/04_weather-current.json
index 4963d83fe..ec02572a8 100644
--- a/specification/v0_8/json/catalogs/basic/examples/04_weather-current.json
+++ b/specification/v0_8/json/catalogs/basic/examples/04_weather-current.json
@@ -16,12 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "temp-row",
-                  "location",
-                  "description",
-                  "forecast-row"
-                ]
+                "explicitList": ["temp-row", "location", "description", "forecast-row"]
               },
               "alignment": "center"
             }
@@ -32,10 +27,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "temp-high",
-                  "temp-low"
-                ]
+                "explicitList": ["temp-high", "temp-low"]
               },
               "alignment": "start"
             }
@@ -90,13 +82,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "day1",
-                  "day2",
-                  "day3",
-                  "day4",
-                  "day5"
-                ]
+                "explicitList": ["day1", "day2", "day3", "day4", "day5"]
               },
               "distribution": "spaceAround"
             }
@@ -107,10 +93,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "day1-icon",
-                  "day1-temp"
-                ]
+                "explicitList": ["day1-icon", "day1-temp"]
               },
               "alignment": "center"
             }
@@ -143,10 +126,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "day2-icon",
-                  "day2-temp"
-                ]
+                "explicitList": ["day2-icon", "day2-temp"]
               },
               "alignment": "center"
             }
@@ -179,10 +159,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "day3-icon",
-                  "day3-temp"
-                ]
+                "explicitList": ["day3-icon", "day3-temp"]
               },
               "alignment": "center"
             }
@@ -215,10 +192,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "day4-icon",
-                  "day4-temp"
-                ]
+                "explicitList": ["day4-icon", "day4-temp"]
               },
               "alignment": "center"
             }
@@ -251,10 +225,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "day5-icon",
-                  "day5-temp"
-                ]
+                "explicitList": ["day5-icon", "day5-temp"]
               },
               "alignment": "center"
             }
@@ -318,4 +289,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/05_product-card.json b/specification/v0_8/json/catalogs/basic/examples/05_product-card.json
index 2368af55e..25a296f6c 100644
--- a/specification/v0_8/json/catalogs/basic/examples/05_product-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/05_product-card.json
@@ -16,10 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "image",
-                  "details"
-                ]
+                "explicitList": ["image", "details"]
               }
             }
           }
@@ -40,12 +37,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "name",
-                  "rating-row",
-                  "price-row",
-                  "actions"
-                ]
+                "explicitList": ["name", "rating-row", "price-row", "actions"]
               }
             }
           }
@@ -66,10 +58,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "stars",
-                  "reviews"
-                ]
+                "explicitList": ["stars", "reviews"]
               },
               "alignment": "center"
             }
@@ -102,10 +91,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "price",
-                  "original-price"
-                ]
+                "explicitList": ["price", "original-price"]
               },
               "alignment": "start"
             }
@@ -138,9 +124,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "add-cart-btn"
-                ]
+                "explicitList": ["add-cart-btn"]
               }
             }
           }
@@ -207,4 +191,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/06_music-player.json b/specification/v0_8/json/catalogs/basic/examples/06_music-player.json
index ace24950a..8984f7bc9 100644
--- a/specification/v0_8/json/catalogs/basic/examples/06_music-player.json
+++ b/specification/v0_8/json/catalogs/basic/examples/06_music-player.json
@@ -16,13 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "album-art",
-                  "track-info",
-                  "progress",
-                  "time-row",
-                  "controls"
-                ]
+                "explicitList": ["album-art", "track-info", "progress", "time-row", "controls"]
               },
               "alignment": "center"
             }
@@ -44,10 +38,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "song-title",
-                  "artist"
-                ]
+                "explicitList": ["song-title", "artist"]
               },
               "alignment": "center"
             }
@@ -91,10 +82,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "current-time",
-                  "total-time"
-                ]
+                "explicitList": ["current-time", "total-time"]
               },
               "distribution": "spaceBetween"
             }
@@ -127,11 +115,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "prev-btn",
-                  "play-btn",
-                  "next-btn"
-                ]
+                "explicitList": ["prev-btn", "play-btn", "next-btn"]
               },
               "distribution": "center"
             }
@@ -251,4 +235,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/07_task-card.json b/specification/v0_8/json/catalogs/basic/examples/07_task-card.json
index a30417a69..f15821c5b 100644
--- a/specification/v0_8/json/catalogs/basic/examples/07_task-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/07_task-card.json
@@ -16,10 +16,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "content",
-                  "priority"
-                ]
+                "explicitList": ["content", "priority"]
               },
               "alignment": "start"
             }
@@ -30,11 +27,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title",
-                  "description",
-                  "meta-row"
-                ]
+                "explicitList": ["title", "description", "meta-row"]
               }
             }
           }
@@ -66,10 +59,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "due-date",
-                  "project"
-                ]
+                "explicitList": ["due-date", "project"]
               }
             }
           }
@@ -142,4 +132,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/08_user-profile.json b/specification/v0_8/json/catalogs/basic/examples/08_user-profile.json
index b0def3672..480b69ce7 100644
--- a/specification/v0_8/json/catalogs/basic/examples/08_user-profile.json
+++ b/specification/v0_8/json/catalogs/basic/examples/08_user-profile.json
@@ -16,13 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "info",
-                  "bio",
-                  "stats-row",
-                  "follow-btn"
-                ]
+                "explicitList": ["header", "info", "bio", "stats-row", "follow-btn"]
               },
               "alignment": "center"
             }
@@ -45,10 +39,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "name",
-                  "username"
-                ]
+                "explicitList": ["name", "username"]
               },
               "alignment": "center"
             }
@@ -92,11 +83,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "followers-col",
-                  "following-col",
-                  "posts-col"
-                ]
+                "explicitList": ["followers-col", "following-col", "posts-col"]
               },
               "distribution": "spaceAround"
             }
@@ -107,10 +94,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "followers-count",
-                  "followers-label"
-                ]
+                "explicitList": ["followers-count", "followers-label"]
               },
               "alignment": "center"
             }
@@ -143,10 +127,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "following-count",
-                  "following-label"
-                ]
+                "explicitList": ["following-count", "following-label"]
               },
               "alignment": "center"
             }
@@ -179,10 +160,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "posts-count",
-                  "posts-label"
-                ]
+                "explicitList": ["posts-count", "posts-label"]
               },
               "alignment": "center"
             }
@@ -280,4 +258,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/09_login-form.json b/specification/v0_8/json/catalogs/basic/examples/09_login-form.json
index ca412bd7f..7fbed6f48 100644
--- a/specification/v0_8/json/catalogs/basic/examples/09_login-form.json
+++ b/specification/v0_8/json/catalogs/basic/examples/09_login-form.json
@@ -33,10 +33,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title",
-                  "subtitle"
-                ]
+                "explicitList": ["title", "subtitle"]
               },
               "alignment": "center"
             }
@@ -124,10 +121,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "no-account",
-                  "signup-link"
-                ]
+                "explicitList": ["no-account", "signup-link"]
               },
               "distribution": "center"
             }
@@ -190,4 +184,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/10_notification-permission.json b/specification/v0_8/json/catalogs/basic/examples/10_notification-permission.json
index c4036d76e..cf3e0b60e 100644
--- a/specification/v0_8/json/catalogs/basic/examples/10_notification-permission.json
+++ b/specification/v0_8/json/catalogs/basic/examples/10_notification-permission.json
@@ -16,12 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "icon",
-                  "title",
-                  "description",
-                  "actions"
-                ]
+                "explicitList": ["icon", "title", "description", "actions"]
               },
               "alignment": "center"
             }
@@ -64,10 +59,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "yes-btn",
-                  "no-btn"
-                ]
+                "explicitList": ["yes-btn", "no-btn"]
               },
               "distribution": "center"
             }
@@ -145,4 +137,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/11_purchase-complete.json b/specification/v0_8/json/catalogs/basic/examples/11_purchase-complete.json
index d796da812..2997f275e 100644
--- a/specification/v0_8/json/catalogs/basic/examples/11_purchase-complete.json
+++ b/specification/v0_8/json/catalogs/basic/examples/11_purchase-complete.json
@@ -55,10 +55,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "product-image",
-                  "product-info"
-                ]
+                "explicitList": ["product-image", "product-info"]
               },
               "alignment": "center"
             }
@@ -80,10 +77,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "product-name",
-                  "product-price"
-                ]
+                "explicitList": ["product-name", "product-price"]
               }
             }
           }
@@ -121,10 +115,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "delivery-row",
-                  "seller-row"
-                ]
+                "explicitList": ["delivery-row", "seller-row"]
               }
             }
           }
@@ -134,10 +125,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "delivery-icon",
-                  "delivery-text"
-                ]
+                "explicitList": ["delivery-icon", "delivery-text"]
               },
               "alignment": "center"
             }
@@ -169,10 +157,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "seller-label",
-                  "seller-name"
-                ]
+                "explicitList": ["seller-label", "seller-name"]
               }
             }
           }
@@ -257,4 +242,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/12_chat-message.json b/specification/v0_8/json/catalogs/basic/examples/12_chat-message.json
index cee8a15e6..36ab56c90 100644
--- a/specification/v0_8/json/catalogs/basic/examples/12_chat-message.json
+++ b/specification/v0_8/json/catalogs/basic/examples/12_chat-message.json
@@ -16,11 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "divider",
-                  "messages"
-                ]
+                "explicitList": ["header", "divider", "messages"]
               }
             }
           }
@@ -30,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "channel-icon",
-                  "channel-name"
-                ]
+                "explicitList": ["channel-icon", "channel-name"]
               },
               "alignment": "center"
             }
@@ -71,10 +64,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "message1",
-                  "message2"
-                ]
+                "explicitList": ["message1", "message2"]
               },
               "alignment": "start"
             }
@@ -85,10 +75,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "avatar1",
-                  "msg1-content"
-                ]
+                "explicitList": ["avatar1", "msg1-content"]
               },
               "alignment": "start"
             }
@@ -111,10 +98,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "msg1-header",
-                  "msg1-text"
-                ]
+                "explicitList": ["msg1-header", "msg1-text"]
               }
             }
           }
@@ -124,10 +108,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "msg1-username",
-                  "msg1-time"
-                ]
+                "explicitList": ["msg1-username", "msg1-time"]
               },
               "alignment": "center"
             }
@@ -171,10 +152,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "avatar2",
-                  "msg2-content"
-                ]
+                "explicitList": ["avatar2", "msg2-content"]
               },
               "alignment": "start"
             }
@@ -197,10 +175,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "msg2-header",
-                  "msg2-text"
-                ]
+                "explicitList": ["msg2-header", "msg2-text"]
               }
             }
           }
@@ -210,10 +185,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "msg2-username",
-                  "msg2-time"
-                ]
+                "explicitList": ["msg2-username", "msg2-time"]
               },
               "alignment": "center"
             }
@@ -314,4 +286,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/13_coffee-order.json b/specification/v0_8/json/catalogs/basic/examples/13_coffee-order.json
index 8e7e52284..b149384fd 100644
--- a/specification/v0_8/json/catalogs/basic/examples/13_coffee-order.json
+++ b/specification/v0_8/json/catalogs/basic/examples/13_coffee-order.json
@@ -16,13 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "items",
-                  "divider",
-                  "totals",
-                  "actions"
-                ]
+                "explicitList": ["header", "items", "divider", "totals", "actions"]
               }
             }
           }
@@ -32,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "coffee-icon",
-                  "store-name"
-                ]
+                "explicitList": ["coffee-icon", "store-name"]
               },
               "alignment": "center"
             }
@@ -67,10 +58,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "item1",
-                  "item2"
-                ]
+                "explicitList": ["item1", "item2"]
               }
             }
           }
@@ -80,10 +68,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "item1-details",
-                  "item1-price"
-                ]
+                "explicitList": ["item1-details", "item1-price"]
               },
               "distribution": "spaceBetween",
               "alignment": "start"
@@ -95,10 +80,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "item1-name",
-                  "item1-size"
-                ]
+                "explicitList": ["item1-name", "item1-size"]
               }
             }
           }
@@ -141,10 +123,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "item2-details",
-                  "item2-price"
-                ]
+                "explicitList": ["item2-details", "item2-price"]
               },
               "distribution": "spaceBetween",
               "alignment": "start"
@@ -156,10 +135,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "item2-name",
-                  "item2-size"
-                ]
+                "explicitList": ["item2-name", "item2-size"]
               }
             }
           }
@@ -208,11 +184,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "subtotal-row",
-                  "tax-row",
-                  "total-row"
-                ]
+                "explicitList": ["subtotal-row", "tax-row", "total-row"]
               }
             }
           }
@@ -222,10 +194,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "subtotal-label",
-                  "subtotal-value"
-                ]
+                "explicitList": ["subtotal-label", "subtotal-value"]
               },
               "distribution": "spaceBetween"
             }
@@ -258,10 +227,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "tax-label",
-                  "tax-value"
-                ]
+                "explicitList": ["tax-label", "tax-value"]
               },
               "distribution": "spaceBetween"
             }
@@ -294,10 +260,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "total-label",
-                  "total-value"
-                ]
+                "explicitList": ["total-label", "total-value"]
               },
               "distribution": "spaceBetween"
             }
@@ -330,10 +293,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "purchase-btn",
-                  "add-btn"
-                ]
+                "explicitList": ["purchase-btn", "add-btn"]
               }
             }
           }
@@ -448,4 +408,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/14_sports-player.json b/specification/v0_8/json/catalogs/basic/examples/14_sports-player.json
index 7de840112..d7689f1d8 100644
--- a/specification/v0_8/json/catalogs/basic/examples/14_sports-player.json
+++ b/specification/v0_8/json/catalogs/basic/examples/14_sports-player.json
@@ -16,12 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "player-image",
-                  "player-info",
-                  "divider",
-                  "stats-row"
-                ]
+                "explicitList": ["player-image", "player-info", "divider", "stats-row"]
               },
               "alignment": "center"
             }
@@ -43,10 +38,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "player-name",
-                  "player-details"
-                ]
+                "explicitList": ["player-name", "player-details"]
               },
               "alignment": "center"
             }
@@ -68,10 +60,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "player-number",
-                  "player-team"
-                ]
+                "explicitList": ["player-number", "player-team"]
               },
               "alignment": "center"
             }
@@ -110,11 +99,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "stat1",
-                  "stat2",
-                  "stat3"
-                ]
+                "explicitList": ["stat1", "stat2", "stat3"]
               },
               "distribution": "spaceAround"
             }
@@ -125,10 +110,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "stat1-value",
-                  "stat1-label"
-                ]
+                "explicitList": ["stat1-value", "stat1-label"]
               },
               "alignment": "center"
             }
@@ -161,10 +143,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "stat2-value",
-                  "stat2-label"
-                ]
+                "explicitList": ["stat2-value", "stat2-label"]
               },
               "alignment": "center"
             }
@@ -197,10 +176,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "stat3-value",
-                  "stat3-label"
-                ]
+                "explicitList": ["stat3-value", "stat3-label"]
               },
               "alignment": "center"
             }
@@ -299,4 +275,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/15_account-balance.json b/specification/v0_8/json/catalogs/basic/examples/15_account-balance.json
index efce32910..c79c7bf8c 100644
--- a/specification/v0_8/json/catalogs/basic/examples/15_account-balance.json
+++ b/specification/v0_8/json/catalogs/basic/examples/15_account-balance.json
@@ -16,13 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "balance",
-                  "updated",
-                  "divider",
-                  "actions"
-                ]
+                "explicitList": ["header", "balance", "updated", "divider", "actions"]
               }
             }
           }
@@ -32,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "account-icon",
-                  "account-name"
-                ]
+                "explicitList": ["account-icon", "account-name"]
               },
               "alignment": "center"
             }
@@ -95,10 +86,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "transfer-btn",
-                  "pay-btn"
-                ]
+                "explicitList": ["transfer-btn", "pay-btn"]
               }
             }
           }
@@ -175,4 +163,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/16_workout-summary.json b/specification/v0_8/json/catalogs/basic/examples/16_workout-summary.json
index f5ef61493..f7b1d79b6 100644
--- a/specification/v0_8/json/catalogs/basic/examples/16_workout-summary.json
+++ b/specification/v0_8/json/catalogs/basic/examples/16_workout-summary.json
@@ -16,12 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "divider",
-                  "metrics-row",
-                  "date"
-                ]
+                "explicitList": ["header", "divider", "metrics-row", "date"]
               }
             }
           }
@@ -31,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "workout-icon",
-                  "title"
-                ]
+                "explicitList": ["workout-icon", "title"]
               },
               "alignment": "center"
             }
@@ -72,11 +64,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "duration-col",
-                  "calories-col",
-                  "distance-col"
-                ]
+                "explicitList": ["duration-col", "calories-col", "distance-col"]
               },
               "distribution": "spaceAround"
             }
@@ -87,10 +75,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "duration-value",
-                  "duration-label"
-                ]
+                "explicitList": ["duration-value", "duration-label"]
               },
               "alignment": "center"
             }
@@ -123,10 +108,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calories-value",
-                  "calories-label"
-                ]
+                "explicitList": ["calories-value", "calories-label"]
               },
               "alignment": "center"
             }
@@ -159,10 +141,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "distance-value",
-                  "distance-label"
-                ]
+                "explicitList": ["distance-value", "distance-label"]
               },
               "alignment": "center"
             }
@@ -241,4 +220,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/17_event-detail.json b/specification/v0_8/json/catalogs/basic/examples/17_event-detail.json
index bfbbd44a9..d6f997c77 100644
--- a/specification/v0_8/json/catalogs/basic/examples/17_event-detail.json
+++ b/specification/v0_8/json/catalogs/basic/examples/17_event-detail.json
@@ -44,10 +44,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "time-icon",
-                  "time-text"
-                ]
+                "explicitList": ["time-icon", "time-text"]
               },
               "alignment": "center"
             }
@@ -79,10 +76,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location-icon",
-                  "location-text"
-                ]
+                "explicitList": ["location-icon", "location-text"]
               },
               "alignment": "center"
             }
@@ -131,10 +125,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "accept-btn",
-                  "decline-btn"
-                ]
+                "explicitList": ["accept-btn", "decline-btn"]
               }
             }
           }
@@ -215,4 +206,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/18_track-list.json b/specification/v0_8/json/catalogs/basic/examples/18_track-list.json
index 32727be24..64004fdad 100644
--- a/specification/v0_8/json/catalogs/basic/examples/18_track-list.json
+++ b/specification/v0_8/json/catalogs/basic/examples/18_track-list.json
@@ -16,11 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "divider",
-                  "tracks"
-                ]
+                "explicitList": ["header", "divider", "tracks"]
               }
             }
           }
@@ -30,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "playlist-icon",
-                  "playlist-name"
-                ]
+                "explicitList": ["playlist-icon", "playlist-name"]
               },
               "alignment": "center"
             }
@@ -71,11 +64,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "track1",
-                  "track2",
-                  "track3"
-                ]
+                "explicitList": ["track1", "track2", "track3"]
               }
             }
           }
@@ -85,12 +74,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "track1-num",
-                  "track1-art",
-                  "track1-info",
-                  "track1-duration"
-                ]
+                "explicitList": ["track1-num", "track1-art", "track1-info", "track1-duration"]
               },
               "alignment": "center"
             }
@@ -123,10 +107,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "track1-title",
-                  "track1-artist"
-                ]
+                "explicitList": ["track1-title", "track1-artist"]
               }
             }
           }
@@ -169,12 +150,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "track2-num",
-                  "track2-art",
-                  "track2-info",
-                  "track2-duration"
-                ]
+                "explicitList": ["track2-num", "track2-art", "track2-info", "track2-duration"]
               },
               "alignment": "center"
             }
@@ -207,10 +183,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "track2-title",
-                  "track2-artist"
-                ]
+                "explicitList": ["track2-title", "track2-artist"]
               }
             }
           }
@@ -253,12 +226,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "track3-num",
-                  "track3-art",
-                  "track3-info",
-                  "track3-duration"
-                ]
+                "explicitList": ["track3-num", "track3-art", "track3-info", "track3-duration"]
               },
               "alignment": "center"
             }
@@ -291,10 +259,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "track3-title",
-                  "track3-artist"
-                ]
+                "explicitList": ["track3-title", "track3-artist"]
               }
             }
           }
@@ -415,4 +380,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/19_software-purchase.json b/specification/v0_8/json/catalogs/basic/examples/19_software-purchase.json
index fbac53abf..a5cea1507 100644
--- a/specification/v0_8/json/catalogs/basic/examples/19_software-purchase.json
+++ b/specification/v0_8/json/catalogs/basic/examples/19_software-purchase.json
@@ -62,10 +62,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "seats-row",
-                  "period-row"
-                ]
+                "explicitList": ["seats-row", "period-row"]
               }
             }
           }
@@ -75,10 +72,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "seats-label",
-                  "seats-value"
-                ]
+                "explicitList": ["seats-label", "seats-value"]
               },
               "distribution": "spaceBetween",
               "alignment": "center"
@@ -112,10 +106,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "period-label",
-                  "period-value"
-                ]
+                "explicitList": ["period-label", "period-value"]
               },
               "distribution": "spaceBetween",
               "alignment": "center"
@@ -155,10 +146,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "total-label",
-                  "total-value"
-                ]
+                "explicitList": ["total-label", "total-value"]
               },
               "distribution": "spaceBetween",
               "alignment": "center"
@@ -192,10 +180,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "confirm-btn",
-                  "cancel-btn"
-                ]
+                "explicitList": ["confirm-btn", "cancel-btn"]
               }
             }
           }
@@ -276,4 +261,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/20_restaurant-card.json b/specification/v0_8/json/catalogs/basic/examples/20_restaurant-card.json
index cdea1d545..af1138f5f 100644
--- a/specification/v0_8/json/catalogs/basic/examples/20_restaurant-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/20_restaurant-card.json
@@ -16,10 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "restaurant-image",
-                  "content"
-                ]
+                "explicitList": ["restaurant-image", "content"]
               }
             }
           }
@@ -40,12 +37,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "name-row",
-                  "cuisine",
-                  "rating-row",
-                  "details-row"
-                ]
+                "explicitList": ["name-row", "cuisine", "rating-row", "details-row"]
               }
             }
           }
@@ -55,10 +47,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "restaurant-name",
-                  "price-range"
-                ]
+                "explicitList": ["restaurant-name", "price-range"]
               },
               "distribution": "spaceBetween",
               "alignment": "center"
@@ -103,11 +92,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "star-icon",
-                  "rating",
-                  "reviews"
-                ]
+                "explicitList": ["star-icon", "rating", "reviews"]
               },
               "alignment": "center"
             }
@@ -150,10 +135,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "distance",
-                  "delivery-time"
-                ]
+                "explicitList": ["distance", "delivery-time"]
               }
             }
           }
@@ -228,4 +210,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/21_shipping-status.json b/specification/v0_8/json/catalogs/basic/examples/21_shipping-status.json
index 474f015c6..5b9193956 100644
--- a/specification/v0_8/json/catalogs/basic/examples/21_shipping-status.json
+++ b/specification/v0_8/json/catalogs/basic/examples/21_shipping-status.json
@@ -16,13 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "tracking-number",
-                  "divider",
-                  "steps",
-                  "eta"
-                ]
+                "explicitList": ["header", "tracking-number", "divider", "steps", "eta"]
               }
             }
           }
@@ -32,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "package-icon",
-                  "title"
-                ]
+                "explicitList": ["package-icon", "title"]
               },
               "alignment": "center"
             }
@@ -84,12 +75,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "step1",
-                  "step2",
-                  "step3",
-                  "step4"
-                ]
+                "explicitList": ["step1", "step2", "step3", "step4"]
               }
             }
           }
@@ -99,10 +85,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "step1-icon",
-                  "step1-text"
-                ]
+                "explicitList": ["step1-icon", "step1-text"]
               },
               "alignment": "center"
             }
@@ -134,10 +117,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "step2-icon",
-                  "step2-text"
-                ]
+                "explicitList": ["step2-icon", "step2-text"]
               },
               "alignment": "center"
             }
@@ -169,10 +149,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "step3-icon",
-                  "step3-text"
-                ]
+                "explicitList": ["step3-icon", "step3-text"]
               },
               "alignment": "center"
             }
@@ -204,10 +181,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "step4-icon",
-                  "step4-text"
-                ]
+                "explicitList": ["step4-icon", "step4-text"]
               },
               "alignment": "center"
             }
@@ -239,10 +213,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "eta-icon",
-                  "eta-text"
-                ]
+                "explicitList": ["eta-icon", "eta-text"]
               },
               "alignment": "center"
             }
@@ -297,4 +268,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/22_credit-card.json b/specification/v0_8/json/catalogs/basic/examples/22_credit-card.json
index 46607f306..c78f8e86e 100644
--- a/specification/v0_8/json/catalogs/basic/examples/22_credit-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/22_credit-card.json
@@ -16,11 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "card-type-row",
-                  "card-number",
-                  "card-details"
-                ]
+                "explicitList": ["card-type-row", "card-number", "card-details"]
               }
             }
           }
@@ -30,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "card-icon",
-                  "card-type"
-                ]
+                "explicitList": ["card-icon", "card-type"]
               },
               "distribution": "spaceBetween",
               "alignment": "center"
@@ -77,10 +70,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "holder-col",
-                  "expiry-col"
-                ]
+                "explicitList": ["holder-col", "expiry-col"]
               },
               "distribution": "spaceBetween"
             }
@@ -91,10 +81,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "holder-label",
-                  "holder-name"
-                ]
+                "explicitList": ["holder-label", "holder-name"]
               }
             }
           }
@@ -126,10 +113,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "expiry-label",
-                  "expiry-date"
-                ]
+                "explicitList": ["expiry-label", "expiry-date"]
               },
               "alignment": "end"
             }
@@ -189,4 +173,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/23_step-counter.json b/specification/v0_8/json/catalogs/basic/examples/23_step-counter.json
index d88ab6565..e36d13adb 100644
--- a/specification/v0_8/json/catalogs/basic/examples/23_step-counter.json
+++ b/specification/v0_8/json/catalogs/basic/examples/23_step-counter.json
@@ -16,13 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "steps-display",
-                  "goal-text",
-                  "divider",
-                  "stats-row"
-                ]
+                "explicitList": ["header", "steps-display", "goal-text", "divider", "stats-row"]
               },
               "alignment": "center"
             }
@@ -33,10 +27,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "steps-icon",
-                  "title"
-                ]
+                "explicitList": ["steps-icon", "title"]
               },
               "alignment": "center"
             }
@@ -96,10 +87,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "distance-col",
-                  "calories-col"
-                ]
+                "explicitList": ["distance-col", "calories-col"]
               },
               "distribution": "spaceAround"
             }
@@ -110,10 +98,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "distance-value",
-                  "distance-label"
-                ]
+                "explicitList": ["distance-value", "distance-label"]
               },
               "alignment": "center"
             }
@@ -146,10 +131,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calories-value",
-                  "calories-label"
-                ]
+                "explicitList": ["calories-value", "calories-label"]
               },
               "alignment": "center"
             }
@@ -209,4 +191,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/24_recipe-card.json b/specification/v0_8/json/catalogs/basic/examples/24_recipe-card.json
index a14b1a214..bccb0d655 100644
--- a/specification/v0_8/json/catalogs/basic/examples/24_recipe-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/24_recipe-card.json
@@ -16,10 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "recipe-image",
-                  "content"
-                ]
+                "explicitList": ["recipe-image", "content"]
               }
             }
           }
@@ -40,12 +37,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title",
-                  "rating-row",
-                  "times-row",
-                  "servings"
-                ]
+                "explicitList": ["title", "rating-row", "times-row", "servings"]
               }
             }
           }
@@ -66,11 +58,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "star-icon",
-                  "rating",
-                  "review-count"
-                ]
+                "explicitList": ["star-icon", "rating", "review-count"]
               },
               "alignment": "center"
             }
@@ -113,10 +101,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "prep-time",
-                  "cook-time"
-                ]
+                "explicitList": ["prep-time", "cook-time"]
               }
             }
           }
@@ -126,10 +111,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "prep-icon",
-                  "prep-text"
-                ]
+                "explicitList": ["prep-icon", "prep-text"]
               },
               "alignment": "center"
             }
@@ -161,10 +143,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "cook-icon",
-                  "cook-text"
-                ]
+                "explicitList": ["cook-icon", "cook-text"]
               },
               "alignment": "center"
             }
@@ -246,4 +225,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/25_contact-card.json b/specification/v0_8/json/catalogs/basic/examples/25_contact-card.json
index 36bed1cbd..220bb8d95 100644
--- a/specification/v0_8/json/catalogs/basic/examples/25_contact-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/25_contact-card.json
@@ -74,11 +74,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "phone-row",
-                  "email-row",
-                  "location-row"
-                ]
+                "explicitList": ["phone-row", "email-row", "location-row"]
               }
             }
           }
@@ -88,10 +84,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "phone-icon",
-                  "phone-text"
-                ]
+                "explicitList": ["phone-icon", "phone-text"]
               },
               "alignment": "center"
             }
@@ -123,10 +116,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "email-icon",
-                  "email-text"
-                ]
+                "explicitList": ["email-icon", "email-text"]
               },
               "alignment": "center"
             }
@@ -158,10 +148,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location-icon",
-                  "location-text"
-                ]
+                "explicitList": ["location-icon", "location-text"]
               },
               "alignment": "center"
             }
@@ -193,10 +180,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "call-btn",
-                  "message-btn"
-                ]
+                "explicitList": ["call-btn", "message-btn"]
               }
             }
           }
@@ -285,4 +269,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/26_podcast-episode.json b/specification/v0_8/json/catalogs/basic/examples/26_podcast-episode.json
index d5961fb6d..de44d67b7 100644
--- a/specification/v0_8/json/catalogs/basic/examples/26_podcast-episode.json
+++ b/specification/v0_8/json/catalogs/basic/examples/26_podcast-episode.json
@@ -16,10 +16,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "artwork",
-                  "content"
-                ]
+                "explicitList": ["artwork", "content"]
               },
               "alignment": "start"
             }
@@ -79,10 +76,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "duration",
-                  "date"
-                ]
+                "explicitList": ["duration", "date"]
               }
             }
           }
@@ -182,4 +176,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/27_stats-card.json b/specification/v0_8/json/catalogs/basic/examples/27_stats-card.json
index 4589369a8..1941236e1 100644
--- a/specification/v0_8/json/catalogs/basic/examples/27_stats-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/27_stats-card.json
@@ -16,11 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "value",
-                  "trend-row"
-                ]
+                "explicitList": ["header", "value", "trend-row"]
               }
             }
           }
@@ -30,10 +26,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "metric-icon",
-                  "metric-name"
-                ]
+                "explicitList": ["metric-icon", "metric-name"]
               },
               "alignment": "center"
             }
@@ -76,10 +69,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "trend-icon",
-                  "trend-text"
-                ]
+                "explicitList": ["trend-icon", "trend-text"]
               },
               "alignment": "center"
             }
@@ -142,4 +132,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/28_countdown-timer.json b/specification/v0_8/json/catalogs/basic/examples/28_countdown-timer.json
index 045781264..48ef0caaf 100644
--- a/specification/v0_8/json/catalogs/basic/examples/28_countdown-timer.json
+++ b/specification/v0_8/json/catalogs/basic/examples/28_countdown-timer.json
@@ -16,11 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "event-name",
-                  "countdown-row",
-                  "target-date"
-                ]
+                "explicitList": ["event-name", "countdown-row", "target-date"]
               },
               "alignment": "center"
             }
@@ -42,11 +38,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "days-col",
-                  "hours-col",
-                  "minutes-col"
-                ]
+                "explicitList": ["days-col", "hours-col", "minutes-col"]
               },
               "distribution": "spaceAround"
             }
@@ -57,10 +49,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "days-value",
-                  "days-label"
-                ]
+                "explicitList": ["days-value", "days-label"]
               },
               "alignment": "center"
             }
@@ -93,10 +82,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "hours-value",
-                  "hours-label"
-                ]
+                "explicitList": ["hours-value", "hours-label"]
               },
               "alignment": "center"
             }
@@ -129,10 +115,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "minutes-value",
-                  "minutes-label"
-                ]
+                "explicitList": ["minutes-value", "minutes-label"]
               },
               "alignment": "center"
             }
@@ -207,4 +190,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/basic/examples/29_movie-card.json b/specification/v0_8/json/catalogs/basic/examples/29_movie-card.json
index c312fe8a0..54aeb5776 100644
--- a/specification/v0_8/json/catalogs/basic/examples/29_movie-card.json
+++ b/specification/v0_8/json/catalogs/basic/examples/29_movie-card.json
@@ -16,10 +16,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "poster",
-                  "content"
-                ]
+                "explicitList": ["poster", "content"]
               }
             }
           }
@@ -40,12 +37,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-row",
-                  "genre",
-                  "rating-row",
-                  "runtime"
-                ]
+                "explicitList": ["title-row", "genre", "rating-row", "runtime"]
               }
             }
           }
@@ -55,10 +47,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "movie-title",
-                  "year"
-                ]
+                "explicitList": ["movie-title", "year"]
               },
               "alignment": "start"
             }
@@ -102,10 +91,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "star-icon",
-                  "rating-value"
-                ]
+                "explicitList": ["star-icon", "rating-value"]
               },
               "alignment": "center"
             }
@@ -137,10 +123,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "time-icon",
-                  "runtime-text"
-                ]
+                "explicitList": ["time-icon", "runtime-text"]
               },
               "alignment": "center"
             }
@@ -207,4 +190,4 @@
       "root": "root"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/specification/v0_8/json/catalogs/minimal/examples/2_row_layout.json b/specification/v0_8/json/catalogs/minimal/examples/2_row_layout.json
index f97b43231..52de44262 100644
--- a/specification/v0_8/json/catalogs/minimal/examples/2_row_layout.json
+++ b/specification/v0_8/json/catalogs/minimal/examples/2_row_layout.json
@@ -8,10 +8,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "left_text",
-                  "right_text"
-                ]
+                "explicitList": ["left_text", "right_text"]
               },
               "distribution": "spaceBetween",
               "alignment": "center"
diff --git a/specification/v0_8/json/catalogs/minimal/examples/3_interactive_button.json b/specification/v0_8/json/catalogs/minimal/examples/3_interactive_button.json
index 623fbf501..08cbdc5a9 100644
--- a/specification/v0_8/json/catalogs/minimal/examples/3_interactive_button.json
+++ b/specification/v0_8/json/catalogs/minimal/examples/3_interactive_button.json
@@ -8,10 +8,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title",
-                  "action_button"
-                ]
+                "explicitList": ["title", "action_button"]
               },
               "distribution": "center",
               "alignment": "center"
diff --git a/specification/v0_8/json/catalogs/minimal/examples/4_login_form.json b/specification/v0_8/json/catalogs/minimal/examples/4_login_form.json
index 402ae973f..bcb69b003 100644
--- a/specification/v0_8/json/catalogs/minimal/examples/4_login_form.json
+++ b/specification/v0_8/json/catalogs/minimal/examples/4_login_form.json
@@ -24,12 +24,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "form_title",
-                  "username_field",
-                  "password_field",
-                  "submit_button"
-                ]
+                "explicitList": ["form_title", "username_field", "password_field", "submit_button"]
               },
               "distribution": "start",
               "alignment": "stretch"
diff --git a/specification/v0_8/json/catalogs/minimal/examples/5_complex_layout.json b/specification/v0_8/json/catalogs/minimal/examples/5_complex_layout.json
index fe4b8c528..11b1d9882 100644
--- a/specification/v0_8/json/catalogs/minimal/examples/5_complex_layout.json
+++ b/specification/v0_8/json/catalogs/minimal/examples/5_complex_layout.json
@@ -8,11 +8,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "header",
-                  "form_row",
-                  "footer"
-                ]
+                "explicitList": ["header", "form_row", "footer"]
               },
               "distribution": "spaceBetween",
               "alignment": "stretch"
@@ -35,10 +31,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "first_name",
-                  "last_name"
-                ]
+                "explicitList": ["first_name", "last_name"]
               },
               "distribution": "start",
               "alignment": "start"
diff --git a/specification/v0_8/json/catalogs/minimal/minimal_catalog.json b/specification/v0_8/json/catalogs/minimal/minimal_catalog.json
index 96c28df06..4648c5339 100644
--- a/specification/v0_8/json/catalogs/minimal/minimal_catalog.json
+++ b/specification/v0_8/json/catalogs/minimal/minimal_catalog.json
@@ -21,20 +21,10 @@
         "usageHint": {
           "type": "string",
           "description": "A hint for the base text style. One of:\n- `h1`: Largest heading.\n- `h2`: Second largest heading.\n- `h3`: Third largest heading.\n- `h4`: Fourth largest heading.\n- `h5`: Fifth largest heading.\n- `caption`: Small text for captions.\n- `body`: Standard body text.",
-          "enum": [
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "caption",
-            "body"
-          ]
+          "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"]
         }
       },
-      "required": [
-        "text"
-      ]
+      "required": ["text"]
     },
     "Row": {
       "type": "object",
@@ -63,39 +53,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (horizontally). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "center",
-            "end",
-            "spaceAround",
-            "spaceBetween",
-            "spaceEvenly",
-            "start"
-          ]
+          "enum": ["center", "end", "spaceAround", "spaceBetween", "spaceEvenly", "start"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (vertically). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "stretch"
-          ]
+          "enum": ["start", "center", "end", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Column": {
       "type": "object",
@@ -124,39 +97,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (vertically). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "spaceBetween",
-            "spaceAround",
-            "spaceEvenly"
-          ]
+          "enum": ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (horizontally). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "center",
-            "end",
-            "start",
-            "stretch"
-          ]
+          "enum": ["center", "end", "start", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Button": {
       "type": "object",
@@ -207,22 +163,14 @@
                     }
                   }
                 },
-                "required": [
-                  "key",
-                  "value"
-                ]
+                "required": ["key", "value"]
               }
             }
           },
-          "required": [
-            "name"
-          ]
+          "required": ["name"]
         }
       },
-      "required": [
-        "child",
-        "action"
-      ]
+      "required": ["child", "action"]
     },
     "TextField": {
       "type": "object",
@@ -257,22 +205,14 @@
         "textFieldType": {
           "type": "string",
           "description": "The type of input field to display.",
-          "enum": [
-            "date",
-            "longText",
-            "number",
-            "shortText",
-            "obscured"
-          ]
+          "enum": ["date", "longText", "number", "shortText", "obscured"]
         },
         "validationRegexp": {
           "type": "string",
           "description": "A regular expression used for client-side validation of the input."
         }
       },
-      "required": [
-        "label"
-      ]
+      "required": ["label"]
     }
   },
   "styles": {
diff --git a/specification/v0_8/json/client_to_server.json b/specification/v0_8/json/client_to_server.json
index f4f964a24..510518267 100644
--- a/specification/v0_8/json/client_to_server.json
+++ b/specification/v0_8/json/client_to_server.json
@@ -32,13 +32,7 @@
           "additionalProperties": true
         }
       },
-      "required": [
-        "name",
-        "surfaceId",
-        "sourceComponentId",
-        "timestamp",
-        "context"
-      ]
+      "required": ["name", "surfaceId", "sourceComponentId", "timestamp", "context"]
     },
     "error": {
       "type": "object",
@@ -46,8 +40,5 @@
       "additionalProperties": true
     }
   },
-  "oneOf": [
-    { "required": ["userAction"] },
-    { "required": ["error"] }
-  ]
+  "oneOf": [{"required": ["userAction"]}, {"required": ["error"]}]
 }
diff --git a/specification/v0_8/json/server_to_client_with_standard_catalog.json b/specification/v0_8/json/server_to_client_with_standard_catalog.json
index 41c46ecf2..74536b9d6 100644
--- a/specification/v0_8/json/server_to_client_with_standard_catalog.json
+++ b/specification/v0_8/json/server_to_client_with_standard_catalog.json
@@ -91,15 +91,7 @@
                       "usageHint": {
                         "type": "string",
                         "description": "A hint for the base text style. One of:\n- `h1`: Largest heading.\n- `h2`: Second largest heading.\n- `h3`: Third largest heading.\n- `h4`: Fourth largest heading.\n- `h5`: Fifth largest heading.\n- `caption`: Small text for captions.\n- `body`: Standard body text.",
-                        "enum": [
-                          "h1",
-                          "h2",
-                          "h3",
-                          "h4",
-                          "h5",
-                          "caption",
-                          "body"
-                        ]
+                        "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"]
                       }
                     },
                     "required": ["text"]
@@ -137,13 +129,7 @@
                       "fit": {
                         "type": "string",
                         "description": "Specifies how the image should be resized to fit its container. This corresponds to the CSS 'object-fit' property.",
-                        "enum": [
-                          "contain",
-                          "cover",
-                          "fill",
-                          "none",
-                          "scale-down"
-                        ]
+                        "enum": ["contain", "cover", "fill", "none", "scale-down"]
                       },
                       "usageHint": {
                         "type": "string",
@@ -624,13 +610,7 @@
                       "textFieldType": {
                         "type": "string",
                         "description": "The type of input field to display.",
-                        "enum": [
-                          "date",
-                          "longText",
-                          "number",
-                          "shortText",
-                          "obscured"
-                        ]
+                        "enum": ["date", "longText", "number", "shortText", "obscured"]
                       },
                       "validationRegexp": {
                         "type": "string",
@@ -850,4 +830,4 @@
       "required": ["surfaceId"]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/specification/v0_8/json/standard_catalog_definition.json b/specification/v0_8/json/standard_catalog_definition.json
index f8bdb1095..29cb2a43e 100644
--- a/specification/v0_8/json/standard_catalog_definition.json
+++ b/specification/v0_8/json/standard_catalog_definition.json
@@ -20,20 +20,10 @@
         "usageHint": {
           "type": "string",
           "description": "A hint for the base text style. One of:\n- `h1`: Largest heading.\n- `h2`: Second largest heading.\n- `h3`: Third largest heading.\n- `h4`: Fourth largest heading.\n- `h5`: Fifth largest heading.\n- `caption`: Small text for captions.\n- `body`: Standard body text.",
-          "enum": [
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "caption",
-            "body"
-          ]
+          "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"]
         }
       },
-      "required": [
-        "text"
-      ]
+      "required": ["text"]
     },
     "Image": {
       "type": "object",
@@ -68,30 +58,15 @@
         "fit": {
           "type": "string",
           "description": "Specifies how the image should be resized to fit its container. This corresponds to the CSS 'object-fit' property.",
-          "enum": [
-            "contain",
-            "cover",
-            "fill",
-            "none",
-            "scale-down"
-          ]
+          "enum": ["contain", "cover", "fill", "none", "scale-down"]
         },
         "usageHint": {
           "type": "string",
           "description": "A hint for the image size and style. One of:\n- `icon`: Small square icon.\n- `avatar`: Circular avatar image.\n- `smallFeature`: Small feature image.\n- `mediumFeature`: Medium feature image.\n- `largeFeature`: Large feature image.\n- `header`: Full-width, full bleed, header image.",
-          "enum": [
-            "icon",
-            "avatar",
-            "smallFeature",
-            "mediumFeature",
-            "largeFeature",
-            "header"
-          ]
+          "enum": ["icon", "avatar", "smallFeature", "mediumFeature", "largeFeature", "header"]
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "Icon": {
       "type": "object",
@@ -161,9 +136,7 @@
           }
         }
       },
-      "required": [
-        "name"
-      ]
+      "required": ["name"]
     },
     "Video": {
       "type": "object",
@@ -183,9 +156,7 @@
           }
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "AudioPlayer": {
       "type": "object",
@@ -218,9 +189,7 @@
           }
         }
       },
-      "required": [
-        "url"
-      ]
+      "required": ["url"]
     },
     "Row": {
       "type": "object",
@@ -249,39 +218,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (horizontally). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "center",
-            "end",
-            "spaceAround",
-            "spaceBetween",
-            "spaceEvenly",
-            "start"
-          ]
+          "enum": ["center", "end", "spaceAround", "spaceBetween", "spaceEvenly", "start"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (vertically). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "stretch"
-          ]
+          "enum": ["start", "center", "end", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Column": {
       "type": "object",
@@ -310,39 +262,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "distribution": {
           "type": "string",
           "description": "Defines the arrangement of children along the main axis (vertically). This corresponds to the CSS 'justify-content' property.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "spaceBetween",
-            "spaceAround",
-            "spaceEvenly"
-          ]
+          "enum": ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis (horizontally). This corresponds to the CSS 'align-items' property.",
-          "enum": [
-            "center",
-            "end",
-            "start",
-            "stretch"
-          ]
+          "enum": ["center", "end", "start", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "List": {
       "type": "object",
@@ -371,35 +306,22 @@
                   "type": "string"
                 }
               },
-              "required": [
-                "componentId",
-                "dataBinding"
-              ]
+              "required": ["componentId", "dataBinding"]
             }
           }
         },
         "direction": {
           "type": "string",
           "description": "The direction in which the list items are laid out.",
-          "enum": [
-            "vertical",
-            "horizontal"
-          ]
+          "enum": ["vertical", "horizontal"]
         },
         "alignment": {
           "type": "string",
           "description": "Defines the alignment of children along the cross axis.",
-          "enum": [
-            "start",
-            "center",
-            "end",
-            "stretch"
-          ]
+          "enum": ["start", "center", "end", "stretch"]
         }
       },
-      "required": [
-        "children"
-      ]
+      "required": ["children"]
     },
     "Card": {
       "type": "object",
@@ -410,9 +332,7 @@
           "description": "The ID of the component to be rendered inside the card."
         }
       },
-      "required": [
-        "child"
-      ]
+      "required": ["child"]
     },
     "Tabs": {
       "type": "object",
@@ -442,16 +362,11 @@
                 "type": "string"
               }
             },
-            "required": [
-              "title",
-              "child"
-            ]
+            "required": ["title", "child"]
           }
         }
       },
-      "required": [
-        "tabItems"
-      ]
+      "required": ["tabItems"]
     },
     "Divider": {
       "type": "object",
@@ -460,10 +375,7 @@
         "axis": {
           "type": "string",
           "description": "The orientation of the divider.",
-          "enum": [
-            "horizontal",
-            "vertical"
-          ]
+          "enum": ["horizontal", "vertical"]
         }
       }
     },
@@ -480,10 +392,7 @@
           "description": "The ID of the component to be displayed inside the modal."
         }
       },
-      "required": [
-        "entryPointChild",
-        "contentChild"
-      ]
+      "required": ["entryPointChild", "contentChild"]
     },
     "Button": {
       "type": "object",
@@ -534,22 +443,14 @@
                     }
                   }
                 },
-                "required": [
-                  "key",
-                  "value"
-                ]
+                "required": ["key", "value"]
               }
             }
           },
-          "required": [
-            "name"
-          ]
+          "required": ["name"]
         }
       },
-      "required": [
-        "child",
-        "action"
-      ]
+      "required": ["child", "action"]
     },
     "CheckBox": {
       "type": "object",
@@ -582,10 +483,7 @@
           }
         }
       },
-      "required": [
-        "label",
-        "value"
-      ]
+      "required": ["label", "value"]
     },
     "TextField": {
       "type": "object",
@@ -620,22 +518,14 @@
         "textFieldType": {
           "type": "string",
           "description": "The type of input field to display.",
-          "enum": [
-            "date",
-            "longText",
-            "number",
-            "shortText",
-            "obscured"
-          ]
+          "enum": ["date", "longText", "number", "shortText", "obscured"]
         },
         "validationRegexp": {
           "type": "string",
           "description": "A regular expression used for client-side validation of the input."
         }
       },
-      "required": [
-        "label"
-      ]
+      "required": ["label"]
     },
     "DateTimeInput": {
       "type": "object",
@@ -663,17 +553,12 @@
           "description": "If true, allows the user to select a time."
         }
       },
-      "required": [
-        "value"
-      ]
+      "required": ["value"]
     },
     "MultipleChoice": {
       "type": "object",
       "additionalProperties": false,
-      "required": [
-        "selections",
-        "options"
-      ],
+      "required": ["selections", "options"],
       "properties": {
         "selections": {
           "type": "object",
@@ -716,10 +601,7 @@
                 "description": "The value to be associated with this option when selected."
               }
             },
-            "required": [
-              "label",
-              "value"
-            ]
+            "required": ["label", "value"]
           }
         },
         "maxAllowedSelections": {
@@ -729,10 +611,7 @@
         "variant": {
           "type": "string",
           "description": "The display style of the component.",
-          "enum": [
-            "checkbox",
-            "chips"
-          ]
+          "enum": ["checkbox", "chips"]
         },
         "filterable": {
           "type": "boolean",
@@ -779,9 +658,7 @@
           "description": "The maximum value of the slider."
         }
       },
-      "required": [
-        "value"
-      ]
+      "required": ["value"]
     }
   },
   "styles": {
@@ -795,4 +672,4 @@
       "pattern": "^#[0-9a-fA-F]{6}$"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/docs/a2ui_custom_functions.md b/specification/v0_9/docs/a2ui_custom_functions.md
index e31806e8c..871230b44 100644
--- a/specification/v0_9/docs/a2ui_custom_functions.md
+++ b/specification/v0_9/docs/a2ui_custom_functions.md
@@ -22,7 +22,7 @@ Use the `functions` property to define a map of function schemas.
       "type": "object",
       "description": "Removes whitespace (or other characters) from the beginning and end of a string.",
       "properties": {
-        "call": { "const": "trim" },
+        "call": {"const": "trim"},
         "args": {
           "type": "object",
           "properties": {
@@ -38,7 +38,7 @@ Use the `functions` property to define a map of function schemas.
           "required": ["value"],
           "unevaluatedProperties": false
         },
-        "returnType": { "const": "string" }
+        "returnType": {"const": "string"}
       },
       "required": ["call", "args"],
       "unevaluatedProperties": false
@@ -47,7 +47,7 @@ Use the `functions` property to define a map of function schemas.
       "type": "object",
       "description": "Queries hardware for screen resolution.",
       "properties": {
-        "call": { "const": "getScreenResolution" },
+        "call": {"const": "getScreenResolution"},
         "args": {
           "type": "object",
           "properties": {
@@ -58,7 +58,7 @@ Use the `functions` property to define a map of function schemas.
           },
           "unevaluatedProperties": false
         },
-        "returnType": { "const": "array" }
+        "returnType": {"const": "array"}
       },
       "required": ["call", "args"],
       "unevaluatedProperties": false
@@ -71,14 +71,12 @@ Use the `functions` property to define a map of function schemas.
 
 The `FunctionCall` definition refers to a [catalog-agnostic reference](a2ui_protocol.md#the-basic-catalog).
 In your catalog, you simply need to define the `anyFunction` reference:
+
 ```json
 {
   "$defs": {
     "anyFunction": {
-      "oneOf": [
-        {"$ref": "#/functions/trim"},
-        {"$ref": "#/functions/getScreenResolution"}
-      ]
+      "oneOf": [{"$ref": "#/functions/trim"}, {"$ref": "#/functions/getScreenResolution"}]
     }
   }
 }
@@ -86,6 +84,7 @@ In your catalog, you simply need to define the `anyFunction` reference:
 
 If you want to incorporate functions defined in the [`basic_catalog.json`],
 those can be added too:
+
 ```json
 {
   "$defs": {
@@ -93,7 +92,7 @@ those can be added too:
       "oneOf": [
         {"$ref": "#/functions/trim"},
         {"$ref": "#/functions/getScreenResolution"},
-        {"$ref": "basic_catalog.json#/$defs/anyFunction" }
+        {"$ref": "basic_catalog.json#/$defs/anyFunction"}
       ]
     }
   }
@@ -107,11 +106,11 @@ When a `FunctionCall` is validated:
 1. **Discriminator Lookup:** The validator looks at the `call` property of the
    object.
 2. **Schema Matching:**
-    * If `call` is "length", it matches `Functions` -> `length`
-      and validates the named arguments in `args` against the length rules.
-    * If `call` is "trim", it matches `CustomFunctions` -> `trim` and
-      validates against your custom rules.
-    * If `call` is "unknownFunc", validation FAILS immediately (strict mode).
+   - If `call` is "length", it matches `Functions` -> `length`
+     and validates the named arguments in `args` against the length rules.
+   - If `call` is "trim", it matches `CustomFunctions` -> `trim` and
+     validates against your custom rules.
+   - If `call` is "unknownFunc", validation FAILS immediately (strict mode).
 
 This strict-by-default approach ensures typos are caught early, while the
 modular structure makes it easy to add new capabilities with full type safety.
diff --git a/specification/v0_9/docs/a2ui_extension_specification.md b/specification/v0_9/docs/a2ui_extension_specification.md
index 3bc902d71..cf480293d 100644
--- a/specification/v0_9/docs/a2ui_extension_specification.md
+++ b/specification/v0_9/docs/a2ui_extension_specification.md
@@ -50,11 +50,14 @@ Example AgentExtension block:
 ```
 
 ### Parameter definitions
+
 The `params` object corresponds to the `v0.9` object in the `server_capabilities.json` schema:
+
 - `params.supportedCatalogIds`: (OPTIONAL) An array of strings, where each string is an ID identifying a Catalog Definition Schema that the agent can generate. This is not necessarily a resolvable URI.
 - `params.acceptsInlineCatalogs`: (OPTIONAL) A boolean indicating if the agent can accept an `inlineCatalogs` array in the client's `a2uiClientCapabilities`. If omitted, this defaults to `false`.
 
 ## Extension activation
+
 Clients indicate their desire to use the A2UI extension by specifying it via the transport-defined A2A extension activation mechanism.
 
 For JSON-RPC and HTTP transports, this is indicated via the X-A2A-Extensions HTTP header.
diff --git a/specification/v0_9/docs/a2ui_protocol.md b/specification/v0_9/docs/a2ui_protocol.md
index bcfdcd553..87f5e3732 100644
--- a/specification/v0_9/docs/a2ui_protocol.md
+++ b/specification/v0_9/docs/a2ui_protocol.md
@@ -423,8 +423,8 @@ When a container component (such as `Column`, `Row`, or `List`) utilizes the **T
 {
   "company": "Acme Corp",
   "employees": [
-    { "name": "Alice", "role": "Engineer" },
-    { "name": "Bob", "role": "Designer" }
+    {"name": "Alice", "role": "Engineer"},
+    {"name": "Bob", "role": "Designer"}
   ]
 }
 ```
@@ -568,8 +568,8 @@ _Replace the entire data model:_
   "updateDataModel": {
     "surfaceId": "surface_123",
     "value": {
-      "user": { "firstName": "Alice", "lastName": "Smith" },
-      "preferences": { "theme": "dark" }
+      "user": {"firstName": "Alice", "lastName": "Smith"},
+      "preferences": {"theme": "dark"}
     }
   }
 }
@@ -628,7 +628,7 @@ Buttons can also define `checks`. If any check fails, the button is automaticall
           "values": [
             {
               "call": "required",
-              "args": { "value": { "path": "/formData/terms" } }
+              "args": {"value": {"path": "/formData/terms"}}
             },
             {
               "call": "or",
@@ -636,11 +636,11 @@ Buttons can also define `checks`. If any check fails, the button is automaticall
                 "values": [
                   {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/email" } }
+                    "args": {"value": {"path": "/formData/email"}}
                   },
                   {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/phone" } }
+                    "args": {"value": {"path": "/formData/phone"}}
                   }
                 ]
               }
diff --git a/specification/v0_9/docs/basic_catalog_implementation_guide.md b/specification/v0_9/docs/basic_catalog_implementation_guide.md
index c2bac4fec..be1fe2ad5 100644
--- a/specification/v0_9/docs/basic_catalog_implementation_guide.md
+++ b/specification/v0_9/docs/basic_catalog_implementation_guide.md
@@ -9,19 +9,23 @@ When building your framework-specific adapters (Layer 3) over the generic A2UI b
 ## 1. Components
 
 ### Text
+
 Displays text content.
 
 **Rendering Guidelines:** Text should be rendered using a Markdown parser when possible. If markdown rendering is unavailable or fails, gracefully fallback to rendering the raw text. In such cases, renderers should ideally attempt to strip common Markdown markers (like `**` or `#`) to ensure the text remains legible and aesthetically consistent with the intended presentation.
 **Property Mapping:**
+
 - `variant="h1"` through `h5"`: Apply heading styling. Suggested relative font sizes: `h1` (2.5x base), `h2` (2x base), `h3` (1.75x base), `h4` (1.5x base), `h5` (1.25x base).
 - `variant="caption"`: Render as smaller text, typically italicized or in a lighter/muted color. Suggested font size: 0.8x base.
 - `variant="body"` (default): Standard body text. Uses the base font size (e.g., 16dp/16px).
 
 ### Image
+
 Displays an image from a URL.
 
 **Rendering Guidelines:** Ensure the component defaults to a flexible width so it fills its container.
 **Property Mapping:**
+
 - `fit`: Map the property to the platform's equivalent content scaling mode (e.g., CSS `object-fit`, iOS `contentMode`, Android `ScaleType`).
 - `variant="icon"`: Render very small and square (e.g., 24x24dp).
 - `variant="avatar"`: Render small and rounded/circular (e.g., 40x40dp, fully rounded corners).
@@ -31,66 +35,81 @@ Displays an image from a URL.
 - `variant="header"`: Render as a full-width banner image, usually at the top of a surface (e.g., 100% width, height 200dp, scaling mode set to cover/crop).
 
 ### Icon
+
 Displays a standard system icon.
 
 **Rendering Guidelines:** Map the icon `name` to a system or bundled icon set (e.g., Material Symbols, SF Symbols). The string `name` from the data model (e.g., `accountCircle`) should be converted to the required format (like snake_case `account_circle`) if required by the icon engine. Suggested styling: 24dp size and inherit the current text color.
 
 ### Video
+
 A video player.
 
 **Rendering Guidelines:** Render using a native video player component with user controls enabled. Ensure the video container spans the full width of the parent's container for responsiveness. Scrubbing (seeking) should be supported if provided by the native control.
 
 ### AudioPlayer
+
 An audio player.
 
 **Rendering Guidelines:** Render using a native audio player component with user controls enabled. Like video, its container should span the full width of its parent. Scrubbing (seeking) should be supported if provided by the native control.
 
 ### Row
+
 A horizontal layout container.
 
 **Rendering Guidelines:** Implemented using a horizontal layout container (e.g., CSS Flexbox row, Compose `Row`, SwiftUI `HStack`). Ensure it fills the available width.
 **Property Mapping:**
+
 - `justify`: Maps to main-axis alignment (e.g., `justify-content` in CSS, `horizontalArrangement` in Compose). Use equivalents for pushing items to edges (`spaceBetween`) or packing them together (`start`, `center`, `end`).
 - `align`: Maps to cross-axis alignment (e.g., `align-items` in CSS, `verticalAlignment` in Compose). Use equivalents for top (`start`), center, or bottom (`end`).
 
 ### Column
+
 A vertical layout container.
 
 **Rendering Guidelines:** Implemented using a vertical layout container (e.g., CSS Flexbox column, Compose `Column`, SwiftUI `VStack`).
 **Property Mapping:**
+
 - `justify`: Maps to main-axis alignment on the vertical axis.
 - `align`: Maps to cross-axis alignment on the horizontal axis.
 
 ### List
+
 A scrollable list of components.
 
 **Rendering Guidelines:** Children of a horizontal list should typically have a constrained max-width so they do not stretch indefinitely.
 **Property Mapping:**
+
 - `direction="vertical"` (default): Implement as a vertically scrollable view (e.g., CSS `overflow-y: auto`, Compose `LazyColumn`, SwiftUI `ScrollView` vertical).
 - `direction="horizontal"`: Implement as a horizontally scrollable view. Hide the scrollbar for a cleaner look if supported by the platform.
 
 ### Card
+
 A container with card-like styling that visually groups its child.
 
 **Rendering Guidelines:** Applies a background color distinct from the main surface, rounded corners (e.g., 8dp or 12dp), a subtle shadow or elevation, and inner padding (e.g., 16dp). Note that the card accepts exactly **one** child. If the user wants multiple elements inside a card, they must provide a container (like `Column`) as the single child.
 
 ### Tabs
+
 A set of tabs, each with a title and a corresponding child component.
 
 **Rendering Guidelines:** Render a horizontal row of interactive tab headers for the `titles`. Visually indicate the active tab (e.g., bold text, colored bottom border).
-**Behavior & State:** Maintain a local `selectedIndex` state (defaulting to 0). When a tab header is tapped, update `selectedIndex` and render *only* the `child` component that corresponds to that index.
+**Behavior & State:** Maintain a local `selectedIndex` state (defaulting to 0). When a tab header is tapped, update `selectedIndex` and render _only_ the `child` component that corresponds to that index.
 
 ### Divider
+
 A dividing line to separate content.
 
 **Property Mapping:**
+
 - `axis="horizontal"` (default): Render a 1dp tall line spanning 100% width with a subtle border/outline color.
 - `axis="vertical"`: Render a 1dp wide line with a set height, spanning the height of the container.
 
 ### Modal
+
 A dialog window.
 
 **Rendering Guidelines:**
+
 - **Desktop UIs**: Render as a centered popup or native dialog window over the main content, typically with a dimmed backdrop.
 - **Mobile UIs**: Render as a bottom sheet or full-screen dialog over the main content.
 - You must provide a mechanism to close the modal (e.g., an "X" button, clicking/tapping the backdrop overlay, or a swipe-to-dismiss gesture).
@@ -98,36 +117,43 @@ A dialog window.
 **Behavior & State:** This component behaves differently than a standard container. It acts as a **Modal Entry Point**. When instantiated, the user only sees the `trigger` child component on the screen (which usually acts and looks like a Button). The modal logic intercepts interactions (taps/clicks) on the `trigger`. When the `trigger` is tapped, the modal opens and displays the `content` child component.
 
 ### Button
+
 An interactive button that dispatches a protocol action.
 
 **Rendering Guidelines:** Render as a native interactive button component. It must render its `child` component inside the button (usually a `Text` or `Icon`).
 **Behavior & State:** When tapped, it dispatches the `action` back to the server, dynamically resolving the context variables at the moment of the interaction.
 **Property Mapping:**
+
 - `variant="default"`: Standard button with a subtle background and border.
 - `variant="primary"`: Prominent call-to-action button using the theme's `primaryColor` for its background, and contrasting text.
 - `variant="borderless"`: Button with no background or border, appearing like a clickable text link.
 
 ### TextField
+
 A field for user text input.
 
 **Rendering Guidelines:** Render using the platform's native text input control.
 **Behavior & State:** Establishes **Two-Way Binding**. As the user types, immediately write the new string back to the local data model path bound to `value`.
 **Property Mapping:**
+
 - `variant="shortText"` (default): Standard single-line input field.
 - `variant="longText"`: Render as a multi-line text area.
 - `variant="number"`: Render as a numeric input field, typically showing a numeric keyboard on mobile.
 - `variant="obscured"`: Render as an obscured password/secure field.
 
 ### CheckBox
+
 A toggleable control with a label.
 
 **Rendering Guidelines:** Render a native checkbox or toggle switch component alongside a text label.
 **Behavior & State:** Triggers two-way binding on the `value` path, setting it to boolean `true` or `false` when interacted with.
 
 ### ChoicePicker
+
 A component for selecting one or more options from a list.
 
 **Rendering Guidelines:**
+
 - `displayStyle="checkbox"` (default): Render as a dropdown menu, picker wheel, or an expanding vertical list of selectable options. A dropdown wrapper is preferred to save space.
 - `displayStyle="chips"`: Render as a horizontal, wrapping row of selectable chips/pills. Selected chips should have a distinct background/border.
 - If `filterable` is true, render a text input above the list of options. As the user types, filter the visible options using a case-insensitive substring match on the option labels.
@@ -135,15 +161,18 @@ A component for selecting one or more options from a list.
 **Behavior & State:** Binds to an array of strings in the data model representing the active selections. Toggle selections in the data model upon user interaction.
 
 ### Slider
+
 A control for selecting a numeric value within a range.
 
 **Rendering Guidelines:** Render using the platform's native slider or seek bar component. Optionally display the current numeric value next to the slider track.
 **Behavior & State:** Set `min` and `max` limits. Perform two-way binding, updating the numeric `value` path as the user drags the slider. Note that the value is a `number` rather than an integer, allowing for decimal ranges (e.g., 0.0 to 1.0).
 
 ### DateTimeInput
+
 An input for date and/or time.
 
 **Rendering Guidelines:** Render using native date and time picker controls.
+
 - If `enableDate` and `enableTime` are both true, show both date and time selection UI.
 - If only `enableDate` is true, show only a date picker.
 - If only `enableTime` is true, show only a time picker.
@@ -154,7 +183,7 @@ An input for date and/or time.
 
 ## 2. Client-Side Functions
 
-Functions provide client-side logic for validation, interpolation, and operations. As defined in the Architecture Guide, the reactivity of function arguments is generally handled by the Core Data Layer (specifically the Binder/Context layer). 
+Functions provide client-side logic for validation, interpolation, and operations. As defined in the Architecture Guide, the reactivity of function arguments is generally handled by the Core Data Layer (specifically the Binder/Context layer).
 
 Core libraries for each language (such as `@a2ui/web_core` for TypeScript) typically provide a complete, framework-agnostic implementation of all the functions in the basic catalog. Developers are encouraged to utilize these shared implementations rather than writing their own.
 When a function is called, the system resolves its arguments. If an argument is a static value, it is passed directly. If it is a dynamic binding, the Context layer handles the subscription. For most standard functions, the `execute` implementation simply receives a dictionary of static `args` and returns a static value. The Context layer wraps this execution in a reactive stream (e.g., a `computed` signal) so that the function re-runs whenever any of its dynamic arguments change.
@@ -162,10 +191,11 @@ When a function is called, the system resolves its arguments. If an argument is
 However, complex functions like `formatString` must manually interact with the Context to parse and subscribe to nested dynamic dependencies.
 
 ### `formatString`
+
 **Description:** The core interpolation engine. Parses the `args.value` string for `${expression}` blocks, combining literal strings, data paths, and other client-side function results.
 
 **Architecture & Logic:**
-Because `formatString` contains dynamic expressions embedded *within* a string literal, the Context layer cannot pre-resolve them. The implementation must parse the string and manually create a reactive output.
+Because `formatString` contains dynamic expressions embedded _within_ a string literal, the Context layer cannot pre-resolve them. The implementation must parse the string and manually create a reactive output.
 
 1.  **Parser/Scanner:** Implement a parser that scans the input string (`args.value`) for `${...}` blocks. It must properly handle escaped markers (`\${`) which resolve to a literal `${`.
 2.  **Expression Evaluation:** Inside the interpolation block, the parser must differentiate between:
@@ -176,68 +206,82 @@ Because `formatString` contains dynamic expressions embedded *within* a string l
 4.  **Reactive Return:** The function MUST return a computed reactive stream (e.g., a `computed(() => ...)` signal). Inside this computed stream, unwrap all the resolved signals, convert them to strings, and concatenate them with the literal string parts.
 
 ### `required`
+
 **Description:** Validates that a given value is present.
 
 **Logic:** Return `true` if `args.value` is strictly not `null`, not `undefined`, not an empty string `""`, and not an empty array `[]`. Otherwise, return `false`.
 
 ### `regex`
+
 **Description:** Validates a value against a regular expression.
 
 **Logic:** Instantiate a regular expression using `args.pattern`. Test the `args.value` string against it. Return `true` if it matches, `false` otherwise.
 
 ### `length`
+
 **Description:** Validates string length constraints.
 
 **Logic:** Ensure the length of the string `args.value` is `>= args.min` (if `min` is provided) and `<= args.max` (if `max` is provided).
 
 ### `numeric`
+
 **Description:** Validates numeric range constraints.
 
 **Logic:** Parse `args.value` as a number. Ensure it is `>= args.min` (if `min` is provided) and `<= args.max` (if `max` is provided). Return `true` if valid, `false` if invalid or if it cannot be parsed as a number.
 
 ### `email`
+
 **Description:** Validates an email address.
 
 **Logic:** Test `args.value` against a standard email regex pattern (e.g., `/^[^\s@]+@[^\s@]+\.[^\s@]+$/`).
 
 ### `formatNumber`
+
 **Description:** Formats a numeric value.
 
-**Logic:** Use the platform's native locale formatting (e.g., `Intl.NumberFormat` on the web or `NumberFormatter` natively) on `args.value`. 
-- If `args.decimals` is provided, force both the minimum and maximum fraction digits to that value. 
+**Logic:** Use the platform's native locale formatting (e.g., `Intl.NumberFormat` on the web or `NumberFormatter` natively) on `args.value`.
+
+- If `args.decimals` is provided, force both the minimum and maximum fraction digits to that value.
 - Enable grouping (e.g., thousands separators) unless `args.grouping` is explicitly set to `false`.
 
 ### `formatCurrency`
+
 **Description:** Formats a number as a currency string.
 
 **Logic:** Similar to `formatNumber`, but configured for currency style formatting. Apply the ISO 4217 currency code provided in `args.currency` (e.g., 'USD', 'EUR').
 
 ### `formatDate`
+
 **Description:** Formats a timestamp into a date string.
 
 **Logic:** Parse `args.value` into a native Date/Time object. Interpret the Unicode TR35 `args.format` string (e.g., `yyyy-MM-dd`, `HH:mm`) and construct the formatted date string. You will likely need a platform-specific date formatting library to parse the TR35 pattern.
 
 ### `pluralize`
+
 **Description:** Returns a localized pluralized string.
 
 **Logic:** Resolve the plural category for the numeric `args.value` based on the current locale (e.g., using `Intl.PluralRules` on the web). Map the resulting category (`zero`, `one`, `two`, `few`, `many`, `other`) to the corresponding string provided in the `args` object. If the specific category string is missing from `args`, fallback to `args.other`.
 
 ### `openUrl`
+
 **Description:** Opens a URL.
 
 **Logic:** Open `args.url` using the native platform's URL handler (e.g., opening in the system browser or deep-linking to an app). This function returns `void` and is executed as a side-effect.
 
 ### `and`
+
 **Description:** Logical AND operator.
 
 **Logic:** Iterate through the boolean array `args.values`. Return `true` only if all values are true. Short-circuit evaluation is encouraged.
 
 ### `or`
+
 **Description:** Logical OR operator.
 
 **Logic:** Iterate through the boolean array `args.values`. Return `true` if at least one value is true. Short-circuit evaluation is encouraged.
 
 ### `not`
+
 **Description:** Logical NOT operator.
 
 **Logic:** Return the strict boolean negation of `args.value`.
@@ -246,14 +290,14 @@ Because `formatString` contains dynamic expressions embedded *within* a string l
 
 ## 3. Layout Spacing: Margins and Padding
 
-A common challenge in dynamic UI frameworks is preventing "spacing multiplication," where nested containers (e.g., a `Text` inside a `Row` inside a `Column`) result in accumulated empty space that throws off the design. 
+A common challenge in dynamic UI frameworks is preventing "spacing multiplication," where nested containers (e.g., a `Text` inside a `Row` inside a `Column`) result in accumulated empty space that throws off the design.
 
 To achieve a clean, consistent default spacing where elements feel naturally separated without stacking empty space, implementers should follow a **Leaf-Margin Strategy**:
 
 1. **Invisible Containers have ZERO Spacing**: Structural, invisible layout containers (`Row`, `Column`, `List`) should have **no internal padding** and **no external margins**. They act purely as structural boundaries. This guarantees that wrapping an element in a `Row` or `Column` does not alter its spacing.
 2. **Leaf Components carry the Margin**: All non-container, visual "leaf" elements (`Text`, `Image`, `Icon`, `Video`, `AudioPlayer`, `Slider`, etc.) should have a uniform default **external margin** applied to them (e.g., `8dp` on all sides).
-3. **Visually Outlined Containers carry the Margin**: Containers and inputs that have a visible boundary (`Card`, `Button`, `TextField`, `CheckBox`, `ChoicePicker`) should also apply this same uniform default **external margin**. 
-   - *Note:* These elements will naturally also need internal *padding* to keep their content away from their own visible borders, but this padding is localized and does not affect the external layout.
+3. **Visually Outlined Containers carry the Margin**: Containers and inputs that have a visible boundary (`Card`, `Button`, `TextField`, `CheckBox`, `ChoicePicker`) should also apply this same uniform default **external margin**.
+   - _Note:_ These elements will naturally also need internal _padding_ to keep their content away from their own visible borders, but this padding is localized and does not affect the external layout.
 
 **Why use Margins on Leaves?**
 Applying margins directly to the visual elements—rather than relying on padding or gap properties on the parent containers—ensures predictable spacing. For example, if you have `Row(Item1, Item2)`, using margins on the items guarantees that there is space to the left of `Item1`, space to the right of `Item2`, and space between them. Because the invisible containers themselves contribute zero extra spacing, you can deeply nest your structural rows and columns without the spacing unexpectedly multiplying.
@@ -263,12 +307,14 @@ Applying margins directly to the visual elements—rather than relying on paddin
 ## 4. Color, Contrast, and Nesting
 
 A common challenge in dynamically generated UI is ensuring proper contrast and visual hierarchy when components are nested. For example:
+
 - A `Text` or `Icon` nested inside a `primary` `Button` must change its color to contrast with the button's background.
 - A `Card` nested inside another `Card` should remain visually distinct.
 
 To keep the A2UI rendering layer simple and performant, **do not manually calculate or pass color properties down the A2UI component tree**. Instead, rely entirely on the native context and theme inheritance mechanisms provided by your target UI framework.
 
 ### Text and Icon Contrast
+
 When an element defines a strong background color (like a `primary` `Button` using the theme's `primaryColor`), it must also define the expected text color for its content. It should propagate this expectation implicitly.
 
 - **Web (CSS):** The `Button` wrapper sets the standard CSS `color` property. Because `color` is inherited in CSS, any `Text` or `Icon` component rendered inside the button will automatically adapt.
@@ -276,13 +322,15 @@ When an element defines a strong background color (like a `primary` `Button` usi
 - **SwiftUI (iOS):** Apply `.foregroundColor(...)` or `.environment(\.colorScheme, ...)` to the button wrapper.
 - **Flutter:** Use `DefaultTextStyle.merge()` and `IconTheme.merge()` within the button wrapper. If using standard Material buttons (like `ElevatedButton`), this is often handled for you automatically.
 
-*Rule of Thumb:* Leaf components like `Text` and `Icon` should **never** hardcode their colors unless explicitly instructed by a property. They must always inherit from their environment.
+_Rule of Thumb:_ Leaf components like `Text` and `Icon` should **never** hardcode their colors unless explicitly instructed by a property. They must always inherit from their environment.
 
 ### Nesting Containers (Cards)
+
 When a `Card` is nested within another `Card`, or placed on different background surfaces, it needs to remain distinct. Attempting to alternate surface colors based on depth adds significant complexity to the renderer.
 
 **Recommended Approach: Outlines and Transparent Surfaces**
-The simplest, most robust starting approach is to give `Card` components a **transparent background** and a **visible outline/border** (e.g., a 1dp outline matching the theme's outline/border color). 
-- By using borders instead of opaque surface colors, nested cards will simply draw an inner boundary within the parent card. 
+The simplest, most robust starting approach is to give `Card` components a **transparent background** and a **visible outline/border** (e.g., a 1dp outline matching the theme's outline/border color).
+
+- By using borders instead of opaque surface colors, nested cards will simply draw an inner boundary within the parent card.
 - This guarantees a clear visual hierarchy regardless of how deeply they are nested, and it requires zero context-passing or depth-tracking in your code.
 - If your design system requires opaque cards, consider using a framework-specific elevation system (e.g., standard Material elevation) which often handles shadow and surface tinting automatically, rather than building custom color-alternation logic into the A2UI adapters.
diff --git a/specification/v0_9/docs/evolution_guide.md b/specification/v0_9/docs/evolution_guide.md
index 2e0d9c04c..c1e03720e 100644
--- a/specification/v0_9/docs/evolution_guide.md
+++ b/specification/v0_9/docs/evolution_guide.md
@@ -11,19 +11,19 @@ Version 0.9 represents a fundamental philosophical shift from "Structured Output
 
 ### Summary Table
 
-| Feature                  | v0.8.1                                   | v0.9                                                     |
-| :----------------------- | :--------------------------------------- | :------------------------------------------------------- |
-| **Philosophy**           | Structured Output / Function Calling     | Prompt-First / In-Context Schema                         |
-| **Message Types**        | `beginRendering`, `surfaceUpdate`, ...   | `createSurface`, `updateComponents`, ...                 |
-| **Surface Creation**     | Explicit `beginRendering`                | Explicit `createSurface`                                 |
-| **Component Type**       | Key-based wrapper (`{"Text": ...}`)      | Property-based discriminator (`"component": "Text"`)     |
-| **Data Model Update**    | Array of Key-Value Pairs                 | Standard JSON Object                                     |
-| **Data Binding**         | `dataBinding` / `literalString`          | `path` / Native JSON types                               |
-| **Button Context**       | Array of Key-Value pairs                 | Standard JSON Object                                     |
-| **Button Variant**       | Boolean (`primary: true`)                | Enum (`variant: "primary"`)                              |
-| **Catalog**              | Separate component and function catalogs | Unified Catalog (`basic_catalog.json`)                |
-| **Auxiliary Rules**      | N/A                                      | `basic_catalog_rules.txt`                             |
-| **Validation**           | Basic Schema                             | Strict `ValidationFailed` feedback loop                  |
+| Feature                  | v0.8.1                                   | v0.9                                                   |
+| :----------------------- | :--------------------------------------- | :----------------------------------------------------- |
+| **Philosophy**           | Structured Output / Function Calling     | Prompt-First / In-Context Schema                       |
+| **Message Types**        | `beginRendering`, `surfaceUpdate`, ...   | `createSurface`, `updateComponents`, ...               |
+| **Surface Creation**     | Explicit `beginRendering`                | Explicit `createSurface`                               |
+| **Component Type**       | Key-based wrapper (`{"Text": ...}`)      | Property-based discriminator (`"component": "Text"`)   |
+| **Data Model Update**    | Array of Key-Value Pairs                 | Standard JSON Object                                   |
+| **Data Binding**         | `dataBinding` / `literalString`          | `path` / Native JSON types                             |
+| **Button Context**       | Array of Key-Value pairs                 | Standard JSON Object                                   |
+| **Button Variant**       | Boolean (`primary: true`)                | Enum (`variant: "primary"`)                            |
+| **Catalog**              | Separate component and function catalogs | Unified Catalog (`basic_catalog.json`)                 |
+| **Auxiliary Rules**      | N/A                                      | `basic_catalog_rules.txt`                              |
+| **Validation**           | Basic Schema                             | Strict `ValidationFailed` feedback loop                |
 | **Data Synchronization** | Implicit                                 | Explicit Client->Server data syncing (`sendDataModel`) |
 
 ## 2. Architectural & Schema Changes
@@ -144,7 +144,7 @@ Specifying an unknown surfaceId will cause an error. It is recommended that clie
       {
         "id": "title",
         "component": {
-          "Text": { "text": { "literalString": "Hello" } }
+          "Text": {"text": {"literalString": "Hello"}}
         }
       }
     ]
diff --git a/specification/v0_9/docs/renderer_guide.md b/specification/v0_9/docs/renderer_guide.md
index 219b0f23a..86d5f0ed0 100644
--- a/specification/v0_9/docs/renderer_guide.md
+++ b/specification/v0_9/docs/renderer_guide.md
@@ -14,34 +14,43 @@ The A2UI client architecture has a well-defined data flow that bridges language-
 4. The `Surface` instantiates and renders individual **`ComponentImplementation`** nodes to build the UI tree.
 
 This establishes a fundamental split:
-*   **The Framework-Agnostic Layer (Data Layer)**: Handles JSON parsing, state management, JSON pointers, and schemas. This logic is identical across all UI frameworks within a given language.
-*   **The Framework-Specific Layer (View Layer)**: Handles turning the structured state into actual pixels (React Nodes, Flutter Widgets, iOS Views).
+
+- **The Framework-Agnostic Layer (Data Layer)**: Handles JSON parsing, state management, JSON pointers, and schemas. This logic is identical across all UI frameworks within a given language.
+- **The Framework-Specific Layer (View Layer)**: Handles turning the structured state into actual pixels (React Nodes, Flutter Widgets, iOS Views).
 
 ### Implementation Topologies
+
 Because A2UI spans multiple languages and UI paradigms, the strictness and location of these architectural boundaries will vary depending on the target ecosystem.
 
 #### Dynamic Languages (e.g., TypeScript / JavaScript)
+
 In highly dynamic ecosystems like the web, the architecture is typically split across multiple packages to maximize code reuse across diverse UI frameworks (React, Angular, Vue, Lit).
-*   **Core Library (`web_core`)**: Implements the Core Data Layer, Component Schemas, and a Generic Binder Layer. Because TS/JS has powerful runtime reflection, the core library can provide a generic binder that automatically handles all data binding without framework-specific code. 
-*   **Framework Library (`react_renderer`, `angular_renderer`)**: Implements the Framework-Specific Adapters and the actual view implementations (the React `Button`, `Text`, etc.).
+
+- **Core Library (`web_core`)**: Implements the Core Data Layer, Component Schemas, and a Generic Binder Layer. Because TS/JS has powerful runtime reflection, the core library can provide a generic binder that automatically handles all data binding without framework-specific code.
+- **Framework Library (`react_renderer`, `angular_renderer`)**: Implements the Framework-Specific Adapters and the actual view implementations (the React `Button`, `Text`, etc.).
 
 #### Static Languages (e.g., Kotlin, Swift, Dart)
+
 In statically typed languages (and AOT-compiled languages like Dart), runtime reflection is often limited or discouraged for performance reasons.
-*   **Core Library (e.g., `kotlin_core`)**: Implements the Core Data Layer and Component Schemas. The core library typically provides a manually implemented **Binder Layer** for the standard Basic Catalog components. This ensures that even in static environments, basic components have a standardized, framework-agnostic reactive state definition.
-*   **Code Generation (Future/Optional)**: While the core library starts with manual binders, it may eventually offer Code Generation (e.g., KSP, Swift Macros) to automate the creation of Binders for custom components.
-*   **Custom Components**: In the absence of code generation, developers implementing new, ad-hoc components typically utilize a **"Binderless" Implementation** flow, which allows for direct binding to the data model without intermediate boilerplate.
-*   **Framework Library (e.g., `compose_renderer`)**: Uses the predefined Binders to connect to native UI state and implements the actual visual components.
+
+- **Core Library (e.g., `kotlin_core`)**: Implements the Core Data Layer and Component Schemas. The core library typically provides a manually implemented **Binder Layer** for the standard Basic Catalog components. This ensures that even in static environments, basic components have a standardized, framework-agnostic reactive state definition.
+- **Code Generation (Future/Optional)**: While the core library starts with manual binders, it may eventually offer Code Generation (e.g., KSP, Swift Macros) to automate the creation of Binders for custom components.
+- **Custom Components**: In the absence of code generation, developers implementing new, ad-hoc components typically utilize a **"Binderless" Implementation** flow, which allows for direct binding to the data model without intermediate boilerplate.
+- **Framework Library (e.g., `compose_renderer`)**: Uses the predefined Binders to connect to native UI state and implements the actual visual components.
 
 #### Combined Core + Framework Libraries (e.g., Swift + SwiftUI)
+
 In ecosystems dominated by a single UI framework (like iOS with SwiftUI), developers often build a single, unified library rather than splitting Core and Framework into separate packages.
-*   **Relaxed Boundaries**: The strict separation between Core and Framework libraries can be relaxed. The generic `ComponentContext` and the framework-specific adapter logic are often tightly integrated.
-*   **Why Keep the Binder Layer?**: Even in a combined library, defining the intermediate Binder Layer remains highly recommended. It standardizes how A2UI data resolves into reactive state. This allows developers adopting the library to easily write alternative implementations of well-known components without having to rewrite the complex, boilerplate-heavy A2UI data subscription logic.
+
+- **Relaxed Boundaries**: The strict separation between Core and Framework libraries can be relaxed. The generic `ComponentContext` and the framework-specific adapter logic are often tightly integrated.
+- **Why Keep the Binder Layer?**: Even in a combined library, defining the intermediate Binder Layer remains highly recommended. It standardizes how A2UI data resolves into reactive state. This allows developers adopting the library to easily write alternative implementations of well-known components without having to rewrite the complex, boilerplate-heavy A2UI data subscription logic.
 
 ## 2. The Core Interfaces
 
 At the heart of the A2UI architecture are five key interfaces that connect the data to the screen.
 
 ### `ComponentApi`
+
 The framework-agnostic definition of a component. It defines the name and the exact JSON schema footprint of the component, without any rendering logic. It acts as the single source of truth for the component's contract.
 
 ```typescript
@@ -49,28 +58,34 @@ interface ComponentApi {
   /** The name of the component as it appears in the A2UI JSON (e.g., 'Button'). */
   readonly name: string;
   /** The technical definition used for validation and generating client capabilities. */
-  readonly schema: Schema; 
+  readonly schema: Schema;
 }
 ```
 
 ### `ComponentImplementation`
+
 The framework-specific logic for rendering a component. It extends `ComponentApi` to include a `build` or `render` method.
 
 How this looks depends on the target framework's paradigm:
 
 **Functional / Reactive Frameworks (e.g., Flutter, SwiftUI, React)**
+
 ```typescript
 interface ComponentImplementation extends ComponentApi {
   /**
    * @param ctx The component's context containing its data and state.
    * @param buildChild A closure provided by the surface to recursively build children.
    */
-  build(ctx: ComponentContext<ComponentImplementation>, buildChild: (id: string) => NativeWidget): NativeWidget;
+  build(
+    ctx: ComponentContext<ComponentImplementation>,
+    buildChild: (id: string) => NativeWidget,
+  ): NativeWidget;
 }
 ```
 
 **Stateful / Imperative Frameworks (e.g., Vanilla DOM, Android Views)**
 Because the catalog only holds a single "blueprint" of each `ComponentImplementation`, stateful frameworks need a way to instantiate individual objects for each component rendered on screen.
+
 ```typescript
 interface ComponentInstance {
   mount(container: NativeElement): void;
@@ -85,12 +100,15 @@ interface ComponentImplementation extends ComponentApi {
 ```
 
 ### `Surface`
+
 The entrypoint widget/view for a specific framework. It is instantiated with a `SurfaceModel`. It listens to the model for lifecycle events and dynamically builds the UI tree, initiating the recursive rendering loop at the component with ID `root`.
 
 ### `SurfaceModel` & `ComponentContext`
+
 The state containers.
-*   **`SurfaceModel`**: Represents the entire state of a single UI surface, holding the `DataModel` and a flat list of component configurations.
-*   **`ComponentContext`**: A transient object created by the `Surface` and passed into a `ComponentImplementation` during rendering. It pairs the component's specific configuration with a scoped window into the data model (`DataContext`).
+
+- **`SurfaceModel`**: Represents the entire state of a single UI surface, holding the `DataModel` and a flat list of component configurations.
+- **`ComponentContext`**: A transient object created by the `Surface` and passed into a `ComponentImplementation` during rendering. It pairs the component's specific configuration with a scoped window into the data model (`DataContext`).
 
 ---
 
@@ -98,31 +116,38 @@ The state containers.
 
 ## 3. The Core Data Layer (Detailed Specifications)
 
-The Data Layer maintains a long-lived, mutable state object. This layer follows the exact same design in all programming languages and **does not require design work when porting to a new framework**. 
+The Data Layer maintains a long-lived, mutable state object. This layer follows the exact same design in all programming languages and **does not require design work when porting to a new framework**.
 
 ### Prerequisites
 
 To implement the Data Layer effectively, your target environment needs two foundational utilities:
 
 #### 1. Schema Library
+
 To represent and validate component and function APIs, the Data Layer requires a **Schema Library** (like **Zod** in TypeScript or **Pydantic** in Python) that allows for programmatic definition of schemas and the ability to export them to standard JSON Schema. If no suitable library exists, raw JSON Schema strings or `Codable` structs can be used.
 
 #### 2. Observable Library
+
 A2UI relies on standard observer patterns. The Data Layer needs two types of reactivity:
-*   **Event Streams**: Simple publish/subscribe mechanisms for discrete events (e.g., `onSurfaceCreated`, `onAction`).
-*   **Stateful Streams (Signals)**: Reactive variables that hold an initial value synchronously upon subscription, and notify listeners of future changes (e.g., DataModel paths, function results). Crucially, the subscription must provide a clear mechanism to **unsubscribe** (e.g., a `dispose()` method) to prevent memory leaks.
+
+- **Event Streams**: Simple publish/subscribe mechanisms for discrete events (e.g., `onSurfaceCreated`, `onAction`).
+- **Stateful Streams (Signals)**: Reactive variables that hold an initial value synchronously upon subscription, and notify listeners of future changes (e.g., DataModel paths, function results). Crucially, the subscription must provide a clear mechanism to **unsubscribe** (e.g., a `dispose()` method) to prevent memory leaks.
 
 ### Design Principles
 
 #### 1. The "Add" Pattern for Composition
+
 We strictly separate **construction** from **composition**. Parent containers do not act as factories for their children.
+
 ```typescript
-const child = new ChildModel(config); 
-parent.addChild(child); 
+const child = new ChildModel(config);
+parent.addChild(child);
 ```
 
 #### 2. Standard Observer Pattern
-Models must provide a mechanism for the rendering layer to observe changes. 
+
+Models must provide a mechanism for the rendering layer to observe changes.
+
 1.  **Low Dependency**: Prefer "lowest common denominator" mechanisms.
 2.  **Multi-Cast**: Support multiple listeners registered simultaneously.
 3.  **Unsubscribe Pattern**: There MUST be a clear way to stop listening.
@@ -130,29 +155,34 @@ Models must provide a mechanism for the rendering layer to observe changes.
 5.  **Consistency**: Used uniformly across `SurfaceGroupModel` (lifecycle), `SurfaceModel` (actions), `SurfaceComponentsModel` (lifecycle), `ComponentModel` (updates), and `DataModel` (data changes).
 
 #### 3. Granular Reactivity
+
 The model is designed to support high-performance rendering through granular updates.
-*   **Structure Changes**: The `SurfaceComponentsModel` notifies when items are added/removed.
-*   **Property Changes**: The `ComponentModel` notifies when its specific configuration changes.
-*   **Data Changes**: The `DataModel` notifies only subscribers to the specific path that changed.
+
+- **Structure Changes**: The `SurfaceComponentsModel` notifies when items are added/removed.
+- **Property Changes**: The `ComponentModel` notifies when its specific configuration changes.
+- **Data Changes**: The `DataModel` notifies only subscribers to the specific path that changed.
 
 ### Protocol Models & Serialization
 
-The framework-agnostic layer is responsible for defining strict, native type representations of the A2UI JSON schemas. Renderers should not pass raw generic dictionaries (like `Map<String, Any>` or `Record<string, any>`) directly into the state layer. 
+The framework-agnostic layer is responsible for defining strict, native type representations of the A2UI JSON schemas. Renderers should not pass raw generic dictionaries (like `Map<String, Any>` or `Record<string, any>`) directly into the state layer.
 
 Developers must create data classes, structs, or interfaces (e.g., `data class` in Kotlin, `Codable struct` in Swift, or Zod-validated `interface` in TypeScript) that perfectly mirror the official JSON specifications. This creates a safe boundary between the raw network stream and the internal state models.
 
 **Required Data Structures:**
-*   **Server-to-Client Messages:** `A2uiMessage` (a union/protocol type), `CreateSurfaceMessage`, `UpdateComponentsMessage`, `UpdateDataModelMessage`, `DeleteSurfaceMessage`.
-*   **Client-to-Server Events:** `ClientEvent` (a union/protocol type), `ActionMessage`, `ErrorMessage`.
-*   **Client Metadata:** `A2uiClientCapabilities`, `InlineCatalog`, `FunctionDefinition`, `ClientDataModel`.
+
+- **Server-to-Client Messages:** `A2uiMessage` (a union/protocol type), `CreateSurfaceMessage`, `UpdateComponentsMessage`, `UpdateDataModelMessage`, `DeleteSurfaceMessage`.
+- **Client-to-Server Events:** `ClientEvent` (a union/protocol type), `ActionMessage`, `ErrorMessage`.
+- **Client Metadata:** `A2uiClientCapabilities`, `InlineCatalog`, `FunctionDefinition`, `ClientDataModel`.
 
 **JSON Serialization & Validation:**
-*   **Inbound (Parsing)**: The core library must provide a mechanism to deserialize a raw JSON string into a strongly-typed `A2uiMessage`. If the payload violates the A2UI JSON schema, this layer must throw an `A2uiValidationError` *before* the message reaches the state models.
-*   **Outbound (Stringifying)**: The core library must serialize client-to-server events and capabilities from their strict native types back into valid JSON strings to hand off to the transport layer.
+
+- **Inbound (Parsing)**: The core library must provide a mechanism to deserialize a raw JSON string into a strongly-typed `A2uiMessage`. If the payload violates the A2UI JSON schema, this layer must throw an `A2uiValidationError` _before_ the message reaches the state models.
+- **Outbound (Stringifying)**: The core library must serialize client-to-server events and capabilities from their strict native types back into valid JSON strings to hand off to the transport layer.
 
 ### The State Models
 
 #### SurfaceGroupModel & SurfaceModel
+
 The root containers for active surfaces and their catalogs, data, and components.
 
 ```typescript
@@ -165,13 +195,13 @@ class SurfaceGroupModel<T extends ComponentApi> {
   addSurface(surface: SurfaceModel<T>): void;
   deleteSurface(id: string): void;
   getSurface(id: string): SurfaceModel<T> | undefined;
-  
+
   readonly onSurfaceCreated: EventSource<SurfaceModel<T>>;
   readonly onSurfaceDeleted: EventSource<string>;
   readonly onAction: EventSource<A2uiClientAction>;
 }
 
-/** 
+/**
  * Matches 'action' in specification/v0_9/json/client_to_server.json.
  */
 interface A2uiClientAction {
@@ -205,13 +235,14 @@ class SurfaceModel<T extends ComponentApi> {
 ```
 
 #### `SurfaceComponentsModel` & `ComponentModel`
+
 Manages the raw JSON configuration of components in a flat map.
 
 ```typescript
 class SurfaceComponentsModel {
   get(id: string): ComponentModel | undefined;
   addComponent(component: ComponentModel): void;
-  
+
   readonly onCreated: EventSource<ComponentModel>;
   readonly onDeleted: EventSource<string>;
 }
@@ -219,15 +250,16 @@ class SurfaceComponentsModel {
 class ComponentModel {
   readonly id: string;
   readonly type: string; // Component name (e.g. 'Button')
-  
+
   get properties(): Record<string, any>;
   set properties(newProps: Record<string, any>);
-  
+
   readonly onUpdated: EventSource<ComponentModel>;
 }
 ```
 
 #### `DataModel`
+
 A dedicated store for application data.
 
 ```typescript
@@ -245,23 +277,25 @@ class DataModel {
 ```
 
 **JSON Pointer Implementation Rules**:
+
 1.  **A2UI Extension**: A2UI extends JSON Pointer to support **Relative Paths** that do not start with a forward slash `/` (e.g., `name` vs `/name`). These resolve relative to the current evaluation scope.
 2.  **Auto-typing (Auto-vivification)**: When setting a value at a nested path (e.g., `/a/b/0/c`), create intermediate segments. If the next segment is numeric (`0`), initialize as an Array `[]`, otherwise an Object `{}`.
 3.  **Notification Strategy (Bubble & Cascade)**: Notify exact matches, bubble up to all parent paths, and cascade down to all nested descendant paths.
 4.  **Undefined Handling**: Setting an object key to `undefined` removes the key. Setting an array index to `undefined` preserves length but empties the index (sparse array).
 
 **Type Coercion Standards**:
-| Input Type                 | Target Type | Result                                                                  |
+| Input Type | Target Type | Result |
 | :------------------------- | :---------- | :---------------------------------------------------------------------- |
-| `String` ("true", "false") | `Boolean`   | `true` or `false` (case-insensitive). Any other string maps to `false`. |
-| `Number` (non-zero)        | `Boolean`   | `true`                                                                  |
-| `Number` (0)               | `Boolean`   | `false`                                                                 |
-| `Any`                      | `String`    | Locale-neutral string representation                                    |
-| `null` / `undefined`       | `String`    | `""` (empty string)                                                     |
-| `null` / `undefined`       | `Number`    | `0`                                                                     |
-| `String` (numeric)         | `Number`    | Parsed numeric value or `0`                                             |
+| `String` ("true", "false") | `Boolean` | `true` or `false` (case-insensitive). Any other string maps to `false`. |
+| `Number` (non-zero) | `Boolean` | `true` |
+| `Number` (0) | `Boolean` | `false` |
+| `Any` | `String` | Locale-neutral string representation |
+| `null` / `undefined` | `String` | `""` (empty string) |
+| `null` / `undefined` | `Number` | `0` |
+| `String` (numeric) | `Number` | Parsed numeric value or `0` |
 
 #### The Context Layer
+
 Transient objects created on-demand during rendering to solve "scope" and binding resolution.
 
 ```typescript
@@ -283,24 +317,25 @@ class ComponentContext<T extends ComponentApi> {
 }
 ```
 
-*Escape Hatch*: Component implementations can use `ctx.surfaceComponents` to inspect the metadata of other components in the same surface (e.g. a `Row` checking if children have a `weight` property). This is discouraged but necessary for some layout engines.
+_Escape Hatch_: Component implementations can use `ctx.surfaceComponents` to inspect the metadata of other components in the same surface (e.g. a `Row` checking if children have a `weight` property). This is discouraged but necessary for some layout engines.
 
 ### The Processing Layer (`MessageProcessor`)
+
 The "Controller" that accepts the raw stream of A2UI messages, parses them, and mutates the Models. It also handles the aggregation of client state for synchronization.
 
 ```typescript
 class MessageProcessor<T extends ComponentApi> {
   readonly model: SurfaceGroupModel<T>;
-  
+
   constructor(catalogs: Catalog<T>[], actionHandler: ActionListener);
 
   // Accepts validated, strongly-typed message objects, not raw JSON
   processMessages(messages: A2uiMessage[]): void;
   addLifecycleListener(l: SurfaceLifecycleListener<T>): () => void;
-  
+
   // Returns a strictly typed capabilities object ready for JSON serialization
   getClientCapabilities(options?: CapabilitiesOptions): A2uiClientCapabilities;
-  
+
   /**
    * Returns the aggregated data model for all surfaces that have 'sendDataModel' enabled.
    * This should be used by the transport layer to populate metadata (e.g., 'a2uiClientDataModel').
@@ -310,25 +345,29 @@ class MessageProcessor<T extends ComponentApi> {
 ```
 
 #### Client Data Model Synchronization
+
 When a surface is created with `sendDataModel: true`, the client is responsible for sending the current state of that surface's data model back to the server whenever a client-to-server message (like an `action`) is sent.
 
 **Implementation Flow:**
+
 1.  The `MessageProcessor` tracks the `sendDataModel` flag for each surface.
 2.  The `getClientDataModel()` method iterates over all active surfaces and returns a map of data models for those where the flag is enabled.
 3.  The **Transport Layer** (e.g., A2A, MCP) calls `getClientDataModel()` before sending any message to the server.
 4.  If a non-empty data model map is returned, it is included in the transport's metadata field (e.g., `a2uiClientDataModel` in A2A metadata).
 
-*   **Surface Lifecycle**: It is an error to receive a `createSurface` message for a `surfaceId` that is already active. The processor MUST throw an error or report a validation failure if this occurs.
-*   **Component Lifecycle**: If an `updateComponents` message provides an existing `id` but a *different* `type`, the processor MUST remove the old component and create a fresh one to ensure framework renderers correctly reset their internal state.
+- **Surface Lifecycle**: It is an error to receive a `createSurface` message for a `surfaceId` that is already active. The processor MUST throw an error or report a validation failure if this occurs.
+- **Component Lifecycle**: If an `updateComponents` message provides an existing `id` but a _different_ `type`, the processor MUST remove the old component and create a fresh one to ensure framework renderers correctly reset their internal state.
 
 #### Generating Client Capabilities and Schema Types
+
 To dynamically generate the `a2uiClientCapabilities` payload (specifically `inlineCatalogs`), the processor must convert internal component schemas into valid JSON Schemas.
 
-**Schema Types Location**: Foundational schema types *should* be defined in a dedicated directory like `schema`. You can see the `renderers/web_core/src/v0_9/schema/common-types.ts` file in the reference web implementation as an example.
+**Schema Types Location**: Foundational schema types _should_ be defined in a dedicated directory like `schema`. You can see the `renderers/web_core/src/v0_9/schema/common-types.ts` file in the reference web implementation as an example.
 
-**Detectable Common Types**: Shared definitions (like `DynamicString`) must emit external JSON Schema `$ref` pointers. This is achieved by "tagging" the schemas using their `description` property (e.g., `REF:common_types.json#/$defs/DynamicString`). 
+**Detectable Common Types**: Shared definitions (like `DynamicString`) must emit external JSON Schema `$ref` pointers. This is achieved by "tagging" the schemas using their `description` property (e.g., `REF:common_types.json#/$defs/DynamicString`).
 
 When `getClientCapabilities()` converts internal schemas to generate `inlineCatalogs`:
+
 1. **Components**: Translate each component schema into a raw JSON Schema. Wrap it in the standard A2UI component envelope (`allOf` containing `ComponentCommon`).
 2. **Functions**: Map each function in the catalog to a `FunctionDefinition` object, converting its argument schema to JSON Schema.
 3. **Theme**: Convert the catalog's theme schema into a JSON Schema representation.
@@ -346,8 +385,8 @@ interface FunctionApi {
 }
 
 /**
- * A function implementation. Splitting API from Implementation is less critical than 
- * for components because functions are framework-agnostic, but it allows for 
+ * A function implementation. Splitting API from Implementation is less critical than
+ * for components because functions are framework-agnostic, but it allows for
  * re-using API definitions across different implementation providers.
  */
 interface FunctionImplementation extends FunctionApi {
@@ -361,7 +400,12 @@ class Catalog<T extends ComponentApi> {
   readonly functions?: ReadonlyMap<string, FunctionImplementation>;
   readonly themeSchema?: Schema;
 
-  constructor(id: string, components: T[], functions?: FunctionImplementation[], themeSchema?: Schema) {
+  constructor(
+    id: string,
+    components: T[],
+    functions?: FunctionImplementation[],
+    themeSchema?: Schema,
+  ) {
     // Initializes the properties
   }
 }
@@ -371,6 +415,7 @@ class Catalog<T extends ComponentApi> {
 Functions in A2UI accept statically resolved values as input arguments (not observable streams). However, they can return an observable stream (or Signal) to provide reactive updates to the UI, or they can simply return a static value synchronously.
 
 Functions generally fall into a few common patterns:
+
 1.  **Pure Logic (Synchronous)**: Functions like `add` or `concat`. Their logic is immediate and depends only on their inputs. They typically return a static value.
 2.  **External State (Reactive)**: Functions like `clock()` or `networkStatus()`. These return long-lived streams that push updates to the UI independently of data model changes.
 3.  **Effect Functions**: Side-effect handlers (e.g., `openUrl`, `closeModal`) that return `void`. These are triggered by user actions rather than interpolation.
@@ -378,9 +423,11 @@ Functions generally fall into a few common patterns:
 If a function returns a reactive stream, it MUST use an idiomatic listening mechanism that supports standard unsubscription. To properly support an AI agent, functions SHOULD include a schema to generate accurate client capabilities.
 
 ### Composing Your Own Catalog
+
 You can define your own catalog by composing components and functions that reflect your design system. While you can build a catalog entirely from scratch, you can also import or combine definitions with the Basic Catalog to save time.
 
-*Example of composing a catalog:*
+_Example of composing a catalog:_
+
 ```python
 # Pseudocode
 myCustomCatalog = Catalog(
@@ -397,12 +444,14 @@ myCustomCatalog = Catalog(
 
 ## 5. Component Implementation Strategies
 
-While the `ComponentImplementation` API dictates that a component must be able to `build()` or `mount()`, *how* a developer connects that view to the reactive data model inside `ComponentContext` varies by language capabilities.
+While the `ComponentImplementation` API dictates that a component must be able to `build()` or `mount()`, _how_ a developer connects that view to the reactive data model inside `ComponentContext` varies by language capabilities.
 
 ### Strategy 1: Direct / Binderless Implementation
+
 The most straightforward approach. The developer implements the `ComponentImplementation` and manually manages A2UI reactivity directly within the `build` method using the framework's native reactive tools (e.g., `StreamBuilder` in Flutter, or manual `useEffect` in React).
 
-*Example: Flutter Direct Implementation*
+_Example: Flutter Direct Implementation_
+
 ```dart
 Widget build(ComponentContext context, ChildBuilderCallback buildChild) {
   return StreamBuilder(
@@ -419,7 +468,8 @@ Widget build(ComponentContext context, ChildBuilderCallback buildChild) {
 ```
 
 ### Strategy 2: The Binder Layer Pattern
-For complex applications, scattering manual A2UI subscription logic across all view components becomes repetitive and error-prone. 
+
+For complex applications, scattering manual A2UI subscription logic across all view components becomes repetitive and error-prone.
 
 The **Binder Layer** is an intermediate abstraction. It takes raw component properties and transforms the reactive A2UI bindings into a single, cohesive stream of strongly-typed `ResolvedProps`. The view component simply listens to this generic stream.
 
@@ -436,13 +486,14 @@ export interface ComponentBinder<ResolvedProps> {
 ```
 
 ### Strategy 3: Generic Binders for Dynamic Languages
+
 In languages with powerful runtime reflection (like TypeScript/Zod), the Binder Layer can be entirely automated. You can write a generic factory that inspects a component's schema and automatically creates all necessary data model subscriptions, inferring strict types.
 
 This provides the ultimate "happy path" developer experience. The developer writes a simple, stateless UI component that receives native types, completely abstracted from A2UI's internals.
 
 ```typescript
 // 1. The framework adapter infers the prop types from the Binder's Schema.
-// The raw `DynamicString` label and `Action` object have been automatically 
+// The raw `DynamicString` label and `Action` object have been automatically
 // resolved into a static `string` and a callable `() => void` function.
 
 // Conceptually, the inferred type looks like this:
@@ -466,27 +517,29 @@ const ReactButton = createReactComponent(ButtonBinder, ({ props, buildChild }) =
 Because of the generic types flowing through the adapter, if the developer typos `props.action` as `props.onClick`, or treats `props.label` as an object instead of a string, the compiler will immediately flag a type error.
 
 ### Example: Framework-Specific Adapters
+
 The adapter acts as a wrapper that instantiates the binder, binds its output stream to the framework's state mechanism, injects structural rendering helpers (`buildChild`), and hooks into the native destruction lifecycle to call `dispose()`.
 
 #### React Pseudo-Adapter
+
 ```typescript
 // Pseudo-code concept for a React adapter
 function createReactComponent(binder, RenderComponent) {
   return function ReactWrapper({ context, buildChild }) {
     // Hook into component mount
     const [props, setProps] = useState(binder.initialProps);
-    
+
     useEffect(() => {
       // Create binding on mount
       const binding = binder.bind(context);
-      
+
       // Subscribe to updates
       const sub = binding.propsStream.subscribe(newProps => setProps(newProps));
-      
+
       // Cleanup on unmount
       return () => {
         sub.unsubscribe();
-        binding.dispose(); 
+        binding.dispose();
       };
     }, [context]);
 
@@ -496,6 +549,7 @@ function createReactComponent(binder, RenderComponent) {
 ```
 
 #### Angular Pseudo-Adapter
+
 ```typescript
 // Pseudo-code concept for an Angular adapter
 @Component({
@@ -505,7 +559,7 @@ function createReactComponent(binder, RenderComponent) {
     @if (props(); as props) {
       <button mat-button>{{ props.label }}</button>
     }
-  `
+  `,
 })
 export class AngularWrapper {
   private binder = inject(BinderService);
@@ -517,7 +571,7 @@ export class AngularWrapper {
 
       return {
         instance: binding,
-        props: toSignal(binding.propsStream) // Convert Observable to Signal
+        props: toSignal(binding.propsStream), // Convert Observable to Signal
       };
     },
   });
@@ -537,31 +591,38 @@ export class AngularWrapper {
 Regardless of the implementation strategy chosen, the framework adapter or `ComponentImplementation` MUST strictly manage subscriptions to ensure performance and prevent memory leaks.
 
 ### Contract of Ownership
+
 A crucial part of A2UI's architecture is understanding who "owns" the data layers.
-*   **The Data Layer (Message Processor) owns the `ComponentModel`**. It creates, updates, and destroys the component's raw data state based on the incoming JSON stream.
-*   **The Framework Adapter owns the `ComponentContext` and `ComponentBinding`**. When the native framework decides to mount a component onto the screen (e.g., React runs `render`), the Framework Adapter creates the `ComponentContext` and passes it to the Binder. When the native framework unmounts the component, the Framework Adapter MUST call `binding.dispose()`.
+
+- **The Data Layer (Message Processor) owns the `ComponentModel`**. It creates, updates, and destroys the component's raw data state based on the incoming JSON stream.
+- **The Framework Adapter owns the `ComponentContext` and `ComponentBinding`**. When the native framework decides to mount a component onto the screen (e.g., React runs `render`), the Framework Adapter creates the `ComponentContext` and passes it to the Binder. When the native framework unmounts the component, the Framework Adapter MUST call `binding.dispose()`.
 
 ### Data Props vs. Structural Props
+
 It's important to distinguish between Data Props (like `label` or `value`) and Structural Props (like `child` or `children`).
-*   **Data Props:** Handled entirely by the Binder. The adapter receives a stream of fully resolved values (e.g., `"Submit"` instead of a `DynamicString` path). Whenever a data value updates, the binder should emit a *new reference* (e.g. a shallow copy of the props object) to ensure declarative frameworks that rely on strict equality (like React) correctly detect the change and trigger a re-render.
-*   **Structural Props:** The Binder does not attempt to resolve component IDs into actual UI trees. Instead, it outputs metadata for the children that need to be rendered.
-    *   For a simple `ComponentId` (e.g., `Card.child`), it emits an object like `{ id: string, basePath: string }`.
-    *   For a `ChildList` (e.g., `Column.children`), it evaluates the array. If the array is driven by a dynamic template bound to the data model, the binder must iterate over the array, using `context.dataContext.nested()` to generate a specific context for each index, and output a list of `ChildNode` streams. 
-*   The framework adapter is then responsible for taking these node definitions and calling a framework-native `buildChild(id, basePath)` method recursively.
+
+- **Data Props:** Handled entirely by the Binder. The adapter receives a stream of fully resolved values (e.g., `"Submit"` instead of a `DynamicString` path). Whenever a data value updates, the binder should emit a _new reference_ (e.g. a shallow copy of the props object) to ensure declarative frameworks that rely on strict equality (like React) correctly detect the change and trigger a re-render.
+- **Structural Props:** The Binder does not attempt to resolve component IDs into actual UI trees. Instead, it outputs metadata for the children that need to be rendered.
+  - For a simple `ComponentId` (e.g., `Card.child`), it emits an object like `{ id: string, basePath: string }`.
+  - For a `ChildList` (e.g., `Column.children`), it evaluates the array. If the array is driven by a dynamic template bound to the data model, the binder must iterate over the array, using `context.dataContext.nested()` to generate a specific context for each index, and output a list of `ChildNode` streams.
+- The framework adapter is then responsible for taking these node definitions and calling a framework-native `buildChild(id, basePath)` method recursively.
 
 > **Implementation Tip: Context Propagation**
-> When implementing the recursive `buildChild` helper, ensure that it correctly inherits the *current* component's data context path by default. If a nested component (like a Text field inside a List template) uses a relative path, it must resolve against the scoped path provided by its immediate structural parent (e.g., `/restaurants/0`), not the root path. Failing to propagate this context is a common cause of "empty" data in nested components.
+> When implementing the recursive `buildChild` helper, ensure that it correctly inherits the _current_ component's data context path by default. If a nested component (like a Text field inside a List template) uses a relative path, it must resolve against the scoped path provided by its immediate structural parent (e.g., `/restaurants/0`), not the root path. Failing to propagate this context is a common cause of "empty" data in nested components.
 
 ### Component Subscription Lifecycle Rules
+
 1.  **Lazy Subscription**: Only bind and subscribe to data paths or property updates when the component is actually mounted/attached to the UI.
 2.  **Path Stability**: If a component's property changes via an `updateComponents` message, you MUST unsubscribe from the old path before subscribing to the new one.
 3.  **Destruction / Cleanup**: When a component is removed from the UI (e.g., via a `deleteSurface` message), the implementation MUST hook into its native lifecycle to dispose of all data model subscriptions.
 
 ### Reactive Validation (`Checkable`)
+
 Interactive components that support the `checks` property should implement the `Checkable` trait.
-*   **Aggregate Error Stream**: The component should subscribe to all `CheckRule` conditions defined in its properties.
-*   **UI Feedback**: It should reactively display the `message` of the first failing check as a validation error hint.
-*   **Action Blocking**: Actions (like `Button` clicks) should be reactively disabled or blocked if any validation check fails.
+
+- **Aggregate Error Stream**: The component should subscribe to all `CheckRule` conditions defined in its properties.
+- **UI Feedback**: It should reactively display the `message` of the first failing check as a validation error hint.
+- **Action Blocking**: Actions (like `Button` clicks) should be reactively disabled or blocked if any validation check fails.
 
 ---
 
@@ -572,17 +633,20 @@ Interactive components that support the `checks` property should implement the `
 The standard A2UI Basic Catalog specifies a set of core components (Button, Text, Row, Column) and functions.
 
 ### Strict API / Implementation Separation
+
 When building libraries that provide the Basic Catalog, it is **crucial** to separate the pure API (the Schemas and `ComponentApi`/`FunctionApi` definitions) from the actual UI implementations.
 
-*   **Multi-Framework Code Reuse**: In ecosystems like the Web, this allows a shared `web_core` library to define the Basic Catalog API and Binders once, while separate packages (`react_renderer`, `angular_renderer`) provide the native view implementations.
-*   **Developer Overrides**: By exposing the standard API definitions, developers adopting A2UI can easily swap in custom UI implementations (e.g., replacing the default `Button` with their company's internal Design System `Button`) without having to rewrite the complex A2UI validation, data binding, and capability generation logic. 
+- **Multi-Framework Code Reuse**: In ecosystems like the Web, this allows a shared `web_core` library to define the Basic Catalog API and Binders once, while separate packages (`react_renderer`, `angular_renderer`) provide the native view implementations.
+- **Developer Overrides**: By exposing the standard API definitions, developers adopting A2UI can easily swap in custom UI implementations (e.g., replacing the default `Button` with their company's internal Design System `Button`) without having to rewrite the complex A2UI validation, data binding, and capability generation logic.
 
 For a detailed walkthrough on how to visually and functionally implement each basic component and function, refer to the [Basic Catalog Implementation Guide](basic_catalog_implementation_guide.md).
 
 ### Strongly-Typed Catalog Implementations
+
 To ensure all components are properly implemented and match the exact API signature, platforms with strong type systems should utilize their advanced typing features. This ensures that a provided renderer not only exists, but its `name` and `schema` strictly match the official Catalog Definition, catching mismatches at compile time rather than runtime.
 
 #### Statically Typed Languages (e.g. Kotlin/Swift)
+
 In languages like Kotlin, you can define a strict interface or class that demands concrete instances of the specific component APIs defined by the Core Library.
 
 ```kotlin
@@ -610,29 +674,32 @@ val catalog = Catalog("id", listOf(implementations.button, implementations.text,
 ```
 
 #### Dynamic Languages (e.g. TypeScript)
+
 In TypeScript, we can use intersection types to force the framework renderer to intersect with the exact definition.
 
 ```typescript
 // Concept: Forcing implementations to match the spec
 type BasicCatalogImplementations = {
-  Button: ComponentImplementation & { name: "Button", schema: Schema },
-  Text: ComponentImplementation & { name: "Text", schema: Schema },
-  Row: ComponentImplementation & { name: "Row", schema: Schema },
+  Button: ComponentImplementation & {name: 'Button'; schema: Schema};
+  Text: ComponentImplementation & {name: 'Text'; schema: Schema};
+  Row: ComponentImplementation & {name: 'Row'; schema: Schema};
   // ...
 };
 
 // If a developer forgets 'Row' or spells it wrong, the compiler throws an error.
-const catalog = new Catalog("id", [
+const catalog = new Catalog('id', [
   implementations.Button,
   implementations.Text,
-  implementations.Row
+  implementations.Row,
 ]);
 ```
 
 ### Expression Resolution Logic (`formatString`)
+
 The Basic Catalog requires a `formatString` function capable of interpreting `${expression}` syntax within string properties.
 
 **Implementation Requirements**:
+
 1.  **Recursion**: The implementation MUST use `DataContext.resolveDynamicValue()` or `DataContext.subscribeDynamicValue()` to recursively evaluate nested expressions or function calls (e.g., `${formatDate(value:${/date})}`).
 2.  **Tokenization**: Distinguish between DataPaths (e.g., `${/user/name}`) and FunctionCalls (e.g., `${now()}`).
 3.  **Escaping**: Literal `${` sequences must be handled (typically escaping as `\${`).
@@ -643,80 +710,96 @@ The Basic Catalog requires a `formatString` function capable of interpreting `${
 The Gallery App is a comprehensive development and debugging tool that serves as the reference environment for an A2UI renderer. It allows developers to visualize components, inspect the live data model, step through progressive rendering, and verify interaction logic.
 
 ### UX Architecture
+
 The Gallery App must implement a three-column layout:
+
 1.  **Left Column (Sample Navigation)**: A list of available A2UI samples.
 2.  **Center Column (Rendering & Messages)**:
-    *   **Surface Preview**: Renders the active A2UI `Surface`.
-    *   **JSON Message Stream**: Displays the list of A2UI JSON messages.
-    *   **Interactive Stepper**: An "Advance" button allows processing messages one by one to verify progressive rendering.
+    - **Surface Preview**: Renders the active A2UI `Surface`.
+    - **JSON Message Stream**: Displays the list of A2UI JSON messages.
+    - **Interactive Stepper**: An "Advance" button allows processing messages one by one to verify progressive rendering.
 3.  **Right Column (Live Inspection)**:
-    *   **Data Model Pane**: A live-updating view of the full Data Model.
-    *   **Action Logs Pane**: A log of triggered actions and their context.
+    - **Data Model Pane**: A live-updating view of the full Data Model.
+    - **Action Logs Pane**: A log of triggered actions and their context.
 
 ### Integration Testing Requirements
+
 Every renderer implementation must include a suite of automated integration tests that utilize the Gallery App's logic to verify:
-*   **Static Rendering**: Opening "Simple Text" renders correctly.
-*   **Layout Integrity**: "Row Layout" places elements correctly.
-*   **Two-Way Binding**: Typing in a TextField updates both the UI and the Data Model viewer simultaneously.
-*   **Reactive Logic**: Changes in one component dynamically update dependent components.
-*   **Action Context Scoping**: Actions emitted from nested templates (like Lists) contain correctly resolved data scopes.
+
+- **Static Rendering**: Opening "Simple Text" renders correctly.
+- **Layout Integrity**: "Row Layout" places elements correctly.
+- **Two-Way Binding**: Typing in a TextField updates both the UI and the Data Model viewer simultaneously.
+- **Reactive Logic**: Changes in one component dynamically update dependent components.
+- **Action Context Scoping**: Actions emitted from nested templates (like Lists) contain correctly resolved data scopes.
 
 ## 9. Agent Implementation Guide
 
-If you are an AI Agent tasked with building a new renderer for A2UI, you MUST follow this strict, phased sequence of operations. 
+If you are an AI Agent tasked with building a new renderer for A2UI, you MUST follow this strict, phased sequence of operations.
 
 ### 1. Context to Ingest
 
 Thoroughly review:
-*   `specification/v0_9/docs/a2ui_protocol.md` (protocol rules)
-*   `specification/v0_9/json/common_types.json` (dynamic binding types)
-*   `specification/v0_9/json/server_to_client.json` (message envelopes)
-*   `specification/v0_9/json/catalogs/minimal/minimal_catalog.json` (your initial target)
-*   `specification/v0_9/docs/basic_catalog_implementation_guide.md` (for rendering and spacing rules for when you get to the basic catalog)
 
+- `specification/v0_9/docs/a2ui_protocol.md` (protocol rules)
+- `specification/v0_9/json/common_types.json` (dynamic binding types)
+- `specification/v0_9/json/server_to_client.json` (message envelopes)
+- `specification/v0_9/json/catalogs/minimal/minimal_catalog.json` (your initial target)
+- `specification/v0_9/docs/basic_catalog_implementation_guide.md` (for rendering and spacing rules for when you get to the basic catalog)
 
 ### 2. Key Architecture Decisions (Write a Plan Document)
+
 Create a comprehensive design document detailing:
-*   **Dependencies**: Which Schema Library and Observable/Reactive Library will you use? *Note: Ensure your reactive library supports both discrete event subscription (EventEmitter style) and stateful, signal-like data streams (BehaviorSubject/Signal style).*
-*   **Component Architecture**: How will you define the `ComponentImplementation` API for this language and framework?
-*   **Surface Architecture**: How will the `Surface` framework entry point function to recursively build children?
-*   **Binding Strategy**: Will you use an intermediate Generic Binder Layer, or a direct binderless implementation?
-*   **STOP HERE. Ask the user for approval on this design document before proceeding.**
+
+- **Dependencies**: Which Schema Library and Observable/Reactive Library will you use? _Note: Ensure your reactive library supports both discrete event subscription (EventEmitter style) and stateful, signal-like data streams (BehaviorSubject/Signal style)._
+- **Component Architecture**: How will you define the `ComponentImplementation` API for this language and framework?
+- **Surface Architecture**: How will the `Surface` framework entry point function to recursively build children?
+- **Binding Strategy**: Will you use an intermediate Generic Binder Layer, or a direct binderless implementation?
+- **STOP HERE. Ask the user for approval on this design document before proceeding.**
 
 ### 3. Core Model Layer
+
 Implement the framework-agnostic Data Layer (Section 3).
-*   Implement event streams and stateful signals.
-*   Implement strict Protocol Models (`A2uiMessage`, `A2uiClientCapabilities`, etc.) with JSON serialization/deserialization and schema validation logic.
-*   Implement `DataModel`, ensuring correct JSON pointer resolution and the cascade/bubble notification strategy.
-*   Implement `ComponentModel`, `SurfaceComponentsModel`, `SurfaceModel`, and `SurfaceGroupModel`.
-*   Implement `DataContext` and `ComponentContext`.
-*   Implement `MessageProcessor` and ClientCapabilities generation.
-*   **Action**: Write unit tests for JSON validation, the `DataModel` (especially pointer resolution/cascade logic), and `MessageProcessor`. Ensure they pass before continuing.
+
+- Implement event streams and stateful signals.
+- Implement strict Protocol Models (`A2uiMessage`, `A2uiClientCapabilities`, etc.) with JSON serialization/deserialization and schema validation logic.
+- Implement `DataModel`, ensuring correct JSON pointer resolution and the cascade/bubble notification strategy.
+- Implement `ComponentModel`, `SurfaceComponentsModel`, `SurfaceModel`, and `SurfaceGroupModel`.
+- Implement `DataContext` and `ComponentContext`.
+- Implement `MessageProcessor` and ClientCapabilities generation.
+- **Action**: Write unit tests for JSON validation, the `DataModel` (especially pointer resolution/cascade logic), and `MessageProcessor`. Ensure they pass before continuing.
 
 ### 4. Framework-Specific Layer
+
 Implement the bridge between models and native UI (Section 5 & 6).
-*   Define the concrete `ComponentImplementation` base class/interface.
-*   Implement the `Surface` view/widget that recurses through components.
-*   Implement subscription lifecycle management (lazy mounting, unmounting disposal).
+
+- Define the concrete `ComponentImplementation` base class/interface.
+- Implement the `Surface` view/widget that recurses through components.
+- Implement subscription lifecycle management (lazy mounting, unmounting disposal).
 
 ### 5. Minimal Catalog Support
+
 Target the `minimal_catalog.json` first.
-*   Implement the pure API schemas for `Text`, `Row`, `Column`, `Button`, `TextField`.
-*   Implement the specific native UI rendering components for these.
-*   Implement the `capitalize` function.
-*   Bundle these into a `Catalog`.
-*   **Action**: Write unit tests verifying that properties update reactively when data changes.
+
+- Implement the pure API schemas for `Text`, `Row`, `Column`, `Button`, `TextField`.
+- Implement the specific native UI rendering components for these.
+- Implement the `capitalize` function.
+- Bundle these into a `Catalog`.
+- **Action**: Write unit tests verifying that properties update reactively when data changes.
 
 ### 6. Gallery Application (Milestone)
+
 Build the Gallery App following the requirements in **Section 8**.
-*   Load JSON samples from `specification/v0_9/json/catalogs/minimal/examples/`.
-*   Verify progressive rendering and reactivity.
-*   **STOP HERE. Ask the user for approval of the architecture and gallery application before proceeding to step 7.**
+
+- Load JSON samples from `specification/v0_9/json/catalogs/minimal/examples/`.
+- Verify progressive rendering and reactivity.
+- **STOP HERE. Ask the user for approval of the architecture and gallery application before proceeding to step 7.**
 
 ### 7. Basic Catalog Support
+
 Once the minimal architecture is proven robust, refer to the [Basic Catalog Implementation Guide](basic_catalog_implementation_guide.md) and:
-*   **Core Library**: Implement the full suite of basic functions. It is crucial to note that string interpolation and expression parsing should ONLY happen within the `formatString` function. Do not attempt to add global string interpolation to all strings.
-*   **Core Library**: Create definitions/binders for the remaining Basic Catalog components.
-*   **Framework Library**: Implement all remaining UI widgets.
-*   **Tests**: Look at existing reference implementations (e.g., `web_core`) to formulate and run comprehensive unit and integration test cases for data coercion and function logic. 
-*   Update the Gallery App to load samples from `specification/v0_9/json/catalogs/basic/examples/`.
+
+- **Core Library**: Implement the full suite of basic functions. It is crucial to note that string interpolation and expression parsing should ONLY happen within the `formatString` function. Do not attempt to add global string interpolation to all strings.
+- **Core Library**: Create definitions/binders for the remaining Basic Catalog components.
+- **Framework Library**: Implement all remaining UI widgets.
+- **Tests**: Look at existing reference implementations (e.g., `web_core`) to formulate and run comprehensive unit and integration test cases for data coercion and function logic.
+- Update the Gallery App to load samples from `specification/v0_9/json/catalogs/basic/examples/`.
diff --git a/specification/v0_9/eval/README.md b/specification/v0_9/eval/README.md
index c85af9b40..527a374dc 100644
--- a/specification/v0_9/eval/README.md
+++ b/specification/v0_9/eval/README.md
@@ -70,11 +70,13 @@ By default, the script prints a progress bar and the final summary table to the
 ### Examples
 
 Run with debug output in console:
+
 ```bash
 pnpm run eval -- --log-level=debug
 ```
 
 Run 5 times per prompt and clean previous results:
+
 ```bash
 pnpm run eval -- --runs-per-prompt=5 --clean-results
 ```
@@ -82,5 +84,6 @@ pnpm run eval -- --runs-per-prompt=5 --clean-results
 ## Rate Limiting
 
 The framework includes a two-tiered rate limiting system:
+
 1. **Proactive Limiting**: Locally tracks token and request usage to stay within configured limits (defined in `src/models.ts`).
 2. **Reactive Circuit Breaker**: Automatically pauses requests to a model if a `RESOURCE_EXHAUSTED` (429) error is received, resuming only after the requested retry duration.
diff --git a/specification/v0_9/eval/genkit.conf.js b/specification/v0_9/eval/genkit.conf.js
index eb9235559..c269a586f 100644
--- a/specification/v0_9/eval/genkit.conf.js
+++ b/specification/v0_9/eval/genkit.conf.js
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { configure } from "genkit";
+import {googleAI} from '@genkit-ai/google-genai';
+import {configure} from 'genkit';
 
 export default configure({
   plugins: [googleAI()],
-  logLevel: "debug",
+  logLevel: 'debug',
   enableTracingAndMetrics: true,
 });
diff --git a/specification/v0_9/eval/pnpm-workspace.yaml b/specification/v0_9/eval/pnpm-workspace.yaml
index 719ee0b40..02052098a 100644
--- a/specification/v0_9/eval/pnpm-workspace.yaml
+++ b/specification/v0_9/eval/pnpm-workspace.yaml
@@ -13,6 +13,6 @@
 # limitations under the License.
 
 onlyBuiltDependencies:
-  - '@firebase/util'
+  - "@firebase/util"
   - esbuild
   - protobufjs
diff --git a/specification/v0_9/eval/src/ai.ts b/specification/v0_9/eval/src/ai.ts
index b343ad037..5e413dca9 100644
--- a/specification/v0_9/eval/src/ai.ts
+++ b/specification/v0_9/eval/src/ai.ts
@@ -1,4 +1,3 @@
-
 /*
  * Copyright 2025 Google LLC
  *
@@ -15,16 +14,16 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { genkit } from "genkit";
-import { openAI } from "@genkit-ai/compat-oai/openai";
-import { anthropic } from "genkitx-anthropic";
-import { logger } from "./logger";
+import {googleAI} from '@genkit-ai/google-genai';
+import {genkit} from 'genkit';
+import {openAI} from '@genkit-ai/compat-oai/openai';
+import {anthropic} from 'genkitx-anthropic';
+import {logger} from './logger';
 
 const plugins = [];
 
 if (process.env.GEMINI_API_KEY) {
-  logger.info("Initializing Google AI plugin...");
+  logger.info('Initializing Google AI plugin...');
   plugins.push(
     googleAI({
       apiKey: process.env.GEMINI_API_KEY!,
@@ -33,12 +32,12 @@ if (process.env.GEMINI_API_KEY) {
   );
 }
 if (process.env.OPENAI_API_KEY) {
-  logger.info("Initializing OpenAI plugin...");
+  logger.info('Initializing OpenAI plugin...');
   plugins.push(openAI());
 }
 if (process.env.ANTHROPIC_API_KEY) {
-  logger.info("Initializing Anthropic plugin...");
-  plugins.push(anthropic({ apiKey: process.env.ANTHROPIC_API_KEY! }));
+  logger.info('Initializing Anthropic plugin...');
+  plugins.push(anthropic({apiKey: process.env.ANTHROPIC_API_KEY!}));
 }
 
 export const ai = genkit({
diff --git a/specification/v0_9/eval/src/analysis_flow.ts b/specification/v0_9/eval/src/analysis_flow.ts
index 53de0e8d4..214b6dadb 100644
--- a/specification/v0_9/eval/src/analysis_flow.ts
+++ b/specification/v0_9/eval/src/analysis_flow.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { z } from "genkit";
-import { ai } from "./ai";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
+import {z} from 'genkit';
+import {ai} from './ai';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
 
 export const analysisFlow = ai.defineFlow(
   {
-    name: "analysisFlow",
+    name: 'analysisFlow',
     inputSchema: z.object({
       modelName: z.string(),
       failures: z.array(
@@ -38,21 +38,21 @@ export const analysisFlow = ai.defineFlow(
     }),
     outputSchema: z.string(),
   },
-  async ({ modelName, failures, numRuns, evalModel }) => {
+  async ({modelName, failures, numRuns, evalModel}) => {
     const failureDetails = failures
-      .map((f) => {
+      .map(f => {
         let details = `Prompt: ${f.promptName} (Run ${f.runNumber})\nType: ${f.failureType}\nReason: ${f.reason}`;
         if (f.issues && f.issues.length > 0) {
-          details += `\nIssues:\n- ${f.issues.join("\n- ")}`;
+          details += `\nIssues:\n- ${f.issues.join('\n- ')}`;
         }
         return details;
       })
-      .join("\n\n---\n\n");
+      .join('\n\n---\n\n');
 
     const analysisPrompt = `You are an expert AI analyst.
 Your task is to analyze the following failures from an evaluation run of the model "${modelName}".
 
-Out of the ${failures.length} failures, ${failures.filter((f) => f.failureType === "Schema Validation").length} are schema validation failures, ${failures.filter((f) => f.failureType === "Missing Components").length} are missing components failures, and ${failures.filter((f) => f.failureType === "Incorrect Logic").length} are incorrect logic failures.
+Out of the ${failures.length} failures, ${failures.filter(f => f.failureType === 'Schema Validation').length} are schema validation failures, ${failures.filter(f => f.failureType === 'Missing Components').length} are missing components failures, and ${failures.filter(f => f.failureType === 'Incorrect Logic').length} are incorrect logic failures.
 
 There were ${numRuns - failures.length} successful runs. Take this into account in the final summary of the analysis.
 
@@ -73,8 +73,8 @@ Return a Markdown formatted summary. Use headers and bullet points.
     // Calculate estimated tokens for rate limiting
     const estimatedInputTokens = Math.ceil(analysisPrompt.length / 2.5);
 
-    const { modelsToTest } = await import("./models");
-    let evalModelConfig = modelsToTest.find((m) => m.name === evalModel);
+    const {modelsToTest} = await import('./models');
+    let evalModelConfig = modelsToTest.find(m => m.name === evalModel);
 
     if (!evalModelConfig) {
       evalModelConfig = {
@@ -93,17 +93,17 @@ Return a Markdown formatted summary. Use headers and bullet points.
         model: evalModelConfig.model || evalModel,
         config: evalModelConfig.config,
         output: {
-          format: "text",
+          format: 'text',
         },
       });
 
       const output = response.output;
       if (!output) {
-        throw new Error("No output from analysis model");
+        throw new Error('No output from analysis model');
       }
 
-      if (typeof output !== "string") {
-        return "Analysis failed: Output was not a string.";
+      if (typeof output !== 'string') {
+        return 'Analysis failed: Output was not a string.';
       }
 
       return output;
diff --git a/specification/v0_9/eval/src/dev.ts b/specification/v0_9/eval/src/dev.ts
index f13d6d696..dd819602a 100644
--- a/specification/v0_9/eval/src/dev.ts
+++ b/specification/v0_9/eval/src/dev.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-import "./generation_flow";
-import "./evaluation_flow";
+import './generation_flow';
+import './evaluation_flow';
diff --git a/specification/v0_9/eval/src/evaluation_flow.ts b/specification/v0_9/eval/src/evaluation_flow.ts
index c67294d0b..da72c53d7 100644
--- a/specification/v0_9/eval/src/evaluation_flow.ts
+++ b/specification/v0_9/eval/src/evaluation_flow.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { z } from "genkit";
-import { ai } from "./ai";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
-import * as yaml from "js-yaml";
+import {z} from 'genkit';
+import {ai} from './ai';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
+import * as yaml from 'js-yaml';
 
 // Define an evaluation flow
 export const evaluationFlow = ai.defineFlow(
   {
-    name: "evaluationFlow",
+    name: 'evaluationFlow',
     inputSchema: z.object({
       originalPrompt: z.string(),
       generatedOutput: z.string(),
@@ -37,33 +37,31 @@ export const evaluationFlow = ai.defineFlow(
         .array(
           z.object({
             issue: z.string(),
-            severity: z.enum(["minor", "significant", "critical"]),
+            severity: z.enum(['minor', 'significant', 'critical']),
           }),
         )
         .optional(),
       evalPrompt: z.string().optional(),
     }),
   },
-  async ({ originalPrompt, generatedOutput, evalModel, schemas }) => {
+  async ({originalPrompt, generatedOutput, evalModel, schemas}) => {
     const schemaDefs = Object.values(schemas)
       .map((s: any) => JSON.stringify(s, null, 2))
-      .join("\n\n");
+      .join('\n\n');
 
     const EvalResultSchema = z.object({
-      pass: z
-        .boolean()
-        .describe("Whether the generated UI meets the requirements"),
-      reason: z.string().describe("Summary of the reason for a failure."),
+      pass: z.boolean().describe('Whether the generated UI meets the requirements'),
+      reason: z.string().describe('Summary of the reason for a failure.'),
       issues: z
         .array(
           z.object({
-            issue: z.string().describe("Description of the issue"),
+            issue: z.string().describe('Description of the issue'),
             severity: z
-              .enum(["minor", "significant", "critical"])
-              .describe("Severity of the issue"),
+              .enum(['minor', 'significant', 'critical'])
+              .describe('Severity of the issue'),
           }),
         )
-        .describe("List of specific issues found."),
+        .describe('List of specific issues found.'),
     });
 
     const evalPrompt = `You are an expert QA evaluator for a UI generation system.
@@ -143,8 +141,8 @@ Return a JSON object with the following schema:
     const estimatedInputTokens = Math.ceil(evalPrompt.length / 2.5);
 
     // Lookup eval model config to enforce rate limits, or generate a safe default fallback.
-    const { modelsToTest } = await import("./models");
-    let evalModelConfig = modelsToTest.find((m) => m.name === evalModel);
+    const {modelsToTest} = await import('./models');
+    let evalModelConfig = modelsToTest.find(m => m.name === evalModel);
 
     if (!evalModelConfig) {
       evalModelConfig = {
@@ -170,12 +168,12 @@ Return a JSON object with the following schema:
       // Parse the output
       const result = response.output;
       if (!result) {
-        throw new Error("No output from evaluation model");
+        throw new Error('No output from evaluation model');
       }
 
       return {
         pass: result.pass,
-        reason: result.reason || "No reason provided",
+        reason: result.reason || 'No reason provided',
         issues: result.issues || [],
         evalPrompt: evalPrompt,
       };
diff --git a/specification/v0_9/eval/src/evaluator.ts b/specification/v0_9/eval/src/evaluator.ts
index 3f052e9c5..63ac5d470 100644
--- a/specification/v0_9/eval/src/evaluator.ts
+++ b/specification/v0_9/eval/src/evaluator.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { evaluationFlow } from "./evaluation_flow";
-import { ValidatedResult, EvaluatedResult } from "./types";
-import { logger } from "./logger";
-import { rateLimiter } from "./rateLimiter";
-import * as fs from "fs";
-import * as path from "path";
-import * as yaml from "js-yaml";
-import { IssueSeverity } from "./types";
+import {evaluationFlow} from './evaluation_flow';
+import {ValidatedResult, EvaluatedResult} from './types';
+import {logger} from './logger';
+import {rateLimiter} from './rateLimiter';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as yaml from 'js-yaml';
+import {IssueSeverity} from './types';
 
 export class Evaluator {
   constructor(
@@ -31,9 +31,7 @@ export class Evaluator {
   ) {}
 
   async run(results: ValidatedResult[]): Promise<EvaluatedResult[]> {
-    const passedResults = results.filter(
-      (r) => r.validationErrors.length === 0 && r.components,
-    );
+    const passedResults = results.filter(r => r.validationErrors.length === 0 && r.components);
     const skippedCount = results.length - passedResults.length;
 
     logger.info(
@@ -52,40 +50,37 @@ export class Evaluator {
           ...result,
           evaluationResult: {
             pass: false,
-            reason: "Schema validation failure",
+            reason: 'Schema validation failure',
             issues: [
               {
-                issue: result.validationErrors.join("\n"),
-                severity: "criticalSchema",
+                issue: result.validationErrors.join('\n'),
+                severity: 'criticalSchema',
               },
             ],
-            overallSeverity: "criticalSchema",
+            overallSeverity: 'criticalSchema',
           },
         });
       } else if (!result.components) {
-        evaluatedResults.push({ ...result });
+        evaluatedResults.push({...result});
       }
     }
 
     if (totalJobs === 0) {
-      logger.info("Phase 3: Evaluation Complete (No items to evaluate)");
+      logger.info('Phase 3: Evaluation Complete (No items to evaluate)');
       return evaluatedResults;
     }
 
     const progressInterval = setInterval(() => {
       const queuedCount = rateLimiter.waitingCount;
-      const inProgressCount =
-        totalJobs - completedCount - failedCount - queuedCount;
-      const pct = Math.round(
-        ((completedCount + failedCount) / totalJobs) * 100,
-      );
+      const inProgressCount = totalJobs - completedCount - failedCount - queuedCount;
+      const pct = Math.round(((completedCount + failedCount) / totalJobs) * 100);
       process.stderr.write(
         `\r[Phase 3] Progress: ${pct}% | Completed: ${completedCount} | In Progress: ${inProgressCount} | Queued: ${queuedCount} | Failed: ${failedCount}          `,
       );
     }, 1000);
 
-    const promises = passedResults.map((result) =>
-      this.runJob(result).then((evalResult) => {
+    const promises = passedResults.map(result =>
+      this.runJob(result).then(evalResult => {
         if (evalResult.evaluationResult) {
           completedCount++;
         } else {
@@ -98,8 +93,8 @@ export class Evaluator {
 
     await Promise.all(promises);
     clearInterval(progressInterval);
-    process.stderr.write("\n");
-    logger.info("Phase 3: Evaluation Complete");
+    process.stderr.write('\n');
+    logger.info('Phase 3: Evaluation Complete');
 
     return evaluatedResults;
   }
@@ -110,7 +105,7 @@ export class Evaluator {
       | {
           pass: boolean;
           reason: string;
-          issues?: { issue: string; severity: IssueSeverity }[];
+          issues?: {issue: string; severity: IssueSeverity}[];
         }
       | undefined;
 
@@ -118,7 +113,7 @@ export class Evaluator {
       try {
         evaluationResult = await evaluationFlow({
           originalPrompt: result.prompt.promptText,
-          generatedOutput: result.rawText || "",
+          generatedOutput: result.rawText || '',
           evalModel: this.evalModel,
           schemas: this.schemas,
         });
@@ -133,22 +128,20 @@ export class Evaluator {
             reason: `Evaluation flow failed: ${e.message}`,
           };
         } else {
-          await new Promise((resolve) =>
-            setTimeout(resolve, 1000 * Math.pow(2, evalRetry)),
-          );
+          await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, evalRetry)));
         }
       }
     }
 
     let overallSeverity: IssueSeverity | undefined;
     if (evaluationResult && !evaluationResult.pass && evaluationResult.issues) {
-      const severities = evaluationResult.issues.map((i) => i.severity);
-      if (severities.includes("critical")) {
-        overallSeverity = "critical";
-      } else if (severities.includes("significant")) {
-        overallSeverity = "significant";
-      } else if (severities.includes("minor")) {
-        overallSeverity = "minor";
+      const severities = evaluationResult.issues.map(i => i.severity);
+      if (severities.includes('critical')) {
+        overallSeverity = 'critical';
+      } else if (severities.includes('significant')) {
+        overallSeverity = 'significant';
+      } else if (severities.includes('minor')) {
+        overallSeverity = 'minor';
       }
     }
 
@@ -158,9 +151,7 @@ export class Evaluator {
 
     return {
       ...result,
-      evaluationResult: evaluationResult
-        ? { ...evaluationResult, overallSeverity }
-        : undefined,
+      evaluationResult: evaluationResult ? {...evaluationResult, overallSeverity} : undefined,
     };
   }
 
@@ -169,7 +160,7 @@ export class Evaluator {
     evaluationResult: {
       pass: boolean;
       reason: string;
-      issues?: { issue: string; severity: IssueSeverity }[];
+      issues?: {issue: string; severity: IssueSeverity}[];
       evalPrompt?: string;
     },
     overallSeverity?: IssueSeverity,
@@ -179,25 +170,16 @@ export class Evaluator {
     // Only save if the evaluation failed
     if (evaluationResult.pass) return;
 
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${result.modelName.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
+    const modelDir = path.join(this.outputDir, `output-${result.modelName.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
     fs.writeFileSync(
-      path.join(
-        detailsDir,
-        `${result.prompt.name}.${result.runNumber}.failed.yaml`,
-      ),
-      yaml.dump({ ...evaluationResult, overallSeverity }),
+      path.join(detailsDir, `${result.prompt.name}.${result.runNumber}.failed.yaml`),
+      yaml.dump({...evaluationResult, overallSeverity}),
     );
 
     if (evaluationResult.evalPrompt) {
       fs.writeFileSync(
-        path.join(
-          detailsDir,
-          `${result.prompt.name}.${result.runNumber}.eval_prompt.txt`,
-        ),
+        path.join(detailsDir, `${result.prompt.name}.${result.runNumber}.eval_prompt.txt`),
         evaluationResult.evalPrompt,
       );
     }
diff --git a/specification/v0_9/eval/src/generation_flow.ts b/specification/v0_9/eval/src/generation_flow.ts
index e1bd2381e..739873a0d 100644
--- a/specification/v0_9/eval/src/generation_flow.ts
+++ b/specification/v0_9/eval/src/generation_flow.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import { z } from "genkit";
-import { ai } from "./ai";
-import { ModelConfiguration } from "./models";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
+import {z} from 'genkit';
+import {ai} from './ai';
+import {ModelConfiguration} from './models';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
 
 // Define a UI component generator flow
 export const componentGeneratorFlow = ai.defineFlow(
   {
-    name: "componentGeneratorFlow",
+    name: 'componentGeneratorFlow',
     inputSchema: z.object({
       prompt: z.string(),
       modelConfig: z.any(), // Ideally, we'd have a Zod schema for ModelConfiguration
@@ -32,10 +32,10 @@ export const componentGeneratorFlow = ai.defineFlow(
     }),
     outputSchema: z.any(),
   },
-  async ({ prompt, modelConfig, schemas, catalogRules }) => {
+  async ({prompt, modelConfig, schemas, catalogRules}) => {
     const schemaDefs = Object.values(schemas)
       .map((s: any) => JSON.stringify(s, null, 2))
-      .join("\n\n");
+      .join('\n\n');
 
     const fullPrompt = `You are an AI assistant. Based on the following request, generate a stream of JSON messages that conform to the provided JSON Schemas.
 The output MUST be a series of JSON objects, each enclosed in a markdown code block (or a single block with multiple objects).
@@ -57,7 +57,7 @@ Standard Instructions:
 14. Do NOT invent properties that are not in the schema. Check the 'properties' list for each component type.
 15. Use 'checks' property for validation rules if required.
 16. EVERY message object MUST include the property "version": "v0.9" at the top level.
-${catalogRules ? `\nInstructions specific to this catalog:\n${catalogRules}` : ""}
+${catalogRules ? `\nInstructions specific to this catalog:\n${catalogRules}` : ''}
 
 Schemas:
 ${schemaDefs}
@@ -66,10 +66,7 @@ Request:
 ${prompt}
 `;
     const estimatedInputTokens = Math.ceil(fullPrompt.length / 2.5);
-    await rateLimiter.acquirePermit(
-      modelConfig as ModelConfiguration,
-      estimatedInputTokens,
-    );
+    await rateLimiter.acquirePermit(modelConfig as ModelConfiguration, estimatedInputTokens);
 
     // Generate text response
     let response;
@@ -87,7 +84,7 @@ ${prompt}
     }
     const latency = Date.now() - startTime;
 
-    if (!response) throw new Error("Failed to generate component");
+    if (!response) throw new Error('Failed to generate component');
 
     let candidate = (response as any).candidates?.[0];
 
@@ -97,7 +94,7 @@ ${prompt}
       candidate = {
         index: 0,
         content: message.content,
-        finishReason: "STOP", // Assume STOP if not provided in this format
+        finishReason: 'STOP', // Assume STOP if not provided in this format
         message: message,
       };
     }
@@ -106,13 +103,10 @@ ${prompt}
       logger.error(
         `No candidates returned in response. Full response: ${JSON.stringify(response, null, 2)}`,
       );
-      throw new Error("No candidates returned");
+      throw new Error('No candidates returned');
     }
 
-    if (
-      candidate.finishReason !== "STOP" &&
-      candidate.finishReason !== undefined
-    ) {
+    if (candidate.finishReason !== 'STOP' && candidate.finishReason !== undefined) {
       logger.warn(
         `Model finished with reason: ${candidate.finishReason}. Content: ${JSON.stringify(
           candidate.content,
@@ -124,20 +118,13 @@ ${prompt}
     const inputTokens = response.usage?.inputTokens || 0;
     const outputTokens = response.usage?.outputTokens || 0;
 
-    const additionalInputTokens = Math.max(
-      0,
-      inputTokens - estimatedInputTokens,
-    );
+    const additionalInputTokens = Math.max(0, inputTokens - estimatedInputTokens);
     const tokensToAdd = additionalInputTokens + outputTokens;
 
     if (tokensToAdd > 0) {
-      rateLimiter.recordUsage(
-        modelConfig as ModelConfiguration,
-        tokensToAdd,
-        false,
-      );
+      rateLimiter.recordUsage(modelConfig as ModelConfiguration, tokensToAdd, false);
     }
 
-    return { text: response.text, latency };
+    return {text: response.text, latency};
   },
 );
diff --git a/specification/v0_9/eval/src/generator.ts b/specification/v0_9/eval/src/generator.ts
index af5e0a341..6d59a316b 100644
--- a/specification/v0_9/eval/src/generator.ts
+++ b/specification/v0_9/eval/src/generator.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { componentGeneratorFlow } from "./generation_flow";
-import { ModelConfiguration } from "./models";
-import { TestPrompt } from "./prompts";
-import { GeneratedResult } from "./types";
-import { extractJsonFromMarkdown } from "./utils";
-import { rateLimiter } from "./rateLimiter";
-import { logger } from "./logger";
-import * as fs from "fs";
-import * as path from "path";
+import {componentGeneratorFlow} from './generation_flow';
+import {ModelConfiguration} from './models';
+import {TestPrompt} from './prompts';
+import {GeneratedResult} from './types';
+import {extractJsonFromMarkdown} from './utils';
+import {rateLimiter} from './rateLimiter';
+import {logger} from './logger';
+import * as fs from 'fs';
+import * as path from 'path';
 
 export class Generator {
   constructor(
@@ -46,12 +46,9 @@ export class Generator {
 
     const progressInterval = setInterval(() => {
       const queuedCount = rateLimiter.waitingCount;
-      const inProgressCount =
-        totalJobs - completedCount - failedCount - queuedCount;
+      const inProgressCount = totalJobs - completedCount - failedCount - queuedCount;
       const pct =
-        totalJobs > 0
-          ? Math.round(((completedCount + failedCount) / totalJobs) * 100)
-          : 0;
+        totalJobs > 0 ? Math.round(((completedCount + failedCount) / totalJobs) * 100) : 0;
       process.stderr.write(
         `\r[Phase 1] Progress: ${pct}% | Completed: ${completedCount} | In Progress: ${inProgressCount} | Queued: ${queuedCount} | Failed: ${failedCount}          `,
       );
@@ -61,7 +58,7 @@ export class Generator {
       for (const prompt of prompts) {
         for (let i = 1; i <= runsPerPrompt; i++) {
           promises.push(
-            this.runJob(model, prompt, i).then((result) => {
+            this.runJob(model, prompt, i).then(result => {
               if (result.error) {
                 failedCount++;
               } else {
@@ -77,8 +74,8 @@ export class Generator {
 
     await Promise.all(promises);
     clearInterval(progressInterval);
-    process.stderr.write("\n");
-    logger.info("Phase 1: Generation Complete");
+    process.stderr.write('\n');
+    logger.info('Phase 1: Generation Complete');
 
     return results;
   }
@@ -116,7 +113,7 @@ export class Generator {
           }
         }
       } else {
-        error = new Error("No output text returned from model");
+        error = new Error('No output text returned from model');
       }
 
       return {
@@ -151,35 +148,29 @@ export class Generator {
     components: any[],
   ) {
     if (!this.outputDir) return;
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${model.name.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
-    fs.mkdirSync(detailsDir, { recursive: true });
+    const modelDir = path.join(this.outputDir, `output-${model.name.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
+    fs.mkdirSync(detailsDir, {recursive: true});
 
     fs.writeFileSync(
       path.join(detailsDir, `${prompt.name}.${runIndex}.json`),
       JSON.stringify(components, null, 2),
     );
 
-    const samplePath = path.join(
-      detailsDir,
-      `${prompt.name}.${runIndex}.sample`,
-    );
+    const samplePath = path.join(detailsDir, `${prompt.name}.${runIndex}.sample`);
     const yamlHeader = `---
 description: ${prompt.description}
 name: ${prompt.name}
 prompt: |
 ${prompt.promptText
-  .split("\n")
-  .map((line) => "  " + line)
-  .join("\n")}
+  .split('\n')
+  .map(line => '  ' + line)
+  .join('\n')}
 ---
 `;
-    let jsonlBody = "";
+    let jsonlBody = '';
     for (const comp of components) {
-      jsonlBody += JSON.stringify(comp) + "\n";
+      jsonlBody += JSON.stringify(comp) + '\n';
     }
     fs.writeFileSync(samplePath, yamlHeader + jsonlBody);
   }
@@ -192,20 +183,17 @@ ${prompt.promptText
     error: any,
   ) {
     if (!this.outputDir) return;
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${model.name.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
-    fs.mkdirSync(detailsDir, { recursive: true });
+    const modelDir = path.join(this.outputDir, `output-${model.name.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
+    fs.mkdirSync(detailsDir, {recursive: true});
 
     fs.writeFileSync(
       path.join(detailsDir, `${prompt.name}.${runIndex}.output.txt`),
-      text || "No output",
+      text || 'No output',
     );
     fs.writeFileSync(
       path.join(detailsDir, `${prompt.name}.${runIndex}.error.json`),
-      JSON.stringify({ message: error.message, stack: error.stack }, null, 2),
+      JSON.stringify({message: error.message, stack: error.stack}, null, 2),
     );
   }
 }
diff --git a/specification/v0_9/eval/src/index.ts b/specification/v0_9/eval/src/index.ts
index 383f5c659..3c1374a5e 100644
--- a/specification/v0_9/eval/src/index.ts
+++ b/specification/v0_9/eval/src/index.ts
@@ -14,46 +14,41 @@
  * limitations under the License.
  */
 
-import * as fs from "fs";
-import * as path from "path";
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import { logger, setupLogger } from "./logger";
-import { modelsToTest } from "./models";
-import { prompts, TestPrompt } from "./prompts";
-import { Generator } from "./generator";
-import { Validator } from "./validator";
-import { Evaluator } from "./evaluator";
-import { EvaluatedResult } from "./types";
-import { analysisFlow } from "./analysis_flow";
+import * as fs from 'fs';
+import * as path from 'path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
+import {logger, setupLogger} from './logger';
+import {modelsToTest} from './models';
+import {prompts, TestPrompt} from './prompts';
+import {Generator} from './generator';
+import {Validator} from './validator';
+import {Evaluator} from './evaluator';
+import {EvaluatedResult} from './types';
+import {analysisFlow} from './analysis_flow';
 
 const schemaFiles = [
-  "../../json/common_types.json",
-  "../../json/basic_catalog.json",
-  "../../json/server_to_client.json",
+  '../../json/common_types.json',
+  '../../json/basic_catalog.json',
+  '../../json/server_to_client.json',
 ];
 
 function loadSchemas(): Record<string, any> {
   const schemas: Record<string, any> = {};
   for (const file of schemaFiles) {
-    const schemaString = fs.readFileSync(path.join(__dirname, file), "utf-8");
+    const schemaString = fs.readFileSync(path.join(__dirname, file), 'utf-8');
     const schema = JSON.parse(schemaString);
     schemas[path.basename(file)] = schema;
   }
 
   // Alias basic_catalog.json to catalog.json to match server_to_client.json references
   // This mirrors the logic in run_tests.py
-  if (schemas["basic_catalog.json"]) {
-    const catalogSchema = JSON.parse(
-      JSON.stringify(schemas["basic_catalog.json"]),
-    );
-    if (catalogSchema["$id"]) {
-      catalogSchema["$id"] = catalogSchema["$id"].replace(
-        "basic_catalog.json",
-        "catalog.json",
-      );
+  if (schemas['basic_catalog.json']) {
+    const catalogSchema = JSON.parse(JSON.stringify(schemas['basic_catalog.json']));
+    if (catalogSchema['$id']) {
+      catalogSchema['$id'] = catalogSchema['$id'].replace('basic_catalog.json', 'catalog.json');
     }
-    schemas["catalog.json"] = catalogSchema;
+    schemas['catalog.json'] = catalogSchema;
   }
 
   return schemas;
@@ -77,25 +72,23 @@ function generateSummary(
     resultsByModel[result.modelName].push(result);
   }
 
-  let summary = "# Evaluation Summary";
+  let summary = '# Evaluation Summary';
   for (const modelName in resultsByModel) {
     summary += `\n\n## Model: ${modelName}\n\n`;
-    const header = `| ${"Prompt Name".padEnd(
+    const header = `| ${'Prompt Name'.padEnd(
       promptNameWidth,
-    )} | ${"Avg Latency (ms)".padEnd(latencyWidth)} | ${"Schema Fail".padEnd(
+    )} | ${'Avg Latency (ms)'.padEnd(latencyWidth)} | ${'Schema Fail'.padEnd(
       failedRunsWidth,
-    )} | ${"Eval Fail".padEnd(failedRunsWidth)} | ${"Minor".padEnd(
-      severityWidth,
-    )} | ${"Significant".padEnd(severityWidth)} | ${"Critical".padEnd(
+    )} | ${'Eval Fail'.padEnd(failedRunsWidth)} | ${'Minor'.padEnd(
       severityWidth,
-    )} |`;
-    const divider = `|${"-".repeat(promptNameWidth + 2)}|${"-".repeat(
+    )} | ${'Significant'.padEnd(severityWidth)} | ${'Critical'.padEnd(severityWidth)} |`;
+    const divider = `|${'-'.repeat(promptNameWidth + 2)}|${'-'.repeat(
       latencyWidth + 2,
-    )}|${"-".repeat(failedRunsWidth + 2)}|${"-".repeat(
+    )}|${'-'.repeat(failedRunsWidth + 2)}|${'-'.repeat(
       failedRunsWidth + 2,
-    )}|${"-".repeat(severityWidth + 2)}|${"-".repeat(
+    )}|${'-'.repeat(severityWidth + 2)}|${'-'.repeat(
       severityWidth + 2,
-    )}|${"-".repeat(severityWidth + 2)}|`;
+    )}|${'-'.repeat(severityWidth + 2)}|`;
     summary += header;
     summary += `\n${divider}`;
 
@@ -115,20 +108,16 @@ function generateSummary(
     for (const promptName of sortedPromptNames) {
       const runs = promptsInModel[promptName];
       const totalRuns = runs.length;
-      const schemaFailedRuns = runs.filter(
-        (r) => r.error || r.validationErrors.length > 0,
-      ).length;
+      const schemaFailedRuns = runs.filter(r => r.error || r.validationErrors.length > 0).length;
       const evalFailedRuns = runs.filter(
-        (r) => r.evaluationResult && !r.evaluationResult.pass,
+        r => r.evaluationResult && !r.evaluationResult.pass,
       ).length;
 
       const totalLatency = runs.reduce((acc, r) => acc + r.latency, 0);
       const avgLatency = (totalLatency / totalRuns).toFixed(0);
 
-      const schemaFailedStr =
-        schemaFailedRuns > 0 ? `${schemaFailedRuns} / ${totalRuns}` : "";
-      const evalFailedStr =
-        evalFailedRuns > 0 ? `${evalFailedRuns} / ${totalRuns}` : "";
+      const schemaFailedStr = schemaFailedRuns > 0 ? `${schemaFailedRuns} / ${totalRuns}` : '';
+      const evalFailedStr = evalFailedRuns > 0 ? `${evalFailedRuns} / ${totalRuns}` : '';
 
       let minorCount = 0;
       let significantCount = 0;
@@ -137,16 +126,16 @@ function generateSummary(
       for (const r of runs) {
         if (r.evaluationResult?.issues) {
           for (const issue of r.evaluationResult.issues) {
-            if (issue.severity === "minor") minorCount++;
-            else if (issue.severity === "significant") significantCount++;
-            else if (issue.severity === "critical") criticalCount++;
+            if (issue.severity === 'minor') minorCount++;
+            else if (issue.severity === 'significant') significantCount++;
+            else if (issue.severity === 'critical') criticalCount++;
           }
         }
       }
 
-      const minorStr = minorCount > 0 ? `${minorCount}` : "";
-      const significantStr = significantCount > 0 ? `${significantCount}` : "";
-      const criticalStr = criticalCount > 0 ? `${criticalCount}` : "";
+      const minorStr = minorCount > 0 ? `${minorCount}` : '';
+      const significantStr = significantCount > 0 ? `${significantCount}` : '';
+      const criticalStr = criticalCount > 0 ? `${criticalCount}` : '';
 
       summary += `\n| ${promptName.padEnd(
         promptNameWidth,
@@ -154,32 +143,28 @@ function generateSummary(
         failedRunsWidth,
       )} | ${evalFailedStr.padEnd(failedRunsWidth)} | ${minorStr.padEnd(
         severityWidth,
-      )} | ${significantStr.padEnd(severityWidth)} | ${criticalStr.padEnd(
-        severityWidth,
-      )} |`;
+      )} | ${significantStr.padEnd(severityWidth)} | ${criticalStr.padEnd(severityWidth)} |`;
     }
 
     const totalRunsForModel = modelResults.length;
     const successfulRuns = modelResults.filter(
-      (r) =>
+      r =>
         !r.error &&
         r.validationErrors.length === 0 &&
         (!r.evaluationResult || r.evaluationResult.pass),
     ).length;
 
     const schemaSuccessfulRuns = modelResults.filter(
-      (r) => !r.error && r.validationErrors.length === 0,
+      r => !r.error && r.validationErrors.length === 0,
     ).length;
 
     const schemaSuccessPercentage =
       totalRunsForModel === 0
-        ? "0.0"
+        ? '0.0'
         : ((schemaSuccessfulRuns / totalRunsForModel) * 100.0).toFixed(1);
 
     const successPercentage =
-      totalRunsForModel === 0
-        ? "0.0"
-        : ((successfulRuns / totalRunsForModel) * 100.0).toFixed(1);
+      totalRunsForModel === 0 ? '0.0' : ((successfulRuns / totalRunsForModel) * 100.0).toFixed(1);
 
     summary += `\n\n**Schema successful runs:** ${schemaSuccessfulRuns} / ${totalRunsForModel} (${schemaSuccessPercentage}% schema success)`;
     summary += `\n**Total successful eval runs:** ${successfulRuns} / ${totalRunsForModel} (${successPercentage}% overall success)`;
@@ -189,28 +174,26 @@ function generateSummary(
     }
   }
 
-  summary += "\n\n---\n\n## Overall Summary\n";
+  summary += '\n\n---\n\n## Overall Summary\n';
   const totalRuns = results.length;
-  const totalToolErrorRuns = results.filter((r) => r.error).length;
+  const totalToolErrorRuns = results.filter(r => r.error).length;
   const totalRunsWithAnyFailure = results.filter(
-    (r) =>
-      r.error ||
-      r.validationErrors.length > 0 ||
-      (r.evaluationResult && !r.evaluationResult.pass),
+    r =>
+      r.error || r.validationErrors.length > 0 || (r.evaluationResult && !r.evaluationResult.pass),
   ).length;
 
   const modelsWithFailures = [
     ...new Set(
       results
         .filter(
-          (r) =>
+          r =>
             r.error ||
             r.validationErrors.length > 0 ||
             (r.evaluationResult && !r.evaluationResult.pass),
         )
-        .map((r) => r.modelName),
+        .map(r => r.modelName),
     ),
-  ].join(", ");
+  ].join(', ');
 
   let totalMinor = 0;
   let totalSignificant = 0;
@@ -220,10 +203,10 @@ function generateSummary(
   for (const r of results) {
     if (r.evaluationResult?.issues) {
       for (const issue of r.evaluationResult.issues) {
-        if (issue.severity === "minor") totalMinor++;
-        else if (issue.severity === "significant") totalSignificant++;
-        else if (issue.severity === "critical") totalCritical++;
-        else if (issue.severity === "criticalSchema") totalCriticalSchema++;
+        if (issue.severity === 'minor') totalMinor++;
+        else if (issue.severity === 'significant') totalSignificant++;
+        else if (issue.severity === 'critical') totalCritical++;
+        else if (issue.severity === 'criticalSchema') totalCriticalSchema++;
       }
     }
   }
@@ -231,10 +214,8 @@ function generateSummary(
   summary += `\n- **Total tool failures:** ${totalToolErrorRuns} / ${totalRuns}`;
   const successPercentage =
     totalRuns === 0
-      ? "0.0"
-      : (((totalRuns - totalRunsWithAnyFailure) / totalRuns) * 100.0).toFixed(
-          1,
-        );
+      ? '0.0'
+      : (((totalRuns - totalRunsWithAnyFailure) / totalRuns) * 100.0).toFixed(1);
   summary += `\n- **Number of runs with any failure (tool error, validation, or eval):** ${totalRunsWithAnyFailure} / ${totalRuns} (${successPercentage}% success)`;
   summary += `\n- **Severity Breakdown:**`;
   summary += `\n  - **Minor:** ${totalMinor}`;
@@ -242,10 +223,9 @@ function generateSummary(
   summary += `\n  - **Critical (Eval):** ${totalCritical}`;
   summary += `\n  - **Critical (Schema):** ${totalCriticalSchema}`;
 
-  const latencies = results.map((r) => r.latency).sort((a, b) => a - b);
+  const latencies = results.map(r => r.latency).sort((a, b) => a - b);
   const totalLatency = latencies.reduce((acc, l) => acc + l, 0);
-  const meanLatency =
-    totalRuns > 0 ? (totalLatency / totalRuns).toFixed(0) : "0";
+  const meanLatency = totalRuns > 0 ? (totalLatency / totalRuns).toFixed(0) : '0';
   let medianLatency = 0;
   if (latencies.length > 0) {
     const mid = Math.floor(latencies.length / 2);
@@ -267,59 +247,59 @@ function generateSummary(
 
 async function main() {
   const argv = await yargs(hideBin(process.argv))
-    .option("log-level", {
-      type: "string",
-      description: "Set the logging level",
-      default: "info",
-      choices: ["debug", "info", "warn", "error"],
+    .option('log-level', {
+      type: 'string',
+      description: 'Set the logging level',
+      default: 'info',
+      choices: ['debug', 'info', 'warn', 'error'],
     })
-    .option("results", {
-      type: "string",
+    .option('results', {
+      type: 'string',
       description:
-        "Directory to keep output files. If not specified, uses results/output-<model>. If specified, uses the provided directory (appending output-<model>).",
-      coerce: (arg) => (arg === undefined ? true : arg),
+        'Directory to keep output files. If not specified, uses results/output-<model>. If specified, uses the provided directory (appending output-<model>).',
+      coerce: arg => (arg === undefined ? true : arg),
       default: true,
     })
-    .option("runs-per-prompt", {
-      type: "number",
-      description: "Number of times to run each prompt",
+    .option('runs-per-prompt', {
+      type: 'number',
+      description: 'Number of times to run each prompt',
       default: 1,
     })
-    .option("model", {
-      type: "string",
+    .option('model', {
+      type: 'string',
       array: true,
-      description: "Filter models by exact name",
+      description: 'Filter models by exact name',
       default: [],
-      choices: modelsToTest.map((m) => m.name),
+      choices: modelsToTest.map(m => m.name),
     })
-    .option("prompt", {
-      type: "string",
+    .option('prompt', {
+      type: 'string',
       array: true,
-      description: "Filter prompts by name prefix",
+      description: 'Filter prompts by name prefix',
     })
-    .option("eval-model", {
-      type: "string",
-      description: "Model to use for evaluation",
-      default: "gemini-2.5-flash",
-      choices: modelsToTest.map((m) => m.name),
+    .option('eval-model', {
+      type: 'string',
+      description: 'Model to use for evaluation',
+      default: 'gemini-2.5-flash',
+      choices: modelsToTest.map(m => m.name),
     })
-    .option("clean-results", {
-      type: "boolean",
-      description: "Clear the output directory before starting",
+    .option('clean-results', {
+      type: 'boolean',
+      description: 'Clear the output directory before starting',
       default: false,
     })
 
     .help()
-    .alias("h", "help")
+    .alias('h', 'help')
     .strict().argv;
 
   // Filter Models
   let filteredModels = modelsToTest;
   if (argv.model && argv.model.length > 0) {
     const modelNames = argv.model as string[];
-    filteredModels = modelsToTest.filter((m) => modelNames.includes(m.name));
+    filteredModels = modelsToTest.filter(m => modelNames.includes(m.name));
     if (filteredModels.length === 0) {
-      logger.error(`No models found matching: ${modelNames.join(", ")}.`);
+      logger.error(`No models found matching: ${modelNames.join(', ')}.`);
       process.exit(1);
     }
   }
@@ -328,13 +308,9 @@ async function main() {
   let filteredPrompts = prompts;
   if (argv.prompt && argv.prompt.length > 0) {
     const promptPrefixes = argv.prompt as string[];
-    filteredPrompts = prompts.filter((p) =>
-      promptPrefixes.some((prefix) => p.name.startsWith(prefix)),
-    );
+    filteredPrompts = prompts.filter(p => promptPrefixes.some(prefix => p.name.startsWith(prefix)));
     if (filteredPrompts.length === 0) {
-      logger.error(
-        `No prompt found with prefix "${promptPrefixes.join(", ")}".`,
-      );
+      logger.error(`No prompt found with prefix "${promptPrefixes.join(', ')}".`);
       process.exit(1);
     }
   }
@@ -344,46 +320,39 @@ async function main() {
   // But we need a base output dir to pass to them.
   let resultsBaseDir: string | undefined;
   const resultsArg = argv.results;
-  if (typeof resultsArg === "string") {
+  if (typeof resultsArg === 'string') {
     resultsBaseDir = resultsArg;
   } else if (resultsArg === true) {
-    resultsBaseDir = "results";
+    resultsBaseDir = 'results';
   }
 
   // Clean Results
-  if (
-    argv["clean-results"] &&
-    resultsBaseDir &&
-    fs.existsSync(resultsBaseDir)
-  ) {
+  if (argv['clean-results'] && resultsBaseDir && fs.existsSync(resultsBaseDir)) {
     // Only force clean known result directories for safety if the user provides the flag.
-    if (resultsBaseDir === "results") {
-      fs.rmSync(resultsBaseDir, { recursive: true, force: true });
+    if (resultsBaseDir === 'results') {
+      fs.rmSync(resultsBaseDir, {recursive: true, force: true});
     } else {
-      fs.rmSync(resultsBaseDir, { recursive: true, force: true });
+      fs.rmSync(resultsBaseDir, {recursive: true, force: true});
     }
   }
 
   // Configure global logger. File logging is currently only supported when testing a single model.
   if (resultsBaseDir) {
     if (filteredModels.length === 1) {
-      const modelDirName = `output-${filteredModels[0].name.replace(/[\/:]/g, "_")}`;
-      setupLogger(path.join(resultsBaseDir, modelDirName), argv["log-level"]);
+      const modelDirName = `output-${filteredModels[0].name.replace(/[\/:]/g, '_')}`;
+      setupLogger(path.join(resultsBaseDir, modelDirName), argv['log-level']);
     } else {
-      setupLogger(undefined, argv["log-level"]);
+      setupLogger(undefined, argv['log-level']);
     }
   } else {
-    setupLogger(undefined, argv["log-level"]);
+    setupLogger(undefined, argv['log-level']);
   }
 
   const schemas = loadSchemas();
-  const catalogRulesPath = path.join(
-    __dirname,
-    "../../json/basic_catalog_rules.txt",
-  );
+  const catalogRulesPath = path.join(__dirname, '../../json/basic_catalog_rules.txt');
   let catalogRules: string | undefined;
   if (fs.existsSync(catalogRulesPath)) {
-    catalogRules = fs.readFileSync(catalogRulesPath, "utf-8");
+    catalogRules = fs.readFileSync(catalogRulesPath, 'utf-8');
   } else {
     logger.warn(
       `Catalog rules file not found at ${catalogRulesPath}. Proceeding without specific catalog rules.`,
@@ -395,7 +364,7 @@ async function main() {
   const generatedResults = await generator.run(
     filteredPrompts,
     filteredModels,
-    argv["runs-per-prompt"],
+    argv['runs-per-prompt'],
   );
 
   // Phase 2: Validation
@@ -403,7 +372,7 @@ async function main() {
   const validatedResults = await validator.run(generatedResults);
 
   // Phase 3: Evaluation
-  const evaluator = new Evaluator(schemas, argv["eval-model"], resultsBaseDir);
+  const evaluator = new Evaluator(schemas, argv['eval-model'], resultsBaseDir);
   const evaluatedResults = await evaluator.run(validatedResults);
 
   // Phase 4: Failure Analysis
@@ -420,30 +389,28 @@ async function main() {
     const modelResults = resultsByModel[modelName];
     const failures = modelResults
       .filter(
-        (r) =>
+        r =>
           r.error ||
           r.validationErrors.length > 0 ||
           (r.evaluationResult && !r.evaluationResult.pass),
       )
-      .map((r) => {
-        let failureType = "Unknown";
-        let reason = "Unknown";
+      .map(r => {
+        let failureType = 'Unknown';
+        let reason = 'Unknown';
         let issues: string[] = [];
 
         if (r.error) {
-          failureType = "Tool Error";
+          failureType = 'Tool Error';
           reason = r.error.message || String(r.error);
         } else if (r.validationErrors.length > 0) {
-          failureType = "Schema Validation";
-          reason = "Schema validation failed";
+          failureType = 'Schema Validation';
+          reason = 'Schema validation failed';
           issues = r.validationErrors;
         } else if (r.evaluationResult && !r.evaluationResult.pass) {
-          failureType = "Evaluation Failure";
+          failureType = 'Evaluation Failure';
           reason = r.evaluationResult.reason;
           if (r.evaluationResult.issues) {
-            issues = r.evaluationResult.issues.map(
-              (i) => `${i.severity}: ${i.issue}`,
-            );
+            issues = r.evaluationResult.issues.map(i => `${i.severity}: ${i.issue}`);
           }
         }
 
@@ -463,12 +430,12 @@ async function main() {
           modelName,
           failures,
           numRuns: modelResults.length,
-          evalModel: argv["eval-model"],
+          evalModel: argv['eval-model'],
         });
         analysisResults[modelName] = analysis;
       } catch (e) {
         logger.error(`Failed to run failure analysis for ${modelName}: ${e}`);
-        analysisResults[modelName] = "Failed to run analysis.";
+        analysisResults[modelName] = 'Failed to run analysis.';
       }
     }
   }
@@ -480,10 +447,10 @@ async function main() {
   if (resultsBaseDir) {
     // Save a copy of the evaluation summary to each model's output directory.
     for (const model of filteredModels) {
-      const modelDirName = `output-${model.name.replace(/[\/:]/g, "_")}`;
+      const modelDirName = `output-${model.name.replace(/[\/:]/g, '_')}`;
       const modelDir = path.join(resultsBaseDir, modelDirName);
       if (fs.existsSync(modelDir)) {
-        fs.writeFileSync(path.join(modelDir, "summary.md"), summary);
+        fs.writeFileSync(path.join(modelDir, 'summary.md'), summary);
       }
     }
   }
diff --git a/specification/v0_9/eval/src/logger.ts b/specification/v0_9/eval/src/logger.ts
index 0a87b505f..ea598dff3 100644
--- a/specification/v0_9/eval/src/logger.ts
+++ b/specification/v0_9/eval/src/logger.ts
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-import * as winston from "winston";
-import * as path from "path";
+import * as winston from 'winston';
+import * as path from 'path';
 
 let fileTransport: winston.transport | null = null;
 
 const consoleTransport = new winston.transports.Console({
-  level: "info", // Default to info, can be updated later
+  level: 'info', // Default to info, can be updated later
   format: winston.format.combine(
     winston.format.colorize(),
-    winston.format.printf(({ timestamp, level, message }) => {
+    winston.format.printf(({timestamp, level, message}) => {
       // Clear the current line (where progress bar might be) before logging
       // \r clears the line, \x1b[K clears from cursor to end of line
       return `\r\x1b[K${timestamp} [${level}]: ${message}`;
@@ -33,10 +33,10 @@ const consoleTransport = new winston.transports.Console({
 
 // Create a default logger instance that logs to console only initially
 export const logger = winston.createLogger({
-  level: "debug", // Allow all logs to flow through (transports can filter)
+  level: 'debug', // Allow all logs to flow through (transports can filter)
   format: winston.format.combine(
     winston.format.timestamp(),
-    winston.format.printf(({ timestamp, level, message }) => {
+    winston.format.printf(({timestamp, level, message}) => {
       return `${timestamp} [${level}]: ${message}`;
     }),
   ),
@@ -45,7 +45,7 @@ export const logger = winston.createLogger({
 
 export function setupLogger(outputDir: string | undefined, logLevel: string) {
   // Ensure the global level allows debug logs so they reach the file transport
-  logger.level = "debug";
+  logger.level = 'debug';
 
   // Update Console transport level to match user preference directly
   consoleTransport.level = logLevel;
@@ -57,12 +57,9 @@ export function setupLogger(outputDir: string | undefined, logLevel: string) {
 
   if (outputDir) {
     fileTransport = new winston.transports.File({
-      filename: path.join(outputDir, "output.log"),
-      level: "debug", // Always capture everything in the file
-      format: winston.format.combine(
-        winston.format.timestamp(),
-        winston.format.json(),
-      ),
+      filename: path.join(outputDir, 'output.log'),
+      level: 'debug', // Always capture everything in the file
+      format: winston.format.combine(winston.format.timestamp(), winston.format.json()),
     });
 
     logger.add(fileTransport);
diff --git a/specification/v0_9/eval/src/models.ts b/specification/v0_9/eval/src/models.ts
index 7effadc76..b09d768ad 100644
--- a/specification/v0_9/eval/src/models.ts
+++ b/specification/v0_9/eval/src/models.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { googleAI } from "@genkit-ai/google-genai";
-import { openAI } from "@genkit-ai/compat-oai/openai";
-import { claude35Haiku, claude4Sonnet } from "genkitx-anthropic";
+import {googleAI} from '@genkit-ai/google-genai';
+import {openAI} from '@genkit-ai/compat-oai/openai';
+import {claude35Haiku, claude4Sonnet} from 'genkitx-anthropic';
 
 export interface ModelConfiguration {
   model: any;
@@ -28,71 +28,71 @@ export interface ModelConfiguration {
 
 export const modelsToTest: ModelConfiguration[] = [
   {
-    model: openAI.model("gpt-5.1"),
-    name: "gpt-5.1",
-    config: { reasoning_effort: "minimal" },
+    model: openAI.model('gpt-5.1'),
+    name: 'gpt-5.1',
+    config: {reasoning_effort: 'minimal'},
     requestsPerMinute: 500,
     tokensPerMinute: 30000,
   },
   {
-    model: openAI.model("gpt-5-mini"),
-    name: "gpt-5-mini",
-    config: { reasoning_effort: "minimal" },
+    model: openAI.model('gpt-5-mini'),
+    name: 'gpt-5-mini',
+    config: {reasoning_effort: 'minimal'},
     requestsPerMinute: 500,
     tokensPerMinute: 500000,
   },
   {
-    model: openAI.model("gpt-5-nano"),
-    name: "gpt-5-nano",
+    model: openAI.model('gpt-5-nano'),
+    name: 'gpt-5-nano',
     config: {},
     requestsPerMinute: 500,
     tokensPerMinute: 200000,
   },
   {
-    model: googleAI.model("gemini-2.5-pro"),
-    name: "gemini-2.5-pro",
-    config: { thinkingConfig: { thinkingBudget: 1000 } },
+    model: googleAI.model('gemini-2.5-pro'),
+    name: 'gemini-2.5-pro',
+    config: {thinkingConfig: {thinkingBudget: 1000}},
     requestsPerMinute: 150,
     tokensPerMinute: 2000000,
   },
   {
-    model: googleAI.model("gemini-3-flash-preview"),
-    name: "gemini-3-flash",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-3-flash-preview'),
+    name: 'gemini-3-flash',
+    config: {thinkingConfig: {thinkingBudget: 0}},
     requestsPerMinute: 1000,
     tokensPerMinute: 1000000,
   },
   {
-    model: googleAI.model("gemini-3.1-pro-preview"),
-    name: "gemini-3.1-pro",
-    config: { thinkingConfig: { thinkingBudget: 1000 } },
+    model: googleAI.model('gemini-3.1-pro-preview'),
+    name: 'gemini-3.1-pro',
+    config: {thinkingConfig: {thinkingBudget: 1000}},
     requestsPerMinute: 25,
     tokensPerMinute: 1000000,
   },
   {
-    model: googleAI.model("gemini-2.5-flash"),
-    name: "gemini-2.5-flash",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-2.5-flash'),
+    name: 'gemini-2.5-flash',
+    config: {thinkingConfig: {thinkingBudget: 0}},
     requestsPerMinute: 1000,
     tokensPerMinute: 1000000,
   },
   {
-    model: googleAI.model("gemini-2.5-flash-lite"),
-    name: "gemini-2.5-flash-lite",
-    config: { thinkingConfig: { thinkingBudget: 0 } },
+    model: googleAI.model('gemini-2.5-flash-lite'),
+    name: 'gemini-2.5-flash-lite',
+    config: {thinkingConfig: {thinkingBudget: 0}},
     requestsPerMinute: 4000,
     tokensPerMinute: 4000000,
   },
   {
     model: claude4Sonnet,
-    name: "claude-4-sonnet",
+    name: 'claude-4-sonnet',
     config: {},
     requestsPerMinute: 50,
     tokensPerMinute: 30000,
   },
   {
     model: claude35Haiku,
-    name: "claude-35-haiku",
+    name: 'claude-35-haiku',
     config: {},
     requestsPerMinute: 50,
     tokensPerMinute: 50000,
diff --git a/specification/v0_9/eval/src/prompts.ts b/specification/v0_9/eval/src/prompts.ts
index a311b4011..4a4057905 100644
--- a/specification/v0_9/eval/src/prompts.ts
+++ b/specification/v0_9/eval/src/prompts.ts
@@ -22,14 +22,13 @@ export interface TestPrompt {
 
 export const prompts: TestPrompt[] = [
   {
-    name: "deleteSurface",
-    description: "A DeleteSurface message to remove a UI surface.",
+    name: 'deleteSurface',
+    description: 'A DeleteSurface message to remove a UI surface.',
     promptText: `Generate a JSON message containing a deleteSurface for the surface 'dashboard-surface-1'.`,
   },
   {
-    name: "dogBreedGenerator",
-    description:
-      "A prompt to generate a UI for a dog breed information and generator tool.",
+    name: 'dogBreedGenerator',
+    description: 'A prompt to generate a UI for a dog breed information and generator tool.',
     promptText: `Use a surfaceId of 'main'. Then, generate a 'createSurface' message followed by 'updateComponents' message to describe the following UI:
 
 A vertical list with:
@@ -50,20 +49,19 @@ The dog generator is another card which is a form that generates a fictional dog
 `,
   },
   {
-    name: "loginForm",
+    name: 'loginForm',
     description:
       'A simple login form with username, password, a "remember me" checkbox, and a submit button.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a login form. It should have a "Login" text (variant 'h1'), two text fields for username and password (bound to /login/username and /login/password), a checkbox for "Remember Me" (bound to /login/rememberMe), and a "Sign In" button. The button's action should have a 'event' property with 'name': 'login', and a 'context' containing the username, password, and rememberMe status.`,
   },
   {
-    name: "productGallery",
-    description: "A gallery of products using a list with a template.",
+    name: 'productGallery',
+    description: 'A gallery of products using a list with a template.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a product gallery. It should display a list of products from the data model at '/products'. Use a template for the list items. Each item should be a Card containing a Column. The Column should contain an Image (from '/products/item/imageUrl'), a Text component for the product name (from '/products/item/name'), and a Button labeled "Add to Cart". The button's action should have a 'event' with 'name': 'addToCart' and a 'context' with the product ID, for example, 'productId': 'static-id-123' (use this exact literal string). You should create a template component and then a list that uses it.`,
   },
   {
-    name: "productGalleryData",
-    description:
-      "An updateDataModel message to populate the product gallery data.",
+    name: 'productGalleryData',
+    description: 'An updateDataModel message to populate the product gallery data.',
     promptText: `Generate a 'createSurface' message with surfaceId 'main', followed by an updateDataModel message to populate the data model for the product gallery. The update should target the path '/products' and include at least two products. Each product in the map should have keys 'id', 'name', and 'imageUrl'. For example:
     {
       "product1": {
@@ -74,18 +72,18 @@ The dog generator is another card which is a form that generates a fictional dog
     }`,
   },
   {
-    name: "settingsPage",
-    description: "A settings page with tabs and a modal dialog.",
+    name: 'settingsPage',
+    description: 'A settings page with tabs and a modal dialog.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a user settings page. Use a Tabs component with two tabs: "Profile" and "Notifications". The "Profile" tab should contain a simple column with a text field for the user's name. The "Notifications" tab should contain a checkbox for "Enable email notifications". Also, include a Modal component. The modal's trigger should be a button labeled "Delete Account", and its content should be a column with a confirmation text and two buttons: "Confirm Deletion" and "Cancel".`,
   },
   {
-    name: "updateDataModel",
-    description: "An updateDataModel message to update user data.",
+    name: 'updateDataModel',
+    description: 'An updateDataModel message to update user data.',
     promptText: `Generate a 'createSurface' message with surfaceId 'main', followed by an updateDataModel message. This is used to update the client's data model. The scenario is that a user has just logged in, and we need to populate their profile information. Create a single data model update message to set '/user/name' to "John Doe" and '/user/email' to "john.doe@example.com".`,
   },
   {
-    name: "animalKingdomExplorer",
-    description: "A simple, explicit UI to display a hierarchy of animals.",
+    name: 'animalKingdomExplorer',
+    description: 'A simple, explicit UI to display a hierarchy of animals.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a simplified UI explorer for the Animal Kingdom.
 
 The UI must have a main 'Text' (variant 'h1') with the text "Simple Animal Explorer".
@@ -123,58 +121,58 @@ IMPORTANT: Do not skip any of the classes, orders, or species above. Include eve
 `,
   },
   {
-    name: "recipeCard",
-    description: "A UI to display a recipe with ingredients and instructions.",
+    name: 'recipeCard',
+    description: 'A UI to display a recipe with ingredients and instructions.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a recipe card. It should have a 'Text' (variant 'h1') for the recipe title, "Classic Lasagna". Below the title, an 'Image' of the lasagna. Then, a 'Row' containing two 'Column's. The first column has a 'Text' (variant 'h2') "Ingredients" and a 'List' of ingredients (use 'Text' components for items: "Pasta", "Cheese", "Sauce"). The second column has a 'Text' (variant 'h2') "Instructions" and a 'List' of step-by-step instructions (use 'Text' components: "Boil pasta", "Layer ingredients", "Bake"). Finally, a 'Button' at the bottom labeled "Watch Video Tutorial".`,
   },
   {
-    name: "musicPlayer",
-    description: "A simple music player UI.",
+    name: 'musicPlayer',
+    description: 'A simple music player UI.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a music player. It should be a 'Card' containing a 'Column'. Inside the column, there's an 'Image' for the album art, a 'Text' for the song title "Bohemian Rhapsody", another 'Text' for the artist "Queen", a 'Slider' labeled "Progress", and a 'Row' with three 'Button' components. Each Button should have a child 'Text' component. The Text components should have the labels "Previous", "Play", and "Next" respectively.`,
   },
   {
-    name: "weatherForecast",
-    description: "A UI to display the weather forecast.",
+    name: 'weatherForecast',
+    description: 'A UI to display the weather forecast.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a weather forecast UI. It should have a 'Text' (variant 'h1') with the city name, "New York". Below it, a 'Row' with the current temperature as a 'Text' component ("68°F") and an 'Image' for the weather icon (e.g., a sun). Below that, a 'Divider'. Then, a 'List' component to display the 5-day forecast. Each item in the list should be a 'Row' with the day, an icon, and high/low temperatures.`,
   },
   {
-    name: "surveyForm",
-    description: "A customer feedback survey form.",
+    name: 'surveyForm',
+    description: 'A customer feedback survey form.',
     promptText: `Create a customer feedback survey form. It should have a 'Text' (variant 'h1') "Customer Feedback". Then a 'ChoicePicker' (variant 'mutuallyExclusive') with label "How would you rate our service?" and options "Excellent", "Good", "Average", "Poor". Then a 'ChoicePicker' (variant 'multipleSelection') with label "What did you like?" and options "Product Quality", "Price", "Customer Support". Finally, a 'TextField' with the label "Any other comments?" and a 'Button' labeled "Submit Feedback".`,
   },
   {
-    name: "flightBooker",
-    description: "A form to search for flights.",
+    name: 'flightBooker',
+    description: 'A form to search for flights.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a flight booking form. It should have a 'Text' (variant 'h1') "Book a Flight". Then a 'Row' with two 'TextField's for "Origin" and "Destination". Below that, a 'Row' with two 'DateTimeInput's for "Departure Date" and "Return Date" (initialize with empty values). Add a 'Slider' labeled "Passengers" (min 1, max 10, value 1). Finally, a 'Button' labeled "Search Flights".`,
   },
   {
-    name: "dashboard",
-    description: "A simple dashboard with statistics.",
+    name: 'dashboard',
+    description: 'A simple dashboard with statistics.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a simple dashboard. It should have a 'Text' (variant 'h1') "Sales Dashboard". Below, a 'Row' containing three 'Card's. The first card has a 'Text' "Revenue" and another 'Text' "$50,000". The second card has "New Customers" and "1,200". The third card has "Conversion Rate" and "4.5%".`,
   },
   {
-    name: "contactCard",
-    description: "A UI to display contact information.",
+    name: 'contactCard',
+    description: 'A UI to display contact information.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a contact card. The root component of the surface must be a 'Card'. This Card should contain a 'Row'. The row contains an 'Image' (as an avatar) and a 'Column'. The column contains a 'Text' for the name "Jane Doe", a 'Text' for the email "jane.doe@example.com", and a 'Text' for the phone number "(123) 456-7890". Below the main row, add a 'Button' labeled "View on Map" (using a child 'Text' component).`,
   },
   {
-    name: "calendarEventCreator",
-    description: "A form to create a new calendar event.",
+    name: 'calendarEventCreator',
+    description: 'A form to create a new calendar event.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a calendar event creation form. It should have a 'Text' (variant 'h1') "New Event". Include a 'TextField' for the "Event Title". Use a 'Row' for two 'DateTimeInput's for "Start Time" and "End Time" (initialize both with a literal empty string value: '' (do not bind to a data path)). Add a 'CheckBox' labeled "All-day event". Finally, a 'Row' with two 'Button's: "Save" and "Cancel".`,
   },
   {
-    name: "checkoutPage",
-    description: "A simplified e-commerce checkout page.",
+    name: 'checkoutPage',
+    description: 'A simplified e-commerce checkout page.',
     promptText: `Create a simplified e-commerce checkout page. It should have a 'Text' (variant 'h1') "Checkout". A 'Column' for shipping info with 'TextField's for "Name", "Address", "City", "Zip Code". A 'Column' for payment info with 'TextField's for "Card Number", "Expiry Date", "CVV". Finally, a 'Text' "Total: $99.99" and a 'Button' "Place Order".`,
   },
   {
-    name: "socialMediaPost",
-    description: "A component representing a social media post.",
+    name: 'socialMediaPost',
+    description: 'A component representing a social media post.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a social media post. It should be a 'Card' containing a 'Column'. The first item is a 'Row' with an 'Image' (user avatar) and a 'Text' (username "user123"). Below that, a 'Text' component for the post content: "Enjoying the beautiful weather today!". Then, an 'Image' for the main post picture. Finally, a 'Row' with three 'Button's: "Like", "Comment", and "Share".`,
   },
   {
-    name: "eCommerceProductPage",
-    description: "A detailed product page for an e-commerce website.",
+    name: 'eCommerceProductPage',
+    description: 'A detailed product page for an e-commerce website.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a product details page.
 The main layout should be a 'Row'.
 The left side of the row is a 'Column' containing a large main 'Image' of the product, and below it, a 'Row' of three smaller thumbnail 'Image' components.
@@ -188,8 +186,8 @@ The right side of the row is another 'Column' for product information:
 - A 'Text' component for the product description below the button.`,
   },
   {
-    name: "interactiveDashboard",
-    description: "A dashboard with filters and data cards.",
+    name: 'interactiveDashboard',
+    description: 'A dashboard with filters and data cards.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for an interactive analytics dashboard.
   At the top, a 'Text' (variant 'h1') "Company Dashboard".
   Below the text heading, a 'Card' containing a 'Row' of filter controls:
@@ -202,8 +200,8 @@ The right side of the row is another 'Column' for product information:
   Finally, a large 'Card' at the bottom with a 'Text' (variant 'h2') "Revenue Over Time" and a placeholder 'Image' with a valid URL to represent a line chart.`,
   },
   {
-    name: "travelItinerary",
-    description: "A multi-day travel itinerary display.",
+    name: 'travelItinerary',
+    description: 'A multi-day travel itinerary display.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a travel itinerary for a trip to Paris.
 It should have a main 'Text' component with variant 'h1' and text "Paris Adventure".
 Below, use a 'List' to display three days. Each item in the list should be a 'Card'.
@@ -213,8 +211,8 @@ Below, use a 'List' to display three days. Each item in the list should be a 'Ca
 Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to mark as complete, with an empty label '') and a 'Text' component with the activity description.`,
   },
   {
-    name: "kanbanBoard",
-    description: "A Kanban-style task tracking board.",
+    name: 'kanbanBoard',
+    description: 'A Kanban-style task tracking board.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a Kanban board. It should have a 'Text' (variant 'h1') "Project Tasks". Below, a 'Row' containing three 'Column's representing "To Do", "In Progress", and "Done". Each column should have a 'Text' (variant 'h2') header and a list of 'Card's.
     - "To Do" column: Card "Research", Card "Design".
     - "In Progress" column: Card "Implementation".
@@ -222,56 +220,56 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     Each card should just contain a 'Text' with the task name.`,
   },
   {
-    name: "videoCallInterface",
-    description: "A video conference UI.",
+    name: 'videoCallInterface',
+    description: 'A video conference UI.',
     promptText: `Create a video call interface. It should have a 'Text' (variant 'h1') "Video Call". A 'Video' component with a valid placeholder URL (e.g. 'https://example.com/video.mp4'). Below that, a 'Row' with three 'Button's, each with a child 'Text' component with the text "Mute", "Camera", and "End Call" respectively.`,
   },
   {
-    name: "fileBrowser",
-    description: "A file explorer list.",
+    name: 'fileBrowser',
+    description: 'A file explorer list.',
     promptText: `Create a file browser. It should have a 'Text' (variant 'h1') "My Files". A 'List' of 'Row's. Each row has an 'Icon' (folder or attachFile) and a 'Text' (filename). Examples (create these as static rows, not data bound): "Documents", "Images", "Work.txt".`,
   },
   {
-    name: "chatRoom",
-    description: "A chat application interface.",
+    name: 'chatRoom',
+    description: 'A chat application interface.',
     promptText: `Create a chat room interface. It should have a 'Column' for the message history. Inside, include several 'Card's representing messages, each with a 'Text' for the sender and a 'Text' for the message body. Specifically include these messages: "Alice: Hi there!", "Bob: Hello!". At the bottom, a 'Row' with a 'TextField' (label "Type a message...") and a 'Button' labeled "Send".`,
   },
   {
-    name: "fitnessTracker",
-    description: "A daily activity summary.",
+    name: 'fitnessTracker',
+    description: 'A daily activity summary.',
     promptText: `Create a fitness tracker dashboard. It should have a 'Text' (variant 'h1') "Daily Activity", and a 'Row' of 'Card's. Each card should contain a 'Column' with a 'Text' label (e.g. "Steps") and a 'Text' value (e.g. "10,000"). Create cards for "Steps" ("10,000"), "Calories" ("500 kcal"), "Distance" ("5 km"). Below that, a 'Slider' labeled "Daily Goal" (initialize value to 50). Finally, a 'List' of recent workouts. Use 'Text' components for the list items, for example: "Morning Run", "Evening Yoga", "Gym Session".`,
   },
   {
-    name: "smartHome",
-    description: "A smart home control panel.",
+    name: 'smartHome',
+    description: 'A smart home control panel.',
     promptText: `Create a smart home dashboard. It should have a 'Text' (variant 'h1') "Living Room". A 'Grid' of 'Card's. To create the grid, use a 'Column' that contains multiple 'Row's. Each 'Row' should contain 'Card's. Create a row with cards for "Lights" (CheckBox, label "Lights", value true) and "Thermostat" (Slider, label "Thermostat", value 72). Create another row with a card for "Music" (CheckBox, label "Music", value false). Ensure the CheckBox labels are exactly "Lights" and "Music".`,
   },
   {
-    name: "restaurantMenu",
-    description: "A restaurant menu with tabs.",
+    name: 'restaurantMenu',
+    description: 'A restaurant menu with tabs.',
     promptText: `Create a restaurant menu with tabs. It should have a 'Text' (variant 'h1') "Gourmet Bistro". A 'Tabs' component with "Starters", "Mains", "Desserts".
     - "Starters": 'List' containing IDs of separate 'Row' components (Name, Price). Create rows for "Soup - $8", "Salad - $10".
     - "Mains": 'List' containing IDs of separate 'Row' components. Create rows for "Steak - $25", "Pasta - $18".
     - "Desserts": 'List' containing IDs of separate 'Row' components. Create rows for "Cake - $8", "Pie - $7".`,
   },
   {
-    name: "newsAggregator",
-    description: "A news feed with article cards.",
+    name: 'newsAggregator',
+    description: 'A news feed with article cards.',
     promptText: `Create a news aggregator. The root component should be a 'Column'. Inside this column, place a 'Text' (variant 'h1') "Top Headlines". Below the text, place a 'List' of 'Card's. The 'List' should be a sibling of the 'Text', not a parent. Each card has a 'Column' with an 'Image', a 'Text' (headline), and a 'Text' (summary). Include headlines "Tech Breakthrough" and "Local Sports". Each card should have a 'Button' labeled "Read More". Create these as static components, not data bound.`,
   },
   {
-    name: "photoEditor",
-    description: "A photo editing interface with sliders.",
+    name: 'photoEditor',
+    description: 'A photo editing interface with sliders.',
     promptText: `Create a photo editor. It should have a large 'Image' (photo). Below it, a 'Row' of 'Button's (Filters, Crop, Adjust). Below that, a 'Slider' labeled "Intensity" (initialize value to 50).`,
   },
   {
-    name: "triviaQuiz",
-    description: "A trivia question card.",
+    name: 'triviaQuiz',
+    description: 'A trivia question card.',
     promptText: `Create a trivia quiz. It should have a 'Text' (variant 'h1') "Question 1". A 'Text' "What is the capital of France?". A 'ChoicePicker' (variant 'mutuallyExclusive') for answers (options: "Paris", "London", "Berlin", "Madrid"). A 'Button' "Submit Answer".`,
   },
   {
-    name: "simpleCalculator",
-    description: "A basic calculator layout.",
+    name: 'simpleCalculator',
+    description: 'A basic calculator layout.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a calculator. It should have a 'Card'. Inside the card, there MUST be a single 'Column' that contains two things: a 'Text' (display) showing "0", and a nested 'Column' of 'Row's for the buttons.
     - Row 1: "7", "8", "9", "/"
     - Row 2: "4", "5", "6", "*"
@@ -280,28 +278,28 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     Each button should be a 'Button' component with a child 'Text' component for the label (e.g. '7', '+').`,
   },
   {
-    name: "jobApplication",
-    description: "A job application form.",
+    name: 'jobApplication',
+    description: 'A job application form.',
     promptText: `Create a job application form. It should have 'TextField's for "Name", "Email", "Phone", "Resume URL". A 'ChoicePicker' (variant 'mutuallyExclusive') labeled "Years of Experience" (options: "0-1", "2-5", "5+"). A 'Button' "Submit Application".`,
   },
   {
-    name: "courseSyllabus",
-    description: "A course syllabus outline.",
+    name: 'courseSyllabus',
+    description: 'A course syllabus outline.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a course syllabus. 'Text' (h1) "Introduction to Computer Science". 'List' of modules.
 - For module 1, a 'Card' with 'Text' "Algorithms" and 'List' ("Sorting", "Searching").
 - For module 2, a 'Card' with 'Text' "Data Structures" and 'List' ("Arrays", "Linked Lists").`,
   },
   {
-    name: "stockWatchlist",
-    description: "A stock market watchlist.",
+    name: 'stockWatchlist',
+    description: 'A stock market watchlist.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a stock watchlist. 'Text' (h1) "Market Watch". 'List' of 'Row's.
     - Row 1: 'Text' "AAPL", 'Text' "$150.00", 'Text' "+1.2%".
     - Row 2: 'Text' "GOOGL", 'Text' "$2800.00", 'Text' "-0.5%".
     - Row 3: 'Text' "AMZN", 'Text' "$3400.00", 'Text' "+0.8%".`,
   },
   {
-    name: "podcastEpisode",
-    description: "A podcast player interface.",
+    name: 'podcastEpisode',
+    description: 'A podcast player interface.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a podcast player. 'Card' containing:
     - 'Image' (Cover Art).
     - 'Text' (h2) "Episode 42: The Future of AI".
@@ -311,20 +309,20 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     Create these as static components, not data bound.`,
   },
   {
-    name: "hotelSearchResults",
-    description: "Hotel search results list.",
+    name: 'hotelSearchResults',
+    description: 'Hotel search results list.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for hotel search results. 'Text' (h1) "Hotels in Tokyo". 'List' of 'Card's.
     - Card 1: 'Row' with 'Image', 'Column' ('Text' "Grand Hotel", 'Text' "5 Stars", 'Text' "$200/night"), 'Button' "Book".
     - Card 2: 'Row' with 'Image', 'Column' ('Text' "City Inn", 'Text' "3 Stars", 'Text' "$100/night"), 'Button' "Book".`,
   },
   {
-    name: "notificationCenter",
-    description: "A list of notifications.",
+    name: 'notificationCenter',
+    description: 'A list of notifications.',
     promptText: `Create a notification center. It should have a 'Text' (variant 'h1') "Notifications". A 'List' of 'Card's. Include cards for "New message from Sarah" and "Your order has shipped". Each card should have a 'Button' "Dismiss".`,
   },
   {
-    name: "nestedDataBinding",
-    description: "A project dashboard with deeply nested data binding.",
+    name: 'nestedDataBinding',
+    description: 'A project dashboard with deeply nested data binding.',
     promptText: `Generate a stream of JSON messages for a Project Management Dashboard.
     The output must consist of exactly three JSON objects, one after the other.
 
@@ -353,13 +351,13 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
   },
 
   {
-    name: "profileEditor",
-    description: "A user profile editing form.",
+    name: 'profileEditor',
+    description: 'A user profile editing form.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for editing a profile. 'Text' (h1) "Edit Profile". 'Image' (Current Avatar). 'Button' "Change Photo". 'TextField' "Display Name". 'TextField' "Bio" (multiline). 'TextField' "Website". 'Button' "Save Changes".`,
   },
   {
-    name: "cinemaSeatSelection",
-    description: "A seat selection grid.",
+    name: 'cinemaSeatSelection',
+    description: 'A seat selection grid.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for cinema seat selection. 'Text' (h1) "Select Seats". 'Text' "Screen" (centered). 'Column' of 'Row's representing rows of seats.
     - Row A: 4 'CheckBox'es.
     - Row B: 4 'CheckBox'es.
@@ -367,20 +365,20 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     'Button' "Confirm Selection".`,
   },
   {
-    name: "flashcardApp",
-    description: "A language learning flashcard.",
+    name: 'flashcardApp',
+    description: 'A language learning flashcard.',
     promptText: `Generate a 'createSurface' message and a 'updateComponents' message with surfaceId 'main' for a flashcard app. 'Text' (h1) "Spanish Vocabulary". 'Card' (the flashcard). Inside the card, a 'Column' with 'Text' (h2) "Hola" (Front). 'Divider'. 'Text' "Hello" (Back - conceptually hidden, but rendered here). 'Row' of buttons: "Hard", "Good", "Easy".`,
   },
   {
-    name: "clientSideValidation",
-    description: "A text field with client-side validation requirements.",
+    name: 'clientSideValidation',
+    description: 'A text field with client-side validation requirements.',
     promptText: `Create a 'createSurface' and 'updateComponents' message for a registration form with validation. Surface ID 'main'.
     Include a 'TextField' for "Username" that MUST match the regex "^[a-zA-Z0-9]{3,}$". If it fails, show error "Username must be at least 3 alphanumeric characters".
     Include a 'Button' labeled "Register".`,
   },
   {
-    name: "standardFunctions",
-    description: "Usage of pluralize.",
+    name: 'standardFunctions',
+    description: 'Usage of pluralize.',
     promptText: `Create a 'createSurface' and 'updateComponents' message for a shopping cart summary. Surface ID 'main'.
     Display a 'Text' component.
     The text value should be a 'pluralize' function call with returnType 'string'.
@@ -390,15 +388,15 @@ Each activity in the inner lists should be a 'Row' containing a 'CheckBox' (to m
     'other': "\${/cart/count} items"`,
   },
   {
-    name: "openUrlAction",
-    description: "A button that opens an external URL.",
+    name: 'openUrlAction',
+    description: 'A button that opens an external URL.',
     promptText: `Create a 'createSurface' and 'updateComponents' message. Surface ID 'main'.
     Include a 'Button' labeled "Visit Website".
     The button's action should be a client-side function call to 'openUrl' with the argument 'url': 'https://a2ui.org'.`,
   },
   {
-    name: "nestedLayoutRecursive",
-    description: "A deeply nested layout to test component recursion.",
+    name: 'nestedLayoutRecursive',
+    description: 'A deeply nested layout to test component recursion.',
     promptText: `Create a 'createSurface' and 'updateComponents' message with surfaceId 'main'.
     Create a layout with at least 5 levels of depth:
     Level 1: Card
diff --git a/specification/v0_9/eval/src/rateLimiter.ts b/specification/v0_9/eval/src/rateLimiter.ts
index 49d67dd4b..5b593970e 100644
--- a/specification/v0_9/eval/src/rateLimiter.ts
+++ b/specification/v0_9/eval/src/rateLimiter.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { logger } from "./logger";
-import { ModelConfiguration } from "./models";
+import {logger} from './logger';
+import {ModelConfiguration} from './models';
 
 interface UsageRecord {
   timestamp: number;
@@ -39,7 +39,7 @@ export class RateLimiter {
 
   private getModelState(modelName: string): ModelRateLimitState {
     if (!this.modelStates.has(modelName)) {
-      this.modelStates.set(modelName, { usageRecords: [] });
+      this.modelStates.set(modelName, {usageRecords: []});
     }
     return this.modelStates.get(modelName)!;
   }
@@ -47,21 +47,19 @@ export class RateLimiter {
   private cleanUpRecords(state: ModelRateLimitState): void {
     // Use 65 seconds to be safe against clock drift and server bucket alignment
     const minuteAgo = Date.now() - 65 * 1000;
-    state.usageRecords = state.usageRecords.filter(
-      (record) => record.timestamp > minuteAgo,
-    );
+    state.usageRecords = state.usageRecords.filter(record => record.timestamp > minuteAgo);
   }
 
   reportError(modelConfig: ModelConfiguration, error: any): void {
     const isResourceExhausted =
-      error?.status === "RESOURCE_EXHAUSTED" ||
+      error?.status === 'RESOURCE_EXHAUSTED' ||
       error?.code === 429 ||
-      (error?.message && error.message.includes("429"));
+      (error?.message && error.message.includes('429'));
 
     if (isResourceExhausted) {
       // Try to parse "Please retry in X s" or similar from error message
       // Example: "Please retry in 22.648565753s."
-      const message = error?.originalMessage || error?.message || "";
+      const message = error?.originalMessage || error?.message || '';
       const match = message.match(/retry in ([0-9.]+)\s*s/i);
 
       let retrySeconds = 60; // Default to 60s if not found
@@ -81,13 +79,10 @@ export class RateLimiter {
     }
   }
 
-  async acquirePermit(
-    modelConfig: ModelConfiguration,
-    tokensCost: number = 0,
-  ): Promise<void> {
+  async acquirePermit(modelConfig: ModelConfiguration, tokensCost: number = 0): Promise<void> {
     this._waitingCount++;
     try {
-      const { name, requestsPerMinute, tokensPerMinute } = modelConfig;
+      const {name, requestsPerMinute, tokensPerMinute} = modelConfig;
       if (!requestsPerMinute && !tokensPerMinute) {
         return; // No limits
       }
@@ -100,10 +95,8 @@ export class RateLimiter {
         const pausedUntil = this.modelPauses.get(name);
         if (pausedUntil && pausedUntil > Date.now()) {
           const pauseWait = pausedUntil - Date.now();
-          logger.verbose(
-            `Rate limiting ${name}: Paused by circuit breaker for ${pauseWait}ms`,
-          );
-          await new Promise((resolve) => setTimeout(resolve, pauseWait));
+          logger.verbose(`Rate limiting ${name}: Paused by circuit breaker for ${pauseWait}ms`);
+          await new Promise(resolve => setTimeout(resolve, pauseWait));
           // After waiting, loop again to check normal rate limits
           continue;
         }
@@ -115,14 +108,12 @@ export class RateLimiter {
 
         let currentTokens = 0;
         let currentRequests = 0;
-        state.usageRecords.forEach((r) => {
+        state.usageRecords.forEach(r => {
           currentTokens += r.tokensUsed;
           if (r.isRequest) currentRequests++;
         });
 
-        const effectiveTokensPerMinute = tokensPerMinute
-          ? Math.floor(tokensPerMinute * 0.9)
-          : 0;
+        const effectiveTokensPerMinute = tokensPerMinute ? Math.floor(tokensPerMinute * 0.9) : 0;
 
         logger.debug(
           `RateLimiter check for ${name}: Cost=${tokensCost}, CurrentTokens=${currentTokens}, Limit=${effectiveTokensPerMinute}, Requests=${currentRequests}, RPM=${requestsPerMinute}`,
@@ -131,12 +122,9 @@ export class RateLimiter {
         // Check RPM
         if (requestsPerMinute && currentRequests + 1 > requestsPerMinute) {
           // Find the oldest REQUEST record
-          const oldestRequest = state.usageRecords.find((r) => r.isRequest);
+          const oldestRequest = state.usageRecords.find(r => r.isRequest);
           if (oldestRequest) {
-            rpmWait = Math.max(
-              0,
-              oldestRequest.timestamp + 60 * 1000 - currentNow,
-            );
+            rpmWait = Math.max(0, oldestRequest.timestamp + 60 * 1000 - currentNow);
           }
         }
 
@@ -149,16 +137,12 @@ export class RateLimiter {
             // Check if we are ALREADY over limit for the next call
             // We need to shed enough tokens so that (current - shed + cost) <= limit
             // shed >= current + cost - limit
-            let tokensToShed =
-              currentTokens + tokensCost - effectiveTokensPerMinute;
+            let tokensToShed = currentTokens + tokensCost - effectiveTokensPerMinute;
             let cumulativeTokens = 0;
             for (const record of state.usageRecords) {
               cumulativeTokens += record.tokensUsed;
               if (cumulativeTokens >= tokensToShed) {
-                tpmWait = Math.max(
-                  tpmWait,
-                  record.timestamp + 60 * 1000 - currentNow,
-                );
+                tpmWait = Math.max(tpmWait, record.timestamp + 60 * 1000 - currentNow);
                 break;
               }
             }
@@ -179,7 +163,7 @@ export class RateLimiter {
         logger.verbose(
           `Rate limiting ${name}: Waiting ${requiredWait}ms (RPM wait: ${rpmWait}ms, TPM wait: ${tpmWait}ms)`,
         );
-        await new Promise((resolve) => setTimeout(resolve, requiredWait));
+        await new Promise(resolve => setTimeout(resolve, requiredWait));
       }
     } finally {
       this._waitingCount--;
diff --git a/specification/v0_9/eval/src/types.ts b/specification/v0_9/eval/src/types.ts
index 77ffca320..c79582c67 100644
--- a/specification/v0_9/eval/src/types.ts
+++ b/specification/v0_9/eval/src/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TestPrompt } from "./prompts";
+import {TestPrompt} from './prompts';
 
 export interface GeneratedResult {
   modelName: string;
@@ -30,17 +30,13 @@ export interface ValidatedResult extends GeneratedResult {
   validationErrors: string[];
 }
 
-export type IssueSeverity =
-  | "minor"
-  | "significant"
-  | "critical"
-  | "criticalSchema";
+export type IssueSeverity = 'minor' | 'significant' | 'critical' | 'criticalSchema';
 
 export interface EvaluatedResult extends ValidatedResult {
   evaluationResult?: {
     pass: boolean;
     reason: string;
-    issues?: { issue: string; severity: IssueSeverity }[];
+    issues?: {issue: string; severity: IssueSeverity}[];
     overallSeverity?: IssueSeverity;
     evalPrompt?: string;
   };
diff --git a/specification/v0_9/eval/src/utils.ts b/specification/v0_9/eval/src/utils.ts
index aed120e0a..b53fe823a 100644
--- a/specification/v0_9/eval/src/utils.ts
+++ b/specification/v0_9/eval/src/utils.ts
@@ -27,7 +27,7 @@ export function extractJsonFromMarkdown(markdown: string): any[] {
         results.push(JSON.parse(content));
       } catch (error) {
         // If that fails, try parsing as JSONL (line by line)
-        const lines = content.split("\n");
+        const lines = content.split('\n');
         for (const line of lines) {
           if (line.trim()) {
             try {
diff --git a/specification/v0_9/eval/src/validator.ts b/specification/v0_9/eval/src/validator.ts
index d97568627..b3d765a6b 100644
--- a/specification/v0_9/eval/src/validator.ts
+++ b/specification/v0_9/eval/src/validator.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import Ajv from "ajv/dist/2020";
-import addFormats from "ajv-formats";
-import * as fs from "fs";
-import * as path from "path";
-import * as yaml from "js-yaml";
+import Ajv from 'ajv/dist/2020';
+import addFormats from 'ajv-formats';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as yaml from 'js-yaml';
 
-import { GeneratedResult, ValidatedResult, IssueSeverity } from "./types";
-import { logger } from "./logger";
+import {GeneratedResult, ValidatedResult, IssueSeverity} from './types';
+import {logger} from './logger';
 
 export class Validator {
   private ajv: Ajv;
@@ -33,21 +33,21 @@ export class Validator {
     private outputDir?: string,
   ) {
     // Set strict: false to be lenient with unknown keywords, if any.
-    this.ajv = new Ajv({ allErrors: true, strict: false });
+    this.ajv = new Ajv({allErrors: true, strict: false});
     addFormats(this.ajv);
     for (const [name, schema] of Object.entries(schemas)) {
       this.ajv.addSchema(schema, name);
     }
     this.validateFn = this.ajv.getSchema(
-      "https://a2ui.org/specification/v0_9/server_to_client.json",
+      'https://a2ui.org/specification/v0_9/server_to_client.json',
     );
 
     // Populate basic functions from the catalog schema
     // schemas are keyed by filename in index.ts
-    const catalogSchema = schemas["basic_catalog.json"];
+    const catalogSchema = schemas['basic_catalog.json'];
     if (
       catalogSchema &&
-      typeof catalogSchema.functions === "object" &&
+      typeof catalogSchema.functions === 'object' &&
       catalogSchema.functions !== null
     ) {
       for (const funcName of Object.keys(catalogSchema.functions)) {
@@ -63,9 +63,7 @@ export class Validator {
   }
 
   async run(results: GeneratedResult[]): Promise<ValidatedResult[]> {
-    logger.info(
-      `Starting Phase 2: Schema Validation (${results.length} items)`,
-    );
+    logger.info(`Starting Phase 2: Schema Validation (${results.length} items)`);
     const validatedResults: ValidatedResult[] = [];
     let passedCount = 0;
     let failedCount = 0;
@@ -74,7 +72,7 @@ export class Validator {
 
     for (const result of results) {
       if (result.error || !result.components) {
-        validatedResults.push({ ...result, validationErrors: [] }); // Already failed generation
+        validatedResults.push({...result, validationErrors: []}); // Already failed generation
         continue;
       }
 
@@ -87,29 +85,16 @@ export class Validator {
           // Smart validation: check which key is present and validate against that specific definition
           // to avoid noisy "oneOf" errors.
           let validated = false;
-          const schemaUri =
-            "https://a2ui.org/specification/v0_9/server_to_client.json";
+          const schemaUri = 'https://a2ui.org/specification/v0_9/server_to_client.json';
 
           if (message.createSurface) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/CreateSurfaceMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/CreateSurfaceMessage`, message);
           } else if (message.updateComponents) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/UpdateComponentsMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/UpdateComponentsMessage`, message);
           } else if (message.updateDataModel) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/UpdateDataModelMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/UpdateDataModelMessage`, message);
           } else if (message.deleteSurface) {
-            validated = this.ajv.validate(
-              `${schemaUri}#/$defs/DeleteSurfaceMessage`,
-              message,
-            );
+            validated = this.ajv.validate(`${schemaUri}#/$defs/DeleteSurfaceMessage`, message);
           } else {
             // Fallback to top-level validation if no known key matches (or if it's empty/invalid structure)
             validated = this.validateFn(message);
@@ -123,7 +108,7 @@ export class Validator {
             const pathToObject = new Map<string, any>();
             const visited = new Set<any>();
             const traverse = (obj: any, currentPath: string = '') => {
-              if (typeof obj !== "object" || obj === null || visited.has(obj)) {
+              if (typeof obj !== 'object' || obj === null || visited.has(obj)) {
                 return;
               }
               visited.add(obj);
@@ -155,7 +140,7 @@ export class Validator {
                 targetedErrors.push({
                   instancePath: path,
                   message: `Unknown or hallucinated component type '${componentName}'`,
-                  params: { component: componentName }
+                  params: {component: componentName},
                 });
                 isValid = true; // prevents further noise collection, we already handled it
               }
@@ -165,7 +150,7 @@ export class Validator {
                   // Prepend the base path so the error correctly identifies where in the message it occurred
                   targetedErrors.push({
                     ...err,
-                    instancePath: `${path}${err.instancePath}`
+                    instancePath: `${path}${err.instancePath}`,
                   });
                 });
               }
@@ -179,7 +164,10 @@ export class Validator {
 
               // If this error happened inside a path we already handled, drop it
               for (const handledPath of handledPaths) {
-                if (err.instancePath === handledPath || err.instancePath.startsWith(`${handledPath}/`)) {
+                if (
+                  err.instancePath === handledPath ||
+                  err.instancePath.startsWith(`${handledPath}/`)
+                ) {
                   return false;
                 }
               }
@@ -207,15 +195,18 @@ export class Validator {
 
                 let msg = `${err.instancePath}${componentNameStr} ${err.message}`;
                 if (err.params && Object.keys(err.params).length > 0) {
-                  msg += " (\n";
+                  msg += ' (\n';
                   for (const [key, value] of Object.entries(err.params)) {
-                    const formattedValue = typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value);
+                    const formattedValue =
+                      typeof value === 'object' && value !== null
+                        ? JSON.stringify(value)
+                        : String(value);
                     msg += `    ${key}: ${formattedValue}\n`;
                   }
-                  msg += "  )";
+                  msg += '  )';
                 }
                 return msg;
-              })
+              }),
             );
           }
         }
@@ -239,34 +230,26 @@ export class Validator {
       });
     }
 
-    logger.info(
-      `Phase 2: Validation Complete. Passed: ${passedCount}, Failed: ${failedCount}`,
-    );
+    logger.info(`Phase 2: Validation Complete. Passed: ${passedCount}, Failed: ${failedCount}`);
     return validatedResults;
   }
 
   private saveFailure(result: GeneratedResult, errors: string[]) {
     if (!this.outputDir) return;
-    const modelDir = path.join(
-      this.outputDir,
-      `output-${result.modelName.replace(/[\/:]/g, "_")}`,
-    );
-    const detailsDir = path.join(modelDir, "details");
+    const modelDir = path.join(this.outputDir, `output-${result.modelName.replace(/[\/:]/g, '_')}`);
+    const detailsDir = path.join(modelDir, 'details');
     const failureData = {
       pass: false,
-      reason: "Schema validation failure",
-      issues: errors.map((e) => ({
+      reason: 'Schema validation failure',
+      issues: errors.map(e => ({
         issue: e,
-        severity: "criticalSchema" as IssueSeverity,
+        severity: 'criticalSchema' as IssueSeverity,
       })),
-      overallSeverity: "criticalSchema" as IssueSeverity,
+      overallSeverity: 'criticalSchema' as IssueSeverity,
     };
 
     fs.writeFileSync(
-      path.join(
-        detailsDir,
-        `${result.prompt.name}.${result.runNumber}.failed.yaml`,
-      ),
+      path.join(detailsDir, `${result.prompt.name}.${result.runNumber}.failed.yaml`),
       yaml.dump(failureData),
     );
   }
@@ -291,7 +274,7 @@ export class Validator {
         // Check for root component in this message
         if (message.updateComponents.components) {
           for (const comp of message.updateComponents.components) {
-            if (comp.id === "root") {
+            if (comp.id === 'root') {
               hasRootComponent = true;
             }
           }
@@ -306,9 +289,7 @@ export class Validator {
       } else if (message.deleteSurface) {
         this.validateDeleteSurface(message.deleteSurface, errors);
       } else {
-        errors.push(
-          `Unknown message type in output: ${JSON.stringify(message)}`,
-        );
+        errors.push(`Unknown message type in output: ${JSON.stringify(message)}`);
       }
     }
 
@@ -323,7 +304,7 @@ export class Validator {
   }
 
   private validateFunctionCalls(root: any, errors: string[]) {
-    if (!root || typeof root !== "object") return;
+    if (!root || typeof root !== 'object') return;
 
     if (Array.isArray(root)) {
       for (const item of root) {
@@ -335,7 +316,7 @@ export class Validator {
     // Check if it's a FunctionCall
     if (
       root.call &&
-      typeof root.call === "string" &&
+      typeof root.call === 'string' &&
       (Object.keys(root).length === 2 || Object.keys(root).length === 3)
     ) {
       const functionName = root.call;
@@ -362,7 +343,7 @@ export class Validator {
     if (data.catalogId === undefined) {
       errors.push("createSurface must have a 'catalogId' property.");
     }
-    const allowed = ["surfaceId", "catalogId"];
+    const allowed = ['surfaceId', 'catalogId'];
     for (const key in data) {
       if (!allowed.includes(key)) {
         errors.push(`createSurface has unexpected property: ${key}`);
@@ -374,7 +355,7 @@ export class Validator {
     if (data.surfaceId === undefined) {
       errors.push("DeleteSurface must have a 'surfaceId' property.");
     }
-    const allowed = ["surfaceId"];
+    const allowed = ['surfaceId'];
     for (const key in data) {
       if (!allowed.includes(key)) {
         errors.push(`DeleteSurface has unexpected property: ${key}`);
@@ -404,8 +385,7 @@ export class Validator {
       // Smart Component Validation
       if (this.ajv && c.component) {
         const componentType = c.component;
-        const schemaUri =
-          "https://a2ui.org/specification/v0_9/basic_catalog.json";
+        const schemaUri = 'https://a2ui.org/specification/v0_9/basic_catalog.json';
 
         const defRef = `${schemaUri}#/components/${componentType}`;
 
@@ -414,9 +394,7 @@ export class Validator {
           errors.push(
             ...(this.ajv.errors || []).map(
               (err: any) =>
-                `${err.instancePath} ${err.message} (in component '${
-                  c.id || "unknown"
-                }')`,
+                `${err.instancePath} ${err.message} (in component '${c.id || 'unknown'}')`,
             ),
           );
         }
@@ -436,11 +414,7 @@ export class Validator {
     // If path is missing and value is missing, it deletes the entire root (valid but rare).
   }
 
-  private validateComponent(
-    component: any,
-    allIds: Set<string>,
-    errors: string[],
-  ) {
+  private validateComponent(component: any, allIds: Set<string>, errors: string[]) {
     const id = component.id;
     if (!id) {
       errors.push(`Component is missing an 'id'.`);
@@ -448,7 +422,7 @@ export class Validator {
     }
 
     const componentType = component.component;
-    if (!componentType || typeof componentType !== "string") {
+    if (!componentType || typeof componentType !== 'string') {
       errors.push(`Component '${id}' is missing 'component' property.`);
       return;
     }
@@ -459,44 +433,39 @@ export class Validator {
     const checkRefs = (ids: (string | undefined)[]) => {
       for (const id of ids) {
         if (id && !allIds.has(id)) {
-          errors.push(
-            `Component ${JSON.stringify(id)} references non-existent component ID.`,
-          );
+          errors.push(`Component ${JSON.stringify(id)} references non-existent component ID.`);
         }
       }
     };
 
     switch (componentType) {
-      case "Row":
-      case "Column":
-      case "List":
+      case 'Row':
+      case 'Column':
+      case 'List':
         if (component.children) {
           if (Array.isArray(component.children)) {
             checkRefs(component.children);
-          } else if (
-            typeof component.children === "object" &&
-            component.children !== null
-          ) {
+          } else if (typeof component.children === 'object' && component.children !== null) {
             if (component.children.componentId) {
               checkRefs([component.children.componentId]);
             }
           }
         }
         break;
-      case "Card":
+      case 'Card':
         checkRefs([component.child]);
         break;
-      case "Tabs":
+      case 'Tabs':
         if (component.tabs && Array.isArray(component.tabs)) {
           component.tabs.forEach((tab: any) => {
             checkRefs([tab.child]);
           });
         }
         break;
-      case "Modal":
+      case 'Modal':
         checkRefs([component.trigger, component.content]);
         break;
-      case "Button":
+      case 'Button':
         checkRefs([component.child]);
         break;
     }
diff --git a/specification/v0_9/eval/tsconfig.json b/specification/v0_9/eval/tsconfig.json
index cb2bc5954..12f02b5f9 100644
--- a/specification/v0_9/eval/tsconfig.json
+++ b/specification/v0_9/eval/tsconfig.json
@@ -9,4 +9,4 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
   }
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/basic_catalog.json b/specification/v0_9/json/basic_catalog.json
index ca4d2d05f..858a189ad 100644
--- a/specification/v0_9/json/basic_catalog.json
+++ b/specification/v0_9/json/basic_catalog.json
@@ -68,14 +68,7 @@
             "variant": {
               "type": "string",
               "description": "A hint for the image size and style.",
-              "enum": [
-                "icon",
-                "avatar",
-                "smallFeature",
-                "mediumFeature",
-                "largeFeature",
-                "header"
-              ],
+              "enum": ["icon", "avatar", "smallFeature", "mediumFeature", "largeFeature", "header"],
               "default": "mediumFeature"
             }
           },
diff --git a/specification/v0_9/json/catalogs/basic/examples/01_flight-status.json b/specification/v0_9/json/catalogs/basic/examples/01_flight-status.json
index 6789e35dd..4654ace2e 100644
--- a/specification/v0_9/json/catalogs/basic/examples/01_flight-status.json
+++ b/specification/v0_9/json/catalogs/basic/examples/01_flight-status.json
@@ -23,31 +23,20 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header-row",
-              "route-row",
-              "divider",
-              "times-row"
-            ],
+            "children": ["header-row", "route-row", "divider", "times-row"],
             "align": "stretch"
           },
           {
             "id": "header-row",
             "component": "Row",
-            "children": [
-              "header-left",
-              "date"
-            ],
+            "children": ["header-left", "date"],
             "justify": "spaceBetween",
             "align": "center"
           },
           {
             "id": "header-left",
             "component": "Row",
-            "children": [
-              "flight-indicator",
-              "flight-number"
-            ],
+            "children": ["flight-indicator", "flight-number"],
             "align": "center"
           },
           {
@@ -81,11 +70,7 @@
           {
             "id": "route-row",
             "component": "Row",
-            "children": [
-              "origin",
-              "arrow",
-              "destination"
-            ],
+            "children": ["origin", "arrow", "destination"],
             "align": "center"
           },
           {
@@ -117,20 +102,13 @@
           {
             "id": "times-row",
             "component": "Row",
-            "children": [
-              "departure-col",
-              "status-col",
-              "arrival-col"
-            ],
+            "children": ["departure-col", "status-col", "arrival-col"],
             "justify": "spaceBetween"
           },
           {
             "id": "departure-col",
             "component": "Column",
-            "children": [
-              "departure-label",
-              "departure-time"
-            ],
+            "children": ["departure-label", "departure-time"],
             "align": "start"
           },
           {
@@ -157,10 +135,7 @@
           {
             "id": "status-col",
             "component": "Column",
-            "children": [
-              "status-label",
-              "status-value"
-            ],
+            "children": ["status-label", "status-value"],
             "align": "center"
           },
           {
@@ -180,10 +155,7 @@
           {
             "id": "arrival-col",
             "component": "Column",
-            "children": [
-              "arrival-label",
-              "arrival-time"
-            ],
+            "children": ["arrival-label", "arrival-time"],
             "align": "end"
           },
           {
@@ -226,4 +198,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/02_email-compose.json b/specification/v0_9/json/catalogs/basic/examples/02_email-compose.json
index 3838a79a9..c50f0a088 100644
--- a/specification/v0_9/json/catalogs/basic/examples/02_email-compose.json
+++ b/specification/v0_9/json/catalogs/basic/examples/02_email-compose.json
@@ -23,22 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "from-row",
-              "to-row",
-              "subject-row",
-              "divider",
-              "message",
-              "actions"
-            ]
+            "children": ["from-row", "to-row", "subject-row", "divider", "message", "actions"]
           },
           {
             "id": "from-row",
             "component": "Row",
-            "children": [
-              "from-label",
-              "from-value"
-            ],
+            "children": ["from-label", "from-value"],
             "align": "center"
           },
           {
@@ -58,10 +48,7 @@
           {
             "id": "to-row",
             "component": "Row",
-            "children": [
-              "to-label",
-              "to-value"
-            ],
+            "children": ["to-label", "to-value"],
             "align": "center"
           },
           {
@@ -81,10 +68,7 @@
           {
             "id": "subject-row",
             "component": "Row",
-            "children": [
-              "subject-label",
-              "subject-value"
-            ],
+            "children": ["subject-label", "subject-value"],
             "align": "center"
           },
           {
@@ -108,12 +92,7 @@
           {
             "id": "message",
             "component": "Column",
-            "children": [
-              "greeting",
-              "body-text",
-              "closing",
-              "signature"
-            ]
+            "children": ["greeting", "body-text", "closing", "signature"]
           },
           {
             "id": "greeting",
@@ -150,10 +129,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "send-btn",
-              "discard-btn"
-            ]
+            "children": ["send-btn", "discard-btn"]
           },
           {
             "id": "send-btn-text",
@@ -206,4 +182,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/03_calendar-day.json b/specification/v0_9/json/catalogs/basic/examples/03_calendar-day.json
index fb29644c8..ccac8b6e2 100644
--- a/specification/v0_9/json/catalogs/basic/examples/03_calendar-day.json
+++ b/specification/v0_9/json/catalogs/basic/examples/03_calendar-day.json
@@ -23,27 +23,17 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header-row",
-              "divider",
-              "actions"
-            ]
+            "children": ["header-row", "divider", "actions"]
           },
           {
             "id": "header-row",
             "component": "Row",
-            "children": [
-              "date-col",
-              "events-col"
-            ]
+            "children": ["date-col", "events-col"]
           },
           {
             "id": "date-col",
             "component": "Column",
-            "children": [
-              "day-name",
-              "day-number"
-            ],
+            "children": ["day-name", "day-number"],
             "align": "start"
           },
           {
@@ -87,10 +77,7 @@
           {
             "id": "event-template",
             "component": "Column",
-            "children": [
-              "event-title",
-              "event-time"
-            ]
+            "children": ["event-title", "event-time"]
           },
           {
             "id": "event-title",
@@ -115,10 +102,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "add-btn",
-              "discard-btn"
-            ]
+            "children": ["add-btn", "discard-btn"]
           },
           {
             "id": "add-btn-text",
@@ -179,4 +163,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/04_weather-current.json b/specification/v0_9/json/catalogs/basic/examples/04_weather-current.json
index 7e434bdbf..eb8777424 100644
--- a/specification/v0_9/json/catalogs/basic/examples/04_weather-current.json
+++ b/specification/v0_9/json/catalogs/basic/examples/04_weather-current.json
@@ -23,21 +23,13 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "temp-row",
-              "location",
-              "description",
-              "forecast-row"
-            ],
+            "children": ["temp-row", "location", "description", "forecast-row"],
             "align": "center"
           },
           {
             "id": "temp-row",
             "component": "Row",
-            "children": [
-              "temp-high",
-              "temp-low"
-            ],
+            "children": ["temp-high", "temp-low"],
             "align": "start"
           },
           {
@@ -92,11 +84,7 @@
           {
             "id": "forecast-day-template",
             "component": "Column",
-            "children": [
-              "day-name",
-              "day-icon",
-              "day-temp"
-            ],
+            "children": ["day-name", "day-icon", "day-temp"],
             "align": "center"
           },
           {
@@ -177,4 +165,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/05_product-card.json b/specification/v0_9/json/catalogs/basic/examples/05_product-card.json
index 55b2061ab..e9b0b4841 100644
--- a/specification/v0_9/json/catalogs/basic/examples/05_product-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/05_product-card.json
@@ -23,10 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "image",
-              "details"
-            ]
+            "children": ["image", "details"]
           },
           {
             "id": "image",
@@ -39,12 +36,7 @@
           {
             "id": "details",
             "component": "Column",
-            "children": [
-              "name",
-              "rating-row",
-              "price-row",
-              "actions"
-            ]
+            "children": ["name", "rating-row", "price-row", "actions"]
           },
           {
             "id": "name",
@@ -57,10 +49,7 @@
           {
             "id": "rating-row",
             "component": "Row",
-            "children": [
-              "stars",
-              "reviews"
-            ],
+            "children": ["stars", "reviews"],
             "align": "center"
           },
           {
@@ -86,10 +75,7 @@
           {
             "id": "price-row",
             "component": "Row",
-            "children": [
-              "price",
-              "original-price"
-            ],
+            "children": ["price", "original-price"],
             "align": "start"
           },
           {
@@ -125,9 +111,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "add-cart-btn"
-            ]
+            "children": ["add-cart-btn"]
           },
           {
             "id": "add-cart-btn-text",
@@ -163,4 +147,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/06_music-player.json b/specification/v0_9/json/catalogs/basic/examples/06_music-player.json
index 7aa2ec613..13bb58efc 100644
--- a/specification/v0_9/json/catalogs/basic/examples/06_music-player.json
+++ b/specification/v0_9/json/catalogs/basic/examples/06_music-player.json
@@ -23,13 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "album-art",
-              "track-info",
-              "progress",
-              "time-row",
-              "controls"
-            ],
+            "children": ["album-art", "track-info", "progress", "time-row", "controls"],
             "align": "center"
           },
           {
@@ -43,10 +37,7 @@
           {
             "id": "track-info",
             "component": "Column",
-            "children": [
-              "song-title",
-              "artist"
-            ],
+            "children": ["song-title", "artist"],
             "align": "center"
           },
           {
@@ -76,10 +67,7 @@
           {
             "id": "time-row",
             "component": "Row",
-            "children": [
-              "current-time",
-              "total-time"
-            ],
+            "children": ["current-time", "total-time"],
             "justify": "spaceBetween"
           },
           {
@@ -101,11 +89,7 @@
           {
             "id": "controls",
             "component": "Row",
-            "children": [
-              "prev-btn",
-              "play-btn",
-              "next-btn"
-            ],
+            "children": ["prev-btn", "play-btn", "next-btn"],
             "justify": "center"
           },
           {
@@ -178,4 +162,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/07_task-card.json b/specification/v0_9/json/catalogs/basic/examples/07_task-card.json
index 8343f7a55..bfccc16b3 100644
--- a/specification/v0_9/json/catalogs/basic/examples/07_task-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/07_task-card.json
@@ -23,11 +23,7 @@
           {
             "id": "main-row",
             "component": "Row",
-            "children": [
-              "status-checkbox",
-              "content",
-              "priority"
-            ],
+            "children": ["status-checkbox", "content", "priority"],
             "align": "start"
           },
           {
@@ -41,11 +37,7 @@
           {
             "id": "content",
             "component": "Column",
-            "children": [
-              "title",
-              "description",
-              "meta-row"
-            ]
+            "children": ["title", "description", "meta-row"]
           },
           {
             "id": "title",
@@ -66,10 +58,7 @@
           {
             "id": "meta-row",
             "component": "Row",
-            "children": [
-              "due-date-input",
-              "project"
-            ],
+            "children": ["due-date-input", "project"],
             "align": "center"
           },
           {
@@ -115,4 +104,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/08_user-profile.json b/specification/v0_9/json/catalogs/basic/examples/08_user-profile.json
index c36976ee7..7255cc518 100644
--- a/specification/v0_9/json/catalogs/basic/examples/08_user-profile.json
+++ b/specification/v0_9/json/catalogs/basic/examples/08_user-profile.json
@@ -23,13 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "info",
-              "bio",
-              "stats-row",
-              "follow-btn"
-            ],
+            "children": ["header", "info", "bio", "stats-row", "follow-btn"],
             "align": "center"
           },
           {
@@ -44,10 +38,7 @@
           {
             "id": "info",
             "component": "Column",
-            "children": [
-              "name",
-              "username"
-            ],
+            "children": ["name", "username"],
             "align": "center"
           },
           {
@@ -77,20 +68,13 @@
           {
             "id": "stats-row",
             "component": "Row",
-            "children": [
-              "followers-col",
-              "following-col",
-              "posts-col"
-            ],
+            "children": ["followers-col", "following-col", "posts-col"],
             "justify": "spaceAround"
           },
           {
             "id": "followers-col",
             "component": "Column",
-            "children": [
-              "followers-count",
-              "followers-label"
-            ],
+            "children": ["followers-count", "followers-label"],
             "align": "center"
           },
           {
@@ -116,10 +100,7 @@
           {
             "id": "following-col",
             "component": "Column",
-            "children": [
-              "following-count",
-              "following-label"
-            ],
+            "children": ["following-count", "following-label"],
             "align": "center"
           },
           {
@@ -145,10 +126,7 @@
           {
             "id": "posts-col",
             "component": "Column",
-            "children": [
-              "posts-count",
-              "posts-label"
-            ],
+            "children": ["posts-count", "posts-label"],
             "align": "center"
           },
           {
@@ -209,4 +187,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/09_login-form.json b/specification/v0_9/json/catalogs/basic/examples/09_login-form.json
index 6a1de7078..c32f1f1c9 100644
--- a/specification/v0_9/json/catalogs/basic/examples/09_login-form.json
+++ b/specification/v0_9/json/catalogs/basic/examples/09_login-form.json
@@ -211,4 +211,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/10_notification-permission.json b/specification/v0_9/json/catalogs/basic/examples/10_notification-permission.json
index 996e5d97a..f12994a3b 100644
--- a/specification/v0_9/json/catalogs/basic/examples/10_notification-permission.json
+++ b/specification/v0_9/json/catalogs/basic/examples/10_notification-permission.json
@@ -23,12 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "icon",
-              "title",
-              "description",
-              "actions"
-            ],
+            "children": ["icon", "title", "description", "actions"],
             "align": "center"
           },
           {
@@ -57,10 +52,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "yes-btn",
-              "no-btn"
-            ],
+            "children": ["yes-btn", "no-btn"],
             "justify": "center"
           },
           {
@@ -110,4 +102,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/11_purchase-complete.json b/specification/v0_9/json/catalogs/basic/examples/11_purchase-complete.json
index 7e1e30d21..d10c196ba 100644
--- a/specification/v0_9/json/catalogs/basic/examples/11_purchase-complete.json
+++ b/specification/v0_9/json/catalogs/basic/examples/11_purchase-complete.json
@@ -47,10 +47,7 @@
           {
             "id": "product-row",
             "component": "Row",
-            "children": [
-              "product-image",
-              "product-info"
-            ],
+            "children": ["product-image", "product-info"],
             "align": "center"
           },
           {
@@ -64,10 +61,7 @@
           {
             "id": "product-info",
             "component": "Column",
-            "children": [
-              "product-name",
-              "product-price"
-            ]
+            "children": ["product-name", "product-price"]
           },
           {
             "id": "product-name",
@@ -99,18 +93,12 @@
           {
             "id": "details-col",
             "component": "Column",
-            "children": [
-              "delivery-row",
-              "seller-row"
-            ]
+            "children": ["delivery-row", "seller-row"]
           },
           {
             "id": "delivery-row",
             "component": "Row",
-            "children": [
-              "delivery-icon",
-              "delivery-text"
-            ],
+            "children": ["delivery-icon", "delivery-text"],
             "align": "center"
           },
           {
@@ -129,10 +117,7 @@
           {
             "id": "seller-row",
             "component": "Row",
-            "children": [
-              "seller-label",
-              "seller-name"
-            ]
+            "children": ["seller-label", "seller-name"]
           },
           {
             "id": "seller-label",
@@ -181,4 +166,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/12_chat-message.json b/specification/v0_9/json/catalogs/basic/examples/12_chat-message.json
index b98d1f6de..de4c91a41 100644
--- a/specification/v0_9/json/catalogs/basic/examples/12_chat-message.json
+++ b/specification/v0_9/json/catalogs/basic/examples/12_chat-message.json
@@ -23,19 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "divider",
-              "messages-list"
-            ]
+            "children": ["header", "divider", "messages-list"]
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "channel-icon",
-              "channel-name"
-            ],
+            "children": ["channel-icon", "channel-name"],
             "align": "center"
           },
           {
@@ -67,10 +60,7 @@
           {
             "id": "message-template",
             "component": "Row",
-            "children": [
-              "msg-avatar",
-              "msg-content"
-            ],
+            "children": ["msg-avatar", "msg-content"],
             "align": "start"
           },
           {
@@ -85,18 +75,12 @@
           {
             "id": "msg-content",
             "component": "Column",
-            "children": [
-              "msg-header",
-              "msg-text"
-            ]
+            "children": ["msg-header", "msg-text"]
           },
           {
             "id": "msg-header",
             "component": "Row",
-            "children": [
-              "msg-username",
-              "msg-time"
-            ],
+            "children": ["msg-username", "msg-time"],
             "align": "center"
           },
           {
@@ -157,4 +141,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/13_coffee-order.json b/specification/v0_9/json/catalogs/basic/examples/13_coffee-order.json
index 21ddefb38..966e48f5d 100644
--- a/specification/v0_9/json/catalogs/basic/examples/13_coffee-order.json
+++ b/specification/v0_9/json/catalogs/basic/examples/13_coffee-order.json
@@ -23,21 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "items-list",
-              "divider",
-              "totals",
-              "actions"
-            ]
+            "children": ["header", "items-list", "divider", "totals", "actions"]
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "coffee-icon",
-              "store-name"
-            ],
+            "children": ["coffee-icon", "store-name"],
             "align": "center"
           },
           {
@@ -64,20 +55,14 @@
           {
             "id": "order-item-template",
             "component": "Row",
-            "children": [
-              "item-details",
-              "item-price"
-            ],
+            "children": ["item-details", "item-price"],
             "justify": "spaceBetween",
             "align": "start"
           },
           {
             "id": "item-details",
             "component": "Column",
-            "children": [
-              "item-name",
-              "item-size"
-            ]
+            "children": ["item-name", "item-size"]
           },
           {
             "id": "item-name",
@@ -117,19 +102,12 @@
           {
             "id": "totals",
             "component": "Column",
-            "children": [
-              "subtotal-row",
-              "tax-row",
-              "total-row"
-            ]
+            "children": ["subtotal-row", "tax-row", "total-row"]
           },
           {
             "id": "subtotal-row",
             "component": "Row",
-            "children": [
-              "subtotal-label",
-              "subtotal-value"
-            ],
+            "children": ["subtotal-label", "subtotal-value"],
             "justify": "spaceBetween"
           },
           {
@@ -156,10 +134,7 @@
           {
             "id": "tax-row",
             "component": "Row",
-            "children": [
-              "tax-label",
-              "tax-value"
-            ],
+            "children": ["tax-label", "tax-value"],
             "justify": "spaceBetween"
           },
           {
@@ -186,10 +161,7 @@
           {
             "id": "total-row",
             "component": "Row",
-            "children": [
-              "total-label",
-              "total-value"
-            ],
+            "children": ["total-label", "total-value"],
             "justify": "spaceBetween"
           },
           {
@@ -216,10 +188,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "purchase-btn",
-              "add-btn"
-            ]
+            "children": ["purchase-btn", "add-btn"]
           },
           {
             "id": "purchase-btn-text",
@@ -274,11 +243,11 @@
               "price": 4.25
             }
           ],
-          "subtotal": 10.70,
+          "subtotal": 10.7,
           "tax": 0.96,
           "total": 11.66
         }
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/14_sports-player.json b/specification/v0_9/json/catalogs/basic/examples/14_sports-player.json
index 060d45636..e68474519 100644
--- a/specification/v0_9/json/catalogs/basic/examples/14_sports-player.json
+++ b/specification/v0_9/json/catalogs/basic/examples/14_sports-player.json
@@ -23,12 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "player-image",
-              "player-info",
-              "divider",
-              "stats-row"
-            ],
+            "children": ["player-image", "player-info", "divider", "stats-row"],
             "align": "center"
           },
           {
@@ -42,10 +37,7 @@
           {
             "id": "player-info",
             "component": "Column",
-            "children": [
-              "player-name",
-              "player-details"
-            ],
+            "children": ["player-name", "player-details"],
             "align": "center"
           },
           {
@@ -59,10 +51,7 @@
           {
             "id": "player-details",
             "component": "Row",
-            "children": [
-              "player-number",
-              "player-team"
-            ],
+            "children": ["player-number", "player-team"],
             "align": "center"
           },
           {
@@ -88,20 +77,13 @@
           {
             "id": "stats-row",
             "component": "Row",
-            "children": [
-              "stat1",
-              "stat2",
-              "stat3"
-            ],
+            "children": ["stat1", "stat2", "stat3"],
             "justify": "spaceAround"
           },
           {
             "id": "stat1",
             "component": "Column",
-            "children": [
-              "stat1-value",
-              "stat1-label"
-            ],
+            "children": ["stat1-value", "stat1-label"],
             "align": "center"
           },
           {
@@ -123,10 +105,7 @@
           {
             "id": "stat2",
             "component": "Column",
-            "children": [
-              "stat2-value",
-              "stat2-label"
-            ],
+            "children": ["stat2-value", "stat2-label"],
             "align": "center"
           },
           {
@@ -148,10 +127,7 @@
           {
             "id": "stat3",
             "component": "Column",
-            "children": [
-              "stat3-value",
-              "stat3-label"
-            ],
+            "children": ["stat3-value", "stat3-label"],
             "align": "center"
           },
           {
@@ -198,4 +174,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/15_account-balance.json b/specification/v0_9/json/catalogs/basic/examples/15_account-balance.json
index 4e6f630ee..486266da7 100644
--- a/specification/v0_9/json/catalogs/basic/examples/15_account-balance.json
+++ b/specification/v0_9/json/catalogs/basic/examples/15_account-balance.json
@@ -23,21 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "balance",
-              "updated",
-              "divider",
-              "actions"
-            ]
+            "children": ["header", "balance", "updated", "divider", "actions"]
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "account-icon",
-              "account-name"
-            ],
+            "children": ["account-icon", "account-name"],
             "align": "center"
           },
           {
@@ -83,10 +74,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "transfer-btn",
-              "pay-btn"
-            ]
+            "children": ["transfer-btn", "pay-btn"]
           },
           {
             "id": "transfer-btn-text",
@@ -135,4 +123,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/16_workout-summary.json b/specification/v0_9/json/catalogs/basic/examples/16_workout-summary.json
index 7f7dd4875..17e2ed517 100644
--- a/specification/v0_9/json/catalogs/basic/examples/16_workout-summary.json
+++ b/specification/v0_9/json/catalogs/basic/examples/16_workout-summary.json
@@ -23,20 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "divider",
-              "metrics-row",
-              "date"
-            ]
+            "children": ["header", "divider", "metrics-row", "date"]
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "workout-icon",
-              "title"
-            ],
+            "children": ["workout-icon", "title"],
             "align": "center"
           },
           {
@@ -59,20 +51,13 @@
           {
             "id": "metrics-row",
             "component": "Row",
-            "children": [
-              "duration-col",
-              "calories-col",
-              "distance-col"
-            ],
+            "children": ["duration-col", "calories-col", "distance-col"],
             "justify": "spaceAround"
           },
           {
             "id": "duration-col",
             "component": "Column",
-            "children": [
-              "duration-value",
-              "duration-label"
-            ],
+            "children": ["duration-value", "duration-label"],
             "align": "center"
           },
           {
@@ -92,10 +77,7 @@
           {
             "id": "calories-col",
             "component": "Column",
-            "children": [
-              "calories-value",
-              "calories-label"
-            ],
+            "children": ["calories-value", "calories-label"],
             "align": "center"
           },
           {
@@ -121,10 +103,7 @@
           {
             "id": "distance-col",
             "component": "Column",
-            "children": [
-              "distance-value",
-              "distance-label"
-            ],
+            "children": ["distance-value", "distance-label"],
             "align": "center"
           },
           {
@@ -178,4 +157,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/17_event-detail.json b/specification/v0_9/json/catalogs/basic/examples/17_event-detail.json
index 193a4371c..de5e807ae 100644
--- a/specification/v0_9/json/catalogs/basic/examples/17_event-detail.json
+++ b/specification/v0_9/json/catalogs/basic/examples/17_event-detail.json
@@ -23,14 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "title",
-              "time-row",
-              "location-row",
-              "description",
-              "divider",
-              "actions"
-            ]
+            "children": ["title", "time-row", "location-row", "description", "divider", "actions"]
           },
           {
             "id": "title",
@@ -43,10 +36,7 @@
           {
             "id": "time-row",
             "component": "Row",
-            "children": [
-              "time-icon",
-              "time-text"
-            ],
+            "children": ["time-icon", "time-text"],
             "align": "center"
           },
           {
@@ -69,10 +59,7 @@
           {
             "id": "location-row",
             "component": "Row",
-            "children": [
-              "location-icon",
-              "location-text"
-            ],
+            "children": ["location-icon", "location-text"],
             "align": "center"
           },
           {
@@ -103,10 +90,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "accept-btn",
-              "decline-btn"
-            ]
+            "children": ["accept-btn", "decline-btn"]
           },
           {
             "id": "accept-btn-text",
@@ -157,4 +141,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/18_track-list.json b/specification/v0_9/json/catalogs/basic/examples/18_track-list.json
index 9324b7929..73b9f391d 100644
--- a/specification/v0_9/json/catalogs/basic/examples/18_track-list.json
+++ b/specification/v0_9/json/catalogs/basic/examples/18_track-list.json
@@ -23,19 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "divider",
-              "tracks-list"
-            ]
+            "children": ["header", "divider", "tracks-list"]
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "playlist-icon",
-              "playlist-name"
-            ],
+            "children": ["playlist-icon", "playlist-name"],
             "align": "center"
           },
           {
@@ -66,12 +59,7 @@
           {
             "id": "track-item-template",
             "component": "Row",
-            "children": [
-              "track-num",
-              "track-art",
-              "track-info",
-              "track-duration"
-            ],
+            "children": ["track-num", "track-art", "track-info", "track-duration"],
             "align": "center"
           },
           {
@@ -99,10 +87,7 @@
           {
             "id": "track-info",
             "component": "Column",
-            "children": [
-              "track-title",
-              "track-artist"
-            ]
+            "children": ["track-title", "track-artist"]
           },
           {
             "id": "track-title",
@@ -164,4 +149,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/19_software-purchase.json b/specification/v0_9/json/catalogs/basic/examples/19_software-purchase.json
index 5318be0fe..334c4bd8a 100644
--- a/specification/v0_9/json/catalogs/basic/examples/19_software-purchase.json
+++ b/specification/v0_9/json/catalogs/basic/examples/19_software-purchase.json
@@ -54,18 +54,12 @@
           {
             "id": "options",
             "component": "Column",
-            "children": [
-              "seats-row",
-              "period-row"
-            ]
+            "children": ["seats-row", "period-row"]
           },
           {
             "id": "seats-row",
             "component": "Row",
-            "children": [
-              "seats-label",
-              "seats-value"
-            ],
+            "children": ["seats-label", "seats-value"],
             "justify": "spaceBetween",
             "align": "center"
           },
@@ -86,10 +80,7 @@
           {
             "id": "period-row",
             "component": "Row",
-            "children": [
-              "period-label",
-              "period-picker"
-            ],
+            "children": ["period-label", "period-picker"],
             "justify": "spaceBetween",
             "align": "center"
           },
@@ -125,10 +116,7 @@
           {
             "id": "total-row",
             "component": "Row",
-            "children": [
-              "total-label",
-              "total-value"
-            ],
+            "children": ["total-label", "total-value"],
             "justify": "spaceBetween",
             "align": "center"
           },
@@ -153,10 +141,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "confirm-btn",
-              "cancel-btn"
-            ]
+            "children": ["confirm-btn", "cancel-btn"]
           },
           {
             "id": "confirm-btn-text",
@@ -201,9 +186,9 @@
           "productName": "Design Suite Pro",
           "seats": "10 seats",
           "billingPeriod": ["annual"],
-          "total": 1188.00
+          "total": 1188.0
         }
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/20_restaurant-card.json b/specification/v0_9/json/catalogs/basic/examples/20_restaurant-card.json
index f2973790f..8b5359f41 100644
--- a/specification/v0_9/json/catalogs/basic/examples/20_restaurant-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/20_restaurant-card.json
@@ -23,10 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "restaurant-image",
-              "content"
-            ]
+            "children": ["restaurant-image", "content"]
           },
           {
             "id": "restaurant-image",
@@ -39,20 +36,12 @@
           {
             "id": "content",
             "component": "Column",
-            "children": [
-              "name-row",
-              "cuisine",
-              "rating-row",
-              "details-row"
-            ]
+            "children": ["name-row", "cuisine", "rating-row", "details-row"]
           },
           {
             "id": "name-row",
             "component": "Row",
-            "children": [
-              "restaurant-name",
-              "price-range"
-            ],
+            "children": ["restaurant-name", "price-range"],
             "justify": "spaceBetween",
             "align": "center"
           },
@@ -83,11 +72,7 @@
           {
             "id": "rating-row",
             "component": "Row",
-            "children": [
-              "star-icon",
-              "rating",
-              "reviews"
-            ],
+            "children": ["star-icon", "rating", "reviews"],
             "align": "center"
           },
           {
@@ -114,10 +99,7 @@
           {
             "id": "details-row",
             "component": "Row",
-            "children": [
-              "distance",
-              "delivery-time"
-            ]
+            "children": ["distance", "delivery-time"]
           },
           {
             "id": "distance",
@@ -155,4 +137,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/21_shipping-status.json b/specification/v0_9/json/catalogs/basic/examples/21_shipping-status.json
index f1babbe66..33abf6e28 100644
--- a/specification/v0_9/json/catalogs/basic/examples/21_shipping-status.json
+++ b/specification/v0_9/json/catalogs/basic/examples/21_shipping-status.json
@@ -23,21 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "tracking-number",
-              "divider",
-              "steps-list",
-              "eta"
-            ]
+            "children": ["header", "tracking-number", "divider", "steps-list", "eta"]
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "package-icon",
-              "title"
-            ],
+            "children": ["package-icon", "title"],
             "align": "center"
           },
           {
@@ -74,10 +65,7 @@
           {
             "id": "step-item-template",
             "component": "Row",
-            "children": [
-              "step-icon",
-              "step-text"
-            ],
+            "children": ["step-icon", "step-text"],
             "align": "center"
           },
           {
@@ -98,10 +86,7 @@
           {
             "id": "eta",
             "component": "Row",
-            "children": [
-              "eta-icon",
-              "eta-text"
-            ],
+            "children": ["eta-icon", "eta-text"],
             "align": "center"
           },
           {
@@ -149,4 +134,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/22_credit-card.json b/specification/v0_9/json/catalogs/basic/examples/22_credit-card.json
index 11d867357..a7b453957 100644
--- a/specification/v0_9/json/catalogs/basic/examples/22_credit-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/22_credit-card.json
@@ -23,19 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "card-type-row",
-              "card-number",
-              "card-details"
-            ]
+            "children": ["card-type-row", "card-number", "card-details"]
           },
           {
             "id": "card-type-row",
             "component": "Row",
-            "children": [
-              "card-icon",
-              "card-type"
-            ],
+            "children": ["card-icon", "card-type"],
             "justify": "spaceBetween",
             "align": "center"
           },
@@ -63,19 +56,13 @@
           {
             "id": "card-details",
             "component": "Row",
-            "children": [
-              "holder-col",
-              "expiry-col"
-            ],
+            "children": ["holder-col", "expiry-col"],
             "justify": "spaceBetween"
           },
           {
             "id": "holder-col",
             "component": "Column",
-            "children": [
-              "holder-label",
-              "holder-name"
-            ]
+            "children": ["holder-label", "holder-name"]
           },
           {
             "id": "holder-label",
@@ -94,10 +81,7 @@
           {
             "id": "expiry-col",
             "component": "Column",
-            "children": [
-              "expiry-label",
-              "expiry-date"
-            ],
+            "children": ["expiry-label", "expiry-date"],
             "align": "end"
           },
           {
@@ -130,4 +114,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/23_step-counter.json b/specification/v0_9/json/catalogs/basic/examples/23_step-counter.json
index 3a8474b25..96373dff6 100644
--- a/specification/v0_9/json/catalogs/basic/examples/23_step-counter.json
+++ b/specification/v0_9/json/catalogs/basic/examples/23_step-counter.json
@@ -23,22 +23,13 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "steps-display",
-              "goal-text",
-              "divider",
-              "stats-row"
-            ],
+            "children": ["header", "steps-display", "goal-text", "divider", "stats-row"],
             "align": "center"
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "steps-icon",
-              "title"
-            ],
+            "children": ["steps-icon", "title"],
             "align": "center"
           },
           {
@@ -85,19 +76,13 @@
           {
             "id": "stats-row",
             "component": "Row",
-            "children": [
-              "distance-col",
-              "calories-col"
-            ],
+            "children": ["distance-col", "calories-col"],
             "justify": "spaceAround"
           },
           {
             "id": "distance-col",
             "component": "Column",
-            "children": [
-              "distance-value",
-              "distance-label"
-            ],
+            "children": ["distance-value", "distance-label"],
             "align": "center"
           },
           {
@@ -121,10 +106,7 @@
           {
             "id": "calories-col",
             "component": "Column",
-            "children": [
-              "calories-value",
-              "calories-label"
-            ],
+            "children": ["calories-value", "calories-label"],
             "align": "center"
           },
           {
@@ -164,4 +146,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/24_recipe-card.json b/specification/v0_9/json/catalogs/basic/examples/24_recipe-card.json
index 9b5eff354..b01c366cd 100644
--- a/specification/v0_9/json/catalogs/basic/examples/24_recipe-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/24_recipe-card.json
@@ -41,10 +41,7 @@
           {
             "id": "overview-col",
             "component": "Column",
-            "children": [
-              "recipe-image",
-              "overview-content"
-            ]
+            "children": ["recipe-image", "overview-content"]
           },
           {
             "id": "recipe-image",
@@ -57,12 +54,7 @@
           {
             "id": "overview-content",
             "component": "Column",
-            "children": [
-              "title",
-              "rating-row",
-              "times-row",
-              "servings"
-            ]
+            "children": ["title", "rating-row", "times-row", "servings"]
           },
           {
             "id": "title",
@@ -75,11 +67,7 @@
           {
             "id": "rating-row",
             "component": "Row",
-            "children": [
-              "star-icon",
-              "rating",
-              "review-count"
-            ],
+            "children": ["star-icon", "rating", "review-count"],
             "align": "center"
           },
           {
@@ -110,18 +98,12 @@
           {
             "id": "times-row",
             "component": "Row",
-            "children": [
-              "prep-time",
-              "cook-time"
-            ]
+            "children": ["prep-time", "cook-time"]
           },
           {
             "id": "prep-time",
             "component": "Row",
-            "children": [
-              "prep-icon",
-              "prep-text"
-            ],
+            "children": ["prep-icon", "prep-text"],
             "align": "center"
           },
           {
@@ -140,10 +122,7 @@
           {
             "id": "cook-time",
             "component": "Row",
-            "children": [
-              "cook-icon",
-              "cook-text"
-            ],
+            "children": ["cook-icon", "cook-text"],
             "align": "center"
           },
           {
@@ -207,19 +186,19 @@
           "cookTime": "20 min cook",
           "servings": "Serves 4",
           "ingredients": [
-            { "text": "1 cup quinoa" },
-            { "text": "2 cups water" },
-            { "text": "1 cucumber, diced" },
-            { "text": "1 cup cherry tomatoes, halved" }
+            {"text": "1 cup quinoa"},
+            {"text": "2 cups water"},
+            {"text": "1 cucumber, diced"},
+            {"text": "1 cup cherry tomatoes, halved"}
           ],
           "instructions": [
-            { "text": "1. Rinse quinoa and bring to a boil in water." },
-            { "text": "2. Reduce heat and simmer for 15 minutes." },
-            { "text": "3. Fluff with a fork and let cool." },
-            { "text": "4. Mix with diced vegetables." }
+            {"text": "1. Rinse quinoa and bring to a boil in water."},
+            {"text": "2. Reduce heat and simmer for 15 minutes."},
+            {"text": "3. Fluff with a fork and let cool."},
+            {"text": "4. Mix with diced vegetables."}
           ]
         }
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/25_contact-card.json b/specification/v0_9/json/catalogs/basic/examples/25_contact-card.json
index 0123263a5..31e36cabc 100644
--- a/specification/v0_9/json/catalogs/basic/examples/25_contact-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/25_contact-card.json
@@ -23,14 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "avatar-image",
-              "name",
-              "title",
-              "divider",
-              "contact-info",
-              "actions"
-            ],
+            "children": ["avatar-image", "name", "title", "divider", "contact-info", "actions"],
             "align": "center"
           },
           {
@@ -65,19 +58,12 @@
           {
             "id": "contact-info",
             "component": "Column",
-            "children": [
-              "phone-row",
-              "email-row",
-              "location-row"
-            ]
+            "children": ["phone-row", "email-row", "location-row"]
           },
           {
             "id": "phone-row",
             "component": "Row",
-            "children": [
-              "phone-icon",
-              "phone-text"
-            ],
+            "children": ["phone-icon", "phone-text"],
             "align": "center"
           },
           {
@@ -96,10 +82,7 @@
           {
             "id": "email-row",
             "component": "Row",
-            "children": [
-              "email-icon",
-              "email-text"
-            ],
+            "children": ["email-icon", "email-text"],
             "align": "center"
           },
           {
@@ -118,10 +101,7 @@
           {
             "id": "location-row",
             "component": "Row",
-            "children": [
-              "location-icon",
-              "location-text"
-            ],
+            "children": ["location-icon", "location-text"],
             "align": "center"
           },
           {
@@ -140,10 +120,7 @@
           {
             "id": "actions",
             "component": "Row",
-            "children": [
-              "call-btn",
-              "message-btn"
-            ]
+            "children": ["call-btn", "message-btn"]
           },
           {
             "id": "call-btn-text",
@@ -195,4 +172,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/26_podcast-episode.json b/specification/v0_9/json/catalogs/basic/examples/26_podcast-episode.json
index dac189f18..140e46ddd 100644
--- a/specification/v0_9/json/catalogs/basic/examples/26_podcast-episode.json
+++ b/specification/v0_9/json/catalogs/basic/examples/26_podcast-episode.json
@@ -23,10 +23,7 @@
           {
             "id": "main-row",
             "component": "Row",
-            "children": [
-              "artwork",
-              "content"
-            ],
+            "children": ["artwork", "content"],
             "align": "start"
           },
           {
@@ -40,13 +37,7 @@
           {
             "id": "content",
             "component": "Column",
-            "children": [
-              "show-name",
-              "episode-title",
-              "meta-row",
-              "description",
-              "audio-player"
-            ]
+            "children": ["show-name", "episode-title", "meta-row", "description", "audio-player"]
           },
           {
             "id": "show-name",
@@ -67,10 +58,7 @@
           {
             "id": "meta-row",
             "component": "Row",
-            "children": [
-              "duration",
-              "date"
-            ]
+            "children": ["duration", "date"]
           },
           {
             "id": "duration",
@@ -132,4 +120,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/27_stats-card.json b/specification/v0_9/json/catalogs/basic/examples/27_stats-card.json
index 3fed8bf39..36f356544 100644
--- a/specification/v0_9/json/catalogs/basic/examples/27_stats-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/27_stats-card.json
@@ -23,19 +23,12 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header",
-              "value",
-              "trend-row"
-            ]
+            "children": ["header", "value", "trend-row"]
           },
           {
             "id": "header",
             "component": "Row",
-            "children": [
-              "metric-icon",
-              "metric-name"
-            ],
+            "children": ["metric-icon", "metric-name"],
             "align": "center"
           },
           {
@@ -71,10 +64,7 @@
           {
             "id": "trend-row",
             "component": "Row",
-            "children": [
-              "trend-icon",
-              "trend-text"
-            ],
+            "children": ["trend-icon", "trend-text"],
             "align": "center"
           },
           {
@@ -113,4 +103,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/28_countdown-timer.json b/specification/v0_9/json/catalogs/basic/examples/28_countdown-timer.json
index 4793e636b..5739941e3 100644
--- a/specification/v0_9/json/catalogs/basic/examples/28_countdown-timer.json
+++ b/specification/v0_9/json/catalogs/basic/examples/28_countdown-timer.json
@@ -23,11 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "event-name",
-              "countdown-row",
-              "target-date"
-            ],
+            "children": ["event-name", "countdown-row", "target-date"],
             "align": "center"
           },
           {
@@ -41,20 +37,13 @@
           {
             "id": "countdown-row",
             "component": "Row",
-            "children": [
-              "days-col",
-              "hours-col",
-              "minutes-col"
-            ],
+            "children": ["days-col", "hours-col", "minutes-col"],
             "justify": "spaceAround"
           },
           {
             "id": "days-col",
             "component": "Column",
-            "children": [
-              "days-value",
-              "days-label"
-            ],
+            "children": ["days-value", "days-label"],
             "align": "center"
           },
           {
@@ -74,10 +63,7 @@
           {
             "id": "hours-col",
             "component": "Column",
-            "children": [
-              "hours-value",
-              "hours-label"
-            ],
+            "children": ["hours-value", "hours-label"],
             "align": "center"
           },
           {
@@ -97,10 +83,7 @@
           {
             "id": "minutes-col",
             "component": "Column",
-            "children": [
-              "minutes-value",
-              "minutes-label"
-            ],
+            "children": ["minutes-value", "minutes-label"],
             "align": "center"
           },
           {
@@ -149,4 +132,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/29_movie-card.json b/specification/v0_9/json/catalogs/basic/examples/29_movie-card.json
index 96eab4b30..b1c385ca7 100644
--- a/specification/v0_9/json/catalogs/basic/examples/29_movie-card.json
+++ b/specification/v0_9/json/catalogs/basic/examples/29_movie-card.json
@@ -23,11 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "poster",
-              "content",
-              "trailer-modal"
-            ]
+            "children": ["poster", "content", "trailer-modal"]
           },
           {
             "id": "poster",
@@ -40,21 +36,12 @@
           {
             "id": "content",
             "component": "Column",
-            "children": [
-              "title-row",
-              "genre",
-              "rating-row",
-              "runtime",
-              "watch-trailer-btn"
-            ]
+            "children": ["title-row", "genre", "rating-row", "runtime", "watch-trailer-btn"]
           },
           {
             "id": "title-row",
             "component": "Row",
-            "children": [
-              "movie-title",
-              "year"
-            ],
+            "children": ["movie-title", "year"],
             "align": "start"
           },
           {
@@ -84,10 +71,7 @@
           {
             "id": "rating-row",
             "component": "Row",
-            "children": [
-              "star-icon",
-              "rating-value"
-            ],
+            "children": ["star-icon", "rating-value"],
             "align": "center"
           },
           {
@@ -106,10 +90,7 @@
           {
             "id": "runtime",
             "component": "Row",
-            "children": [
-              "time-icon",
-              "runtime-text"
-            ],
+            "children": ["time-icon", "runtime-text"],
             "align": "center"
           },
           {
@@ -172,4 +153,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/30_live-invitation-builder.json b/specification/v0_9/json/catalogs/basic/examples/30_live-invitation-builder.json
index 333a52d26..2895f3573 100644
--- a/specification/v0_9/json/catalogs/basic/examples/30_live-invitation-builder.json
+++ b/specification/v0_9/json/catalogs/basic/examples/30_live-invitation-builder.json
@@ -18,10 +18,7 @@
           {
             "id": "root",
             "component": "Column",
-            "children": [
-              "header",
-              "main-content"
-            ],
+            "children": ["header", "main-content"],
             "align": "stretch"
           },
           {
@@ -33,10 +30,7 @@
           {
             "id": "main-content",
             "component": "Row",
-            "children": [
-              "editor-col",
-              "preview-col"
-            ],
+            "children": ["editor-col", "preview-col"],
             "align": "start"
           },
           {
@@ -89,9 +83,9 @@
             "component": "ChoicePicker",
             "label": "Location",
             "options": [
-              { "label": "Grand Ballroom", "value": "ballroom" },
-              { "label": "Sunset Terrace", "value": "terrace" },
-              { "label": "Garden Pavillion", "value": "garden" }
+              {"label": "Grand Ballroom", "value": "ballroom"},
+              {"label": "Sunset Terrace", "value": "terrace"},
+              {"label": "Garden Pavillion", "value": "garden"}
             ],
             "value": {
               "path": "/event/location"
@@ -102,10 +96,7 @@
           {
             "id": "preview-col",
             "component": "Column",
-            "children": [
-              "preview-title",
-              "invitation-card"
-            ],
+            "children": ["preview-title", "invitation-card"],
             "weight": 1,
             "align": "center"
           },
@@ -149,10 +140,7 @@
           {
             "id": "invite-guest-row",
             "component": "Row",
-            "children": [
-              "invite-for-text",
-              "invite-guest-name"
-            ],
+            "children": ["invite-for-text", "invite-guest-name"],
             "align": "center"
           },
           {
@@ -214,4 +202,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/31_incremental-dashboard.json b/specification/v0_9/json/catalogs/basic/examples/31_incremental-dashboard.json
index 04392cd91..b063f5cb4 100644
--- a/specification/v0_9/json/catalogs/basic/examples/31_incremental-dashboard.json
+++ b/specification/v0_9/json/catalogs/basic/examples/31_incremental-dashboard.json
@@ -17,10 +17,7 @@
           {
             "id": "root",
             "component": "Column",
-            "children": [
-              "header",
-              "content-grid"
-            ],
+            "children": ["header", "content-grid"],
             "align": "stretch"
           },
           {
@@ -32,10 +29,7 @@
           {
             "id": "content-grid",
             "component": "Row",
-            "children": [
-              "left-panel",
-              "right-panel"
-            ]
+            "children": ["left-panel", "right-panel"]
           },
           {
             "id": "left-panel",
@@ -111,7 +105,7 @@
           {
             "id": "log-template",
             "component": "Text",
-            "text": { "path": "message" },
+            "text": {"path": "message"},
             "variant": "caption"
           }
         ]
@@ -123,12 +117,12 @@
         "surfaceId": "gallery-incremental-dashboard",
         "value": {
           "logs": [
-            { "message": "System boot complete." },
-            { "message": "All services healthy." },
-            { "message": "Waiting for user input." }
+            {"message": "System boot complete."},
+            {"message": "All services healthy."},
+            {"message": "Waiting for user input."}
           ]
         }
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/32_advanced-form-validator.json b/specification/v0_9/json/catalogs/basic/examples/32_advanced-form-validator.json
index 9ea75036b..1972ffa5e 100644
--- a/specification/v0_9/json/catalogs/basic/examples/32_advanced-form-validator.json
+++ b/specification/v0_9/json/catalogs/basic/examples/32_advanced-form-validator.json
@@ -49,10 +49,13 @@
             "id": "email-field",
             "component": "TextField",
             "label": "Email Address",
-            "value": { "path": "/formData/email" },
+            "value": {"path": "/formData/email"},
             "checks": [
               {
-                "condition": { "call": "email", "args": { "value": { "path": "/formData/email" } } },
+                "condition": {
+                  "call": "email",
+                  "args": {"value": {"path": "/formData/email"}}
+                },
                 "message": "Invalid email format"
               }
             ]
@@ -61,10 +64,16 @@
             "id": "phone-field",
             "component": "TextField",
             "label": "Phone Number",
-            "value": { "path": "/formData/phone" },
+            "value": {"path": "/formData/phone"},
             "checks": [
               {
-                "condition": { "call": "regex", "args": { "value": { "path": "/formData/phone" }, "pattern": "^\\+?[0-9]{10,15}$" } },
+                "condition": {
+                  "call": "regex",
+                  "args": {
+                    "value": {"path": "/formData/phone"},
+                    "pattern": "^\\+?[0-9]{10,15}$"
+                  }
+                },
                 "message": "Invalid phone format"
               }
             ]
@@ -73,10 +82,13 @@
             "id": "zip-field",
             "component": "TextField",
             "label": "Zip Code",
-            "value": { "path": "/formData/zip" },
+            "value": {"path": "/formData/zip"},
             "checks": [
               {
-                "condition": { "call": "regex", "args": { "value": { "path": "/formData/zip" }, "pattern": "^[0-9]{5}$" } },
+                "condition": {
+                  "call": "regex",
+                  "args": {"value": {"path": "/formData/zip"}, "pattern": "^[0-9]{5}$"}
+                },
                 "message": "Must be exactly 5 digits"
               }
             ]
@@ -85,7 +97,7 @@
             "id": "terms-checkbox",
             "component": "CheckBox",
             "label": "I agree to the terms and conditions",
-            "value": { "path": "/formData/agree" }
+            "value": {"path": "/formData/agree"}
           },
           {
             "id": "submit-btn-text",
@@ -102,17 +114,23 @@
                   "call": "and",
                   "args": {
                     "values": [
-                      { "path": "/formData/agree" },
+                      {"path": "/formData/agree"},
                       {
                         "call": "or",
                         "args": {
                           "values": [
-                            { "call": "required", "args": { "value": { "path": "/formData/email" } } },
-                            { "call": "required", "args": { "value": { "path": "/formData/phone" } } }
+                            {
+                              "call": "required",
+                              "args": {"value": {"path": "/formData/email"}}
+                            },
+                            {
+                              "call": "required",
+                              "args": {"value": {"path": "/formData/phone"}}
+                            }
                           ]
                         }
                       },
-                      { "call": "required", "args": { "value": { "path": "/formData/zip" } } }
+                      {"call": "required", "args": {"value": {"path": "/formData/zip"}}}
                     ]
                   }
                 },
@@ -122,7 +140,7 @@
             "action": {
               "event": {
                 "name": "register",
-                "context": { "data": { "path": "/formData" } }
+                "context": {"data": {"path": "/formData"}}
               }
             }
           }
@@ -145,4 +163,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/33_financial-data-grid.json b/specification/v0_9/json/catalogs/basic/examples/33_financial-data-grid.json
index da3492c7f..9e9c43460 100644
--- a/specification/v0_9/json/catalogs/basic/examples/33_financial-data-grid.json
+++ b/specification/v0_9/json/catalogs/basic/examples/33_financial-data-grid.json
@@ -23,21 +23,13 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "header-row",
-              "grid-list"
-            ],
+            "children": ["header-row", "grid-list"],
             "align": "stretch"
           },
           {
             "id": "header-row",
             "component": "Row",
-            "children": [
-              "col-asset",
-              "col-price",
-              "col-change",
-              "col-market-cap"
-            ],
+            "children": ["col-asset", "col-price", "col-change", "col-market-cap"],
             "align": "center"
           },
           {
@@ -79,12 +71,7 @@
           {
             "id": "row-template",
             "component": "Row",
-            "children": [
-              "asset-info",
-              "asset-price",
-              "asset-change",
-              "asset-market-cap"
-            ],
+            "children": ["asset-info", "asset-price", "asset-change", "asset-market-cap"],
             "align": "center"
           },
           {
@@ -107,13 +94,13 @@
           {
             "id": "asset-name",
             "component": "Text",
-            "text": { "path": "name" },
+            "text": {"path": "name"},
             "variant": "body"
           },
           {
             "id": "asset-symbol",
             "component": "Text",
-            "text": { "path": "symbol" },
+            "text": {"path": "symbol"},
             "variant": "caption"
           },
           {
@@ -121,7 +108,7 @@
             "component": "Text",
             "text": {
               "call": "formatCurrency",
-              "args": { "value": { "path": "price" }, "currency": "USD" },
+              "args": {"value": {"path": "price"}, "currency": "USD"},
               "returnType": "string"
             },
             "weight": 1
@@ -131,7 +118,7 @@
             "component": "Text",
             "text": {
               "call": "formatString",
-              "args": { "value": "${change}%" },
+              "args": {"value": "${change}%"},
               "returnType": "string"
             },
             "weight": 1
@@ -141,7 +128,7 @@
             "component": "Text",
             "text": {
               "call": "formatCurrency",
-              "args": { "value": { "path": "marketCap" }, "currency": "USD" },
+              "args": {"value": {"path": "marketCap"}, "currency": "USD"},
               "returnType": "string"
             },
             "weight": 1.5
@@ -155,12 +142,30 @@
         "surfaceId": "gallery-financial-grid",
         "value": {
           "assets": [
-            { "name": "Bitcoin", "symbol": "BTC", "price": 43500.25, "change": 1.2, "marketCap": 850000000000 },
-            { "name": "Ethereum", "symbol": "ETH", "price": 2250.50, "change": -0.5, "marketCap": 270000000000 },
-            { "name": "Solana", "symbol": "SOL", "price": 95.80, "change": 5.4, "marketCap": 40000000000 }
+            {
+              "name": "Bitcoin",
+              "symbol": "BTC",
+              "price": 43500.25,
+              "change": 1.2,
+              "marketCap": 850000000000
+            },
+            {
+              "name": "Ethereum",
+              "symbol": "ETH",
+              "price": 2250.5,
+              "change": -0.5,
+              "marketCap": 270000000000
+            },
+            {
+              "name": "Solana",
+              "symbol": "SOL",
+              "price": 95.8,
+              "change": 5.4,
+              "marketCap": 40000000000
+            }
           ]
         }
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/basic/examples/34_child-list-template.json b/specification/v0_9/json/catalogs/basic/examples/34_child-list-template.json
index d260f69ca..0b892533d 100644
--- a/specification/v0_9/json/catalogs/basic/examples/34_child-list-template.json
+++ b/specification/v0_9/json/catalogs/basic/examples/34_child-list-template.json
@@ -23,10 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "title-text",
-              "item-list"
-            ],
+            "children": ["title-text", "item-list"],
             "align": "stretch"
           },
           {
@@ -46,16 +43,12 @@
           {
             "id": "item-row",
             "component": "Row",
-            "children": [
-              "item-name",
-              "qty-label",
-              "item-qty"
-            ]
+            "children": ["item-name", "qty-label", "item-qty"]
           },
           {
             "id": "item-name",
             "component": "Text",
-            "text": { "path": "name" }
+            "text": {"path": "name"}
           },
           {
             "id": "qty-label",
@@ -65,7 +58,7 @@
           {
             "id": "item-qty",
             "component": "Text",
-            "text": { "path": "quantity" }
+            "text": {"path": "quantity"}
           }
         ]
       }
@@ -76,9 +69,9 @@
         "surfaceId": "gallery-child-list-template",
         "value": {
           "items": [
-            { "name": "Apple", "quantity": 10 },
-            { "name": "Banana", "quantity": 5 },
-            { "name": "Cherry", "quantity": 20 }
+            {"name": "Apple", "quantity": 10},
+            {"name": "Banana", "quantity": 5},
+            {"name": "Cherry", "quantity": 20}
           ]
         }
       }
diff --git a/specification/v0_9/json/catalogs/basic/examples/35_markdown-text.json b/specification/v0_9/json/catalogs/basic/examples/35_markdown-text.json
index 4932a2246..c01ea7c5e 100644
--- a/specification/v0_9/json/catalogs/basic/examples/35_markdown-text.json
+++ b/specification/v0_9/json/catalogs/basic/examples/35_markdown-text.json
@@ -23,10 +23,7 @@
           {
             "id": "main-column",
             "component": "Column",
-            "children": [
-              "title-text",
-              "markdown-content"
-            ],
+            "children": ["title-text", "markdown-content"],
             "align": "stretch"
           },
           {
diff --git a/specification/v0_9/json/catalogs/minimal/examples/1_simple_text.json b/specification/v0_9/json/catalogs/minimal/examples/1_simple_text.json
index 319f7e2cb..3480bdc64 100644
--- a/specification/v0_9/json/catalogs/minimal/examples/1_simple_text.json
+++ b/specification/v0_9/json/catalogs/minimal/examples/1_simple_text.json
@@ -24,4 +24,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/minimal/examples/2_row_layout.json b/specification/v0_9/json/catalogs/minimal/examples/2_row_layout.json
index df7a977f9..9ab452c23 100644
--- a/specification/v0_9/json/catalogs/minimal/examples/2_row_layout.json
+++ b/specification/v0_9/json/catalogs/minimal/examples/2_row_layout.json
@@ -17,10 +17,7 @@
           {
             "id": "root",
             "component": "Row",
-            "children": [
-              "left_text",
-              "right_text"
-            ],
+            "children": ["left_text", "right_text"],
             "justify": "spaceBetween",
             "align": "center"
           },
@@ -40,4 +37,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/minimal/examples/3_interactive_button.json b/specification/v0_9/json/catalogs/minimal/examples/3_interactive_button.json
index b133dc7b6..6f8716133 100644
--- a/specification/v0_9/json/catalogs/minimal/examples/3_interactive_button.json
+++ b/specification/v0_9/json/catalogs/minimal/examples/3_interactive_button.json
@@ -17,10 +17,7 @@
           {
             "id": "root",
             "component": "Column",
-            "children": [
-              "title",
-              "action_button"
-            ],
+            "children": ["title", "action_button"],
             "justify": "center",
             "align": "center"
           },
@@ -51,4 +48,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/minimal/examples/4_login_form.json b/specification/v0_9/json/catalogs/minimal/examples/4_login_form.json
index e0779d1e8..9e1276e6e 100644
--- a/specification/v0_9/json/catalogs/minimal/examples/4_login_form.json
+++ b/specification/v0_9/json/catalogs/minimal/examples/4_login_form.json
@@ -18,12 +18,7 @@
           {
             "id": "root",
             "component": "Column",
-            "children": [
-              "form_title",
-              "username_field",
-              "password_field",
-              "submit_button"
-            ],
+            "children": ["form_title", "username_field", "password_field", "submit_button"],
             "justify": "start",
             "align": "stretch"
           },
@@ -79,4 +74,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/minimal/examples/5_complex_layout.json b/specification/v0_9/json/catalogs/minimal/examples/5_complex_layout.json
index 084eea243..30fab1c7d 100644
--- a/specification/v0_9/json/catalogs/minimal/examples/5_complex_layout.json
+++ b/specification/v0_9/json/catalogs/minimal/examples/5_complex_layout.json
@@ -17,11 +17,7 @@
           {
             "id": "root",
             "component": "Column",
-            "children": [
-              "header",
-              "form_row",
-              "footer"
-            ],
+            "children": ["header", "form_row", "footer"],
             "justify": "spaceBetween",
             "align": "stretch"
           },
@@ -34,10 +30,7 @@
           {
             "id": "form_row",
             "component": "Row",
-            "children": [
-              "first_name",
-              "last_name"
-            ],
+            "children": ["first_name", "last_name"],
             "justify": "start",
             "align": "start"
           },
@@ -69,4 +62,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/minimal/examples/6_capitalized_text.json b/specification/v0_9/json/catalogs/minimal/examples/6_capitalized_text.json
index 6778d6c4c..e7ca56f16 100644
--- a/specification/v0_9/json/catalogs/minimal/examples/6_capitalized_text.json
+++ b/specification/v0_9/json/catalogs/minimal/examples/6_capitalized_text.json
@@ -18,11 +18,7 @@
           {
             "id": "root",
             "component": "Column",
-            "children": [
-              "input_field",
-              "result_label",
-              "result_text"
-            ],
+            "children": ["input_field", "result_label", "result_text"],
             "justify": "start",
             "align": "stretch"
           },
@@ -59,4 +55,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/catalogs/minimal/examples/7_incremental.json b/specification/v0_9/json/catalogs/minimal/examples/7_incremental.json
index 214a6fada..51a114889 100644
--- a/specification/v0_9/json/catalogs/minimal/examples/7_incremental.json
+++ b/specification/v0_9/json/catalogs/minimal/examples/7_incremental.json
@@ -59,11 +59,7 @@
           {
             "id": "restaurant_card",
             "component": "Column",
-            "children": [
-              "rc_title",
-              "rc_subtitle",
-              "rc_address"
-            ]
+            "children": ["rc_title", "rc_subtitle", "rc_address"]
           },
           {
             "id": "rc_title",
@@ -109,12 +105,7 @@
           {
             "id": "restaurant_card",
             "component": "Column",
-            "children": [
-              "rc_title",
-              "rc_subtitle",
-              "rc_address",
-              "rc_button"
-            ]
+            "children": ["rc_title", "rc_subtitle", "rc_address", "rc_button"]
           },
           {
             "id": "rc_button",
diff --git a/specification/v0_9/json/catalogs/minimal/minimal_catalog.json b/specification/v0_9/json/catalogs/minimal/minimal_catalog.json
index d29c164f9..93f71145f 100644
--- a/specification/v0_9/json/catalogs/minimal/minimal_catalog.json
+++ b/specification/v0_9/json/catalogs/minimal/minimal_catalog.json
@@ -8,13 +8,13 @@
     "Text": {
       "type": "object",
       "allOf": [
-        { "$ref": "../../common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "../../common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Text" },
-            "text": { "$ref": "../../common_types.json#/$defs/DynamicString" },
+            "component": {"const": "Text"},
+            "text": {"$ref": "../../common_types.json#/$defs/DynamicString"},
             "variant": {
               "type": "string",
               "enum": ["h1", "h2", "h3", "h4", "h5", "caption", "body"]
@@ -28,16 +28,24 @@
     "Row": {
       "type": "object",
       "allOf": [
-        { "$ref": "../../common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "../../common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Row" },
-            "children": { "$ref": "../../common_types.json#/$defs/ChildList" },
+            "component": {"const": "Row"},
+            "children": {"$ref": "../../common_types.json#/$defs/ChildList"},
             "justify": {
               "type": "string",
-              "enum": ["center", "end", "spaceAround", "spaceBetween", "spaceEvenly", "start", "stretch"]
+              "enum": [
+                "center",
+                "end",
+                "spaceAround",
+                "spaceBetween",
+                "spaceEvenly",
+                "start",
+                "stretch"
+              ]
             },
             "align": {
               "type": "string",
@@ -52,16 +60,24 @@
     "Column": {
       "type": "object",
       "allOf": [
-        { "$ref": "../../common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
+        {"$ref": "../../common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Column" },
-            "children": { "$ref": "../../common_types.json#/$defs/ChildList" },
+            "component": {"const": "Column"},
+            "children": {"$ref": "../../common_types.json#/$defs/ChildList"},
             "justify": {
               "type": "string",
-              "enum": ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly", "stretch"]
+              "enum": [
+                "start",
+                "center",
+                "end",
+                "spaceBetween",
+                "spaceAround",
+                "spaceEvenly",
+                "stretch"
+              ]
             },
             "align": {
               "type": "string",
@@ -76,19 +92,19 @@
     "Button": {
       "type": "object",
       "allOf": [
-        { "$ref": "../../common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "../../common_types.json#/$defs/Checkable" },
+        {"$ref": "../../common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "../../common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "Button" },
-            "child": { "$ref": "../../common_types.json#/$defs/ComponentId" },
+            "component": {"const": "Button"},
+            "child": {"$ref": "../../common_types.json#/$defs/ComponentId"},
             "variant": {
               "type": "string",
               "enum": ["primary", "borderless"]
             },
-            "action": { "$ref": "../../common_types.json#/$defs/Action" }
+            "action": {"$ref": "../../common_types.json#/$defs/Action"}
           },
           "required": ["component", "child", "action"]
         }
@@ -98,20 +114,20 @@
     "TextField": {
       "type": "object",
       "allOf": [
-        { "$ref": "../../common_types.json#/$defs/ComponentCommon" },
-        { "$ref": "#/$defs/CatalogComponentCommon" },
-        { "$ref": "../../common_types.json#/$defs/Checkable" },
+        {"$ref": "../../common_types.json#/$defs/ComponentCommon"},
+        {"$ref": "#/$defs/CatalogComponentCommon"},
+        {"$ref": "../../common_types.json#/$defs/Checkable"},
         {
           "type": "object",
           "properties": {
-            "component": { "const": "TextField" },
-            "label": { "$ref": "../../common_types.json#/$defs/DynamicString" },
-            "value": { "$ref": "../../common_types.json#/$defs/DynamicString" },
+            "component": {"const": "TextField"},
+            "label": {"$ref": "../../common_types.json#/$defs/DynamicString"},
+            "value": {"$ref": "../../common_types.json#/$defs/DynamicString"},
             "variant": {
               "type": "string",
               "enum": ["longText", "number", "shortText", "obscured"]
             },
-            "validationRegexp": { "type": "string" }
+            "validationRegexp": {"type": "string"}
           },
           "required": ["component", "label"]
         }
@@ -124,16 +140,16 @@
       "type": "object",
       "description": "Converts an input string to a capitalized version.",
       "properties": {
-        "call": { "const": "capitalize" },
+        "call": {"const": "capitalize"},
         "args": {
           "type": "object",
           "properties": {
-            "value": { "$ref": "../../common_types.json#/$defs/DynamicString" }
+            "value": {"$ref": "../../common_types.json#/$defs/DynamicString"}
           },
           "required": ["value"],
           "unevaluatedProperties": false
         },
-        "returnType": { "const": "string" }
+        "returnType": {"const": "string"}
       },
       "required": ["call", "args"],
       "unevaluatedProperties": false
@@ -143,30 +159,28 @@
     "CatalogComponentCommon": {
       "type": "object",
       "properties": {
-        "weight": { "type": "number" }
+        "weight": {"type": "number"}
       }
     },
     "theme": {
       "type": "object",
       "properties": {
-        "primaryColor": { "type": "string", "pattern": "^#[0-9a-fA-F]{6}$" }
+        "primaryColor": {"type": "string", "pattern": "^#[0-9a-fA-F]{6}$"}
       },
       "additionalProperties": true
     },
     "anyComponent": {
       "oneOf": [
-        { "$ref": "#/components/Text" },
-        { "$ref": "#/components/Row" },
-        { "$ref": "#/components/Column" },
-        { "$ref": "#/components/Button" },
-        { "$ref": "#/components/TextField" }
+        {"$ref": "#/components/Text"},
+        {"$ref": "#/components/Row"},
+        {"$ref": "#/components/Column"},
+        {"$ref": "#/components/Button"},
+        {"$ref": "#/components/TextField"}
       ],
-      "discriminator": { "propertyName": "component" }
+      "discriminator": {"propertyName": "component"}
     },
     "anyFunction": {
-      "oneOf": [
-        { "$ref": "#/functions/capitalize" }
-      ]
+      "oneOf": [{"$ref": "#/functions/capitalize"}]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/specification/v0_9/json/client_capabilities.json b/specification/v0_9/json/client_capabilities.json
index e417252bf..736383d65 100644
--- a/specification/v0_9/json/client_capabilities.json
+++ b/specification/v0_9/json/client_capabilities.json
@@ -12,12 +12,12 @@
         "supportedCatalogIds": {
           "type": "array",
           "description": "The URI of each of the component and function catalogs that is supported by the client.",
-          "items": { "type": "string" }
+          "items": {"type": "string"}
         },
         "inlineCatalogs": {
           "type": "array",
           "description": "An array of inline catalog definitions, which can contain both components and functions. This should only be provided if the agent declares 'acceptsInlineCatalogs: true' in its capabilities.",
-          "items": { "$ref": "#/$defs/Catalog" }
+          "items": {"$ref": "#/$defs/Catalog"}
         }
       },
       "required": ["supportedCatalogIds"]
@@ -44,15 +44,7 @@
         },
         "returnType": {
           "type": "string",
-          "enum": [
-            "string",
-            "number",
-            "boolean",
-            "array",
-            "object",
-            "any",
-            "void"
-          ],
+          "enum": ["string", "number", "boolean", "array", "object", "any", "void"],
           "description": "The type of value this function returns."
         }
       },
diff --git a/specification/v0_9/json/client_to_server.json b/specification/v0_9/json/client_to_server.json
index e1a288105..f2b1b5887 100644
--- a/specification/v0_9/json/client_to_server.json
+++ b/specification/v0_9/json/client_to_server.json
@@ -35,13 +35,7 @@
           "additionalProperties": true
         }
       },
-      "required": [
-        "name",
-        "surfaceId",
-        "sourceComponentId",
-        "timestamp",
-        "context"
-      ]
+      "required": ["name", "surfaceId", "sourceComponentId", "timestamp", "context"]
     },
     "error": {
       "description": "Reports a client-side error.",
diff --git a/specification/v0_9/json/client_to_server_list_wrapper.json b/specification/v0_9/json/client_to_server_list_wrapper.json
index 84e167cd6..c31eed79f 100644
--- a/specification/v0_9/json/client_to_server_list_wrapper.json
+++ b/specification/v0_9/json/client_to_server_list_wrapper.json
@@ -10,7 +10,5 @@
     }
   },
   "additionalProperties": false,
-  "required": [
-    "messages"
-  ]
+  "required": ["messages"]
 }
diff --git a/specification/v0_9/json/common_types.json b/specification/v0_9/json/common_types.json
index 3ec6065a2..51c5b036b 100644
--- a/specification/v0_9/json/common_types.json
+++ b/specification/v0_9/json/common_types.json
@@ -223,22 +223,12 @@
         "returnType": {
           "type": "string",
           "description": "The expected return type of the function call.",
-          "enum": [
-            "string",
-            "number",
-            "boolean",
-            "array",
-            "object",
-            "any",
-            "void"
-          ],
+          "enum": ["string", "number", "boolean", "array", "object", "any", "void"],
           "default": "boolean"
         }
       },
       "required": ["call"],
-      "oneOf": [
-        { "$ref": "catalog.json#/$defs/anyFunction" }
-      ]
+      "oneOf": [{"$ref": "catalog.json#/$defs/anyFunction"}]
     },
     "CheckRule": {
       "type": "object",
diff --git a/specification/v0_9/json/server_capabilities.json b/specification/v0_9/json/server_capabilities.json
index 5a3773eca..e01285c8f 100644
--- a/specification/v0_9/json/server_capabilities.json
+++ b/specification/v0_9/json/server_capabilities.json
@@ -12,7 +12,7 @@
         "supportedCatalogIds": {
           "type": "array",
           "description": "An array of strings, where each string is an ID identifying a Catalog Definition Schema that the server can generate. This is not necessarily a resolvable URI.",
-          "items": { "type": "string" }
+          "items": {"type": "string"}
         },
         "acceptsInlineCatalogs": {
           "type": "boolean",
diff --git a/specification/v0_9/json/server_to_client.json b/specification/v0_9/json/server_to_client.json
index c30647b20..005980642 100644
--- a/specification/v0_9/json/server_to_client.json
+++ b/specification/v0_9/json/server_to_client.json
@@ -5,10 +5,10 @@
   "description": "Describes a JSON payload for an A2UI (Agent to UI) message, which is used to dynamically construct and update user interfaces.",
   "type": "object",
   "oneOf": [
-    { "$ref": "#/$defs/CreateSurfaceMessage" },
-    { "$ref": "#/$defs/UpdateComponentsMessage" },
-    { "$ref": "#/$defs/UpdateDataModelMessage" },
-    { "$ref": "#/$defs/DeleteSurfaceMessage" }
+    {"$ref": "#/$defs/CreateSurfaceMessage"},
+    {"$ref": "#/$defs/UpdateComponentsMessage"},
+    {"$ref": "#/$defs/UpdateDataModelMessage"},
+    {"$ref": "#/$defs/DeleteSurfaceMessage"}
   ],
   "$defs": {
     "CreateSurfaceMessage": {
diff --git a/specification/v0_9/json/server_to_client_list_wrapper.json b/specification/v0_9/json/server_to_client_list_wrapper.json
index 5ca429439..0b215f420 100644
--- a/specification/v0_9/json/server_to_client_list_wrapper.json
+++ b/specification/v0_9/json/server_to_client_list_wrapper.json
@@ -10,7 +10,5 @@
     }
   },
   "additionalProperties": false,
-  "required": [
-    "messages"
-  ]
+  "required": ["messages"]
 }
diff --git a/specification/v0_9/test/README.md b/specification/v0_9/test/README.md
index 8ac3c5a7c..2ed53dcfe 100644
--- a/specification/v0_9/test/README.md
+++ b/specification/v0_9/test/README.md
@@ -25,6 +25,7 @@ python3 specification/v0_9/test/run_tests.py
 ```
 
 The script will:
+
 1. Load all schemas from `specification/v0_9/json`.
 2. Execute all test suites defined in `specification/v0_9/test/cases/*.json`.
 3. Report pass/fail status for each test case.
diff --git a/specification/v0_9/test/cases/button_checks.json b/specification/v0_9/test/cases/button_checks.json
index 213ff6eeb..d847173e6 100644
--- a/specification/v0_9/test/cases/button_checks.json
+++ b/specification/v0_9/test/cases/button_checks.json
@@ -13,7 +13,7 @@
               "id": "btn1",
               "component": "Button",
               "child": "txt1",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "checks": [
                 {
                   "condition": {
@@ -22,7 +22,7 @@
                       "values": [
                         {
                           "call": "required",
-                          "args": { "value": { "path": "/formData/terms" } },
+                          "args": {"value": {"path": "/formData/terms"}},
                           "returnType": "boolean"
                         },
                         {
@@ -31,12 +31,12 @@
                             "values": [
                               {
                                 "call": "required",
-                                "args": { "value": { "path": "/formData/email" } },
+                                "args": {"value": {"path": "/formData/email"}},
                                 "returnType": "boolean"
                               },
                               {
                                 "call": "required",
-                                "args": { "value": { "path": "/formData/phone" } },
+                                "args": {"value": {"path": "/formData/phone"}},
                                 "returnType": "boolean"
                               }
                             ]
@@ -51,7 +51,7 @@
                 }
               ]
             },
-            { "id": "txt1", "component": "Text", "text": "Submit" }
+            {"id": "txt1", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -68,10 +68,10 @@
               "id": "btn2",
               "component": "Button",
               "child": "txt2",
-              "action": { "event": { "name": "submit" } },
-              "enabled": { "path": "/some/path" }
+              "action": {"event": {"name": "submit"}},
+              "enabled": {"path": "/some/path"}
             },
-            { "id": "txt2", "component": "Text", "text": "Submit" }
+            {"id": "txt2", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -88,19 +88,19 @@
               "id": "btn3",
               "component": "Button",
               "child": "txt3",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": "foo" },
+                    "args": {"value": "foo"},
                     "returnType": "not_a_valid_type"
                   },
                   "message": "Msg"
                 }
               ]
             },
-            { "id": "txt3", "component": "Text", "text": "Submit" }
+            {"id": "txt3", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -117,12 +117,12 @@
               "id": "btn4",
               "component": "Button",
               "child": "txt4",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "checks": [
                 {
                   "condition": {
                     "call": "and",
-                    "args": { "values": [] },
+                    "args": {"values": []},
                     "returnType": "boolean"
                   },
                   "message": "foo",
@@ -130,7 +130,7 @@
                 }
               ]
             },
-            { "id": "txt4", "component": "Text", "text": "Submit" }
+            {"id": "txt4", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -147,10 +147,10 @@
               "id": "btn_primary",
               "component": "Button",
               "child": "txt_primary",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "variant": "primary"
             },
-            { "id": "txt_primary", "component": "Text", "text": "Submit" }
+            {"id": "txt_primary", "component": "Text", "text": "Submit"}
           ]
         }
       }
@@ -167,10 +167,10 @@
               "id": "btn_borderless",
               "component": "Button",
               "child": "txt_borderless",
-              "action": { "event": { "name": "cancel" } },
+              "action": {"event": {"name": "cancel"}},
               "variant": "borderless"
             },
-            { "id": "txt_borderless", "component": "Text", "text": "Cancel" }
+            {"id": "txt_borderless", "component": "Text", "text": "Cancel"}
           ]
         }
       }
@@ -187,10 +187,10 @@
               "id": "btn_dep",
               "component": "Button",
               "child": "txt_dep",
-              "action": { "event": { "name": "submit" } },
+              "action": {"event": {"name": "submit"}},
               "primary": true
             },
-            { "id": "txt_dep", "component": "Text", "text": "Submit" }
+            {"id": "txt_dep", "component": "Text", "text": "Submit"}
           ]
         }
       }
diff --git a/specification/v0_9/test/cases/checkable_components.json b/specification/v0_9/test/cases/checkable_components.json
index 53397a765..07bd09f81 100644
--- a/specification/v0_9/test/cases/checkable_components.json
+++ b/specification/v0_9/test/cases/checkable_components.json
@@ -13,12 +13,12 @@
               "id": "tf1",
               "component": "TextField",
               "label": "Email",
-              "value": { "path": "/formData/email" },
+              "value": {"path": "/formData/email"},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/email" } },
+                    "args": {"value": {"path": "/formData/email"}},
                     "returnType": "boolean"
                   },
                   "message": "Email is required"
@@ -26,7 +26,7 @@
                 {
                   "condition": {
                     "call": "email",
-                    "args": { "value": { "path": "/formData/email" } },
+                    "args": {"value": {"path": "/formData/email"}},
                     "returnType": "boolean"
                   },
                   "message": "Must be valid email"
@@ -51,16 +51,16 @@
               "label": "Interests",
               "variant": "multipleSelection",
               "options": [
-                { "label": "Code", "value": "code" },
-                { "label": "Design", "value": "design" }
+                {"label": "Code", "value": "code"},
+                {"label": "Design", "value": "design"}
               ],
-              "value": { "path": "/formData/interests" },
+              "value": {"path": "/formData/interests"},
               "checks": [
                 {
                   "condition": {
                     "call": "length",
                     "args": {
-                      "value": { "path": "/formData/interests" },
+                      "value": {"path": "/formData/interests"},
                       "min": 1
                     },
                     "returnType": "boolean"
@@ -87,13 +87,13 @@
               "label": "Rating",
               "min": 1,
               "max": 5,
-              "value": { "path": "/formData/rating" },
+              "value": {"path": "/formData/rating"},
               "checks": [
                 {
                   "condition": {
                     "call": "numeric",
                     "args": {
-                      "value": { "path": "/formData/rating" },
+                      "value": {"path": "/formData/rating"},
                       "min": 3
                     },
                     "returnType": "boolean"
@@ -118,12 +118,12 @@
               "id": "cb1",
               "component": "CheckBox",
               "label": "I agree",
-              "value": { "path": "/formData/agreed" },
+              "value": {"path": "/formData/agreed"},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/agreed" } },
+                    "args": {"value": {"path": "/formData/agreed"}},
                     "returnType": "boolean"
                   },
                   "message": "Must agree"
@@ -146,12 +146,12 @@
               "id": "dt1",
               "component": "DateTimeInput",
               "label": "Date",
-              "value": { "path": "/formData/date" },
+              "value": {"path": "/formData/date"},
               "checks": [
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/formData/date" } },
+                    "args": {"value": {"path": "/formData/date"}},
                     "returnType": "boolean"
                   },
                   "message": "Date required"
@@ -174,13 +174,13 @@
               "id": "tf_regex",
               "component": "TextField",
               "label": "Phone",
-              "value": { "path": "/formData/phone" },
+              "value": {"path": "/formData/phone"},
               "checks": [
                 {
                   "condition": {
                     "call": "regex",
                     "args": {
-                      "value": { "path": "/formData/phone" },
+                      "value": {"path": "/formData/phone"},
                       "pattern": "^\\d{10}$"
                     },
                     "returnType": "boolean"
@@ -205,13 +205,13 @@
               "id": "tf_len",
               "component": "TextField",
               "label": "Password",
-              "value": { "path": "/formData/pw" },
+              "value": {"path": "/formData/pw"},
               "checks": [
                 {
                   "condition": {
                     "call": "length",
                     "args": {
-                      "value": { "path": "/formData/pw" },
+                      "value": {"path": "/formData/pw"},
                       "min": 8,
                       "max": 64
                     },
@@ -239,13 +239,13 @@
               "label": "Score",
               "min": 0,
               "max": 100,
-              "value": { "path": "/formData/score" },
+              "value": {"path": "/formData/score"},
               "checks": [
                 {
                   "condition": {
                     "call": "numeric",
                     "args": {
-                      "value": { "path": "/formData/score" },
+                      "value": {"path": "/formData/score"},
                       "min": 0,
                       "max": 100
                     },
@@ -271,7 +271,7 @@
               "id": "tf_complex",
               "component": "TextField",
               "label": "Secret Code",
-              "value": { "path": "/formData/code" },
+              "value": {"path": "/formData/code"},
               "checks": [
                 {
                   "condition": {
@@ -280,7 +280,7 @@
                       "values": [
                         {
                           "call": "required",
-                          "args": { "value": { "path": "/formData/code" } },
+                          "args": {"value": {"path": "/formData/code"}},
                           "returnType": "boolean"
                         },
                         {
@@ -290,7 +290,7 @@
                               {
                                 "call": "regex",
                                 "args": {
-                                  "value": { "path": "/formData/code" },
+                                  "value": {"path": "/formData/code"},
                                   "pattern": "^[A-Z]"
                                 },
                                 "returnType": "boolean"
@@ -301,7 +301,7 @@
                                   "value": {
                                     "call": "regex",
                                     "args": {
-                                      "value": { "path": "/formData/code" },
+                                      "value": {"path": "/formData/code"},
                                       "pattern": "^[0-9]"
                                     },
                                     "returnType": "boolean"
@@ -337,12 +337,12 @@
               "id": "tf_invalid",
               "component": "TextField",
               "label": "Email",
-              "value": { "path": "/formData/email" },
+              "value": {"path": "/formData/email"},
               "checks": [
                 {
                   "condition": {
                     "call": "email",
-                    "args": { "value": { "path": "/formData/email" } },
+                    "args": {"value": {"path": "/formData/email"}},
                     "returnType": "boolean"
                   }
                 }
@@ -364,12 +364,12 @@
               "id": "tf_wrong_type",
               "component": "TextField",
               "label": "Name",
-              "value": { "path": "/formData/name" },
+              "value": {"path": "/formData/name"},
               "checks": [
                 {
                   "condition": {
                     "call": "formatString",
-                    "args": { "value": "Hello ${/formData/name}" },
+                    "args": {"value": "Hello ${/formData/name}"},
                     "returnType": "string"
                   },
                   "message": "This should fail because returnType is string, not boolean"
@@ -394,17 +394,17 @@
               "label": "Interests",
               "variant": "multipleSelection",
               "options": [
-                { "label": "A", "value": "a" },
-                { "label": "B", "value": "b" },
-                { "label": "C", "value": "c" }
+                {"label": "A", "value": "a"},
+                {"label": "B", "value": "b"},
+                {"label": "C", "value": "c"}
               ],
-              "value": { "path": "/formData/interests" },
+              "value": {"path": "/formData/interests"},
               "checks": [
                 {
                   "condition": {
                     "call": "length",
                     "args": {
-                      "value": { "path": "/formData/interests" },
+                      "value": {"path": "/formData/interests"},
                       "min": 2,
                       "max": 2
                     },
diff --git a/specification/v0_9/test/cases/client_messages.json b/specification/v0_9/test/cases/client_messages.json
index 4bcca30a1..a390b4292 100644
--- a/specification/v0_9/test/cases/client_messages.json
+++ b/specification/v0_9/test/cases/client_messages.json
@@ -1,7 +1,6 @@
 {
   "schema": "client_to_server.json",
   "tests": [
-
     {
       "description": "Valid action message",
       "valid": true,
diff --git a/specification/v0_9/test/cases/contact_form_example_test.json b/specification/v0_9/test/cases/contact_form_example_test.json
index f7cd909f5..ede2e8c23 100644
--- a/specification/v0_9/test/cases/contact_form_example_test.json
+++ b/specification/v0_9/test/cases/contact_form_example_test.json
@@ -46,7 +46,7 @@
               "id": "first_name_field",
               "component": "TextField",
               "label": "First Name",
-              "value": { "path": "/contact/firstName" },
+              "value": {"path": "/contact/firstName"},
               "variant": "shortText"
             },
             {
@@ -58,41 +58,41 @@
               "id": "last_name_field",
               "component": "TextField",
               "label": "Last Name",
-              "value": { "path": "/contact/lastName" },
+              "value": {"path": "/contact/lastName"},
               "variant": "shortText"
             },
-            { "id": "email_label", "component": "Text", "text": "Email" },
+            {"id": "email_label", "component": "Text", "text": "Email"},
             {
               "id": "email_field",
               "component": "TextField",
               "label": "Email",
-              "value": { "path": "/contact/email" },
+              "value": {"path": "/contact/email"},
               "variant": "shortText",
               "checks": [
                 {
                   "condition": {
                     "call": "email",
-                    "args": { "value": { "path": "/contact/email" } },
+                    "args": {"value": {"path": "/contact/email"}},
                     "returnType": "boolean"
                   },
                   "message": "Please enter a valid email address."
                 }
               ]
             },
-            { "id": "phone_label", "component": "Text", "text": "Phone" },
+            {"id": "phone_label", "component": "Text", "text": "Phone"},
             {
               "id": "phone_field",
               "component": "TextField",
               "label": "Phone",
-              "value": { "path": "/contact/phone" },
+              "value": {"path": "/contact/phone"},
               "variant": "shortText"
             },
-            { "id": "notes_label", "component": "Text", "text": "Notes" },
+            {"id": "notes_label", "component": "Text", "text": "Notes"},
             {
               "id": "notes_field",
               "component": "TextField",
               "label": "Notes",
-              "value": { "path": "/contact/notes" },
+              "value": {"path": "/contact/notes"},
               "variant": "longText"
             },
             {
@@ -105,7 +105,7 @@
               "component": "Button",
               "child": "submit_button_label",
               "variant": "primary",
-              "action": { "event": { "name": "submitContactForm" } }
+              "action": {"event": {"name": "submitContactForm"}}
             }
           ]
         }
diff --git a/specification/v0_9/test/cases/function_catalog_validation.json b/specification/v0_9/test/cases/function_catalog_validation.json
index d92be8e26..7dad197c7 100644
--- a/specification/v0_9/test/cases/function_catalog_validation.json
+++ b/specification/v0_9/test/cases/function_catalog_validation.json
@@ -18,7 +18,7 @@
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/val" } },
+                    "args": {"value": {"path": "/val"}},
                     "returnType": "boolean"
                   },
                   "message": "Required"
@@ -42,7 +42,7 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "required", "args": {} }, "message": "Msg" }]
+              "checks": [{"condition": {"call": "required", "args": {}}, "message": "Msg"}]
             }
           ]
         }
@@ -61,7 +61,16 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "required", "args": {"value": {"path": "/val"}}, "returnType": "string" }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "required",
+                    "args": {"value": {"path": "/val"}},
+                    "returnType": "string"
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -84,7 +93,7 @@
                 {
                   "condition": {
                     "call": "regex",
-                    "args": { "value": { "path": "/val" }, "pattern": "^abc$" }
+                    "args": {"value": {"path": "/val"}, "pattern": "^abc$"}
                   },
                   "message": "Match"
                 }
@@ -107,7 +116,12 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "regex", "args": { "value": { "path": "/val" } } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {"call": "regex", "args": {"value": {"path": "/val"}}},
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -126,7 +140,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "min": 5 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "min": 5}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -145,7 +167,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "max": 10 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "max": 10}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -164,7 +194,12 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" } } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {"call": "length", "args": {"value": {"path": "/val"}}},
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -183,7 +218,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "numeric", "args": { "value": { "path": "/val" }, "min": 0, "max": 100 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "numeric",
+                    "args": {"value": {"path": "/val"}, "min": 0, "max": 100}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -202,7 +245,12 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "email", "args": { "value": { "path": "/val" } } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {"call": "email", "args": {"value": {"path": "/val"}}},
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -221,7 +269,7 @@
               "component": "Text",
               "text": {
                 "call": "formatString",
-                "args": { "value": "Hello ${/name}" },
+                "args": {"value": "Hello ${/name}"},
                 "returnType": "string"
               }
             }
@@ -242,7 +290,7 @@
               "component": "Text",
               "text": {
                 "call": "formatString",
-                "args": { "value": "Hi" },
+                "args": {"value": "Hi"},
                 "returnType": "boolean"
               }
             }
@@ -263,7 +311,7 @@
               "component": "Text",
               "text": {
                 "call": "formatNumber",
-                "args": { "value": 1234.567, "decimals": 2, "grouping": true },
+                "args": {"value": 1234.567, "decimals": 2, "grouping": true},
                 "returnType": "string"
               }
             }
@@ -284,7 +332,7 @@
               "component": "Text",
               "text": {
                 "call": "formatNumber",
-                "args": { "value": 1234.567, "decimals": "2" },
+                "args": {"value": 1234.567, "decimals": "2"},
                 "returnType": "string"
               }
             }
@@ -305,7 +353,7 @@
               "component": "Text",
               "text": {
                 "call": "formatCurrency",
-                "args": { "value": 99.99, "currency": "USD" },
+                "args": {"value": 99.99, "currency": "USD"},
                 "returnType": "string"
               }
             }
@@ -326,7 +374,7 @@
               "component": "Text",
               "text": {
                 "call": "formatCurrency",
-                "args": { "value": 99.99 },
+                "args": {"value": 99.99},
                 "returnType": "string"
               }
             }
@@ -347,7 +395,7 @@
               "component": "Text",
               "text": {
                 "call": "formatDate",
-                "args": { "value": "2023-01-01", "format": "MMM d" },
+                "args": {"value": "2023-01-01", "format": "MMM d"},
                 "returnType": "string"
               }
             }
@@ -368,7 +416,7 @@
               "component": "Text",
               "text": {
                 "call": "pluralize",
-                "args": { "value": 5, "one": "item", "other": "items" },
+                "args": {"value": 5, "one": "item", "other": "items"},
                 "returnType": "string"
               }
             }
@@ -389,7 +437,7 @@
               "component": "Text",
               "text": {
                 "call": "pluralize",
-                "args": { "value": 5, "one": "item" },
+                "args": {"value": 5, "one": "item"},
                 "returnType": "string"
               }
             }
@@ -412,12 +460,12 @@
               "action": {
                 "functionCall": {
                   "call": "openUrl",
-                  "args": { "url": "https://example.com" },
+                  "args": {"url": "https://example.com"},
                   "returnType": "void"
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -442,7 +490,7 @@
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -462,12 +510,12 @@
               "action": {
                 "functionCall": {
                   "call": "openUrl",
-                  "args": { "url": "https://example.com" },
+                  "args": {"url": "https://example.com"},
                   "returnType": "boolean"
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -485,7 +533,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "min": "5" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "min": "5"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -504,7 +560,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "length", "args": { "value": { "path": "/val" }, "max": -2 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "length",
+                    "args": {"value": {"path": "/val"}, "max": -2}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -523,7 +587,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "numeric", "args": { "value": { "path": "/val" }, "min": "10" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "numeric",
+                    "args": {"value": {"path": "/val"}, "min": "10"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -542,7 +614,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "numeric", "args": { "value": { "path": "/val" }, "max": "20" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "numeric",
+                    "args": {"value": {"path": "/val"}, "max": "20"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -561,7 +641,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "regex", "args": { "value": { "path": "/val" }, "pattern": 123 } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "regex",
+                    "args": {"value": {"path": "/val"}, "pattern": 123}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -580,7 +668,15 @@
               "component": "TextField",
               "label": "L",
               "value": "",
-              "checks": [{ "condition": { "call": "email", "args": { "value": { "path": "/val" }, "extra": "foo" } }, "message": "Msg" }]
+              "checks": [
+                {
+                  "condition": {
+                    "call": "email",
+                    "args": {"value": {"path": "/val"}, "extra": "foo"}
+                  },
+                  "message": "Msg"
+                }
+              ]
             }
           ]
         }
@@ -599,7 +695,7 @@
               "component": "Text",
               "text": {
                 "call": "formatString",
-                "args": { "value": 123 },
+                "args": {"value": 123},
                 "returnType": "string"
               }
             }
@@ -620,7 +716,7 @@
               "component": "Text",
               "text": {
                 "call": "formatNumber",
-                "args": { "value": 123.456, "decimals": true },
+                "args": {"value": 123.456, "decimals": true},
                 "returnType": "string"
               }
             }
@@ -641,7 +737,7 @@
               "component": "Text",
               "text": {
                 "call": "formatCurrency",
-                "args": { "value": 123.45, "currency": 840 },
+                "args": {"value": 123.45, "currency": 840},
                 "returnType": "string"
               }
             }
@@ -662,7 +758,7 @@
               "component": "Text",
               "text": {
                 "call": "formatDate",
-                "args": { "value": "2023-01-01", "format": null },
+                "args": {"value": "2023-01-01", "format": null},
                 "returnType": "string"
               }
             }
@@ -685,12 +781,12 @@
               "action": {
                 "functionCall": {
                   "call": "openUrl",
-                  "args": { "url": "not a uri" },
+                  "args": {"url": "not a uri"},
                   "returnType": "void"
                 }
               }
             },
-            { "id": "txt1", "component": "Text", "text": "Go" }
+            {"id": "txt1", "component": "Text", "text": "Go"}
           ]
         }
       }
@@ -742,7 +838,7 @@
                 {
                   "condition": {
                     "call": "and",
-                    "args": { "values": [true] }
+                    "args": {"values": [true]}
                   },
                   "message": "Msg"
                 }
@@ -799,7 +895,7 @@
                 {
                   "condition": {
                     "call": "or",
-                    "args": { "values": [true] }
+                    "args": {"values": [true]}
                   },
                   "message": "Msg"
                 }
@@ -856,7 +952,7 @@
                 {
                   "condition": {
                     "call": "not",
-                    "args": { "value": "true" },
+                    "args": {"value": "true"},
                     "returnType": "boolean"
                   },
                   "message": "Msg"
@@ -884,7 +980,7 @@
                 {
                   "condition": {
                     "call": "not",
-                    "args": { "value": true },
+                    "args": {"value": true},
                     "returnType": "string"
                   },
                   "message": "Msg"
@@ -912,7 +1008,7 @@
                 {
                   "condition": {
                     "call": "required",
-                    "args": { "value": { "path": "/val" }, "extra": 1 },
+                    "args": {"value": {"path": "/val"}, "extra": 1},
                     "returnType": "boolean"
                   },
                   "message": "Required"
@@ -940,7 +1036,7 @@
                 {
                   "condition": {
                     "call": "regex",
-                    "args": { "value": { "path": "/val" }, "pattern": "^abc$" },
+                    "args": {"value": {"path": "/val"}, "pattern": "^abc$"},
                     "returnType": "string"
                   },
                   "message": "Match"
@@ -968,7 +1064,7 @@
                 {
                   "condition": {
                     "call": "and",
-                    "args": { "values": [true, false] },
+                    "args": {"values": [true, false]},
                     "returnType": "string"
                   },
                   "message": "Msg"
diff --git a/specification/v0_9/test/cases/text_variants.json b/specification/v0_9/test/cases/text_variants.json
index 234c1262d..cfb5128f1 100644
--- a/specification/v0_9/test/cases/text_variants.json
+++ b/specification/v0_9/test/cases/text_variants.json
@@ -38,4 +38,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/tools/build_catalog/README.md b/tools/build_catalog/README.md
index 1cfe45981..c610291ee 100644
--- a/tools/build_catalog/README.md
+++ b/tools/build_catalog/README.md
@@ -98,9 +98,7 @@ uv run tools/build_catalog/assemble_catalog.py my_catalog.json --output-name ext
               "$ref": "common_types.json#/$defs/ComponentId"
             }
           },
-          "required": [
-            "text"
-          ]
+          "required": ["text"]
         }
       }
     ]
@@ -118,5 +116,4 @@ $ uv run tools/build_catalog/assemble_catalog.py sample_popup_catalog.json --out
 ```
 
 3. Your bundled catalog containing the fully synthesized `basic_catalog` and
-`common_types` requirements will be mapped out to `dist/sample_popup_catalog.json`.
-
+   `common_types` requirements will be mapped out to `dist/sample_popup_catalog.json`.
diff --git a/tools/build_catalog/tests/fixtures/basic_catalog.json b/tools/build_catalog/tests/fixtures/basic_catalog.json
index d2bdcbf94..0332c0938 100644
--- a/tools/build_catalog/tests/fixtures/basic_catalog.json
+++ b/tools/build_catalog/tests/fixtures/basic_catalog.json
@@ -4,7 +4,7 @@
     "Text": {
       "type": "object",
       "properties": {
-        "text": { "type": "string" }
+        "text": {"type": "string"}
       }
     }
   },
@@ -12,7 +12,7 @@
     "theme": {
       "type": "object",
       "properties": {
-        "primaryColor": { "type": "string" }
+        "primaryColor": {"type": "string"}
       }
     }
   }
diff --git a/tools/build_catalog/tests/fixtures/v0_8_custom_catalog.json b/tools/build_catalog/tests/fixtures/v0_8_custom_catalog.json
index a64814892..208374c92 100644
--- a/tools/build_catalog/tests/fixtures/v0_8_custom_catalog.json
+++ b/tools/build_catalog/tests/fixtures/v0_8_custom_catalog.json
@@ -3,11 +3,11 @@
     "CustomV08Component": {
       "type": "object",
       "properties": {
-        "title": { "$ref": "standard_catalog_definition.json#/components/Text" }
+        "title": {"$ref": "standard_catalog_definition.json#/components/Text"}
       }
     }
   },
   "styles": {
-    "secondaryColor": { "type": "string" }
+    "secondaryColor": {"type": "string"}
   }
 }
diff --git a/tools/build_catalog/tests/fixtures/v0_8_standard_catalog_definition.json b/tools/build_catalog/tests/fixtures/v0_8_standard_catalog_definition.json
index 5de802bcf..17f94eb78 100644
--- a/tools/build_catalog/tests/fixtures/v0_8_standard_catalog_definition.json
+++ b/tools/build_catalog/tests/fixtures/v0_8_standard_catalog_definition.json
@@ -3,7 +3,7 @@
     "Text": {
       "type": "object",
       "properties": {
-        "text": { "type": "string" }
+        "text": {"type": "string"}
       }
     }
   },
diff --git a/tools/composer/AGENTS.md b/tools/composer/AGENTS.md
index deb03854a..e5c151f12 100644
--- a/tools/composer/AGENTS.md
+++ b/tools/composer/AGENTS.md
@@ -1,16 +1,21 @@
 # Repository Guidelines
 
 ## Build, Test, and Development Commands
+
 Run `pnpm install` once, then `pnpm dev` for the web server (Next.js watches on port 3001). Build artifacts with `pnpm build`;
 
 ## Coding Style & Naming Conventions
+
 TypeScript and modern React are mandatory; prefer function components and colocate UI logic in `app/components`. Follow Prettier's defaults (two-space indentation, single quotes) by running `pnpm format` before commits. Component files use PascalCase (e.g., `AgentPanel.tsx`); hooks and utilities use camelCase in `*.ts`. The shared ESLint preset (`packages/eslint-config`) enforces `turbo/no-undeclared-env-vars`, so surface new env variables via typed helpers.
 
 ## Testing Guidelines
+
 There is no bundled unit-test runner yet, so treat linting and type-checking as minimum CI gates. Keep test fixtures (JSON, mock responses) alongside the code they exercise to match existing samples.
 
 ## Commit & Pull Request Guidelines
+
 Existing history uses short imperative subjects ("Add themed a2ui surface"); continue that pattern and reference issues in the footer as needed. Each PR should state scope, testing evidence, and any UI screenshots or terminal output that prove the agent path. Link design docs and flag follow-ups; ensure CI (`pnpm build`) is green before requesting review.
 
 ## Security & Configuration
+
 Never commit `.env` files or API keys; use `.env.local` for web and `.env` inside sample agents. Document any new secrets in `README.md`
diff --git a/tools/composer/README.md b/tools/composer/README.md
index d5ec285aa..d8202343e 100644
--- a/tools/composer/README.md
+++ b/tools/composer/README.md
@@ -1,18 +1,21 @@
 # A2UI Composer
+
 A tool for building A2UI widgets, powered by copilot kit. Run it yourself, or just go to https://a2ui-editor.ag-ui.com
 
 ![A2UI Composer](images/composer.png)
 
 ## Using the composer
+
 Just ask the composer to build you a widget, have it make any changes you want, copy the json, and paste it into your components that you give to your a2ui enabled agent!
 
 <video src="images/demo.mp4" controls width="100%"></video>
 
-
 ## Running the composer
+
 You need a `GOOGLE_GENERATIVE_AI_API_KEY` (or `GEMINI_API_KEY`) or `OPENAI_API_KEY` in a `.env.local` file in this directory.
 
 Example `.env.local`:
+
 ```env
 GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key_here
 # OR
@@ -22,6 +25,7 @@ OPENAI_API_KEY=your_openai_api_key_here
 ```
 
 ### Build Dependencies
+
 Since the composer depends on shared renderers in this repository, you must build them first:
 
 ```bash
@@ -45,18 +49,22 @@ cd ../../tools/composer
 ```
 
 Then, just install, build, and run!
+
 ```bash
 pnpm i && pnpm build
 pnpm dev
 ```
 
 ## Testing
+
 To run the tests:
+
 ```bash
 pnpm test
 ```
 
 To run tests in watch mode:
+
 ```bash
 pnpm test:watch
 ```
diff --git a/tools/composer/eslint.config.mjs b/tools/composer/eslint.config.mjs
index b10481601..bc8cb0d2b 100644
--- a/tools/composer/eslint.config.mjs
+++ b/tools/composer/eslint.config.mjs
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import js from "@eslint/js";
-import eslintConfigPrettier from "eslint-config-prettier";
-import turboPlugin from "eslint-plugin-turbo";
-import tseslint from "typescript-eslint";
-import onlyWarn from "eslint-plugin-only-warn";
-import pluginReactHooks from "eslint-plugin-react-hooks";
-import pluginReact from "eslint-plugin-react";
-import globals from "globals";
-import pluginNext from "@next/eslint-plugin-next";
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import turboPlugin from 'eslint-plugin-turbo';
+import tseslint from 'typescript-eslint';
+import onlyWarn from 'eslint-plugin-only-warn';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginReact from 'eslint-plugin-react';
+import globals from 'globals';
+import pluginNext from '@next/eslint-plugin-next';
 
 /**
  * ESLint configuration for widget-builder (Next.js app)
@@ -38,7 +38,7 @@ export default [
       turbo: turboPlugin,
     },
     rules: {
-      "turbo/no-undeclared-env-vars": "warn",
+      'turbo/no-undeclared-env-vars': 'warn',
     },
   },
   {
@@ -58,31 +58,25 @@ export default [
   },
   {
     plugins: {
-      "@next/next": pluginNext,
+      '@next/next': pluginNext,
     },
     rules: {
       ...pluginNext.configs.recommended.rules,
-      ...pluginNext.configs["core-web-vitals"].rules,
+      ...pluginNext.configs['core-web-vitals'].rules,
     },
   },
   {
     plugins: {
-      "react-hooks": pluginReactHooks,
+      'react-hooks': pluginReactHooks,
     },
-    settings: { react: { version: "detect" } },
+    settings: {react: {version: 'detect'}},
     rules: {
       ...pluginReactHooks.configs.recommended.rules,
       // React scope no longer necessary with new JSX transform.
-      "react/react-in-jsx-scope": "off",
+      'react/react-in-jsx-scope': 'off',
     },
   },
   {
-    ignores: [
-      "dist/**",
-      ".next/**",
-      "out/**",
-      "build/**",
-      "next-env.d.ts",
-    ],
+    ignores: ['dist/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
   },
 ];
diff --git a/tools/composer/next.config.ts b/tools/composer/next.config.ts
index 1bef6efdb..b03413a3a 100644
--- a/tools/composer/next.config.ts
+++ b/tools/composer/next.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { NextConfig } from "next";
+import type {NextConfig} from 'next';
 
 const nextConfig: NextConfig = {
   images: {
@@ -23,4 +23,3 @@ const nextConfig: NextConfig = {
 };
 
 export default nextConfig;
-
diff --git a/tools/composer/package.json b/tools/composer/package.json
index da46caf3a..2a6fae65b 100644
--- a/tools/composer/package.json
+++ b/tools/composer/package.json
@@ -73,4 +73,4 @@
     "vitest": "^4.0.18",
     "wrangler": "^4.73.0"
   }
-}
\ No newline at end of file
+}
diff --git a/tools/composer/postcss.config.mjs b/tools/composer/postcss.config.mjs
index 6972d5c57..80e887714 100644
--- a/tools/composer/postcss.config.mjs
+++ b/tools/composer/postcss.config.mjs
@@ -16,7 +16,7 @@
 
 const config = {
   plugins: {
-    "@tailwindcss/postcss": {},
+    '@tailwindcss/postcss': {},
   },
 };
 
diff --git a/tools/composer/scripts/sync-gallery.mjs b/tools/composer/scripts/sync-gallery.mjs
index 590d90c22..b3f652a41 100644
--- a/tools/composer/scripts/sync-gallery.mjs
+++ b/tools/composer/scripts/sync-gallery.mjs
@@ -24,9 +24,9 @@
  * Runs automatically via prebuild/predev hooks in package.json.
  */
 
-import { readFileSync, writeFileSync, readdirSync } from 'fs';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
+import {readFileSync, writeFileSync, readdirSync} from 'fs';
+import {join, dirname} from 'path';
+import {fileURLToPath} from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = join(__dirname, '../../..'); // monorepo root
@@ -53,21 +53,43 @@ const LICENSE = `/**
 
 // Gallery card heights per slug
 const HEIGHTS = {
-  'flight-status': 280, 'email-compose': 420, 'calendar-day': 380,
-  'weather-current': 320, 'product-card': 380, 'music-player': 400,
-  'task-card': 200, 'user-profile': 420, 'login-form': 340,
-  'notification-permission': 240, 'purchase-complete': 380, 'chat-message': 380,
-  'coffee-order': 420, 'sports-player': 380, 'account-balance': 280,
-  'workout-summary': 320, 'event-detail': 320, 'track-list': 380,
-  'software-purchase': 380, 'restaurant-card': 340, 'shipping-status': 380,
-  'credit-card': 280, 'step-counter': 320, 'recipe-card': 380,
-  'contact-card': 400, 'podcast-episode': 300, 'stats-card': 240,
-  'countdown-timer': 260, 'movie-card': 380,
+  'flight-status': 280,
+  'email-compose': 420,
+  'calendar-day': 380,
+  'weather-current': 320,
+  'product-card': 380,
+  'music-player': 400,
+  'task-card': 200,
+  'user-profile': 420,
+  'login-form': 340,
+  'notification-permission': 240,
+  'purchase-complete': 380,
+  'chat-message': 380,
+  'coffee-order': 420,
+  'sports-player': 380,
+  'account-balance': 280,
+  'workout-summary': 320,
+  'event-detail': 320,
+  'track-list': 380,
+  'software-purchase': 380,
+  'restaurant-card': 340,
+  'shipping-status': 380,
+  'credit-card': 280,
+  'step-counter': 320,
+  'recipe-card': 380,
+  'contact-card': 400,
+  'podcast-episode': 300,
+  'stats-card': 240,
+  'countdown-timer': 260,
+  'movie-card': 380,
 };
 const DEFAULT_HEIGHT = 340;
 
 function slugToName(slug) {
-  return slug.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+  return slug
+    .split('-')
+    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
 }
 
 /**
@@ -107,16 +129,24 @@ function sanitizeV08Components(components) {
 
     for (const [type, props] of Object.entries(inner)) {
       // Fix unsupported textFieldType values
-      if (type === 'TextField' && props.textFieldType && !V08_TEXTFIELD_TYPES.has(props.textFieldType)) {
+      if (
+        type === 'TextField' &&
+        props.textFieldType &&
+        !V08_TEXTFIELD_TYPES.has(props.textFieldType)
+      ) {
         props.textFieldType = 'shortText';
       }
       // Fix unsupported alignment values
-      if ((type === 'Row' || type === 'Column') && props.alignment && !V08_ALIGNMENTS.has(props.alignment)) {
+      if (
+        (type === 'Row' || type === 'Column') &&
+        props.alignment &&
+        !V08_ALIGNMENTS.has(props.alignment)
+      ) {
         props.alignment = 'center';
       }
       // Ensure action is an object, not a string
       if (type === 'Button' && typeof props.action === 'string') {
-        props.action = { name: props.action };
+        props.action = {name: props.action};
       }
     }
     return copy;
@@ -171,7 +201,9 @@ function parseV09(example, slug) {
 }
 
 function generateFile(examplesDir, version, parser) {
-  const files = readdirSync(examplesDir).filter(f => f.endsWith('.json')).sort();
+  const files = readdirSync(examplesDir)
+    .filter(f => f.endsWith('.json'))
+    .sort();
   const widgets = [];
 
   for (const file of files) {
@@ -179,12 +211,12 @@ function generateFile(examplesDir, version, parser) {
     const raw = JSON.parse(readFileSync(join(examplesDir, file), 'utf-8'));
     const parsed = parser(raw, slug);
     const height = HEIGHTS[slug] || DEFAULT_HEIGHT;
-    widgets.push({ slug, parsed, height });
+    widgets.push({slug, parsed, height});
   }
 
-  const json = (obj) => JSON.stringify(obj, null, 2).replace(/\n/g, '\n  ');
+  const json = obj => JSON.stringify(obj, null, 2).replace(/\n/g, '\n  ');
 
-  const entries = widgets.map(({ slug, parsed, height }) => {
+  const entries = widgets.map(({slug, parsed, height}) => {
     const constName = slug.toUpperCase().replace(/-/g, '_');
     return `
 const ${constName} = {
@@ -203,9 +235,9 @@ const ${constName} = {
   });
 
   const arrayName = version === '0.8' ? 'V08_GALLERY_WIDGETS' : 'V09_GALLERY_WIDGETS';
-  const arrayEntries = widgets.map(({ slug }) =>
-    `  ${slug.toUpperCase().replace(/-/g, '_')},`
-  ).join('\n');
+  const arrayEntries = widgets
+    .map(({slug}) => `  ${slug.toUpperCase().replace(/-/g, '_')},`)
+    .join('\n');
 
   return `${LICENSE}
 
diff --git a/tools/composer/src/app/api/copilotkit/[[...slug]]/route.ts b/tools/composer/src/app/api/copilotkit/[[...slug]]/route.ts
index 36acf4d96..2e7cce6d1 100644
--- a/tools/composer/src/app/api/copilotkit/[[...slug]]/route.ts
+++ b/tools/composer/src/app/api/copilotkit/[[...slug]]/route.ts
@@ -19,35 +19,29 @@ import {
   createCopilotEndpoint,
   InMemoryAgentRunner,
   BuiltInAgent,
-} from "@copilotkit/runtime/v2";
-export const dynamic = "force-dynamic";
-import { handle } from "hono/vercel";
-import { A2UI_V08_PROMPT } from "../a2ui-prompt-v08";
-import { A2UI_V09_PROMPT } from "../a2ui-prompt-v09";
+} from '@copilotkit/runtime/v2';
+export const dynamic = 'force-dynamic';
+import {handle} from 'hono/vercel';
+import {A2UI_V08_PROMPT} from '../a2ui-prompt-v08';
+import {A2UI_V09_PROMPT} from '../a2ui-prompt-v09';
 
 const determineModel = () => {
-  if (
-    process.env.GOOGLE_GENERATIVE_AI_API_KEY?.trim() ||
-    process.env.GEMINI_API_KEY?.trim()
-  ) {
-    if (
-      !process.env.GOOGLE_GENERATIVE_AI_API_KEY &&
-      process.env.GEMINI_API_KEY
-    ) {
+  if (process.env.GOOGLE_GENERATIVE_AI_API_KEY?.trim() || process.env.GEMINI_API_KEY?.trim()) {
+    if (!process.env.GOOGLE_GENERATIVE_AI_API_KEY && process.env.GEMINI_API_KEY) {
       process.env.GOOGLE_GENERATIVE_AI_API_KEY = process.env.GEMINI_API_KEY;
     }
-    return "google/gemini-2.5-flash";
+    return 'google/gemini-2.5-flash';
   }
   if (process.env.OPENAI_API_KEY?.trim()) {
     console.warn(
-      "[CopilotKit] GEMINI_API_KEY/GOOGLE_GENERATIVE_AI_API_KEY not found, falling back to OpenAI",
+      '[CopilotKit] GEMINI_API_KEY/GOOGLE_GENERATIVE_AI_API_KEY not found, falling back to OpenAI',
     );
-    return "openai/gpt-4.1-mini";
+    return 'openai/gpt-4.1-mini';
   }
   console.warn(
-    "[CopilotKit] No GEMINI_API_KEY, GOOGLE_GENERATIVE_AI_API_KEY or OPENAI_API_KEY found",
+    '[CopilotKit] No GEMINI_API_KEY, GOOGLE_GENERATIVE_AI_API_KEY or OPENAI_API_KEY found',
   );
-  return "google/gemini-2.5-flash";
+  return 'google/gemini-2.5-flash';
 };
 
 const model = determineModel();
@@ -75,7 +69,7 @@ const copilotRuntime = new CopilotRuntime({
 
 const app = createCopilotEndpoint({
   runtime: copilotRuntime,
-  basePath: "/api/copilotkit",
+  basePath: '/api/copilotkit',
 });
 
 export const GET = handle(app);
diff --git a/tools/composer/src/app/api/copilotkit/a2ui-prompt-v08.ts b/tools/composer/src/app/api/copilotkit/a2ui-prompt-v08.ts
index 2176f62b4..2f09d7b8c 100644
--- a/tools/composer/src/app/api/copilotkit/a2ui-prompt-v08.ts
+++ b/tools/composer/src/app/api/copilotkit/a2ui-prompt-v08.ts
@@ -19,8 +19,8 @@
  *
  * Uses the actual v0.8 catalog spec from the specification directory.
  */
-import { readFileSync } from 'fs';
-import { join } from 'path';
+import {readFileSync} from 'fs';
+import {join} from 'path';
 
 // Load the actual v0.8 catalog spec
 const catalogSpec = readFileSync(
diff --git a/tools/composer/src/app/api/copilotkit/a2ui-prompt-v09.ts b/tools/composer/src/app/api/copilotkit/a2ui-prompt-v09.ts
index d7c677de1..9a555b750 100644
--- a/tools/composer/src/app/api/copilotkit/a2ui-prompt-v09.ts
+++ b/tools/composer/src/app/api/copilotkit/a2ui-prompt-v09.ts
@@ -19,8 +19,8 @@
  *
  * Uses the actual v0.9 catalog spec and rules from the specification directory.
  */
-import { readFileSync } from 'fs';
-import { join } from 'path';
+import {readFileSync} from 'fs';
+import {join} from 'path';
 
 // Load the actual v0.9 catalog spec and rules
 const catalogSpec = readFileSync(
diff --git a/tools/composer/src/app/components/layout.tsx b/tools/composer/src/app/components/layout.tsx
index f5fd04e65..dba72ca7f 100644
--- a/tools/composer/src/app/components/layout.tsx
+++ b/tools/composer/src/app/components/layout.tsx
@@ -14,16 +14,12 @@
  * limitations under the License.
  */
 
-import { Metadata } from 'next';
+import {Metadata} from 'next';
 
 export const metadata: Metadata = {
   title: 'Components | A2UI Composer',
 };
 
-export default function ComponentsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function ComponentsLayout({children}: {children: React.ReactNode}) {
   return children;
 }
diff --git a/tools/composer/src/app/components/page.tsx b/tools/composer/src/app/components/page.tsx
index 505384c76..20fcce8b8 100644
--- a/tools/composer/src/app/components/page.tsx
+++ b/tools/composer/src/app/components/page.tsx
@@ -16,14 +16,14 @@
 
 'use client';
 
-import { useState } from 'react';
-import { cn } from '@/lib/utils';
-import { COMPONENTS_DATA } from '@/lib/components-data';
-import { COMPONENTS_DATA_V09 } from '@/lib/components-data-v09';
-import type { ComponentDoc } from '@/lib/components-data';
-import { A2UIViewer } from '@/lib/a2ui';
-import { useSpecVersion } from '@/contexts/spec-version-context';
-import type { SpecVersion } from '@/types/widget';
+import {useState} from 'react';
+import {cn} from '@/lib/utils';
+import {COMPONENTS_DATA} from '@/lib/components-data';
+import {COMPONENTS_DATA_V09} from '@/lib/components-data-v09';
+import type {ComponentDoc} from '@/lib/components-data';
+import {A2UIViewer} from '@/lib/a2ui';
+import {useSpecVersion} from '@/contexts/spec-version-context';
+import type {SpecVersion} from '@/types/widget';
 
 function ComponentSidebar({
   selectedComponent,
@@ -37,11 +37,11 @@ function ComponentSidebar({
   return (
     <nav className="w-48 shrink-0 border-r border-border overflow-auto">
       <div className="p-4">
-        {data.map((category) => (
+        {data.map(category => (
           <div key={category.name} className="mb-4">
             <div className="text-sm text-muted-foreground mb-2">{category.name}</div>
             <div className="flex flex-col gap-0.5">
-              {category.components.map((component) => (
+              {category.components.map(component => (
                 <button
                   key={component.name}
                   onClick={() => onSelect(component.name)}
@@ -49,7 +49,7 @@ function ComponentSidebar({
                     'text-left px-2 py-1.5 text-sm rounded-md transition-colors',
                     selectedComponent === component.name
                       ? 'font-medium text-foreground'
-                      : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-muted',
                   )}
                 >
                   {component.name}
@@ -63,7 +63,7 @@ function ComponentSidebar({
   );
 }
 
-function UsageBlock({ code }: { code: string }) {
+function UsageBlock({code}: {code: string}) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -80,24 +80,31 @@ function UsageBlock({ code }: { code: string }) {
         className="absolute right-3 top-3 p-1.5 rounded hover:bg-muted"
         title="Copy to clipboard"
       >
-        <svg className="h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
-          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
+        <svg
+          className="h-4 w-4 text-muted-foreground"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
         </svg>
       </button>
       {copied && (
-        <span className="absolute right-10 top-3.5 text-xs text-muted-foreground">
-          Copied!
-        </span>
+        <span className="absolute right-10 top-3.5 text-xs text-muted-foreground">Copied!</span>
       )}
     </div>
   );
 }
 
-function PropValues({ values }: { values: string[] }) {
+function PropValues({values}: {values: string[]}) {
   return (
     <div className="flex flex-wrap gap-1.5 mt-1">
-      {values.map((value) => (
+      {values.map(value => (
         <code
           key={value}
           className="px-1.5 py-0.5 text-xs rounded bg-green-50 text-green-700 border border-green-200"
@@ -109,7 +116,7 @@ function PropValues({ values }: { values: string[] }) {
   );
 }
 
-function PropsTable({ component }: { component: ComponentDoc }) {
+function PropsTable({component}: {component: ComponentDoc}) {
   return (
     <div className="border border-border rounded-lg overflow-hidden bg-white">
       <table className="w-full text-sm">
@@ -122,7 +129,10 @@ function PropsTable({ component }: { component: ComponentDoc }) {
         </thead>
         <tbody>
           {component.props.map((prop, index) => (
-            <tr key={prop.name} className={index < component.props.length - 1 ? 'border-b border-border' : ''}>
+            <tr
+              key={prop.name}
+              className={index < component.props.length - 1 ? 'border-b border-border' : ''}
+            >
               <td className="px-4 py-3 align-top">
                 <code className="px-1.5 py-0.5 text-xs rounded bg-green-50 text-green-700 border border-green-200">
                   {prop.name}
@@ -155,7 +165,13 @@ function PropsTable({ component }: { component: ComponentDoc }) {
   );
 }
 
-function ComponentPreview({ component, specVersion }: { component: ComponentDoc; specVersion: SpecVersion }) {
+function ComponentPreview({
+  component,
+  specVersion,
+}: {
+  component: ComponentDoc;
+  specVersion: SpecVersion;
+}) {
   if (!component.preview) {
     return null;
   }
@@ -169,14 +185,20 @@ function ComponentPreview({ component, specVersion }: { component: ComponentDoc;
           components={component.preview.components}
           data={component.preview.data ?? {}}
           specVersion={specVersion}
-          onAction={(action) => console.log('Component action:', action)}
+          onAction={action => console.log('Component action:', action)}
         />
       </div>
     </div>
   );
 }
 
-function ComponentContent({ component, specVersion }: { component: ComponentDoc; specVersion: SpecVersion }) {
+function ComponentContent({
+  component,
+  specVersion,
+}: {
+  component: ComponentDoc;
+  specVersion: SpecVersion;
+}) {
   return (
     <div className="flex-1 overflow-auto p-8">
       <h1 className="text-3xl font-semibold mb-2">{component.name}</h1>
@@ -194,14 +216,14 @@ function ComponentContent({ component, specVersion }: { component: ComponentDoc;
 }
 
 export default function ComponentsPage() {
-  const { specVersion, isLoaded } = useSpecVersion();
+  const {specVersion, isLoaded} = useSpecVersion();
   const componentsData = specVersion === '0.9' ? COMPONENTS_DATA_V09 : COMPONENTS_DATA;
   const [selectedComponent, setSelectedComponent] = useState('Row');
 
   // Find the selected component
   const component = componentsData
-    .flatMap((cat) => cat.components)
-    .find((c) => c.name === selectedComponent);
+    .flatMap(cat => cat.components)
+    .find(c => c.name === selectedComponent);
 
   return (
     <div className="flex h-full flex-1">
@@ -210,7 +232,9 @@ export default function ComponentsPage() {
         onSelect={setSelectedComponent}
         data={componentsData}
       />
-      {isLoaded && component && <ComponentContent component={component} specVersion={specVersion} />}
+      {isLoaded && component && (
+        <ComponentContent component={component} specVersion={specVersion} />
+      )}
     </div>
   );
 }
diff --git a/tools/composer/src/app/gallery/layout.tsx b/tools/composer/src/app/gallery/layout.tsx
index aa848abb4..227797fba 100644
--- a/tools/composer/src/app/gallery/layout.tsx
+++ b/tools/composer/src/app/gallery/layout.tsx
@@ -14,16 +14,12 @@
  * limitations under the License.
  */
 
-import { Metadata } from 'next';
+import {Metadata} from 'next';
 
 export const metadata: Metadata = {
   title: 'Gallery | A2UI Composer',
 };
 
-export default function GalleryLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function GalleryLayout({children}: {children: React.ReactNode}) {
   return children;
 }
diff --git a/tools/composer/src/app/gallery/page.tsx b/tools/composer/src/app/gallery/page.tsx
index 23e1309d5..d79a5574b 100644
--- a/tools/composer/src/app/gallery/page.tsx
+++ b/tools/composer/src/app/gallery/page.tsx
@@ -16,20 +16,20 @@
 
 'use client';
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { GalleryWidget } from '@/components/gallery/gallery-widget';
-import { WidgetPreviewModal } from '@/components/gallery/widget-preview-modal';
-import { Widget } from '@/types/widget';
-import { useWidgets } from '@/contexts/widgets-context';
-import { useSpecVersion } from '@/contexts/spec-version-context';
-import { V08_GALLERY_WIDGETS, V09_GALLERY_WIDGETS } from '@/data/gallery';
+import {useState} from 'react';
+import {useRouter} from 'next/navigation';
+import {GalleryWidget} from '@/components/gallery/gallery-widget';
+import {WidgetPreviewModal} from '@/components/gallery/widget-preview-modal';
+import {Widget} from '@/types/widget';
+import {useWidgets} from '@/contexts/widgets-context';
+import {useSpecVersion} from '@/contexts/spec-version-context';
+import {V08_GALLERY_WIDGETS, V09_GALLERY_WIDGETS} from '@/data/gallery';
 
 export default function GalleryPage() {
   const [selectedWidget, setSelectedWidget] = useState<Widget | null>(null);
-  const { addWidget } = useWidgets();
+  const {addWidget} = useWidgets();
   const router = useRouter();
-  const { specVersion, isLoaded } = useSpecVersion();
+  const {specVersion, isLoaded} = useSpecVersion();
 
   const galleryWidgets = specVersion === '0.9' ? V09_GALLERY_WIDGETS : V08_GALLERY_WIDGETS;
 
@@ -56,16 +56,21 @@ export default function GalleryPage() {
   return (
     <div className="flex-1 overflow-auto p-6">
       <h1 className="mb-6 text-2xl font-semibold">Gallery</h1>
-      <div className="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5" style={{ columnWidth: '308px' }}>
-        {!isLoaded ? null : galleryWidgets.map((item) => (
-          <div key={item.widget.id} className="mb-4 break-inside-avoid">
-            <GalleryWidget
-              widget={item.widget}
-              height={item.height}
-              onClick={() => setSelectedWidget(item.widget)}
-            />
-          </div>
-        ))}
+      <div
+        className="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        style={{columnWidth: '308px'}}
+      >
+        {!isLoaded
+          ? null
+          : galleryWidgets.map(item => (
+              <div key={item.widget.id} className="mb-4 break-inside-avoid">
+                <GalleryWidget
+                  widget={item.widget}
+                  height={item.height}
+                  onClick={() => setSelectedWidget(item.widget)}
+                />
+              </div>
+            ))}
       </div>
 
       {selectedWidget && (
diff --git a/tools/composer/src/app/globals.css b/tools/composer/src/app/globals.css
index 8522b3952..33d132001 100644
--- a/tools/composer/src/app/globals.css
+++ b/tools/composer/src/app/globals.css
@@ -15,10 +15,10 @@
  */
 
 /* CopilotKit CSS must load BEFORE Tailwind so our @layer base overrides theirs */
-@import "@copilotkit/react-core/v2/styles.css";
+@import '@copilotkit/react-core/v2/styles.css';
 
-@import "tailwindcss";
-@import "tw-animate-css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/tools/composer/src/app/icons/layout.tsx b/tools/composer/src/app/icons/layout.tsx
index 9a9288770..8b0f39b65 100644
--- a/tools/composer/src/app/icons/layout.tsx
+++ b/tools/composer/src/app/icons/layout.tsx
@@ -14,16 +14,12 @@
  * limitations under the License.
  */
 
-import { Metadata } from 'next';
+import {Metadata} from 'next';
 
 export const metadata: Metadata = {
   title: 'Icons | A2UI Composer',
 };
 
-export default function IconsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function IconsLayout({children}: {children: React.ReactNode}) {
   return children;
 }
diff --git a/tools/composer/src/app/icons/page.tsx b/tools/composer/src/app/icons/page.tsx
index 66f8024fc..a1dcf6478 100644
--- a/tools/composer/src/app/icons/page.tsx
+++ b/tools/composer/src/app/icons/page.tsx
@@ -16,66 +16,176 @@
 
 'use client';
 
-import { useState } from 'react';
-import { cn } from '@/lib/utils';
-import { ExternalLink, Copy, Check } from 'lucide-react';
-import { A2UIViewer } from '@/lib/a2ui';
-import { useSpecVersion } from '@/contexts/spec-version-context';
-import type { A2UIComponent, SpecVersion } from '@/types/widget';
+import {useState} from 'react';
+import {cn} from '@/lib/utils';
+import {ExternalLink, Copy, Check} from 'lucide-react';
+import {A2UIViewer} from '@/lib/a2ui';
+import {useSpecVersion} from '@/contexts/spec-version-context';
+import type {A2UIComponent, SpecVersion} from '@/types/widget';
 
 // 100 most important Material Icons for common UI patterns
 const MATERIAL_ICONS = [
   // Navigation & Actions
-  'home', 'menu', 'close', 'arrow_back', 'arrow_forward', 'chevron_left', 'chevron_right',
-  'expand_more', 'expand_less', 'more_vert', 'more_horiz', 'refresh', 'search', 'settings',
+  'home',
+  'menu',
+  'close',
+  'arrow_back',
+  'arrow_forward',
+  'chevron_left',
+  'chevron_right',
+  'expand_more',
+  'expand_less',
+  'more_vert',
+  'more_horiz',
+  'refresh',
+  'search',
+  'settings',
 
   // Common Actions
-  'add', 'remove', 'edit', 'delete', 'save', 'done', 'check', 'check_circle', 'cancel',
-  'send', 'share', 'download', 'upload', 'print', 'copy', 'content_paste',
+  'add',
+  'remove',
+  'edit',
+  'delete',
+  'save',
+  'done',
+  'check',
+  'check_circle',
+  'cancel',
+  'send',
+  'share',
+  'download',
+  'upload',
+  'print',
+  'copy',
+  'content_paste',
 
   // Communication
-  'mail', 'email', 'message', 'chat', 'phone', 'call', 'notifications', 'notification_important',
+  'mail',
+  'email',
+  'message',
+  'chat',
+  'phone',
+  'call',
+  'notifications',
+  'notification_important',
 
   // Media
-  'play_arrow', 'pause', 'stop', 'skip_next', 'skip_previous', 'volume_up', 'volume_off',
-  'mic', 'videocam', 'photo_camera', 'image', 'music_note',
+  'play_arrow',
+  'pause',
+  'stop',
+  'skip_next',
+  'skip_previous',
+  'volume_up',
+  'volume_off',
+  'mic',
+  'videocam',
+  'photo_camera',
+  'image',
+  'music_note',
 
   // People & Account
-  'person', 'people', 'group', 'account_circle', 'face', 'sentiment_satisfied',
+  'person',
+  'people',
+  'group',
+  'account_circle',
+  'face',
+  'sentiment_satisfied',
 
   // Status & Info
-  'info', 'help', 'warning', 'error', 'error_outline', 'report', 'verified',
-  'star', 'star_border', 'favorite', 'favorite_border', 'thumb_up', 'thumb_down',
+  'info',
+  'help',
+  'warning',
+  'error',
+  'error_outline',
+  'report',
+  'verified',
+  'star',
+  'star_border',
+  'favorite',
+  'favorite_border',
+  'thumb_up',
+  'thumb_down',
 
   // Content & Files
-  'folder', 'folder_open', 'file_copy', 'description', 'article', 'note', 'attachment',
-  'link', 'insert_link', 'cloud', 'cloud_upload', 'cloud_download',
+  'folder',
+  'folder_open',
+  'file_copy',
+  'description',
+  'article',
+  'note',
+  'attachment',
+  'link',
+  'insert_link',
+  'cloud',
+  'cloud_upload',
+  'cloud_download',
 
   // Time & Date
-  'schedule', 'access_time', 'today', 'event', 'calendar_today', 'alarm',
+  'schedule',
+  'access_time',
+  'today',
+  'event',
+  'calendar_today',
+  'alarm',
 
   // Location
-  'place', 'location_on', 'map', 'directions', 'navigation', 'near_me',
+  'place',
+  'location_on',
+  'map',
+  'directions',
+  'navigation',
+  'near_me',
 
   // Shopping & Commerce
-  'shopping_cart', 'add_shopping_cart', 'store', 'payment', 'credit_card', 'receipt',
+  'shopping_cart',
+  'add_shopping_cart',
+  'store',
+  'payment',
+  'credit_card',
+  'receipt',
 
   // Device & Hardware
-  'smartphone', 'laptop', 'desktop_windows', 'keyboard', 'mouse', 'bluetooth', 'wifi',
+  'smartphone',
+  'laptop',
+  'desktop_windows',
+  'keyboard',
+  'mouse',
+  'bluetooth',
+  'wifi',
 
   // Misc UI
-  'visibility', 'visibility_off', 'lock', 'lock_open', 'key', 'security',
-  'dashboard', 'list', 'view_list', 'grid_view', 'table_chart', 'bar_chart',
+  'visibility',
+  'visibility_off',
+  'lock',
+  'lock_open',
+  'key',
+  'security',
+  'dashboard',
+  'list',
+  'view_list',
+  'grid_view',
+  'table_chart',
+  'bar_chart',
 ];
 
 function iconComponent(name: string, specVersion: SpecVersion): A2UIComponent[] {
   if (specVersion === '0.9') {
-    return [{ id: 'icon', component: 'Icon', name }];
+    return [{id: 'icon', component: 'Icon', name}];
   }
-  return [{ id: 'icon', component: { Icon: { name: { literalString: name } } } }];
+  return [{id: 'icon', component: {Icon: {name: {literalString: name}}}}];
 }
 
-function IconCard({ name, isSelected, onClick, specVersion }: { name: string; isSelected: boolean; onClick: () => void; specVersion: SpecVersion }) {
+function IconCard({
+  name,
+  isSelected,
+  onClick,
+  specVersion,
+}: {
+  name: string;
+  isSelected: boolean;
+  onClick: () => void;
+  specVersion: SpecVersion;
+}) {
   return (
     <button
       onClick={onClick}
@@ -83,7 +193,7 @@ function IconCard({ name, isSelected, onClick, specVersion }: { name: string; is
         'flex flex-col items-center gap-2 p-4 rounded-xl border transition-colors',
         isSelected
           ? 'border-foreground bg-muted'
-          : 'border-border bg-white hover:border-muted-foreground/30'
+          : 'border-border bg-white hover:border-muted-foreground/30',
       )}
     >
       <div className="flex h-12 w-12 items-center justify-center scale-[2]">
@@ -93,15 +203,13 @@ function IconCard({ name, isSelected, onClick, specVersion }: { name: string; is
           specVersion={specVersion}
         />
       </div>
-      <span className="text-xs text-muted-foreground truncate w-full text-center">
-        {name}
-      </span>
+      <span className="text-xs text-muted-foreground truncate w-full text-center">{name}</span>
     </button>
   );
 }
 
 export default function IconsPage() {
-  const { specVersion } = useSpecVersion();
+  const {specVersion} = useSpecVersion();
   const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
@@ -152,7 +260,7 @@ export default function IconsPage() {
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 2xl:grid-cols-12">
-        {MATERIAL_ICONS.map((name) => (
+        {MATERIAL_ICONS.map(name => (
           <IconCard
             key={name}
             name={name}
diff --git a/tools/composer/src/app/layout.tsx b/tools/composer/src/app/layout.tsx
index 77e7f1f23..07ce90bf8 100644
--- a/tools/composer/src/app/layout.tsx
+++ b/tools/composer/src/app/layout.tsx
@@ -14,24 +14,24 @@
  * limitations under the License.
  */
 
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import { AppShell } from "@/components/layout/app-shell";
+import type {Metadata} from 'next';
+import {Geist, Geist_Mono} from 'next/font/google';
+import './globals.css';
+import {AppShell} from '@/components/layout/app-shell';
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "A2UI Composer",
-  description: "Create and compose A2UI widgets",
+  title: 'A2UI Composer',
+  description: 'Create and compose A2UI widgets',
 };
 
 export default function RootLayout({
@@ -47,9 +47,7 @@ export default function RootLayout({
           href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
         />
       </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
         <AppShell>{children}</AppShell>
       </body>
     </html>
diff --git a/tools/composer/src/app/page.tsx b/tools/composer/src/app/page.tsx
index 941f6185c..d4d002ee6 100644
--- a/tools/composer/src/app/page.tsx
+++ b/tools/composer/src/app/page.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { Metadata } from 'next';
-import { CreateWidget } from '@/components/main/create-widget';
+import {Metadata} from 'next';
+import {CreateWidget} from '@/components/main/create-widget';
 
 export const metadata: Metadata = {
   title: 'Create | A2UI Composer',
diff --git a/tools/composer/src/app/theater/page.tsx b/tools/composer/src/app/theater/page.tsx
index a30963f86..83ca35ccf 100644
--- a/tools/composer/src/app/theater/page.tsx
+++ b/tools/composer/src/app/theater/page.tsx
@@ -16,21 +16,29 @@
 
 'use client';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { 
-  Play, Pause, SkipBack, Settings,
-  ChevronDown, Activity, Code2,
-  Zap, LayoutTemplate, Monitor, Database
+import React, {useState, useEffect, useRef, useCallback} from 'react';
+import {
+  Play,
+  Pause,
+  SkipBack,
+  Settings,
+  ChevronDown,
+  Activity,
+  Code2,
+  Zap,
+  LayoutTemplate,
+  Monitor,
+  Database,
 } from 'lucide-react';
-import { useStreamingPlayer } from '@/components/theater/useStreamingPlayer';
-import { useA2UISurface } from '@/components/theater/useA2UISurface';
-import { A2UIViewer } from '@/lib/a2ui';
-import { Button } from '@/components/ui/button';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
-import { scenarios, ScenarioId } from '@/data/theater';
+import {useStreamingPlayer} from '@/components/theater/useStreamingPlayer';
+import {useA2UISurface} from '@/components/theater/useA2UISurface';
+import {A2UIViewer} from '@/lib/a2ui';
+import {Button} from '@/components/ui/button';
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable';
+import {scenarios, ScenarioId} from '@/data/theater';
 
 const RENDERERS = ['Lit (Web Components)', 'React', 'Angular'] as const;
-type RendererType = typeof RENDERERS[number];
+type RendererType = (typeof RENDERERS)[number];
 type LeftTab = 'events' | 'data' | 'config';
 
 function updateURL(scenario: string, step: number, renderer: string) {
@@ -42,7 +50,7 @@ function updateURL(scenario: string, step: number, renderer: string) {
   window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
 }
 
-function readURL(): { scenario?: string; step?: number; renderer?: string } {
+function readURL(): {scenario?: string; step?: number; renderer?: string} {
   if (typeof window === 'undefined') return {};
   const params = new URLSearchParams(window.location.search);
   return {
@@ -68,7 +76,9 @@ export default function TheaterPage() {
   }, []);
   const [selectedScenario, setSelectedScenario] = useState<ScenarioId>(() => {
     const url = readURL();
-    return (url.scenario && url.scenario in scenarios) ? url.scenario as ScenarioId : 'restaurant-booking';
+    return url.scenario && url.scenario in scenarios
+      ? (url.scenario as ScenarioId)
+      : 'restaurant-booking';
   });
 
   const {
@@ -92,7 +102,8 @@ export default function TheaterPage() {
 
   useEffect(() => {
     const url = readURL();
-    if (url.renderer && RENDERERS.includes(url.renderer as RendererType)) setRenderer(url.renderer as RendererType);
+    if (url.renderer && RENDERERS.includes(url.renderer as RendererType))
+      setRenderer(url.renderer as RendererType);
     if (url.step !== undefined) seek(url.step);
   }, []);
 
@@ -100,17 +111,20 @@ export default function TheaterPage() {
     updateURL(selectedScenario, progress, renderer);
   }, [selectedScenario, progress, renderer]);
 
-  const handleScenarioChange = useCallback((id: ScenarioId) => {
-    setSelectedScenario(id);
-    stop();
-  }, [stop]);
+  const handleScenarioChange = useCallback(
+    (id: ScenarioId) => {
+      setSelectedScenario(id);
+      stop();
+    },
+    [stop],
+  );
 
   const dataEndRef = useRef<HTMLDivElement>(null);
   const eventsEndRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (playbackState === 'playing') {
-      dataEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
-      eventsEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      dataEndRef.current?.scrollIntoView({behavior: 'smooth', block: 'end'});
+      eventsEndRef.current?.scrollIntoView({behavior: 'smooth', block: 'end'});
     }
   }, [progress, playbackState]);
 
@@ -140,7 +154,11 @@ export default function TheaterPage() {
   }, [playbackState, progress, totalChunks, play, pause, seek]);
 
   if (!mounted) {
-    return <div className="flex h-screen items-center justify-center bg-background text-foreground font-sans">Loading...</div>;
+    return (
+      <div className="flex h-screen items-center justify-center bg-background text-foreground font-sans">
+        Loading...
+      </div>
+    );
   }
 
   return (
@@ -148,12 +166,15 @@ export default function TheaterPage() {
       {/* Header */}
       <header className="relative z-10 flex h-14 items-center justify-between gap-4 border-b bg-background/80 px-4 md:px-6 backdrop-blur-md">
         <div className="hidden md:flex items-center gap-1 rounded-xl bg-muted/50 p-1 shadow-inner border border-border/50">
-          {([
-            { id: 'events' as LeftTab, icon: Activity, label: 'Events' },
-            { id: 'data' as LeftTab, icon: Database, label: 'Data' },
-            { id: 'config' as LeftTab, icon: Settings, label: 'Config' },
-          ]).map(tab => (
-            <Button key={tab.id} variant="ghost" size="sm"
+          {[
+            {id: 'events' as LeftTab, icon: Activity, label: 'Events'},
+            {id: 'data' as LeftTab, icon: Database, label: 'Data'},
+            {id: 'config' as LeftTab, icon: Settings, label: 'Config'},
+          ].map(tab => (
+            <Button
+              key={tab.id}
+              variant="ghost"
+              size="sm"
               className={`h-8 text-xs font-medium px-3 gap-1.5 rounded-lg transition-all ${leftTab === tab.id ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
               onClick={() => setLeftTab(tab.id)}
             >
@@ -165,38 +186,67 @@ export default function TheaterPage() {
         {/* Playback */}
         <div className="flex flex-1 max-w-2xl items-center gap-3 md:gap-5">
           <div className="flex items-center gap-1.5">
-            <Button variant="outline" size="icon" className="h-8 w-8 rounded-full border-border/50" onClick={stop}>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8 rounded-full border-border/50"
+              onClick={stop}
+            >
               <SkipBack className="h-3.5 w-3.5 text-muted-foreground" />
             </Button>
             {playbackState === 'playing' ? (
-              <Button variant="default" size="icon" className="h-9 w-9 rounded-full shadow-md" onClick={pause}>
+              <Button
+                variant="default"
+                size="icon"
+                className="h-9 w-9 rounded-full shadow-md"
+                onClick={pause}
+              >
                 <Pause className="h-4 w-4" />
               </Button>
             ) : (
-              <Button variant="default" size="icon" className="h-9 w-9 rounded-full shadow-md bg-primary" onClick={play}>
+              <Button
+                variant="default"
+                size="icon"
+                className="h-9 w-9 rounded-full shadow-md bg-primary"
+                onClick={play}
+              >
                 <Play className="h-4 w-4 ml-0.5" />
               </Button>
             )}
           </div>
           <div className="flex-1 flex items-center gap-3 group">
-            <span className="text-[10px] font-mono text-muted-foreground w-6 text-right tabular-nums">{progress}</span>
+            <span className="text-[10px] font-mono text-muted-foreground w-6 text-right tabular-nums">
+              {progress}
+            </span>
             <div className="relative flex-1 flex items-center h-5">
-              <input type="range" min="0" max={totalChunks} value={progress}
-                onChange={(e) => seek(parseInt(e.target.value, 10))}
+              <input
+                type="range"
+                min="0"
+                max={totalChunks}
+                value={progress}
+                onChange={e => seek(parseInt(e.target.value, 10))}
                 className="absolute inset-0 w-full opacity-0 cursor-pointer z-10"
               />
               <div className="w-full h-1 bg-secondary rounded-full overflow-hidden">
-                <div className="h-full bg-primary transition-all duration-200 ease-out"
-                  style={{ width: `${totalChunks > 0 ? (progress / totalChunks) * 100 : 0}%` }}
+                <div
+                  className="h-full bg-primary transition-all duration-200 ease-out"
+                  style={{width: `${totalChunks > 0 ? (progress / totalChunks) * 100 : 0}%`}}
                 />
               </div>
-              <div className="absolute h-2.5 w-2.5 bg-primary rounded-full shadow-sm border border-background pointer-events-none"
-                style={{ left: `calc(${totalChunks > 0 ? (progress / totalChunks) * 100 : 0}% - 5px)` }}
+              <div
+                className="absolute h-2.5 w-2.5 bg-primary rounded-full shadow-sm border border-background pointer-events-none"
+                style={{
+                  left: `calc(${totalChunks > 0 ? (progress / totalChunks) * 100 : 0}% - 5px)`,
+                }}
               />
             </div>
-            <span className="text-[10px] font-mono text-muted-foreground w-6 tabular-nums">{totalChunks}</span>
+            <span className="text-[10px] font-mono text-muted-foreground w-6 tabular-nums">
+              {totalChunks}
+            </span>
           </div>
-          <Button variant="outline" size="sm"
+          <Button
+            variant="outline"
+            size="sm"
             className="h-7 w-12 text-[10px] font-mono font-medium rounded-full border-border/50"
             onClick={() => setSpeed(speed === 1 ? 2 : speed === 2 ? 4 : speed === 4 ? 0.5 : 1)}
           >
@@ -218,39 +268,54 @@ export default function TheaterPage() {
 
       <ResizablePanelGroup direction="horizontal" className="flex-1">
         {/* Left Pane */}
-        <ResizablePanel defaultSize={38} minSize={25} maxSize={55}
+        <ResizablePanel
+          defaultSize={38}
+          minSize={25}
+          maxSize={55}
           className={`bg-muted/20 border-r border-border/50 ${mobileView === 'left' ? 'flex' : 'hidden md:flex'} flex-col`}
         >
           <div className="h-full flex flex-col relative">
             <div className="absolute inset-0 overflow-y-auto p-4 custom-scrollbar">
-
               {leftTab === 'events' ? (
                 <div className="flex flex-col gap-2 pb-8">
                   <h2 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5 mb-2">
                     <Activity className="h-3 w-3 text-primary" /> Lifecycle Events
                   </h2>
                   {visibleEvents.length === 0 && (
-                    <p className="text-xs text-muted-foreground italic">Press play to see events...</p>
+                    <p className="text-xs text-muted-foreground italic">
+                      Press play to see events...
+                    </p>
                   )}
                   {visibleEvents.map((evt, i) => (
-                    <div key={i}
+                    <div
+                      key={i}
                       onClick={() => seek(evt.chunkIndex + 1)}
                       className={`p-3 rounded-lg border cursor-pointer transition-all hover:scale-[1.01] ${
-                        evt.type === 'surface' ? 'border-blue-500/30 bg-blue-500/5' :
-                        evt.type === 'components' ? 'border-emerald-500/30 bg-emerald-500/5' :
-                        evt.type === 'data' ? 'border-amber-500/30 bg-amber-500/5' :
-                        evt.type === 'action' ? 'border-purple-500/30 bg-purple-500/5' :
-                        'border-red-500/30 bg-red-500/5'
+                        evt.type === 'surface'
+                          ? 'border-blue-500/30 bg-blue-500/5'
+                          : evt.type === 'components'
+                            ? 'border-emerald-500/30 bg-emerald-500/5'
+                            : evt.type === 'data'
+                              ? 'border-amber-500/30 bg-amber-500/5'
+                              : evt.type === 'action'
+                                ? 'border-purple-500/30 bg-purple-500/5'
+                                : 'border-red-500/30 bg-red-500/5'
                       }`}
                     >
                       <div className="flex items-center gap-2 mb-1">
-                        <span className={`text-[9px] font-bold uppercase ${
-                          evt.type === 'surface' ? 'text-blue-500' :
-                          evt.type === 'components' ? 'text-emerald-500' :
-                          evt.type === 'data' ? 'text-amber-500' :
-                          evt.type === 'action' ? 'text-purple-500' :
-                          'text-red-500'
-                        }`}>
+                        <span
+                          className={`text-[9px] font-bold uppercase ${
+                            evt.type === 'surface'
+                              ? 'text-blue-500'
+                              : evt.type === 'components'
+                                ? 'text-emerald-500'
+                                : evt.type === 'data'
+                                  ? 'text-amber-500'
+                                  : evt.type === 'action'
+                                    ? 'text-purple-500'
+                                    : 'text-red-500'
+                          }`}
+                        >
                           {evt.type === 'action' ? '↑' : '↓'} {evt.type}
                         </span>
                       </div>
@@ -259,7 +324,6 @@ export default function TheaterPage() {
                   ))}
                   <div ref={eventsEndRef} className="h-2" />
                 </div>
-
               ) : leftTab === 'data' ? (
                 /* DATA TAB — real JSONL chunks as they arrive over the wire */
                 <div className="flex flex-col gap-2 pb-8">
@@ -267,10 +331,13 @@ export default function TheaterPage() {
                     <Database className="h-3 w-3 text-amber-500" /> JSONL Stream
                   </h2>
                   {receivedChunks.length === 0 && (
-                    <p className="text-xs text-muted-foreground italic">Press play to stream JSONL chunks...</p>
+                    <p className="text-xs text-muted-foreground italic">
+                      Press play to stream JSONL chunks...
+                    </p>
                   )}
                   {receivedChunks.map((chunk, i) => (
-                    <div key={i}
+                    <div
+                      key={i}
                       onClick={() => seek(chunk.index + 1)}
                       className={`rounded-lg border overflow-hidden cursor-pointer transition-all ${
                         chunk.index === progress - 1
@@ -283,18 +350,24 @@ export default function TheaterPage() {
                       }`}
                     >
                       {/* Chunk header */}
-                      <div className={`flex items-center justify-between px-3 py-1.5 ${
-                        chunk.isClient ? 'bg-purple-500/10' : 'bg-muted/30'
-                      }`}>
+                      <div
+                        className={`flex items-center justify-between px-3 py-1.5 ${
+                          chunk.isClient ? 'bg-purple-500/10' : 'bg-muted/30'
+                        }`}
+                      >
                         <div className="flex items-center gap-2">
                           <span className="text-[9px] font-bold tabular-nums bg-muted/50 rounded px-1.5 py-0.5">
                             #{chunk.index + 1}
                           </span>
-                          <span className={`text-[9px] font-bold ${chunk.isClient ? 'text-purple-500' : 'text-primary/70'}`}>
+                          <span
+                            className={`text-[9px] font-bold ${chunk.isClient ? 'text-purple-500' : 'text-primary/70'}`}
+                          >
                             {chunk.isClient ? '↑ CLIENT' : '↓ SERVER'}
                           </span>
                         </div>
-                        <span className="text-[9px] text-muted-foreground font-mono">{formatBytes(chunk.bytes)}</span>
+                        <span className="text-[9px] text-muted-foreground font-mono">
+                          {formatBytes(chunk.bytes)}
+                        </span>
                       </div>
                       {/* Wire content — single JSONL line */}
                       <div className="px-3 py-2 font-mono text-[10px] leading-relaxed overflow-x-auto custom-scrollbar-sm bg-card/50">
@@ -311,7 +384,6 @@ export default function TheaterPage() {
                   )}
                   <div ref={dataEndRef} className="h-2" />
                 </div>
-
               ) : (
                 /* CONFIG TAB */
                 <div className="space-y-5">
@@ -323,11 +395,16 @@ export default function TheaterPage() {
                       <Activity className="h-4 w-4 text-primary" /> Scenario
                     </h3>
                     <div className="relative">
-                      <select value={selectedScenario}
-                        onChange={(e) => handleScenarioChange(e.target.value as ScenarioId)}
+                      <select
+                        value={selectedScenario}
+                        onChange={e => handleScenarioChange(e.target.value as ScenarioId)}
                         className="w-full text-sm p-2 pl-3 pr-8 border border-border/50 rounded-lg bg-background appearance-none shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 cursor-pointer"
                       >
-                        {Object.keys(scenarios).map(id => <option key={id} value={id}>{id}</option>)}
+                        {Object.keys(scenarios).map(id => (
+                          <option key={id} value={id}>
+                            {id}
+                          </option>
+                        ))}
                       </select>
                       <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                     </div>
@@ -340,11 +417,16 @@ export default function TheaterPage() {
                       <Monitor className="h-4 w-4 text-primary" /> Renderer
                     </h3>
                     <div className="relative">
-                      <select value={renderer}
-                        onChange={(e) => setRenderer(e.target.value as RendererType)}
+                      <select
+                        value={renderer}
+                        onChange={e => setRenderer(e.target.value as RendererType)}
                         className="w-full text-sm p-2 pl-3 pr-8 border border-border/50 rounded-lg bg-background appearance-none shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 cursor-pointer"
                       >
-                        {RENDERERS.map(r => <option key={r} value={r}>{r}</option>)}
+                        {RENDERERS.map(r => (
+                          <option key={r} value={r}>
+                            {r}
+                          </option>
+                        ))}
                       </select>
                       <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                     </div>
@@ -362,7 +444,9 @@ export default function TheaterPage() {
                       </select>
                       <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
                     </div>
-                    <p className="text-[11px] text-muted-foreground">Simulated in-memory playback.</p>
+                    <p className="text-[11px] text-muted-foreground">
+                      Simulated in-memory playback.
+                    </p>
                   </div>
                 </div>
               )}
@@ -370,10 +454,16 @@ export default function TheaterPage() {
           </div>
         </ResizablePanel>
 
-        <ResizableHandle withHandle className="hidden md:flex bg-border/50 hover:bg-primary/50 transition-colors" />
+        <ResizableHandle
+          withHandle
+          className="hidden md:flex bg-border/50 hover:bg-primary/50 transition-colors"
+        />
 
         {/* Right Pane: Renderer */}
-        <ResizablePanel defaultSize={62} className={`${mobileView === 'renderer' ? 'flex' : 'hidden md:flex'} flex-col`}>
+        <ResizablePanel
+          defaultSize={62}
+          className={`${mobileView === 'renderer' ? 'flex' : 'hidden md:flex'} flex-col`}
+        >
           <div className="h-full bg-muted/10 relative overflow-hidden flex flex-col">
             <div className="absolute inset-0 p-6 overflow-y-auto custom-scrollbar">
               <div className="max-w-4xl mx-auto">
@@ -387,7 +477,9 @@ export default function TheaterPage() {
                     <span className="text-[10px] font-semibold text-muted-foreground tracking-wide flex items-center gap-1.5">
                       <Code2 className="h-3 w-3" /> {renderer}
                     </span>
-                    <span className="text-[10px] text-muted-foreground font-mono">{selectedScenario}</span>
+                    <span className="text-[10px] text-muted-foreground font-mono">
+                      {selectedScenario}
+                    </span>
                   </div>
                   <div className="p-4 bg-dot-pattern">
                     {surfaceState.components.length > 0 ? (
@@ -396,7 +488,7 @@ export default function TheaterPage() {
                           root={surfaceState.root}
                           components={surfaceState.components}
                           data={surfaceState.data}
-                          onAction={(action) => console.log('Theater Action:', action)}
+                          onAction={action => console.log('Theater Action:', action)}
                         />
                       </div>
                     ) : (
@@ -405,8 +497,12 @@ export default function TheaterPage() {
                           <Code2 className="h-5 w-5 text-primary" />
                         </div>
                         <div>
-                          <p className="font-mono text-sm text-foreground mb-0.5">{'<A2UIRenderer />'}</p>
-                          <p className="text-xs text-muted-foreground">Press play to start streaming</p>
+                          <p className="font-mono text-sm text-foreground mb-0.5">
+                            {'<A2UIRenderer />'}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            Press play to start streaming
+                          </p>
                         </div>
                       </div>
                     )}
@@ -420,25 +516,34 @@ export default function TheaterPage() {
 
       {/* Mobile Nav */}
       <div className="flex md:hidden w-full items-center gap-1 bg-background/95 backdrop-blur-md p-2 border-t border-border/50 z-50">
-        {([
-          { view: 'left' as const, tab: 'events' as LeftTab, icon: Activity, label: 'Events' },
-          { view: 'renderer' as const, tab: null, icon: LayoutTemplate, label: 'Render' },
-          { view: 'left' as const, tab: 'data' as LeftTab, icon: Database, label: 'Data' },
-          { view: 'left' as const, tab: 'config' as LeftTab, icon: Settings, label: 'Config' },
-        ]).map(item => (
-          <Button key={item.label} variant="ghost" size="sm"
+        {[
+          {view: 'left' as const, tab: 'events' as LeftTab, icon: Activity, label: 'Events'},
+          {view: 'renderer' as const, tab: null, icon: LayoutTemplate, label: 'Render'},
+          {view: 'left' as const, tab: 'data' as LeftTab, icon: Database, label: 'Data'},
+          {view: 'left' as const, tab: 'config' as LeftTab, icon: Settings, label: 'Config'},
+        ].map(item => (
+          <Button
+            key={item.label}
+            variant="ghost"
+            size="sm"
             className={`flex-1 h-11 flex-col gap-0.5 text-[9px] font-medium ${
               (item.tab ? mobileView === 'left' && leftTab === item.tab : mobileView === 'renderer')
-                ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground'
+                ? 'bg-background shadow-sm text-foreground'
+                : 'text-muted-foreground'
             }`}
-            onClick={() => { setMobileView(item.view); if (item.tab) setLeftTab(item.tab); }}
+            onClick={() => {
+              setMobileView(item.view);
+              if (item.tab) setLeftTab(item.tab);
+            }}
           >
             <item.icon className="h-3.5 w-3.5" /> {item.label}
           </Button>
         ))}
       </div>
 
-      <style dangerouslySetInnerHTML={{__html: `
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
         .custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
         .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
         .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(156,163,175,0.3); border-radius: 10px; }
@@ -446,7 +551,9 @@ export default function TheaterPage() {
         .custom-scrollbar-sm::-webkit-scrollbar-track { background: transparent; }
         .custom-scrollbar-sm::-webkit-scrollbar-thumb { background: rgba(156,163,175,0.3); border-radius: 10px; }
         .bg-dot-pattern { background-image: radial-gradient(rgba(156,163,175,0.15) 1px, transparent 1px); background-size: 16px 16px; }
-      `}} />
+      `,
+        }}
+      />
     </div>
   );
 }
diff --git a/tools/composer/src/app/widget/[id]/ClientWidgetPage.tsx b/tools/composer/src/app/widget/[id]/ClientWidgetPage.tsx
index 405fbb52f..e2842df31 100644
--- a/tools/composer/src/app/widget/[id]/ClientWidgetPage.tsx
+++ b/tools/composer/src/app/widget/[id]/ClientWidgetPage.tsx
@@ -16,11 +16,11 @@
 
 'use client';
 
-import { WidgetEditor } from '@/components/editor/widget-editor';
-import { useWidgets } from '@/contexts/widgets-context';
+import {WidgetEditor} from '@/components/editor/widget-editor';
+import {useWidgets} from '@/contexts/widgets-context';
 
-export function ClientWidgetPage({ id }: { id: string }) {
-  const { loading, getWidget } = useWidgets();
+export function ClientWidgetPage({id}: {id: string}) {
+  const {loading, getWidget} = useWidgets();
 
   if (loading) {
     return (
diff --git a/tools/composer/src/app/widget/[id]/layout.tsx b/tools/composer/src/app/widget/[id]/layout.tsx
index 173dafba1..652202df8 100644
--- a/tools/composer/src/app/widget/[id]/layout.tsx
+++ b/tools/composer/src/app/widget/[id]/layout.tsx
@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-export default function WidgetEditorLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function WidgetEditorLayout({children}: {children: React.ReactNode}) {
   return children;
 }
diff --git a/tools/composer/src/app/widget/[id]/page.tsx b/tools/composer/src/app/widget/[id]/page.tsx
index 6b6ac93b4..b86b21112 100644
--- a/tools/composer/src/app/widget/[id]/page.tsx
+++ b/tools/composer/src/app/widget/[id]/page.tsx
@@ -1,10 +1,9 @@
-
 /**
  * Copyright 2026 Google LLC
  */
-import { ClientWidgetPage } from './ClientWidgetPage';
+import {ClientWidgetPage} from './ClientWidgetPage';
 
-export default async function WidgetPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
+export default async function WidgetPage({params}: {params: Promise<{id: string}>}) {
+  const {id} = await params;
   return <ClientWidgetPage id={id} />;
 }
diff --git a/tools/composer/src/components/editor/code-editor.tsx b/tools/composer/src/components/editor/code-editor.tsx
index 23fd861b9..b8d46eee6 100644
--- a/tools/composer/src/components/editor/code-editor.tsx
+++ b/tools/composer/src/components/editor/code-editor.tsx
@@ -16,14 +16,14 @@
 
 'use client';
 
-import Editor, { type Monaco } from '@monaco-editor/react';
+import Editor, {type Monaco} from '@monaco-editor/react';
 
 interface CodeEditorProps {
   value: string;
   onChange?: (code: string) => void;
 }
 
-export function CodeEditor({ value, onChange }: CodeEditorProps) {
+export function CodeEditor({value, onChange}: CodeEditorProps) {
   const handleBeforeMount = (monaco: Monaco) => {
     // Disable all TypeScript/JavaScript diagnostics
     monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
@@ -53,17 +53,17 @@ export function CodeEditor({ value, onChange }: CodeEditorProps) {
         value={value}
         defaultLanguage="json"
         theme="custom-light"
-        onChange={(value) => onChange?.(value ?? '')}
+        onChange={value => onChange?.(value ?? '')}
         beforeMount={handleBeforeMount}
         options={{
-          minimap: { enabled: false },
+          minimap: {enabled: false},
           fontSize: 13,
           lineNumbers: 'on',
           scrollBeyondLastLine: false,
           automaticLayout: true,
           tabSize: 2,
           wordWrap: 'on',
-          padding: { top: 16, bottom: 16 },
+          padding: {top: 16, bottom: 16},
           cursorStyle: 'line',
           renderLineHighlight: 'all',
           renderLineHighlightOnlyWhenFocus: false,
diff --git a/tools/composer/src/components/editor/data-panel.test.tsx b/tools/composer/src/components/editor/data-panel.test.tsx
index 8b92d2b93..2bf4d4d43 100644
--- a/tools/composer/src/components/editor/data-panel.test.tsx
+++ b/tools/composer/src/components/editor/data-panel.test.tsx
@@ -14,19 +14,15 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { DataPanel } from './data-panel';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import {DataPanel} from './data-panel';
 import React from 'react';
 
 // Mock Monaco Editor
 vi.mock('@monaco-editor/react', () => ({
-  default: ({ value, onChange }: any) => (
-    <textarea 
-      data-testid="monaco-mock" 
-      value={value} 
-      onChange={(e) => onChange(e.target.value)} 
-    />
+  default: ({value, onChange}: any) => (
+    <textarea data-testid="monaco-mock" value={value} onChange={e => onChange(e.target.value)} />
   ),
 }));
 
@@ -38,10 +34,10 @@ vi.mock('lucide-react', () => ({
 
 describe('DataPanel', () => {
   const mockStates = [
-    { name: 'State 1', data: { a: 1 } },
-    { name: 'State 2', data: { b: 2 } },
+    {name: 'State 1', data: {a: 1}},
+    {name: 'State 2', data: {b: 2}},
   ];
-  
+
   const mockProps = {
     dataStates: mockStates,
     activeIndex: 0,
@@ -79,8 +75,8 @@ describe('DataPanel', () => {
   it('should update state when JSON is edited', () => {
     render(<DataPanel {...mockProps} />);
     const editor = screen.getByTestId('monaco-mock');
-    fireEvent.change(editor, { target: { value: '{"new": "data"}' } });
-    expect(mockProps.onUpdateState).toHaveBeenCalledWith(0, { new: 'data' });
+    fireEvent.change(editor, {target: {value: '{"new": "data"}'}});
+    expect(mockProps.onUpdateState).toHaveBeenCalledWith(0, {new: 'data'});
   });
 
   it('should call onRenameState when a tab is double clicked', () => {
diff --git a/tools/composer/src/components/editor/data-panel.tsx b/tools/composer/src/components/editor/data-panel.tsx
index c0199f5a8..64c5f0120 100644
--- a/tools/composer/src/components/editor/data-panel.tsx
+++ b/tools/composer/src/components/editor/data-panel.tsx
@@ -16,12 +16,12 @@
 
 'use client';
 
-import { useState, useEffect } from 'react';
-import { Plus, X } from 'lucide-react';
+import {useState, useEffect} from 'react';
+import {Plus, X} from 'lucide-react';
 import Editor from '@monaco-editor/react';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import type { DataState } from '@/types/widget';
+import {Button} from '@/components/ui/button';
+import {cn} from '@/lib/utils';
+import type {DataState} from '@/types/widget';
 
 interface DataPanelProps {
   dataStates: DataState[];
@@ -44,7 +44,7 @@ export function DataPanel({
 }: DataPanelProps) {
   const activeState = dataStates[activeIndex];
   const [jsonValue, setJsonValue] = useState(() =>
-    JSON.stringify(activeState?.data ?? {}, null, 2)
+    JSON.stringify(activeState?.data ?? {}, null, 2),
   );
 
   // Update editor when active state changes
@@ -85,7 +85,7 @@ export function DataPanel({
               'group flex items-center gap-1 px-3 py-2 text-sm font-medium transition-colors cursor-pointer flex-shrink-0 whitespace-nowrap',
               activeIndex === index
                 ? 'text-foreground bg-background rounded-t-md border-x border-t border-border -mb-px'
-                : 'text-muted-foreground hover:text-foreground'
+                : 'text-muted-foreground hover:text-foreground',
             )}
             onClick={() => onActiveIndexChange(index)}
             onDoubleClick={() => handleTabDoubleClick(index)}
@@ -93,7 +93,7 @@ export function DataPanel({
             <span>{state.name}</span>
             {dataStates.length > 1 && index !== 0 && (
               <button
-                onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                   onDeleteState(index);
                 }}
@@ -122,14 +122,14 @@ export function DataPanel({
           defaultLanguage="json"
           onChange={handleChange}
           options={{
-            minimap: { enabled: false },
+            minimap: {enabled: false},
             fontSize: 13,
             lineNumbers: 'on',
             scrollBeyondLastLine: false,
             automaticLayout: true,
             tabSize: 2,
             wordWrap: 'on',
-            padding: { top: 8, bottom: 8 },
+            padding: {top: 8, bottom: 8},
             overviewRulerBorder: false,
             overviewRulerLanes: 0,
             hideCursorInOverviewRuler: true,
diff --git a/tools/composer/src/components/editor/editor-header.test.tsx b/tools/composer/src/components/editor/editor-header.test.tsx
index 5e104be83..8565ff5dc 100644
--- a/tools/composer/src/components/editor/editor-header.test.tsx
+++ b/tools/composer/src/components/editor/editor-header.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import { EditorHeader } from './editor-header';
-import { Widget } from '@/types/widget';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent, act} from '@testing-library/react';
+import {EditorHeader} from './editor-header';
+import {Widget} from '@/types/widget';
 import React from 'react';
 
 describe('EditorHeader', () => {
@@ -28,7 +28,7 @@ describe('EditorHeader', () => {
     createdAt: new Date(),
     updatedAt: new Date(),
     root: 'root',
-    components: [{ id: 'root', component: { Text: { text: { literalString: 'Hello' } } } }],
+    components: [{id: 'root', component: {Text: {text: {literalString: 'Hello'}}}}],
     dataStates: [],
   };
 
@@ -53,13 +53,13 @@ describe('EditorHeader', () => {
   it('should copy JSON to clipboard when clicking Copy JSON', async () => {
     render(<EditorHeader widget={mockWidget} />);
     const copyButton = screen.getByText('Copy JSON');
-    
+
     await act(async () => {
       fireEvent.click(copyButton);
     });
 
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-      JSON.stringify(mockWidget.components, null, 2)
+      JSON.stringify(mockWidget.components, null, 2),
     );
     expect(screen.getByText('Copied!')).toBeInTheDocument();
   });
@@ -68,7 +68,7 @@ describe('EditorHeader', () => {
     // Just verify the URL creation, don't mess with DOM methods that React needs
     render(<EditorHeader widget={mockWidget} />);
     const downloadButton = screen.getByText('Download');
-    
+
     fireEvent.click(downloadButton);
 
     expect(global.URL.createObjectURL).toHaveBeenCalled();
diff --git a/tools/composer/src/components/editor/editor-header.tsx b/tools/composer/src/components/editor/editor-header.tsx
index ddd5fa996..98f108655 100644
--- a/tools/composer/src/components/editor/editor-header.tsx
+++ b/tools/composer/src/components/editor/editor-header.tsx
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Copy, Check, Download } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import type { Widget } from "@/types/widget";
+import {useState} from 'react';
+import {Copy, Check, Download} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import type {Widget} from '@/types/widget';
 
 interface EditorHeaderProps {
   widget: Widget;
 }
 
-export function EditorHeader({ widget }: EditorHeaderProps) {
+export function EditorHeader({widget}: EditorHeaderProps) {
   const [copied, setCopied] = useState(false);
 
   const handleCopyJson = async () => {
@@ -37,9 +37,9 @@ export function EditorHeader({ widget }: EditorHeaderProps) {
 
   const handleDownload = () => {
     const json = JSON.stringify(widget.components, null, 2);
-    const blob = new Blob([json], { type: "application/json" });
+    const blob = new Blob([json], {type: 'application/json'});
     const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
+    const a = document.createElement('a');
     a.href = url;
     a.download = `a2ui-${widget.id}.json`;
     document.body.appendChild(a);
@@ -63,12 +63,8 @@ export function EditorHeader({ widget }: EditorHeaderProps) {
           className="gap-2 text-muted-foreground cursor-pointer"
           onClick={handleCopyJson}
         >
-          {copied ? (
-            <Check className="h-4 w-4 text-emerald-500" />
-          ) : (
-            <Copy className="h-4 w-4" />
-          )}
-          {copied ? "Copied!" : "Copy JSON"}
+          {copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4" />}
+          {copied ? 'Copied!' : 'Copy JSON'}
         </Button>
         <Button
           size="sm"
diff --git a/tools/composer/src/components/editor/preview-pane.tsx b/tools/composer/src/components/editor/preview-pane.tsx
index 2f559544b..3baef6fa4 100644
--- a/tools/composer/src/components/editor/preview-pane.tsx
+++ b/tools/composer/src/components/editor/preview-pane.tsx
@@ -16,11 +16,11 @@
 
 'use client';
 
-import { useState, Component, type ReactNode } from 'react';
-import { Moon, Sun, AlertTriangle } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { A2UIViewer } from '@/lib/a2ui';
-import type { A2UIComponent, SpecVersion } from '@/types/widget';
+import {useState, Component, type ReactNode} from 'react';
+import {Moon, Sun, AlertTriangle} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {A2UIViewer} from '@/lib/a2ui';
+import type {A2UIComponent, SpecVersion} from '@/types/widget';
 
 /**
  * Error boundary for the A2UI preview.
@@ -28,22 +28,22 @@ import type { A2UIComponent, SpecVersion } from '@/types/widget';
  * and shows a fallback instead of crashing the entire editor.
  */
 class PreviewErrorBoundary extends Component<
-  { children: ReactNode; resetKey: string },
-  { error: Error | null }
+  {children: ReactNode; resetKey: string},
+  {error: Error | null}
 > {
-  state: { error: Error | null } = { error: null };
+  state: {error: Error | null} = {error: null};
 
   static getDerivedStateFromError(error: Error) {
-    return { error };
+    return {error};
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     console.error('A2UI Preview Error:', error, errorInfo);
   }
 
-  componentDidUpdate(prevProps: { resetKey: string }) {
+  componentDidUpdate(prevProps: {resetKey: string}) {
     if (prevProps.resetKey !== this.props.resetKey && this.state.error) {
-      this.setState({ error: null });
+      this.setState({error: null});
     }
   }
 
@@ -72,14 +72,16 @@ interface PreviewPaneProps {
   specVersion?: SpecVersion;
 }
 
-export function PreviewPane({ root, components, data, specVersion }: PreviewPaneProps) {
+export function PreviewPane({root, components, data, specVersion}: PreviewPaneProps) {
   const [isDark, setIsDark] = useState(false);
 
   // Reset key changes when components change, clearing the error boundary
   const resetKey = JSON.stringify(components);
 
   return (
-    <div className={`flex h-full flex-col border-l border-border ${isDark ? 'bg-neutral-900' : 'bg-neutral-50'}`}>
+    <div
+      className={`flex h-full flex-col border-l border-border ${isDark ? 'bg-neutral-900' : 'bg-neutral-50'}`}
+    >
       <div className="flex justify-end p-2">
         <Button
           variant="ghost"
@@ -101,7 +103,7 @@ export function PreviewPane({ root, components, data, specVersion }: PreviewPane
             components={components}
             data={data}
             specVersion={specVersion}
-            onAction={(action) => console.log('Widget action:', action)}
+            onAction={action => console.log('Widget action:', action)}
           />
         </PreviewErrorBoundary>
       </div>
diff --git a/tools/composer/src/components/editor/widget-editor.test.tsx b/tools/composer/src/components/editor/widget-editor.test.tsx
index ec15aed65..baef05fd3 100644
--- a/tools/composer/src/components/editor/widget-editor.test.tsx
+++ b/tools/composer/src/components/editor/widget-editor.test.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
-import { WidgetEditor } from './widget-editor';
-import { useWidgets } from '@/contexts/widgets-context';
-import type { Widget } from '@/types/widget';
-import { useFrontendTool } from '@copilotkit/react-core/v2';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
+import {WidgetEditor} from './widget-editor';
+import {useWidgets} from '@/contexts/widgets-context';
+import type {Widget} from '@/types/widget';
+import {useFrontendTool} from '@copilotkit/react-core/v2';
 import React from 'react';
 
 // Mock child components
@@ -27,8 +27,8 @@ vi.mock('./editor-header', () => ({
   EditorHeader: () => <div data-testid="editor-header" />,
 }));
 vi.mock('./code-editor', () => ({
-  CodeEditor: ({ value, onChange }: any) => (
-    <textarea data-testid="code-editor" value={value} onChange={(e) => onChange(e.target.value)} />
+  CodeEditor: ({value, onChange}: any) => (
+    <textarea data-testid="code-editor" value={value} onChange={e => onChange(e.target.value)} />
   ),
 }));
 vi.mock('./preview-pane', () => ({
@@ -47,8 +47,8 @@ vi.mock('@copilotkit/react-core/v2', () => ({
 
 // Mock Resizable components
 vi.mock('@/components/ui/resizable', () => ({
-  ResizablePanelGroup: ({ children }: any) => <div>{children}</div>,
-  ResizablePanel: ({ children }: any) => <div>{children}</div>,
+  ResizablePanelGroup: ({children}: any) => <div>{children}</div>,
+  ResizablePanel: ({children}: any) => <div>{children}</div>,
   ResizableHandle: () => <div>Handle</div>,
 }));
 
@@ -64,7 +64,7 @@ describe('WidgetEditor', () => {
     specVersion: '0.8',
     root: 'root',
     components: [],
-    dataStates: [{ name: 'default', data: {} }],
+    dataStates: [{name: 'default', data: {}}],
     createdAt: new Date(),
     updatedAt: new Date(),
   };
@@ -92,19 +92,19 @@ describe('WidgetEditor', () => {
     expect(useFrontendTool).toHaveBeenCalledWith(
       expect.objectContaining({
         name: 'editWidget',
-      })
+      }),
     );
   });
 
   it('should update components when code editor changes', async () => {
     render(<WidgetEditor widget={mockWidget} />);
     const editor = screen.getByTestId('code-editor');
-    
+
     await act(async () => {
-      fireEvent.change(editor, { target: { value: '[{"id": "new"}]' } });
+      fireEvent.change(editor, {target: {value: '[{"id": "new"}]'}});
     });
 
-    expect(mockUpdateWidget).toHaveBeenCalledWith('1', { components: [{ id: 'new' }] });
+    expect(mockUpdateWidget).toHaveBeenCalledWith('1', {components: [{id: 'new'}]});
   });
 
   it('should handle editWidget tool calls', async () => {
@@ -117,13 +117,13 @@ describe('WidgetEditor', () => {
     render(<WidgetEditor widget={mockWidget} />);
 
     const result = await act(async () => {
-      return await toolHandler({ data: '{"foo": "bar"}', components: '[{"id": "root"}]' });
+      return await toolHandler({data: '{"foo": "bar"}', components: '[{"id": "root"}]'});
     });
 
     expect(result.success).toBe(true);
-    expect(mockUpdateWidget).toHaveBeenCalledWith('1', { components: [{ id: 'root' }] });
+    expect(mockUpdateWidget).toHaveBeenCalledWith('1', {components: [{id: 'root'}]});
   });
 });
 
 // Helper for fireEvent
-import { fireEvent } from '@testing-library/react';
+import {fireEvent} from '@testing-library/react';
diff --git a/tools/composer/src/components/editor/widget-editor.tsx b/tools/composer/src/components/editor/widget-editor.tsx
index 821ce5fe3..544d95d76 100644
--- a/tools/composer/src/components/editor/widget-editor.tsx
+++ b/tools/composer/src/components/editor/widget-editor.tsx
@@ -14,36 +14,32 @@
  * limitations under the License.
  */
 
-"use client";
+'use client';
 
-import { useState, useCallback } from "react";
+import {useState, useCallback} from 'react';
 import {
   CopilotChat,
   JsonSerializable,
   useAgentContext,
   useFrontendTool,
-} from "@copilotkit/react-core/v2";
-import { z } from "zod";
-import { parseRobustJSON } from "@/lib/json-parser";
-import { EditorHeader } from "./editor-header";
-import { CodeEditor } from "./code-editor";
-import { PreviewPane } from "./preview-pane";
-import { DataPanel } from "./data-panel";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
-import { useWidgets } from "@/contexts/widgets-context";
-import type { Widget, DataState } from "@/types/widget";
-import type { A2UIComponent } from "@/types/widget";
+} from '@copilotkit/react-core/v2';
+import {z} from 'zod';
+import {parseRobustJSON} from '@/lib/json-parser';
+import {EditorHeader} from './editor-header';
+import {CodeEditor} from './code-editor';
+import {PreviewPane} from './preview-pane';
+import {DataPanel} from './data-panel';
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable';
+import {useWidgets} from '@/contexts/widgets-context';
+import type {Widget, DataState} from '@/types/widget';
+import type {A2UIComponent} from '@/types/widget';
 
 interface WidgetEditorProps {
   widget: Widget;
 }
 
-export function WidgetEditor({ widget }: WidgetEditorProps) {
-  const { updateWidget } = useWidgets();
+export function WidgetEditor({widget}: WidgetEditorProps) {
+  const {updateWidget} = useWidgets();
 
   // Local state for components (JSON string for editor)
   const [componentsJson, setComponentsJson] = useState(() =>
@@ -55,9 +51,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
   const [activeDataStateIndex, setActiveDataStateIndex] = useState(0);
 
   // Parsed components for preview (null if invalid JSON)
-  const [components, setComponents] = useState<A2UIComponent[]>(
-    widget.components,
-  );
+  const [components, setComponents] = useState<A2UIComponent[]>(widget.components);
 
   const handleComponentsChange = useCallback(
     (json: string) => {
@@ -65,7 +59,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
       try {
         const parsed = JSON.parse(json) as A2UIComponent[];
         setComponents(parsed);
-        updateWidget(widget.id, { components: parsed });
+        updateWidget(widget.id, {components: parsed});
       } catch {
         // Invalid JSON, don't update
       }
@@ -76,7 +70,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
   const handleDataStatesChange = useCallback(
     (newDataStates: DataState[]) => {
       setDataStates(newDataStates);
-      updateWidget(widget.id, { dataStates: newDataStates });
+      updateWidget(widget.id, {dataStates: newDataStates});
     },
     [widget.id, updateWidget],
   );
@@ -84,7 +78,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
   const handleAddDataState = useCallback(() => {
     const newState: DataState = {
       name: `state-${dataStates.length + 1}`,
-      data: dataStates[0]?.data ? { ...dataStates[0].data } : {},
+      data: dataStates[0]?.data ? {...dataStates[0].data} : {},
     };
     const newDataStates = [...dataStates, newState];
     handleDataStatesChange(newDataStates);
@@ -93,9 +87,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
 
   const handleUpdateDataState = useCallback(
     (index: number, data: Record<string, unknown>) => {
-      const newDataStates = dataStates.map((ds, i) =>
-        i === index ? { ...ds, data } : ds,
-      );
+      const newDataStates = dataStates.map((ds, i) => (i === index ? {...ds, data} : ds));
       handleDataStatesChange(newDataStates);
     },
     [dataStates, handleDataStatesChange],
@@ -103,9 +95,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
 
   const handleRenameDataState = useCallback(
     (index: number, name: string) => {
-      const newDataStates = dataStates.map((ds, i) =>
-        i === index ? { ...ds, name } : ds,
-      );
+      const newDataStates = dataStates.map((ds, i) => (i === index ? {...ds, name} : ds));
       handleDataStatesChange(newDataStates);
     },
     [dataStates, handleDataStatesChange],
@@ -126,44 +116,42 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
   const activeData = dataStates[activeDataStateIndex]?.data ?? {};
 
   useAgentContext({
-    description: "The current data",
+    description: 'The current data',
     value: activeData as Record<string, JsonSerializable>,
   });
 
   useAgentContext({
-    description: "The current components",
+    description: 'The current components',
     value: components as unknown as JsonSerializable[],
   });
 
   // Tool for AI to edit the widget
   useFrontendTool({
-    name: "editWidget",
+    name: 'editWidget',
     description:
-      "Edit the widget by updating its data and/or components. Both parameters are optional - pass only what you want to change.",
+      'Edit the widget by updating its data and/or components. Both parameters are optional - pass only what you want to change.',
     parameters: z.object({
       data: z
         .string()
         .optional()
         .describe(
-          "The new data object for the widget as a JSON string, not a raw JSON object. Optional.",
+          'The new data object for the widget as a JSON string, not a raw JSON object. Optional.',
         ),
       components: z
         .string()
         .optional()
         .describe(
-          "The new components array for the widget as a JSON string, not a raw JSON object. Optional.",
+          'The new components array for the widget as a JSON string, not a raw JSON object. Optional.',
         ),
     }),
-    render: ({ args, status }) => {
-      const isBuilding = status !== "complete";
+    render: ({args, status}) => {
+      const isBuilding = status !== 'complete';
 
       return (
         <details className="my-4">
           <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors px-2 py-1">
             {isBuilding ? (
-              <span className="animate-pulse mb-4">
-                Generating component...
-              </span>
+              <span className="animate-pulse mb-4">Generating component...</span>
             ) : (
               <span>View details</span>
             )}
@@ -174,7 +162,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
         </details>
       );
     },
-    handler: async ({ data, components: newComponents }) => {
+    handler: async ({data, components: newComponents}) => {
       try {
         if (data !== undefined) {
           handleUpdateDataState(
@@ -184,15 +172,11 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
         }
         if (newComponents !== undefined) {
           // Pretty-print the JSON for the editor
-          const prettyJson = JSON.stringify(
-            parseRobustJSON(newComponents),
-            null,
-            2,
-          );
+          const prettyJson = JSON.stringify(parseRobustJSON(newComponents), null, 2);
           handleComponentsChange(prettyJson);
         }
       } catch (error) {
-        console.error("Error parsing JSON:", error);
+        console.error('Error parsing JSON:', error);
         return {
           success: false,
           error: `Invalid JSON, make sure it is stringified: ${error}`,
@@ -221,10 +205,7 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
             <ResizablePanelGroup direction="vertical">
               {/* Code Editor */}
               <ResizablePanel defaultSize={70} minSize={20}>
-                <CodeEditor
-                  value={componentsJson}
-                  onChange={handleComponentsChange}
-                />
+                <CodeEditor value={componentsJson} onChange={handleComponentsChange} />
               </ResizablePanel>
 
               <ResizableHandle />
diff --git a/tools/composer/src/components/gallery/gallery-widget.tsx b/tools/composer/src/components/gallery/gallery-widget.tsx
index 8d9af53db..b30271895 100644
--- a/tools/composer/src/components/gallery/gallery-widget.tsx
+++ b/tools/composer/src/components/gallery/gallery-widget.tsx
@@ -16,8 +16,8 @@
 
 'use client';
 
-import { Widget } from '@/types/widget';
-import { A2UIViewer } from '@/lib/a2ui';
+import {Widget} from '@/types/widget';
+import {A2UIViewer} from '@/lib/a2ui';
 
 interface GalleryWidgetProps {
   widget: Widget;
@@ -25,7 +25,7 @@ interface GalleryWidgetProps {
   onClick?: () => void;
 }
 
-export function GalleryWidget({ widget, height = 200, onClick }: GalleryWidgetProps) {
+export function GalleryWidget({widget, height = 200, onClick}: GalleryWidgetProps) {
   // Get the first data state's data for preview
   const previewData = widget.dataStates?.[0]?.data ?? {};
 
@@ -34,17 +34,17 @@ export function GalleryWidget({ widget, height = 200, onClick }: GalleryWidgetPr
       role={onClick ? 'button' : undefined}
       tabIndex={onClick ? 0 : undefined}
       onClick={onClick}
-      onKeyDown={(e) => { if (onClick && (e.key === 'Enter' || e.key === ' ')) onClick(); }}
+      onKeyDown={e => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) onClick();
+      }}
       className={`w-full text-left rounded-xl border border-white bg-white/80 p-4 shadow-sm transition-all hover:shadow-md hover:border-muted-foreground/30 overflow-hidden ${onClick ? 'cursor-pointer' : ''}`}
-      style={{ minHeight: height }}
+      style={{minHeight: height}}
     >
       <div className="flex flex-col gap-2 h-full">
-        <span className="text-xs font-medium text-muted-foreground">
-          {widget.name}
-        </span>
+        <span className="text-xs font-medium text-muted-foreground">{widget.name}</span>
         <div
           className="pointer-events-none flex-1 flex items-center justify-center"
-          style={{ '--a2ui-card-bg': 'transparent' } as React.CSSProperties}
+          style={{'--a2ui-card-bg': 'transparent'} as React.CSSProperties}
         >
           <A2UIViewer
             root={widget.root}
diff --git a/tools/composer/src/components/gallery/widget-preview-modal.tsx b/tools/composer/src/components/gallery/widget-preview-modal.tsx
index cd1079af5..c02498981 100644
--- a/tools/composer/src/components/gallery/widget-preview-modal.tsx
+++ b/tools/composer/src/components/gallery/widget-preview-modal.tsx
@@ -16,11 +16,11 @@
 
 'use client';
 
-import { useEffect } from 'react';
-import { X, RotateCcw, ExternalLink } from 'lucide-react';
-import { Widget } from '@/types/widget';
-import { Button } from '@/components/ui/button';
-import { A2UIViewer } from '@/lib/a2ui';
+import {useEffect} from 'react';
+import {X, RotateCcw, ExternalLink} from 'lucide-react';
+import {Widget} from '@/types/widget';
+import {Button} from '@/components/ui/button';
+import {A2UIViewer} from '@/lib/a2ui';
 import Editor from '@monaco-editor/react';
 
 interface WidgetPreviewModalProps {
@@ -29,7 +29,7 @@ interface WidgetPreviewModalProps {
   onOpenInEditor?: () => void;
 }
 
-export function WidgetPreviewModal({ widget, onClose, onOpenInEditor }: WidgetPreviewModalProps) {
+export function WidgetPreviewModal({widget, onClose, onOpenInEditor}: WidgetPreviewModalProps) {
   // Get the actual A2UI JSON
   const componentsJson = JSON.stringify(widget.components, null, 2);
   const dataJson = JSON.stringify(widget.dataStates?.[0]?.data ?? {}, null, 2);
@@ -49,10 +49,7 @@ export function WidgetPreviewModal({ widget, onClose, onOpenInEditor }: WidgetPr
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={onClose}
-      />
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
 
       {/* Modal */}
       <div className="relative flex h-[80vh] w-[90vw] max-w-5xl overflow-hidden rounded-2xl bg-neutral-100 shadow-2xl">
@@ -60,10 +57,7 @@ export function WidgetPreviewModal({ widget, onClose, onOpenInEditor }: WidgetPr
         <div className="flex flex-1 flex-col">
           {/* Header */}
           <div className="flex items-center gap-3 border-b border-border bg-white px-4 h-10 shrink-0">
-            <button
-              className="p-1 rounded-md hover:bg-muted"
-              title="Reset preview"
-            >
+            <button className="p-1 rounded-md hover:bg-muted" title="Reset preview">
               <RotateCcw className="h-3.5 w-3.5 text-muted-foreground" />
             </button>
             <span className="text-xs font-medium text-muted-foreground">{widget.name}</span>
@@ -96,10 +90,7 @@ export function WidgetPreviewModal({ widget, onClose, onOpenInEditor }: WidgetPr
           <div className="flex items-center border-b border-border bg-white px-4 h-10 shrink-0">
             <span className="text-xs font-medium text-muted-foreground">Components</span>
             <div className="flex-1" />
-            <button
-              onClick={onClose}
-              className="p-1 rounded-md hover:bg-muted"
-            >
+            <button onClick={onClose} className="p-1 rounded-md hover:bg-muted">
               <X className="h-3.5 w-3.5 text-muted-foreground" />
             </button>
           </div>
@@ -113,12 +104,12 @@ export function WidgetPreviewModal({ widget, onClose, onOpenInEditor }: WidgetPr
                 value={componentsJson}
                 options={{
                   readOnly: true,
-                  minimap: { enabled: false },
+                  minimap: {enabled: false},
                   lineNumbers: 'on',
                   scrollBeyondLastLine: false,
                   fontSize: 12,
                   wordWrap: 'on',
-                  padding: { top: 8, bottom: 8 },
+                  padding: {top: 8, bottom: 8},
                   overviewRulerBorder: false,
                   overviewRulerLanes: 0,
                   hideCursorInOverviewRuler: true,
@@ -144,12 +135,12 @@ export function WidgetPreviewModal({ widget, onClose, onOpenInEditor }: WidgetPr
                 value={dataJson}
                 options={{
                   readOnly: true,
-                  minimap: { enabled: false },
+                  minimap: {enabled: false},
                   lineNumbers: 'on',
                   scrollBeyondLastLine: false,
                   fontSize: 12,
                   wordWrap: 'on',
-                  padding: { top: 8, bottom: 8 },
+                  padding: {top: 8, bottom: 8},
                   overviewRulerBorder: false,
                   overviewRulerLanes: 0,
                   hideCursorInOverviewRuler: true,
diff --git a/tools/composer/src/components/layout/app-shell.tsx b/tools/composer/src/components/layout/app-shell.tsx
index c0aeb2810..c3fe5a968 100644
--- a/tools/composer/src/components/layout/app-shell.tsx
+++ b/tools/composer/src/components/layout/app-shell.tsx
@@ -14,77 +14,75 @@
  * limitations under the License.
  */
 
-"use client";
+'use client';
 
-import { CopilotKitProvider } from "@copilotkit/react-core/v2";
-import { WidgetsProvider } from "@/contexts/widgets-context";
-import { SpecVersionProvider } from "@/contexts/spec-version-context";
-import { Sidebar } from "./sidebar";
+import {CopilotKitProvider} from '@copilotkit/react-core/v2';
+import {WidgetsProvider} from '@/contexts/widgets-context';
+import {SpecVersionProvider} from '@/contexts/spec-version-context';
+import {Sidebar} from './sidebar';
 
 interface AppShellProps {
   children: React.ReactNode;
 }
 
-export function AppShell({ children }: AppShellProps) {
+export function AppShell({children}: AppShellProps) {
   return (
     <CopilotKitProvider runtimeUrl="/api/copilotkit" showDevConsole="auto">
       <SpecVersionProvider>
-      <WidgetsProvider>
-        <div className="relative flex h-screen overflow-hidden bg-palette-surface-main p-2">
-          {/* Background blur circles - Glassy effect from theater */}
-          {/* Ellipse 1351 - Orange glow top right */}
-          <div
-            className="absolute w-[445.84px] h-[445.84px] left-[1040px] top-[11px] rounded-full z-0 pointer-events-none"
-            style={{
-              background: "rgba(255, 172, 77, 0.2)",
-              filter: "blur(103.196px)",
-            }}
-          />
+        <WidgetsProvider>
+          <div className="relative flex h-screen overflow-hidden bg-palette-surface-main p-2">
+            {/* Background blur circles - Glassy effect from theater */}
+            {/* Ellipse 1351 - Orange glow top right */}
+            <div
+              className="absolute w-[445.84px] h-[445.84px] left-[1040px] top-[11px] rounded-full z-0 pointer-events-none"
+              style={{
+                background: 'rgba(255, 172, 77, 0.2)',
+                filter: 'blur(103.196px)',
+              }}
+            />
 
-          {/* Ellipse 1347 - Gray glow bottom right */}
-          <div
-            className="absolute w-[609.35px] h-[609.35px] left-[1338.97px] top-[624.5px] rounded-full z-0 pointer-events-none"
-            style={{ background: "#C9C9DA", filter: "blur(103.196px)" }}
-          />
+            {/* Ellipse 1347 - Gray glow bottom right */}
+            <div
+              className="absolute w-[609.35px] h-[609.35px] left-[1338.97px] top-[624.5px] rounded-full z-0 pointer-events-none"
+              style={{background: '#C9C9DA', filter: 'blur(103.196px)'}}
+            />
 
-          {/* Ellipse 1350 - Gray glow top center */}
-          <div
-            className="absolute w-[609.35px] h-[609.35px] left-[670px] top-[-365px] rounded-full z-0 pointer-events-none"
-            style={{ background: "#C9C9DA", filter: "blur(103.196px)" }}
-          />
+            {/* Ellipse 1350 - Gray glow top center */}
+            <div
+              className="absolute w-[609.35px] h-[609.35px] left-[670px] top-[-365px] rounded-full z-0 pointer-events-none"
+              style={{background: '#C9C9DA', filter: 'blur(103.196px)'}}
+            />
 
-          {/* Ellipse 1348 - Light purple glow center */}
-          <div
-            className="absolute w-[609.35px] h-[609.35px] left-[507.87px] top-[702.14px] rounded-full z-0 pointer-events-none"
-            style={{ background: "#F3F3FC", filter: "blur(103.196px)" }}
-          />
+            {/* Ellipse 1348 - Light purple glow center */}
+            <div
+              className="absolute w-[609.35px] h-[609.35px] left-[507.87px] top-[702.14px] rounded-full z-0 pointer-events-none"
+              style={{background: '#F3F3FC', filter: 'blur(103.196px)'}}
+            />
 
-          {/* Ellipse 1346 - Yellow glow left */}
-          <div
-            className="absolute w-[445.84px] h-[445.84px] left-[127.91px] top-[331px] rounded-full z-0 pointer-events-none"
-            style={{
-              background: "rgba(255, 243, 136, 0.3)",
-              filter: "blur(103.196px)",
-            }}
-          />
+            {/* Ellipse 1346 - Yellow glow left */}
+            <div
+              className="absolute w-[445.84px] h-[445.84px] left-[127.91px] top-[331px] rounded-full z-0 pointer-events-none"
+              style={{
+                background: 'rgba(255, 243, 136, 0.3)',
+                filter: 'blur(103.196px)',
+              }}
+            />
 
-          {/* Ellipse 1268 - Orange glow bottom left */}
-          <div
-            className="absolute w-[445.84px] h-[445.84px] left-[-205px] top-[802.72px] rounded-full z-0 pointer-events-none"
-            style={{
-              background: "rgba(255, 172, 77, 0.2)",
-              filter: "blur(103.196px)",
-            }}
-          />
+            {/* Ellipse 1268 - Orange glow bottom left */}
+            <div
+              className="absolute w-[445.84px] h-[445.84px] left-[-205px] top-[802.72px] rounded-full z-0 pointer-events-none"
+              style={{
+                background: 'rgba(255, 172, 77, 0.2)',
+                filter: 'blur(103.196px)',
+              }}
+            />
 
-          <div className="flex flex-1 overflow-hidden z-10 gap-2">
-            <Sidebar />
-            <main className="flex flex-1 flex-col overflow-hidden">
-              {children}
-            </main>
+            <div className="flex flex-1 overflow-hidden z-10 gap-2">
+              <Sidebar />
+              <main className="flex flex-1 flex-col overflow-hidden">{children}</main>
+            </div>
           </div>
-        </div>
-      </WidgetsProvider>
+        </WidgetsProvider>
       </SpecVersionProvider>
     </CopilotKitProvider>
   );
diff --git a/tools/composer/src/components/layout/sidebar-header.tsx b/tools/composer/src/components/layout/sidebar-header.tsx
index 20fc0e491..f9001ed9d 100644
--- a/tools/composer/src/components/layout/sidebar-header.tsx
+++ b/tools/composer/src/components/layout/sidebar-header.tsx
@@ -16,7 +16,7 @@
 
 'use client';
 
-import { Sparkles } from 'lucide-react';
+import {Sparkles} from 'lucide-react';
 
 export function SidebarHeader() {
   return (
@@ -24,7 +24,9 @@ export function SidebarHeader() {
       <div className="flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-violet-500 to-indigo-600">
         <Sparkles className="h-3.5 w-3.5 text-white" />
       </div>
-      <span className="flex-1 text-left text-sm font-semibold tracking-wide uppercase bg-gradient-to-r from-violet-600 to-indigo-500 bg-clip-text text-transparent">A2UI Composer</span>
+      <span className="flex-1 text-left text-sm font-semibold tracking-wide uppercase bg-gradient-to-r from-violet-600 to-indigo-500 bg-clip-text text-transparent">
+        A2UI Composer
+      </span>
     </div>
   );
 }
diff --git a/tools/composer/src/components/layout/sidebar-nav.tsx b/tools/composer/src/components/layout/sidebar-nav.tsx
index 0f648b945..d44bca2c3 100644
--- a/tools/composer/src/components/layout/sidebar-nav.tsx
+++ b/tools/composer/src/components/layout/sidebar-nav.tsx
@@ -14,20 +14,12 @@
  * limitations under the License.
  */
 
-"use client";
+'use client';
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import {
-  SquarePlus,
-  LayoutGrid,
-  Box,
-  Shapes,
-  LucideIcon,
-  BookOpen,
-  Play,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
+import Link from 'next/link';
+import {usePathname} from 'next/navigation';
+import {SquarePlus, LayoutGrid, Box, Shapes, LucideIcon, BookOpen, Play} from 'lucide-react';
+import {cn} from '@/lib/utils';
 
 interface NavItemProps {
   icon: LucideIcon;
@@ -39,26 +31,18 @@ interface NavItemProps {
   onClick?: () => void;
 }
 
-function NavItem({
-  icon: Icon,
-  label,
-  subtitle,
-  href,
-  external,
-  selected,
-  onClick,
-}: NavItemProps) {
+function NavItem({icon: Icon, label, subtitle, href, external, selected, onClick}: NavItemProps) {
   return (
     <Link
       href={href}
       onClick={onClick}
-      target={external ? "_blank" : undefined}
-      rel={external ? "noopener noreferrer" : undefined}
+      target={external ? '_blank' : undefined}
+      rel={external ? 'noopener noreferrer' : undefined}
       className={cn(
-        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors cursor-pointer",
+        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors cursor-pointer',
         selected
-          ? "bg-white text-foreground shadow-sm"
-          : "text-muted-foreground hover:bg-white/50 hover:text-foreground",
+          ? 'bg-white text-foreground shadow-sm'
+          : 'text-muted-foreground hover:bg-white/50 hover:text-foreground',
       )}
     >
       <Icon className="h-4 w-4 shrink-0" />
@@ -74,27 +58,27 @@ interface SidebarNavProps {
   onNavigate?: () => void;
 }
 
-export function SidebarNav({ onNavigate }: SidebarNavProps) {
+export function SidebarNav({onNavigate}: SidebarNavProps) {
   const pathname = usePathname();
 
   const navItems = [
-    { icon: SquarePlus, label: "Create", href: "/" },
-    { icon: Play, label: "Theater", subtitle: "A2UI Playground", href: "/theater" },
-    { icon: LayoutGrid, label: "Gallery", href: "/gallery" },
-    { icon: Box, label: "Components", href: "/components" },
-    { icon: Shapes, label: "Icons", href: "/icons" },
+    {icon: SquarePlus, label: 'Create', href: '/'},
+    {icon: Play, label: 'Theater', subtitle: 'A2UI Playground', href: '/theater'},
+    {icon: LayoutGrid, label: 'Gallery', href: '/gallery'},
+    {icon: Box, label: 'Components', href: '/components'},
+    {icon: Shapes, label: 'Icons', href: '/icons'},
     {
       icon: BookOpen,
-      label: "Tutorial",
-      subtitle: "CopilotKit + A2UI",
+      label: 'Tutorial',
+      subtitle: 'CopilotKit + A2UI',
       external: true,
-      href: "https://docs.copilotkit.ai/a2a/generative-ui/declarative-a2ui",
+      href: 'https://docs.copilotkit.ai/a2a/generative-ui/declarative-a2ui',
     },
   ];
 
   return (
     <nav className="flex flex-col gap-1">
-      {navItems.map((item) => (
+      {navItems.map(item => (
         <NavItem
           key={item.href}
           icon={item.icon}
diff --git a/tools/composer/src/components/layout/sidebar-widgets.tsx b/tools/composer/src/components/layout/sidebar-widgets.tsx
index 310589a49..b4e631c1a 100644
--- a/tools/composer/src/components/layout/sidebar-widgets.tsx
+++ b/tools/composer/src/components/layout/sidebar-widgets.tsx
@@ -14,20 +14,20 @@
  * limitations under the License.
  */
 
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useWidgets } from "@/contexts/widgets-context";
+'use client';
+
+import {useState, useRef, useEffect} from 'react';
+import Link from 'next/link';
+import {usePathname, useRouter} from 'next/navigation';
+import {MoreHorizontal, Pencil, Trash2} from 'lucide-react';
+import {cn} from '@/lib/utils';
+import {useWidgets} from '@/contexts/widgets-context';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from '@/components/ui/dropdown-menu';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -37,7 +37,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
+} from '@/components/ui/alert-dialog';
 
 interface WidgetItemProps {
   id: string;
@@ -48,14 +48,7 @@ interface WidgetItemProps {
   onNavigate?: () => void;
 }
 
-function WidgetItem({
-  id,
-  name,
-  isSelected,
-  onRename,
-  onDelete,
-  onNavigate,
-}: WidgetItemProps) {
+function WidgetItem({id, name, isSelected, onRename, onDelete, onNavigate}: WidgetItemProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -77,15 +70,15 @@ function WidgetItem({
   };
 
   const handleRenameSubmit = () => {
-    const newName = editValue.trim() || "Untitled widget";
+    const newName = editValue.trim() || 'Untitled widget';
     onRename(newName);
     setIsEditing(false);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       handleRenameSubmit();
-    } else if (e.key === "Escape") {
+    } else if (e.key === 'Escape') {
       setIsEditing(false);
       setEditValue(name);
     }
@@ -95,15 +88,15 @@ function WidgetItem({
     return (
       <div
         className={cn(
-          "flex w-full items-center rounded-lg px-3 py-2",
-          isSelected ? "bg-white shadow-sm" : "bg-white/50",
+          'flex w-full items-center rounded-lg px-3 py-2',
+          isSelected ? 'bg-white shadow-sm' : 'bg-white/50',
         )}
       >
         <input
           ref={inputRef}
           type="text"
           value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
+          onChange={e => setEditValue(e.target.value)}
           onBlur={handleRenameSubmit}
           onKeyDown={handleKeyDown}
           placeholder="Widget name"
@@ -119,29 +112,27 @@ function WidgetItem({
         href={`/widget/${id}`}
         onClick={onNavigate}
         className={cn(
-          "group flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors cursor-pointer",
-          isSelected
-            ? "bg-white text-foreground shadow-sm"
-            : "text-foreground hover:bg-white/50",
+          'group flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors cursor-pointer',
+          isSelected ? 'bg-white text-foreground shadow-sm' : 'text-foreground hover:bg-white/50',
         )}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
-        <span className="truncate flex-1">{name || "Untitled widget"}</span>
+        <span className="truncate flex-1">{name || 'Untitled widget'}</span>
 
         <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
           <DropdownMenuTrigger
-            onClick={(e) => e.preventDefault()}
+            onClick={e => e.preventDefault()}
             className={cn(
-              "flex h-6 w-6 shrink-0 items-center justify-center rounded hover:bg-black/5",
-              isHovered || isMenuOpen ? "opacity-100" : "opacity-0",
+              'flex h-6 w-6 shrink-0 items-center justify-center rounded hover:bg-black/5',
+              isHovered || isMenuOpen ? 'opacity-100' : 'opacity-0',
             )}
           >
             <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-40">
             <DropdownMenuItem
-              onClick={(e) => {
+              onClick={e => {
                 e.preventDefault();
                 handleRename();
               }}
@@ -150,7 +141,7 @@ function WidgetItem({
               Rename
             </DropdownMenuItem>
             <DropdownMenuItem
-              onClick={(e) => {
+              onClick={e => {
                 e.preventDefault();
                 setShowDeleteDialog(true);
               }}
@@ -168,8 +159,8 @@ function WidgetItem({
           <AlertDialogHeader>
             <AlertDialogTitle>Delete ?</AlertDialogTitle>
             <AlertDialogDescription>
-              All widget studio is stored locally on your device so there is no
-              backup. This action cannot be undone.
+              All widget studio is stored locally on your device so there is no backup. This action
+              cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter className="flex-col gap-2 sm:flex-col">
@@ -193,50 +184,42 @@ interface SidebarWidgetsProps {
   onNavigate?: () => void;
 }
 
-export function SidebarWidgets({ onNavigate }: SidebarWidgetsProps) {
+export function SidebarWidgets({onNavigate}: SidebarWidgetsProps) {
   const pathname = usePathname();
   const router = useRouter();
-  const { widgets, loading, updateWidget, removeWidget } = useWidgets();
+  const {widgets, loading, updateWidget, removeWidget} = useWidgets();
 
   const handleRename = (id: string, newName: string) => {
-    updateWidget(id, { name: newName });
+    updateWidget(id, {name: newName});
   };
 
   const handleDelete = (id: string) => {
     removeWidget(id);
     // Navigate to home if we're on the deleted widget's page
     if (pathname === `/widget/${id}`) {
-      router.push("/");
+      router.push('/');
     }
   };
 
   // Extract widget ID from pathname if on a widget page
-  const currentWidgetId = pathname.startsWith("/widget/")
-    ? pathname.replace("/widget/", "")
-    : null;
+  const currentWidgetId = pathname.startsWith('/widget/') ? pathname.replace('/widget/', '') : null;
 
   return (
     <div className="flex flex-col gap-2 h-full">
-      <span className="px-3 text-xs font-medium text-muted-foreground">
-        Widgets
-      </span>
+      <span className="px-3 text-xs font-medium text-muted-foreground">Widgets</span>
       <div className="flex flex-col gap-1 overflow-auto flex-1 min-h-0">
         {loading ? (
-          <div className="px-3 py-2 text-sm text-muted-foreground">
-            Loading...
-          </div>
+          <div className="px-3 py-2 text-sm text-muted-foreground">Loading...</div>
         ) : widgets.length === 0 ? (
-          <div className="px-3 py-2 text-sm text-muted-foreground">
-            No widgets yet
-          </div>
+          <div className="px-3 py-2 text-sm text-muted-foreground">No widgets yet</div>
         ) : (
-          widgets.map((widget) => (
+          widgets.map(widget => (
             <WidgetItem
               key={widget.id}
               id={widget.id}
               name={widget.name}
               isSelected={currentWidgetId === widget.id}
-              onRename={(newName) => handleRename(widget.id, newName)}
+              onRename={newName => handleRename(widget.id, newName)}
               onDelete={() => handleDelete(widget.id)}
               onNavigate={onNavigate}
             />
diff --git a/tools/composer/src/components/layout/sidebar.tsx b/tools/composer/src/components/layout/sidebar.tsx
index 800f752ed..5ffbab494 100644
--- a/tools/composer/src/components/layout/sidebar.tsx
+++ b/tools/composer/src/components/layout/sidebar.tsx
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Menu } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { SidebarHeader } from "./sidebar-header";
-import { SidebarNav } from "./sidebar-nav";
-import { VersionSelector } from "./version-selector";
-import { SidebarWidgets } from "./sidebar-widgets";
-import { Button } from "@/components/ui/button";
+import {useState} from 'react';
+import {Menu} from 'lucide-react';
+import {cn} from '@/lib/utils';
+import {SidebarHeader} from './sidebar-header';
+import {SidebarNav} from './sidebar-nav';
+import {VersionSelector} from './version-selector';
+import {SidebarWidgets} from './sidebar-widgets';
+import {Button} from '@/components/ui/button';
 
 export function Sidebar() {
   const [isOpen, setIsOpen] = useState(false);
@@ -53,8 +53,8 @@ export function Sidebar() {
       {/* Sidebar */}
       <aside
         className={cn(
-          "fixed z-40 flex h-full w-[220px] flex-col gap-4 border-2 border-white bg-white/50 p-3 transition-transform md:relative md:translate-x-0 rounded-lg",
-          isOpen ? "translate-x-0" : "-translate-x-full",
+          'fixed z-40 flex h-full w-[220px] flex-col gap-4 border-2 border-white bg-white/50 p-3 transition-transform md:relative md:translate-x-0 rounded-lg',
+          isOpen ? 'translate-x-0' : '-translate-x-full',
         )}
       >
         <SidebarHeader />
diff --git a/tools/composer/src/components/layout/version-selector.tsx b/tools/composer/src/components/layout/version-selector.tsx
index 75bd17d05..be2c193c5 100644
--- a/tools/composer/src/components/layout/version-selector.tsx
+++ b/tools/composer/src/components/layout/version-selector.tsx
@@ -22,22 +22,22 @@
  */
 'use client';
 
-import { useSpecVersion } from '@/contexts/spec-version-context';
-import type { SpecVersion } from '@/types/widget';
+import {useSpecVersion} from '@/contexts/spec-version-context';
+import type {SpecVersion} from '@/types/widget';
 
-const VERSIONS: { value: SpecVersion; label: string }[] = [
-  { value: '0.8', label: 'v0.8' },
-  { value: '0.9', label: 'v0.9' },
+const VERSIONS: {value: SpecVersion; label: string}[] = [
+  {value: '0.8', label: 'v0.8'},
+  {value: '0.9', label: 'v0.9'},
 ];
 
 export function VersionSelector() {
-  const { specVersion, setSpecVersion } = useSpecVersion();
+  const {specVersion, setSpecVersion} = useSpecVersion();
 
   return (
     <div className="flex items-center gap-2 px-3 py-1">
       <span className="text-xs font-medium text-muted-foreground">Spec</span>
       <div className="flex flex-1 rounded-md bg-white/50 p-0.5">
-        {VERSIONS.map(({ value, label }) => (
+        {VERSIONS.map(({value, label}) => (
           <button
             key={value}
             onClick={() => setSpecVersion(value)}
diff --git a/tools/composer/src/components/main/create-widget.tsx b/tools/composer/src/components/main/create-widget.tsx
index 682bd458e..be51e421b 100644
--- a/tools/composer/src/components/main/create-widget.tsx
+++ b/tools/composer/src/components/main/create-widget.tsx
@@ -14,38 +14,34 @@
  * limitations under the License.
  */
 
-"use client";
+'use client';
 
-import { useState, useRef, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { v4 as uuidv4 } from "uuid";
-import {
-  useAgent,
-  useCopilotKit,
-  useFrontendTool,
-} from "@copilotkit/react-core/v2";
-import { z } from "zod";
-import { WidgetInput } from "./widget-input";
-import { useWidgets } from "@/contexts/widgets-context";
-import { useSpecVersion } from "@/contexts/spec-version-context";
-import type { Widget } from "@/types/widget";
-import type { A2UIComponent } from "@/types/widget";
-import { parseRobustJSON } from "@/lib/json-parser";
+import {useState, useRef, useEffect} from 'react';
+import {useRouter} from 'next/navigation';
+import {v4 as uuidv4} from 'uuid';
+import {useAgent, useCopilotKit, useFrontendTool} from '@copilotkit/react-core/v2';
+import {z} from 'zod';
+import {WidgetInput} from './widget-input';
+import {useWidgets} from '@/contexts/widgets-context';
+import {useSpecVersion} from '@/contexts/spec-version-context';
+import type {Widget} from '@/types/widget';
+import type {A2UIComponent} from '@/types/widget';
+import {parseRobustJSON} from '@/lib/json-parser';
 
 const DEFAULT_COMPONENTS_V08: A2UIComponent[] = [
   {
-    id: "root",
+    id: 'root',
     component: {
       Card: {
-        child: "content",
+        child: 'content',
       },
     },
   },
   {
-    id: "content",
+    id: 'content',
     component: {
       Text: {
-        text: { path: "/title" },
+        text: {path: '/title'},
       },
     },
   },
@@ -53,30 +49,30 @@ const DEFAULT_COMPONENTS_V08: A2UIComponent[] = [
 
 const DEFAULT_COMPONENTS_V09: A2UIComponent[] = [
   {
-    id: "root",
-    component: "Card",
-    child: "content",
+    id: 'root',
+    component: 'Card',
+    child: 'content',
   },
   {
-    id: "content",
-    component: "Text",
-    text: { path: "/title" },
+    id: 'content',
+    component: 'Text',
+    text: {path: '/title'},
   },
 ];
 
-const DEFAULT_DATA = { title: "Hello World" };
+const DEFAULT_DATA = {title: 'Hello World'};
 
 export function CreateWidget() {
   const router = useRouter();
-  const { addWidget } = useWidgets();
-  const { specVersion } = useSpecVersion();
+  const {addWidget} = useWidgets();
+  const {specVersion} = useSpecVersion();
   const agentId = specVersion === '0.9' ? 'v09' : 'v08';
-  const { agent } = useAgent({ agentId });
-  const { copilotkit } = useCopilotKit();
+  const {agent} = useAgent({agentId});
+  const {copilotkit} = useCopilotKit();
 
   const defaultComponents = specVersion === '0.9' ? DEFAULT_COMPONENTS_V09 : DEFAULT_COMPONENTS_V08;
 
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState('');
   const [isGenerating, setIsGenerating] = useState(false);
   const [dotCount, setDotCount] = useState(1);
 
@@ -87,22 +83,19 @@ export function CreateWidget() {
 
   // Frontend tool for creating new widgets - captures AI output
   useFrontendTool({
-    name: "editWidget",
-    description:
-      "Create a new widget with the specified name, data, and components.",
+    name: 'editWidget',
+    description: 'Create a new widget with the specified name, data, and components.',
     parameters: z.object({
       name: z
         .string()
         .describe(
           'A short descriptive name for the widget (e.g. "User Profile Card", "Weather Widget").',
         ),
-      data: z.string().describe("The data object for the widget in JSON."),
-      components: z
-        .string()
-        .describe("The components array for the widget in JSON."),
+      data: z.string().describe('The data object for the widget in JSON.'),
+      components: z.string().describe('The components array for the widget in JSON.'),
     }),
-    render: ({ args, status }) => {
-      const isGenerating = status !== "complete";
+    render: ({args, status}) => {
+      const isGenerating = status !== 'complete';
 
       return (
         <div className="w-full">
@@ -113,8 +106,8 @@ export function CreateWidget() {
               transition-all shadow-sm border text-foreground
               ${
                 isGenerating
-                  ? "bg-secondary/50 border-border cursor-wait"
-                  : "bg-primary text-primary-foreground border-primary hover:bg-primary/90 cursor-pointer hover:shadow-md"
+                  ? 'bg-secondary/50 border-border cursor-wait'
+                  : 'bg-primary text-primary-foreground border-primary hover:bg-primary/90 cursor-pointer hover:shadow-md'
               }
             `}
             disabled={isGenerating}
@@ -145,17 +138,11 @@ export function CreateWidget() {
               <span>
                 {isGenerating ? (
                   <>
-                    Creating:{" "}
-                    <span className="font-semibold">
-                      {args?.name || "Widget"}
-                    </span>
+                    Creating: <span className="font-semibold">{args?.name || 'Widget'}</span>
                   </>
                 ) : (
                   <>
-                    Created:{" "}
-                    <span className="font-semibold">
-                      {args?.name || "Widget"}
-                    </span>
+                    Created: <span className="font-semibold">{args?.name || 'Widget'}</span>
                   </>
                 )}
               </span>
@@ -178,23 +165,18 @@ export function CreateWidget() {
         </div>
       );
     },
-    handler: async ({ name, data, components }) => {
+    handler: async ({name, data, components}) => {
       try {
         generatedName.current = name;
-        generatedData.current = parseRobustJSON(data) as Record<
-          string,
-          unknown
-        >;
-        generatedComponents.current = parseRobustJSON(
-          components,
-        ) as A2UIComponent[];
+        generatedData.current = parseRobustJSON(data) as Record<string, unknown>;
+        generatedComponents.current = parseRobustJSON(components) as A2UIComponent[];
       } catch (error) {
         return {
           success: false,
           error: `Error parsing JSON: ${error}`,
         };
       }
-      return { success: true };
+      return {success: true};
     },
   });
 
@@ -218,25 +200,25 @@ export function CreateWidget() {
       // Add user message
       agent.addMessage({
         id: crypto.randomUUID(),
-        role: "user",
+        role: 'user',
         content: inputValue,
       });
 
       // Run agent (will call editWidget tool)
-      await copilotkit.runAgent({ agent });
+      await copilotkit.runAgent({agent});
 
       // Create widget with generated content (or defaults if tool wasn't called)
       const newWidget: Widget = {
         id: widgetId,
-        name: generatedName.current ?? "Untitled widget",
+        name: generatedName.current ?? 'Untitled widget',
         createdAt: new Date(),
         updatedAt: new Date(),
         specVersion,
-        root: "root",
+        root: 'root',
         components: generatedComponents.current ?? defaultComponents,
         dataStates: [
           {
-            name: "default",
+            name: 'default',
             data: generatedData.current ?? DEFAULT_DATA,
           },
         ],
@@ -245,7 +227,7 @@ export function CreateWidget() {
       await addWidget(newWidget);
       router.push(`/widget/${widgetId}`);
     } catch (error) {
-      console.error("Failed to generate widget:", error);
+      console.error('Failed to generate widget:', error);
       setIsGenerating(false);
     }
   };
@@ -258,7 +240,7 @@ export function CreateWidget() {
     }
 
     const interval = setInterval(() => {
-      setDotCount((prev) => (prev >= 3 ? 1 : prev + 1));
+      setDotCount(prev => (prev >= 3 ? 1 : prev + 1));
     }, 500);
 
     return () => clearInterval(interval);
@@ -268,15 +250,15 @@ export function CreateWidget() {
     const id = uuidv4();
     const newWidget: Widget = {
       id,
-      name: "Untitled widget",
+      name: 'Untitled widget',
       createdAt: new Date(),
       updatedAt: new Date(),
       specVersion,
-      root: "root",
+      root: 'root',
       components: defaultComponents,
       dataStates: [
         {
-          name: "default",
+          name: 'default',
           data: DEFAULT_DATA,
         },
       ],
@@ -287,24 +269,18 @@ export function CreateWidget() {
 
   return (
     <div className="flex w-full flex-col items-center gap-4 px-4">
-      <h1 className="text-4xl font-extralight tracking-tight">
-        What would you like to build?
-      </h1>
+      <h1 className="text-4xl font-extralight tracking-tight">What would you like to build?</h1>
       <WidgetInput
         value={inputValue}
         onChange={setInputValue}
         onSubmit={handleCreate}
         disabled={isGenerating}
       />
-      <span className="text-xs text-muted-foreground">
-        Powered by 🪁 CopilotKit
-      </span>
+      <span className="text-xs text-muted-foreground">Powered by 🪁 CopilotKit</span>
       {isGenerating ? (
         <span className="mt-4 text-lg text-muted-foreground">
           Generating widget
-          <span className="inline-block w-[0.75rem] text-left">
-            {".".repeat(dotCount)}
-          </span>
+          <span className="inline-block w-[0.75rem] text-left">{'.'.repeat(dotCount)}</span>
         </span>
       ) : (
         <button
diff --git a/tools/composer/src/components/main/preview-gallery.tsx b/tools/composer/src/components/main/preview-gallery.tsx
index 7e753c292..19c277093 100644
--- a/tools/composer/src/components/main/preview-gallery.tsx
+++ b/tools/composer/src/components/main/preview-gallery.tsx
@@ -15,20 +15,20 @@
  */
 
 const suggestions = [
-  { icon: 'person', label: 'Profile card' },
-  { icon: 'thermostat', label: 'Weather widget' },
-  { icon: 'task_alt', label: 'Todo list' },
-  { icon: 'music_note', label: 'Music player' },
+  {icon: 'person', label: 'Profile card'},
+  {icon: 'thermostat', label: 'Weather widget'},
+  {icon: 'task_alt', label: 'Todo list'},
+  {icon: 'music_note', label: 'Music player'},
 ];
 
 interface PreviewGalleryProps {
   onSelect?: (label: string) => void;
 }
 
-export function PreviewGallery({ onSelect }: PreviewGalleryProps) {
+export function PreviewGallery({onSelect}: PreviewGalleryProps) {
   return (
     <div className="flex flex-wrap justify-center gap-3">
-      {suggestions.map((s) => (
+      {suggestions.map(s => (
         <button
           key={s.label}
           onClick={() => onSelect?.(s.label)}
diff --git a/tools/composer/src/components/main/widget-input.tsx b/tools/composer/src/components/main/widget-input.tsx
index b1abe7157..f034be427 100644
--- a/tools/composer/src/components/main/widget-input.tsx
+++ b/tools/composer/src/components/main/widget-input.tsx
@@ -23,7 +23,7 @@ interface WidgetInputProps {
   disabled?: boolean;
 }
 
-export function WidgetInput({ value, onChange, onSubmit, disabled }: WidgetInputProps) {
+export function WidgetInput({value, onChange, onSubmit, disabled}: WidgetInputProps) {
   const hasText = value.trim().length > 0;
   const canSubmit = hasText && !disabled;
 
@@ -38,13 +38,13 @@ export function WidgetInput({ value, onChange, onSubmit, disabled }: WidgetInput
     <div className="flex w-full max-w-3xl items-center gap-3 rounded-[28px] border border-white/80 bg-white/50 px-5 py-2.5 shadow-sm">
       <textarea
         value={value}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={e => onChange(e.target.value)}
         onKeyDown={handleKeyDown}
         placeholder="Describe your A2UI widget..."
         className="flex-1 resize-none bg-transparent text-base outline-none placeholder:text-muted-foreground/50 min-h-[36px] max-h-[120px] py-1.5"
         rows={1}
         autoFocus
-        onInput={(e) => {
+        onInput={e => {
           const target = e.target as HTMLTextAreaElement;
           target.style.height = 'auto';
           target.style.height = `${Math.min(target.scrollHeight, 120)}px`;
@@ -55,9 +55,10 @@ export function WidgetInput({ value, onChange, onSubmit, disabled }: WidgetInput
         onClick={onSubmit}
         className={`
           shrink-0 px-4 py-1.5 rounded-full text-sm font-medium transition-all self-end mb-0.5
-          ${canSubmit
-            ? 'bg-gradient-to-br from-violet-500 to-indigo-600 hover:from-violet-600 hover:to-indigo-700 text-white cursor-pointer'
-            : 'bg-muted text-muted-foreground cursor-not-allowed'
+          ${
+            canSubmit
+              ? 'bg-gradient-to-br from-violet-500 to-indigo-600 hover:from-violet-600 hover:to-indigo-700 text-white cursor-pointer'
+              : 'bg-muted text-muted-foreground cursor-not-allowed'
           }
         `}
       >
diff --git a/tools/composer/src/components/theater/useA2UISurface.ts b/tools/composer/src/components/theater/useA2UISurface.ts
index cf5475252..6e63f72e7 100644
--- a/tools/composer/src/components/theater/useA2UISurface.ts
+++ b/tools/composer/src/components/theater/useA2UISurface.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react';
-import { transpileToV0_8 } from '@/lib/transcoder';
-import type { A2UIComponent } from '@/types/widget';
+import {useMemo} from 'react';
+import {transpileToV0_8} from '@/lib/transcoder';
+import type {A2UIComponent} from '@/types/widget';
 
 export interface A2UISurfaceState {
   root: string;
@@ -30,19 +30,19 @@ export interface A2UISurfaceState {
  */
 export function useA2UISurface(messages: any[]): A2UISurfaceState {
   return useMemo(() => {
-    let root = "root";
+    let root = 'root';
     const componentsMap = new Map<string, A2UIComponent>();
     let data: Record<string, any> = {};
 
     for (const msg of messages) {
       if (!msg) continue;
-      
+
       // Transpile v0.9 -> v0.8 (v0.8 passes through unchanged)
       const v0_8msg = transpileToV0_8(msg);
 
       // Handle beginRendering (v0.8)
       if (v0_8msg.beginRendering) {
-        root = v0_8msg.beginRendering.root || "root";
+        root = v0_8msg.beginRendering.root || 'root';
       }
 
       // Handle surfaceUpdate (v0.8) — components already in { id, component: { Type: props } } format
@@ -52,7 +52,7 @@ export function useA2UISurface(messages: any[]): A2UISurfaceState {
           if (comp.id && comp.component) {
             componentsMap.set(comp.id, {
               id: comp.id,
-              component: comp.component
+              component: comp.component,
             });
           }
         }
@@ -70,11 +70,11 @@ export function useA2UISurface(messages: any[]): A2UISurfaceState {
                 data[item.key] = extractValueMapValue(item);
               } else {
                 // Plain object
-                data = { ...data, ...item };
+                data = {...data, ...item};
               }
             }
           } else if (typeof contents === 'object') {
-            data = { ...data, ...contents };
+            data = {...data, ...contents};
           }
         }
       }
diff --git a/tools/composer/src/components/theater/useJsonlPlayer.ts b/tools/composer/src/components/theater/useJsonlPlayer.ts
index c7ddec049..dddaca537 100644
--- a/tools/composer/src/components/theater/useJsonlPlayer.ts
+++ b/tools/composer/src/components/theater/useJsonlPlayer.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useCallback, useRef } from 'react';
+import {useState, useEffect, useCallback, useRef} from 'react';
 
 export type PlaybackState = 'playing' | 'paused' | 'stopped';
 
@@ -32,10 +32,10 @@ export function useJsonlPlayer<T>({
   initialProgress = 0,
 }: UseJsonlPlayerOptions<T>) {
   const [playbackState, setPlaybackState] = useState<PlaybackState>(
-    autoPlay ? 'playing' : 'stopped'
+    autoPlay ? 'playing' : 'stopped',
   );
   // progress represents the *number of messages* currently active (0 to totalMessages)
-  const [progress, setProgress] = useState(Math.min(initialProgress, messages.length)); 
+  const [progress, setProgress] = useState(Math.min(initialProgress, messages.length));
   const [speed, setSpeed] = useState(1);
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -62,17 +62,20 @@ export function useJsonlPlayer<T>({
     setProgress(0);
   }, []);
 
-  const seek = useCallback((index: number) => {
-    if (index >= 0 && index <= totalMessages) {
-      setProgress(index);
-    }
-  }, [totalMessages]);
+  const seek = useCallback(
+    (index: number) => {
+      if (index >= 0 && index <= totalMessages) {
+        setProgress(index);
+      }
+    },
+    [totalMessages],
+  );
 
   useEffect(() => {
     if (playbackState === 'playing') {
       const ms = baseIntervalMs / speed;
       timerRef.current = setInterval(() => {
-        setProgress((prev) => {
+        setProgress(prev => {
           if (prev >= totalMessages) {
             setPlaybackState('paused');
             return prev;
diff --git a/tools/composer/src/components/theater/useStreamingPlayer.ts b/tools/composer/src/components/theater/useStreamingPlayer.ts
index b48fb8e9c..1d339ccf7 100644
--- a/tools/composer/src/components/theater/useStreamingPlayer.ts
+++ b/tools/composer/src/components/theater/useStreamingPlayer.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import {useState, useEffect, useCallback, useRef, useMemo} from 'react';
 
 export type PlaybackState = 'playing' | 'paused' | 'stopped';
 
@@ -60,36 +60,52 @@ function toLifecycleEvents(messages: any[]): LifecycleEvent[] {
   for (let i = 0; i < messages.length; i++) {
     const msg = messages[i];
     if (msg.beginRendering) {
-      events.push({ chunkIndex: i, summary: `Surface "${msg.beginRendering.surfaceId || 'default'}" created`, type: 'surface' });
+      events.push({
+        chunkIndex: i,
+        summary: `Surface "${msg.beginRendering.surfaceId || 'default'}" created`,
+        type: 'surface',
+      });
     }
     if (msg.createSurface) {
-      events.push({ chunkIndex: i, summary: `Surface "${msg.createSurface.surfaceId}" created`, type: 'surface' });
+      events.push({
+        chunkIndex: i,
+        summary: `Surface "${msg.createSurface.surfaceId}" created`,
+        type: 'surface',
+      });
     }
     if (msg.surfaceUpdate) {
       const count = msg.surfaceUpdate.components?.length || 0;
       const types = msg.surfaceUpdate.components
-        ?.map((c: any) => c.component ? Object.keys(c.component)[0] : c.type || '?')
+        ?.map((c: any) => (c.component ? Object.keys(c.component)[0] : c.type || '?'))
         .filter((v: string, j: number, a: string[]) => a.indexOf(v) === j);
-      events.push({ chunkIndex: i, summary: `${count} components registered: ${types?.join(', ')}`, type: 'components' });
+      events.push({
+        chunkIndex: i,
+        summary: `${count} components registered: ${types?.join(', ')}`,
+        type: 'components',
+      });
     }
     if (msg.updateComponents) {
       const count = msg.updateComponents.components?.length || 0;
-      events.push({ chunkIndex: i, summary: `${count} components updated`, type: 'components' });
+      events.push({chunkIndex: i, summary: `${count} components updated`, type: 'components'});
     }
     if (msg.dataModelUpdate) {
       const keys = msg.dataModelUpdate.contents?.map((c: any) => c.key).filter(Boolean) || [];
-      events.push({ chunkIndex: i, summary: `Data model: ${keys.join(', ')}`, type: 'data' });
+      events.push({chunkIndex: i, summary: `Data model: ${keys.join(', ')}`, type: 'data'});
     }
     if (msg.updateDataModel) {
       const keys = msg.updateDataModel.contents?.map((c: any) => c.key).filter(Boolean) || [];
-      events.push({ chunkIndex: i, summary: `Data model: ${keys.join(', ')}`, type: 'data' });
+      events.push({chunkIndex: i, summary: `Data model: ${keys.join(', ')}`, type: 'data'});
     }
     if (msg.clientEvent || msg.action) {
       const name = msg.clientEvent?.name || msg.action?.name || 'action';
-      events.push({ chunkIndex: i, summary: `User action: ${name}`, type: 'action' });
+      events.push({chunkIndex: i, summary: `User action: ${name}`, type: 'action'});
     }
     if (msg.deleteSurface) {
-      events.push({ chunkIndex: i, summary: `Surface "${msg.deleteSurface.surfaceId}" deleted`, type: 'delete' });
+      events.push({
+        chunkIndex: i,
+        summary: `Surface "${msg.deleteSurface.surfaceId}" deleted`,
+        type: 'delete',
+      });
     }
   }
   return events;
@@ -123,9 +139,12 @@ export function useStreamingPlayer(messages: any[], baseIntervalMs = 800) {
     setProgress(0);
   }, []);
 
-  const seek = useCallback((index: number) => {
-    setProgress(Math.max(0, Math.min(index, totalChunks)));
-  }, [totalChunks]);
+  const seek = useCallback(
+    (index: number) => {
+      setProgress(Math.max(0, Math.min(index, totalChunks)));
+    },
+    [totalChunks],
+  );
 
   // Playback timer — one chunk per tick
   useEffect(() => {
@@ -143,7 +162,9 @@ export function useStreamingPlayer(messages: any[], baseIntervalMs = 800) {
     } else if (timerRef.current) {
       clearInterval(timerRef.current);
     }
-    return () => { if (timerRef.current) clearInterval(timerRef.current); };
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
   }, [playbackState, speed, totalChunks, baseIntervalMs]);
 
   // Chunks received so far
diff --git a/tools/composer/src/components/ui/alert-dialog.tsx b/tools/composer/src/components/ui/alert-dialog.tsx
index 202164b43..6f7bf8f82 100644
--- a/tools/composer/src/components/ui/alert-dialog.tsx
+++ b/tools/composer/src/components/ui/alert-dialog.tsx
@@ -14,34 +14,24 @@
  * limitations under the License.
  */
 
-"use client"
+'use client';
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import {cn} from '@/lib/utils';
+import {buttonVariants} from '@/components/ui/button';
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+function AlertDialog({...props}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+function AlertDialogTrigger({...props}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+function AlertDialogPortal({...props}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
 function AlertDialogOverlay({
@@ -52,12 +42,12 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
@@ -70,42 +60,33 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
         )}
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogHeader({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogFooter({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogTitle({
@@ -115,10 +96,10 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
+      className={cn('text-lg font-semibold', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogDescription({
@@ -128,22 +109,17 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogAction({
   className,
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
 }
 
 function AlertDialogCancel({
@@ -152,10 +128,10 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
+      className={cn(buttonVariants({variant: 'outline'}), className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -170,4 +146,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/tools/composer/src/components/ui/button.tsx b/tools/composer/src/components/ui/button.tsx
index b82da3982..99ebeba53 100644
--- a/tools/composer/src/components/ui/button.tsx
+++ b/tools/composer/src/components/ui/button.tsx
@@ -14,43 +14,41 @@
  * limitations under the License.
  */
 
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import {Slot} from '@radix-ui/react-slot';
+import {cva, type VariantProps} from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -58,19 +56,19 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({variant, size, className}))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export {Button, buttonVariants};
diff --git a/tools/composer/src/components/ui/dropdown-menu.tsx b/tools/composer/src/components/ui/dropdown-menu.tsx
index b38e1963a..cacab1375 100644
--- a/tools/composer/src/components/ui/dropdown-menu.tsx
+++ b/tools/composer/src/components/ui/dropdown-menu.tsx
@@ -14,37 +14,26 @@
  * limitations under the License.
  */
 
-"use client"
+'use client';
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import {CheckIcon, ChevronRightIcon, CircleIcon} from 'lucide-react';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+function DropdownMenu({...props}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+function DropdownMenuPortal({...props}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
 }
 
 function DropdownMenuTrigger({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
 }
 
 function DropdownMenuContent({
@@ -58,31 +47,27 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+function DropdownMenuGroup({...props}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -91,11 +76,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -109,7 +94,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       checked={checked}
       {...props}
@@ -121,18 +106,13 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
 }
 
 function DropdownMenuRadioItem({
@@ -145,7 +125,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -156,7 +136,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -164,19 +144,16 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
+      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -186,32 +163,24 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
+function DropdownMenuShortcut({className, ...props}: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
       {...props}
     />
-  )
+  );
 }
 
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+function DropdownMenuSub({...props}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -220,7 +189,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -228,14 +197,14 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -246,12 +215,12 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -270,4 +239,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};
diff --git a/tools/composer/src/components/ui/input.tsx b/tools/composer/src/components/ui/input.tsx
index 4683138bd..cfd4c84fb 100644
--- a/tools/composer/src/components/ui/input.tsx
+++ b/tools/composer/src/components/ui/input.tsx
@@ -14,24 +14,24 @@
  * limitations under the License.
  */
 
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({className, type, ...props}: React.ComponentProps<'input'>) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export {Input};
diff --git a/tools/composer/src/components/ui/resizable.tsx b/tools/composer/src/components/ui/resizable.tsx
index e6754ddc1..9084fe12a 100644
--- a/tools/composer/src/components/ui/resizable.tsx
+++ b/tools/composer/src/components/ui/resizable.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-"use client"
+'use client';
 
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import * as React from 'react';
+import {GripVerticalIcon} from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
 function ResizablePanelGroup({
   className,
@@ -29,19 +29,14 @@ function ResizablePanelGroup({
   return (
     <ResizablePrimitive.PanelGroup
       data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
+      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+function ResizablePanel({...props}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
 function ResizableHandle({
@@ -49,14 +44,14 @@ function ResizableHandle({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) {
   return (
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "relative flex w-0 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 after:cursor-col-resize focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-0 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-3 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:cursor-row-resize [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
+        'relative flex w-0 items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 after:cursor-col-resize focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-0 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-3 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:cursor-row-resize [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        className,
       )}
       {...props}
     >
@@ -66,7 +61,7 @@ function ResizableHandle({
         </div>
       )}
     </ResizablePrimitive.PanelResizeHandle>
-  )
+  );
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export {ResizablePanelGroup, ResizablePanel, ResizableHandle};
diff --git a/tools/composer/src/components/ui/separator.tsx b/tools/composer/src/components/ui/separator.tsx
index e27a1e7ba..702a83380 100644
--- a/tools/composer/src/components/ui/separator.tsx
+++ b/tools/composer/src/components/ui/separator.tsx
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
-"use client"
+'use client';
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from "@/lib/utils"
+import {cn} from '@/lib/utils';
 
 function Separator({
   className,
-  orientation = "horizontal",
+  orientation = 'horizontal',
   decorative = true,
   ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
@@ -33,12 +33,12 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export {Separator};
diff --git a/tools/composer/src/contexts/spec-version-context.tsx b/tools/composer/src/contexts/spec-version-context.tsx
index 664756c61..0594d853c 100644
--- a/tools/composer/src/contexts/spec-version-context.tsx
+++ b/tools/composer/src/contexts/spec-version-context.tsx
@@ -27,8 +27,8 @@
  */
 'use client';
 
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
-import type { SpecVersion } from '@/types/widget';
+import {createContext, useContext, useState, useEffect, useCallback, type ReactNode} from 'react';
+import type {SpecVersion} from '@/types/widget';
 
 const STORAGE_KEY = 'a2ui-spec-version';
 const DEFAULT_VERSION: SpecVersion = '0.9';
@@ -41,7 +41,7 @@ interface SpecVersionContextValue {
 
 const SpecVersionContext = createContext<SpecVersionContextValue | null>(null);
 
-export function SpecVersionProvider({ children }: { children: ReactNode }) {
+export function SpecVersionProvider({children}: {children: ReactNode}) {
   const [specVersion, setSpecVersionState] = useState<SpecVersion>(DEFAULT_VERSION);
   const [isLoaded, setIsLoaded] = useState(false);
 
@@ -60,7 +60,7 @@ export function SpecVersionProvider({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <SpecVersionContext.Provider value={{ specVersion, setSpecVersion, isLoaded }}>
+    <SpecVersionContext.Provider value={{specVersion, setSpecVersion, isLoaded}}>
       {children}
     </SpecVersionContext.Provider>
   );
diff --git a/tools/composer/src/contexts/widgets-context.test.tsx b/tools/composer/src/contexts/widgets-context.test.tsx
index c12510a4f..7328b4038 100644
--- a/tools/composer/src/contexts/widgets-context.test.tsx
+++ b/tools/composer/src/contexts/widgets-context.test.tsx
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, act } from '@testing-library/react';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, act} from '@testing-library/react';
 import * as storage from '@/lib/storage';
-import { Widget } from '@/types/widget';
+import {Widget} from '@/types/widget';
 import React from 'react';
 
 vi.mock('@/lib/storage', () => ({
@@ -45,34 +45,51 @@ describe('WidgetsContext', () => {
   });
 
   const getTestUtils = async () => {
-    const { WidgetsProvider, useWidgets } = await import('./widgets-context');
-    
+    const {WidgetsProvider, useWidgets} = await import('./widgets-context');
+
     const TestComponent = () => {
-      const { widgets, loading, addWidget, updateWidget, removeWidget } = useWidgets();
+      const {widgets, loading, addWidget, updateWidget, removeWidget} = useWidgets();
       if (loading) return <div>Loading...</div>;
       return (
         <div>
           <div data-testid="count">{widgets.length}</div>
           {widgets.map(w => (
-            <div key={w.id} data-testid={`widget-${w.id}`}>{w.name}</div>
+            <div key={w.id} data-testid={`widget-${w.id}`}>
+              {w.name}
+            </div>
           ))}
-          <button onClick={() => addWidget({ id: '2', name: 'New', specVersion: '0.8', createdAt: new Date(), updatedAt: new Date(), root: 'root', components: [], dataStates: [] })}>Add</button>
-          <button onClick={() => updateWidget('1', { name: 'Updated' })}>Update</button>
+          <button
+            onClick={() =>
+              addWidget({
+                id: '2',
+                name: 'New',
+                specVersion: '0.8',
+                createdAt: new Date(),
+                updatedAt: new Date(),
+                root: 'root',
+                components: [],
+                dataStates: [],
+              })
+            }
+          >
+            Add
+          </button>
+          <button onClick={() => updateWidget('1', {name: 'Updated'})}>Update</button>
           <button onClick={() => removeWidget('1')}>Remove</button>
         </div>
       );
     };
 
-    return { WidgetsProvider, TestComponent };
+    return {WidgetsProvider, TestComponent};
   };
 
   it('should load widgets on mount', async () => {
-    const { WidgetsProvider, TestComponent } = await getTestUtils();
+    const {WidgetsProvider, TestComponent} = await getTestUtils();
     await act(async () => {
       render(
         <WidgetsProvider>
           <TestComponent />
-        </WidgetsProvider>
+        </WidgetsProvider>,
       );
     });
 
@@ -82,17 +99,17 @@ describe('WidgetsContext', () => {
   });
 
   it('should add a widget', async () => {
-    const { WidgetsProvider, TestComponent } = await getTestUtils();
+    const {WidgetsProvider, TestComponent} = await getTestUtils();
     await act(async () => {
       render(
         <WidgetsProvider>
           <TestComponent />
-        </WidgetsProvider>
+        </WidgetsProvider>,
       );
     });
 
     await screen.findByTestId('count');
-    
+
     await act(async () => {
       screen.getByText('Add').click();
     });
@@ -102,17 +119,17 @@ describe('WidgetsContext', () => {
   });
 
   it('should update a widget', async () => {
-    const { WidgetsProvider, TestComponent } = await getTestUtils();
+    const {WidgetsProvider, TestComponent} = await getTestUtils();
     await act(async () => {
       render(
         <WidgetsProvider>
           <TestComponent />
-        </WidgetsProvider>
+        </WidgetsProvider>,
       );
     });
 
     await screen.findByTestId('count');
-    
+
     await act(async () => {
       screen.getByText('Update').click();
     });
@@ -122,17 +139,17 @@ describe('WidgetsContext', () => {
   });
 
   it('should remove a widget', async () => {
-    const { WidgetsProvider, TestComponent } = await getTestUtils();
+    const {WidgetsProvider, TestComponent} = await getTestUtils();
     await act(async () => {
       render(
         <WidgetsProvider>
           <TestComponent />
-        </WidgetsProvider>
+        </WidgetsProvider>,
       );
     });
 
     await screen.findByTestId('count');
-    
+
     await act(async () => {
       screen.getByText('Remove').click();
     });
diff --git a/tools/composer/src/contexts/widgets-context.tsx b/tools/composer/src/contexts/widgets-context.tsx
index 2644fde90..9b47daa6e 100644
--- a/tools/composer/src/contexts/widgets-context.tsx
+++ b/tools/composer/src/contexts/widgets-context.tsx
@@ -16,9 +16,9 @@
 
 'use client';
 
-import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
-import { Widget } from '@/types/widget';
-import { getWidgets, saveWidget, deleteWidget } from '@/lib/storage';
+import {createContext, useContext, useState, useEffect, useCallback, ReactNode} from 'react';
+import {Widget} from '@/types/widget';
+import {getWidgets, saveWidget, deleteWidget} from '@/lib/storage';
 
 // Module-level cache - persists outside React tree
 let cachedWidgets: Widget[] | null = null;
@@ -26,7 +26,7 @@ let initPromise: Promise<void> | null = null;
 
 async function initializeStore(
   setWidgets: (w: Widget[]) => void,
-  setLoading: (l: boolean) => void
+  setLoading: (l: boolean) => void,
 ) {
   // If already cached, use immediately
   if (cachedWidgets !== null) {
@@ -65,7 +65,7 @@ interface WidgetsContextType {
 
 const WidgetsContext = createContext<WidgetsContextType | null>(null);
 
-export function WidgetsProvider({ children }: { children: ReactNode }) {
+export function WidgetsProvider({children}: {children: ReactNode}) {
   // Initialize from cache if available
   const [widgets, setWidgets] = useState<Widget[]>(cachedWidgets ?? []);
   const [loading, setLoading] = useState(cachedWidgets === null);
@@ -87,9 +87,9 @@ export function WidgetsProvider({ children }: { children: ReactNode }) {
     setWidgets(prev => {
       const widget = prev.find(w => w.id === id);
       if (widget) {
-        const updated = { ...widget, ...updates, updatedAt: new Date() };
+        const updated = {...widget, ...updates, updatedAt: new Date()};
         saveWidget(updated);
-        const newWidgets = prev.map(w => w.id === id ? updated : w);
+        const newWidgets = prev.map(w => (w.id === id ? updated : w));
         cachedWidgets = newWidgets;
         return newWidgets;
       }
@@ -106,12 +106,17 @@ export function WidgetsProvider({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  const getWidget = useCallback((id: string) => {
-    return widgets.find(w => w.id === id);
-  }, [widgets]);
+  const getWidget = useCallback(
+    (id: string) => {
+      return widgets.find(w => w.id === id);
+    },
+    [widgets],
+  );
 
   return (
-    <WidgetsContext.Provider value={{ widgets, loading, addWidget, updateWidget, removeWidget, getWidget }}>
+    <WidgetsContext.Provider
+      value={{widgets, loading, addWidget, updateWidget, removeWidget, getWidget}}
+    >
       {children}
     </WidgetsContext.Provider>
   );
diff --git a/tools/composer/src/data/gallery/index.ts b/tools/composer/src/data/gallery/index.ts
index 73b880435..10968502c 100644
--- a/tools/composer/src/data/gallery/index.ts
+++ b/tools/composer/src/data/gallery/index.ts
@@ -20,8 +20,8 @@
  * Exports version-specific gallery arrays. The gallery page selects
  * which set to display based on the global SpecVersion context.
  */
-export { V08_GALLERY_WIDGETS } from './v08';
-export { V09_GALLERY_WIDGETS } from './v09';
+export {V08_GALLERY_WIDGETS} from './v08';
+export {V09_GALLERY_WIDGETS} from './v09';
 
 // Re-export all individual widgets for direct imports
 export * from './v08';
diff --git a/tools/composer/src/data/gallery/v08/index.ts b/tools/composer/src/data/gallery/v08/index.ts
index b41602e8e..2ad44113d 100644
--- a/tools/composer/src/data/gallery/v08/index.ts
+++ b/tools/composer/src/data/gallery/v08/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { V08_GALLERY_WIDGETS } from './generated';
+export {V08_GALLERY_WIDGETS} from './generated';
diff --git a/tools/composer/src/data/gallery/v09/index.ts b/tools/composer/src/data/gallery/v09/index.ts
index a42e939d0..87c283096 100644
--- a/tools/composer/src/data/gallery/v09/index.ts
+++ b/tools/composer/src/data/gallery/v09/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { V09_GALLERY_WIDGETS } from './generated';
+export {V09_GALLERY_WIDGETS} from './generated';
diff --git a/tools/composer/src/data/theater/booking-form.json b/tools/composer/src/data/theater/booking-form.json
index 23d4f8779..65332c512 100644
--- a/tools/composer/src/data/theater/booking-form.json
+++ b/tools/composer/src/data/theater/booking-form.json
@@ -268,4 +268,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/contact-card.json b/tools/composer/src/data/theater/contact-card.json
index 384b2626c..2281f1dbb 100644
--- a/tools/composer/src/data/theater/contact-card.json
+++ b/tools/composer/src/data/theater/contact-card.json
@@ -58,11 +58,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "user_heading",
-                  "description_text_1",
-                  "description_text_2"
-                ]
+                "explicitList": ["user_heading", "description_text_1", "description_text_2"]
               },
               "alignment": "center"
             }
@@ -104,10 +100,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "calendar_primary_text",
-                  "calendar_secondary_text"
-                ]
+                "explicitList": ["calendar_primary_text", "calendar_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -119,10 +112,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "calendar_icon",
-                  "calendar_text_column"
-                ]
+                "explicitList": ["calendar_icon", "calendar_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -165,10 +155,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "location_primary_text",
-                  "location_secondary_text"
-                ]
+                "explicitList": ["location_primary_text", "location_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -180,10 +167,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "location_icon",
-                  "location_text_column"
-                ]
+                "explicitList": ["location_icon", "location_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -226,10 +210,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "mail_primary_text",
-                  "mail_secondary_text"
-                ]
+                "explicitList": ["mail_primary_text", "mail_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -241,10 +222,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "mail_icon",
-                  "mail_text_column"
-                ]
+                "explicitList": ["mail_icon", "mail_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -293,10 +271,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "call_primary_text",
-                  "call_secondary_text"
-                ]
+                "explicitList": ["call_primary_text", "call_secondary_text"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -308,10 +283,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "call_icon",
-                  "call_text_column"
-                ]
+                "explicitList": ["call_icon", "call_text_column"]
               },
               "distribution": "start",
               "alignment": "start"
@@ -324,12 +296,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "info_row_1",
-                  "info_row_2",
-                  "info_row_3",
-                  "info_row_4"
-                ]
+                "explicitList": ["info_row_1", "info_row_2", "info_row_3", "info_row_4"]
               },
               "alignment": "stretch"
             }
@@ -384,10 +351,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "button_1",
-                  "button_2"
-                ]
+                "explicitList": ["button_1", "button_2"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -409,9 +373,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "link_text"
-                ]
+                "explicitList": ["link_text"]
               },
               "distribution": "center",
               "alignment": "center"
@@ -487,4 +449,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/floor-plan.json b/tools/composer/src/data/theater/floor-plan.json
index 70fbb3219..50ba88afa 100644
--- a/tools/composer/src/data/theater/floor-plan.json
+++ b/tools/composer/src/data/theater/floor-plan.json
@@ -22,11 +22,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "floor-plan-title",
-                  "floor-plan-comp",
-                  "dismiss-fp"
-                ]
+                "explicitList": ["floor-plan-title", "floor-plan-comp", "dismiss-fp"]
               }
             }
           }
@@ -49,9 +45,7 @@
               "url": "http://localhost:10004/static/floorplan.html?data=%7B%22mappings%22%3A%20%5B%7B%22deskId%22%3A%20%22desk-1%22%2C%20%22contactId%22%3A%20%224%22%2C%20%22contactName%22%3A%20%22Jane%20Doe%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-2%22%2C%20%22contactId%22%3A%20%221%22%2C%20%22contactName%22%3A%20%22Alex%20Jordan%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-3%22%2C%20%22contactId%22%3A%20%223%22%2C%20%22contactName%22%3A%20%22Jordan%20Taylor%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-4%22%2C%20%22contactId%22%3A%20%225%22%2C%20%22contactName%22%3A%20%22John%20Smith%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-5%22%2C%20%22contactId%22%3A%20%226%22%2C%20%22contactName%22%3A%20%22Alice%20Johnson%22%7D%2C%20%7B%22deskId%22%3A%20%22desk-7%22%2C%20%22contactId%22%3A%20%222%22%2C%20%22contactName%22%3A%20%22Casey%20Smith%22%7D%5D%7D",
               "height": 400,
               "interactionMode": "interactive",
-              "allowedEvents": [
-                "chart_node_click"
-              ]
+              "allowedEvents": ["chart_node_click"]
             }
           }
         },
@@ -80,4 +74,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/kitchen-sink.json b/tools/composer/src/data/theater/kitchen-sink.json
index 8e11a824c..eb034e8c5 100644
--- a/tools/composer/src/data/theater/kitchen-sink.json
+++ b/tools/composer/src/data/theater/kitchen-sink.json
@@ -867,11 +867,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "icon-1",
-                  "icon-2",
-                  "icon-3"
-                ]
+                "explicitList": ["icon-1", "icon-2", "icon-3"]
               },
               "distribution": "spaceEvenly",
               "alignment": "center"
@@ -926,11 +922,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "div-text-1",
-                  "div-horiz",
-                  "div-text-2"
-                ]
+                "explicitList": ["div-text-1", "div-horiz", "div-text-2"]
               },
               "distribution": "start",
               "alignment": "stretch"
@@ -1140,11 +1132,7 @@
           "component": {
             "List": {
               "children": {
-                "explicitList": [
-                  "list-item-1",
-                  "list-item-2",
-                  "list-item-3"
-                ]
+                "explicitList": ["list-item-1", "list-item-2", "list-item-3"]
               },
               "direction": "vertical",
               "alignment": "stretch"
diff --git a/tools/composer/src/data/theater/northstar-tour.json b/tools/composer/src/data/theater/northstar-tour.json
index 1f3a1e2a4..5f0447168 100644
--- a/tools/composer/src/data/theater/northstar-tour.json
+++ b/tools/composer/src/data/theater/northstar-tour.json
@@ -92,14 +92,14 @@
         {
           "id": "f1-info",
           "type": "Text",
-          "props": { "text": "UA 123 - 10:45 AM - $450" }
+          "props": {"text": "UA 123 - 10:45 AM - $450"}
         },
         {
           "id": "f1-select",
           "type": "Button",
           "props": {
             "label": "Select",
-            "onClick": { "actionId": "select_flight", "parameters": { "id": "UA123" } }
+            "onClick": {"actionId": "select_flight", "parameters": {"id": "UA123"}}
           }
         },
         {
@@ -113,14 +113,14 @@
         {
           "id": "f2-info",
           "type": "Text",
-          "props": { "text": "DL 456 - 01:20 PM - $520" }
+          "props": {"text": "DL 456 - 01:20 PM - $520"}
         },
         {
           "id": "f2-select",
           "type": "Button",
           "props": {
             "label": "Select",
-            "onClick": { "actionId": "select_flight", "parameters": { "id": "DL456" } }
+            "onClick": {"actionId": "select_flight", "parameters": {"id": "DL456"}}
           }
         }
       ]
@@ -132,7 +132,7 @@
       "surfaceId": "flight-selector",
       "sourceComponentId": "f1-select",
       "timestamp": "2026-03-15T15:00:00Z",
-      "context": { "id": "UA123" }
+      "context": {"id": "UA123"}
     }
   },
   {
@@ -150,7 +150,7 @@
         {
           "id": "selected-info",
           "type": "Text",
-          "props": { "text": "Confirmed for 10:45 AM departure. Now searching for restaurants..." }
+          "props": {"text": "Confirmed for 10:45 AM departure. Now searching for restaurants..."}
         }
       ]
     }
@@ -191,14 +191,14 @@
         {
           "id": "r1-text",
           "type": "Text",
-          "props": { "text": "Carbone - Italian - ★★★★★" }
+          "props": {"text": "Carbone - Italian - ★★★★★"}
         },
         {
           "id": "r1-book",
           "type": "Button",
           "props": {
             "label": "Book",
-            "onClick": { "actionId": "book_restaurant", "parameters": { "name": "Carbone" } }
+            "onClick": {"actionId": "book_restaurant", "parameters": {"name": "Carbone"}}
           }
         },
         {
@@ -212,14 +212,17 @@
         {
           "id": "r2-text",
           "type": "Text",
-          "props": { "text": "TWA Constellation - American - ★★★★☆" }
+          "props": {"text": "TWA Constellation - American - ★★★★☆"}
         },
         {
           "id": "r2-book",
           "type": "Button",
           "props": {
             "label": "Book",
-            "onClick": { "actionId": "book_restaurant", "parameters": { "name": "TWA Constellation" } }
+            "onClick": {
+              "actionId": "book_restaurant",
+              "parameters": {"name": "TWA Constellation"}
+            }
           }
         }
       ]
@@ -231,7 +234,7 @@
       "surfaceId": "restaurant-list",
       "sourceComponentId": "r1-book",
       "timestamp": "2026-03-15T15:05:00Z",
-      "context": { "name": "Carbone" }
+      "context": {"name": "Carbone"}
     }
   },
   {
@@ -254,19 +257,19 @@
         {
           "id": "b-title",
           "type": "Text",
-          "props": { "text": "Book at Carbone", "variant": "h3" }
+          "props": {"text": "Book at Carbone", "variant": "h3"}
         },
         {
           "id": "b-party",
           "type": "TextField",
-          "props": { "label": "Party Size", "value": "2" }
+          "props": {"label": "Party Size", "value": "2"}
         },
         {
           "id": "b-submit",
           "type": "Button",
           "props": {
             "label": "Confirm Booking",
-            "onClick": { "actionId": "submit_booking" }
+            "onClick": {"actionId": "submit_booking"}
           }
         }
       ]
@@ -286,7 +289,7 @@
       "surfaceId": "booking-form",
       "sourceComponentId": "b-submit",
       "timestamp": "2026-03-15T15:10:00Z",
-      "context": { "partySize": "4" }
+      "context": {"partySize": "4"}
     }
   },
   {
@@ -296,7 +299,10 @@
         {
           "id": "root",
           "type": "Text",
-          "props": { "text": "✅ All set! UA 123 booked and Carbone reserved for 4.", "color": "success" }
+          "props": {
+            "text": "✅ All set! UA 123 booked and Carbone reserved for 4.",
+            "color": "success"
+          }
         }
       ]
     }
diff --git a/tools/composer/src/data/theater/org-chart.json b/tools/composer/src/data/theater/org-chart.json
index bc3c7f5fe..97225e2dd 100644
--- a/tools/composer/src/data/theater/org-chart.json
+++ b/tools/composer/src/data/theater/org-chart.json
@@ -14,10 +14,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title",
-                  "org-chart"
-                ]
+                "explicitList": ["title", "org-chart"]
               }
             }
           }
@@ -115,4 +112,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/restaurant-booking.json b/tools/composer/src/data/theater/restaurant-booking.json
index 6d5f4b1bb..c03e43832 100644
--- a/tools/composer/src/data/theater/restaurant-booking.json
+++ b/tools/composer/src/data/theater/restaurant-booking.json
@@ -1506,4 +1506,4 @@
       "path": "/"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/restaurant-confirmation.json b/tools/composer/src/data/theater/restaurant-confirmation.json
index 0225e1e4f..a23d8f1d3 100644
--- a/tools/composer/src/data/theater/restaurant-confirmation.json
+++ b/tools/composer/src/data/theater/restaurant-confirmation.json
@@ -51,9 +51,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "loading_"
-                ]
+                "explicitList": ["loading_"]
               }
             }
           }
@@ -1127,4 +1125,4 @@
       "path": "/"
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/restaurant-finder.json b/tools/composer/src/data/theater/restaurant-finder.json
index ce06161fd..04745d82c 100644
--- a/tools/composer/src/data/theater/restaurant-finder.json
+++ b/tools/composer/src/data/theater/restaurant-finder.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "loading_title-heading",
-                  "loading_item-list"
-                ]
+                "explicitList": ["loading_title-heading", "loading_item-list"]
               }
             }
           }
@@ -58,10 +55,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "loading_item-list"
-                ]
+                "explicitList": ["title-heading", "loading_item-list"]
               }
             }
           }
@@ -113,10 +107,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -176,10 +167,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -217,10 +205,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "loading_template-image",
-                  "loading_card-details"
-                ]
+                "explicitList": ["loading_template-image", "loading_card-details"]
               }
             }
           }
@@ -252,10 +237,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -303,10 +285,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "loading_card-details"
-                ]
+                "explicitList": ["template-image", "loading_card-details"]
               }
             }
           }
@@ -338,10 +317,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -407,10 +383,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -442,10 +415,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -551,10 +521,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -586,10 +553,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -695,10 +659,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -730,10 +691,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -840,10 +798,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -875,10 +830,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -985,10 +937,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -1020,10 +969,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -1130,10 +1076,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -1165,10 +1108,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -1275,10 +1215,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -1310,10 +1247,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -1462,10 +1396,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "template-image",
-                  "card-details"
-                ]
+                "explicitList": ["template-image", "card-details"]
               }
             }
           }
@@ -1497,10 +1428,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "item-list"
-                ]
+                "explicitList": ["title-heading", "item-list"]
               }
             }
           }
@@ -3877,4 +3805,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/restaurant-grid.json b/tools/composer/src/data/theater/restaurant-grid.json
index 25cae4845..2a7c5c3aa 100644
--- a/tools/composer/src/data/theater/restaurant-grid.json
+++ b/tools/composer/src/data/theater/restaurant-grid.json
@@ -18,10 +18,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "title-heading",
-                  "restaurant-row-1"
-                ]
+                "explicitList": ["title-heading", "restaurant-row-1"]
               }
             }
           }
@@ -42,10 +39,7 @@
           "component": {
             "Row": {
               "children": {
-                "explicitList": [
-                  "item-card-1",
-                  "item-card-2"
-                ]
+                "explicitList": ["item-card-1", "item-card-2"]
               }
             }
           }
@@ -64,10 +58,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "template-image-1",
-                  "card-details-1"
-                ]
+                "explicitList": ["template-image-1", "card-details-1"]
               }
             }
           }
@@ -195,10 +186,7 @@
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "template-image-2",
-                  "card-details-2"
-                ]
+                "explicitList": ["template-image-2", "card-details-2"]
               }
             }
           }
@@ -390,4 +378,4 @@
       ]
     }
   }
-]
\ No newline at end of file
+]
diff --git a/tools/composer/src/data/theater/rizzcharts-chart.json b/tools/composer/src/data/theater/rizzcharts-chart.json
index c7e105461..047ddc296 100644
--- a/tools/composer/src/data/theater/rizzcharts-chart.json
+++ b/tools/composer/src/data/theater/rizzcharts-chart.json
@@ -12,16 +12,13 @@
   {
     "surfaceUpdate": {
       "surfaceId": "sales-dashboard",
-      "components": [        
+      "components": [
         {
           "id": "root-column",
           "component": {
             "Column": {
               "children": {
-                "explicitList": [
-                  "chart-title",
-                  "category-list"
-                ]
+                "explicitList": ["chart-title", "category-list"]
               }
             }
           }
@@ -65,10 +62,7 @@
             "Row": {
               "distribution": "spaceBetween",
               "children": {
-                "explicitList": [
-                  "item-label",
-                  "item-value"
-                ]
+                "explicitList": ["item-label", "item-value"]
               }
             }
           }
@@ -104,11 +98,11 @@
         "chart": {
           "title": "Sales by Category",
           "items": [
-            { "label": "Apparel", "value": 41 },
-            { "label": "Home Goods", "value": 15 },
-            { "label": "Electronics", "value": 28 },
-            { "label": "Health & Beauty", "value": 10 },
-            { "label": "Other", "value": 6 }
+            {"label": "Apparel", "value": 41},
+            {"label": "Home Goods", "value": 15},
+            {"label": "Electronics", "value": 28},
+            {"label": "Health & Beauty", "value": 10},
+            {"label": "Other", "value": 6}
           ]
         }
       }
diff --git a/tools/composer/src/lib/a2ui.tsx b/tools/composer/src/lib/a2ui.tsx
index c4d026a10..679d9cce2 100644
--- a/tools/composer/src/lib/a2ui.tsx
+++ b/tools/composer/src/lib/a2ui.tsx
@@ -25,12 +25,12 @@
  */
 'use client';
 
-import dynamic from "next/dynamic";
-import { A2UIViewer as BaseA2UIViewer } from "@a2ui/react";
-import { viewerTheme } from "./viewerTheme";
-import type { A2UIComponent, SpecVersion } from "@/types/widget";
+import dynamic from 'next/dynamic';
+import {A2UIViewer as BaseA2UIViewer} from '@a2ui/react';
+import {viewerTheme} from './viewerTheme';
+import type {A2UIComponent, SpecVersion} from '@/types/widget';
 
-const V09Viewer = dynamic(() => import("./v09Viewer").then(m => ({ default: m.V09Viewer })), {
+const V09Viewer = dynamic(() => import('./v09Viewer').then(m => ({default: m.V09Viewer})), {
   ssr: false,
 });
 
@@ -43,12 +43,12 @@ export interface A2UIViewerProps {
   className?: string;
 }
 
-export function A2UIViewer({ specVersion = '0.8', components, ...props }: A2UIViewerProps) {
+export function A2UIViewer({specVersion = '0.8', components, ...props}: A2UIViewerProps) {
   if (specVersion === '0.9') {
     return (
       <V09Viewer
         root={props.root}
-        components={components as Array<{ id: string; component: string; [key: string]: unknown }>}
+        components={components as Array<{id: string; component: string; [key: string]: unknown}>}
         data={props.data}
         onAction={props.onAction}
       />
@@ -59,7 +59,7 @@ export function A2UIViewer({ specVersion = '0.8', components, ...props }: A2UIVi
     <BaseA2UIViewer
       theme={viewerTheme}
       root={props.root}
-      components={components as Array<{ id: string; component: Record<string, unknown> }>}
+      components={components as Array<{id: string; component: Record<string, unknown>}>}
       data={props.data}
       onAction={props.onAction as any}
       className={props.className}
diff --git a/tools/composer/src/lib/components-data-v09.ts b/tools/composer/src/lib/components-data-v09.ts
index f89e02dbc..242661ca2 100644
--- a/tools/composer/src/lib/components-data-v09.ts
+++ b/tools/composer/src/lib/components-data-v09.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { A2UIComponent } from '@/types/widget';
+import type {A2UIComponent} from '@/types/widget';
 
 export interface ComponentProp {
   name: string;
@@ -49,7 +49,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
     components: [
       {
         name: 'Row',
-        description: 'Horizontal flex container that arranges children in a row with configurable alignment and justification.',
+        description:
+          'Horizontal flex container that arranges children in a row with configurable alignment and justification.',
         usage: `{
   "id": "row-1",
   "component": "Row",
@@ -74,7 +75,15 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
             name: 'justify',
             description: 'Horizontal distribution of children along the row.',
             type: 'enum',
-            values: ['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly', 'stretch'],
+            values: [
+              'start',
+              'center',
+              'end',
+              'spaceBetween',
+              'spaceAround',
+              'spaceEvenly',
+              'stretch',
+            ],
             default: 'start',
           },
         ],
@@ -111,7 +120,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
       },
       {
         name: 'Column',
-        description: 'Vertical flex container that arranges children in a column with configurable alignment and justification.',
+        description:
+          'Vertical flex container that arranges children in a column with configurable alignment and justification.',
         usage: `{
   "id": "column-1",
   "component": "Column",
@@ -136,7 +146,15 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
             name: 'justify',
             description: 'Vertical distribution of children along the column.',
             type: 'enum',
-            values: ['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly', 'stretch'],
+            values: [
+              'start',
+              'center',
+              'end',
+              'spaceBetween',
+              'spaceAround',
+              'spaceEvenly',
+              'stretch',
+            ],
             default: 'start',
           },
         ],
@@ -173,7 +191,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
       },
       {
         name: 'List',
-        description: 'Container for rendering lists of items, supporting both vertical and horizontal layouts.',
+        description:
+          'Container for rendering lists of items, supporting both vertical and horizontal layouts.',
         usage: `{
   "id": "list-1",
   "component": "List",
@@ -188,7 +207,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'children',
-            description: 'Child component IDs or template for list items. Use template with dataBinding to render items from data.',
+            description:
+              'Child component IDs or template for list items. Use template with dataBinding to render items from data.',
             type: 'string[] | template',
           },
           {
@@ -238,7 +258,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
       },
       {
         name: 'Card',
-        description: 'A styled container that provides card-like appearance with elevation and padding.',
+        description:
+          'A styled container that provides card-like appearance with elevation and padding.',
         usage: `{
   "id": "card-1",
   "component": "Card",
@@ -286,7 +307,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
     components: [
       {
         name: 'Text',
-        description: 'Display text content with semantic styling variants. Supports markdown rendering and data binding.',
+        description:
+          'Display text content with semantic styling variants. Supports markdown rendering and data binding.',
         usage: `{
   "id": "text-1",
   "component": "Text",
@@ -296,12 +318,14 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'text',
-            description: 'The text content to display. Can be a plain string or a path binding to data.',
+            description:
+              'The text content to display. Can be a plain string or a path binding to data.',
             type: 'string | { path: string }',
           },
           {
             name: 'variant',
-            description: 'Semantic variant for text styling. Determines font size, weight, and other typographic properties.',
+            description:
+              'Semantic variant for text styling. Determines font size, weight, and other typographic properties.',
             type: 'enum',
             values: ['h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body'],
           },
@@ -392,7 +416,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
       },
       {
         name: 'Icon',
-        description: 'Display Material Icons by name. Icons are rendered using the Google Icon font.',
+        description:
+          'Display Material Icons by name. Icons are rendered using the Google Icon font.',
         usage: `{
   "id": "icon-1",
   "component": "Icon",
@@ -401,7 +426,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'name',
-            description: 'The Material Icon name (e.g., "check_circle", "home", "settings"). Uses snake_case naming.',
+            description:
+              'The Material Icon name (e.g., "check_circle", "home", "settings"). Uses snake_case naming.',
             type: 'string | { path: string }',
           },
         ],
@@ -524,7 +550,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'value',
-            description: 'The current input value. Typically bound to a data path for two-way binding.',
+            description:
+              'The current input value. Typically bound to a data path for two-way binding.',
             type: 'string | { path: string }',
           },
           {
@@ -551,12 +578,12 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
             {
               id: 'textfield-1',
               component: 'TextField',
-              value: { path: '/name' },
+              value: {path: '/name'},
               label: 'Enter your name',
               variant: 'shortText',
             } as A2UIComponent,
           ],
-          data: { name: '' },
+          data: {name: ''},
         },
       },
       {
@@ -587,10 +614,10 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
               id: 'checkbox-1',
               component: 'CheckBox',
               label: 'I agree to the terms and conditions',
-              value: { path: '/agreed' },
+              value: {path: '/agreed'},
             } as A2UIComponent,
           ],
-          data: { agreed: false },
+          data: {agreed: false},
         },
       },
       {
@@ -606,7 +633,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'value',
-            description: 'The current slider value. Typically bound to a data path for two-way binding.',
+            description:
+              'The current slider value. Typically bound to a data path for two-way binding.',
             type: 'number | { path: string }',
           },
           {
@@ -632,12 +660,12 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
             {
               id: 'slider-1',
               component: 'Slider',
-              value: { path: '/volume' },
+              value: {path: '/volume'},
               min: 0,
               max: 100,
             } as A2UIComponent,
           ],
-          data: { volume: 50 },
+          data: {volume: 50},
         },
       },
       {
@@ -654,7 +682,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'value',
-            description: 'The current date/time value in ISO format. Typically bound to a data path.',
+            description:
+              'The current date/time value in ISO format. Typically bound to a data path.',
             type: 'string | { path: string }',
           },
           {
@@ -696,17 +725,18 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
             {
               id: 'datetime-1',
               component: 'DateTimeInput',
-              value: { path: '/date' },
+              value: {path: '/date'},
               enableDate: true,
               enableTime: false,
             } as A2UIComponent,
           ],
-          data: { date: '2025-01-15' },
+          data: {date: '2025-01-15'},
         },
       },
       {
         name: 'ChoicePicker',
-        description: 'Selection input for choosing from predefined options. Supports single and multiple selection via radio buttons or checkboxes.',
+        description:
+          'Selection input for choosing from predefined options. Supports single and multiple selection via radio buttons or checkboxes.',
         usage: `{
   "id": "choice-1",
   "component": "ChoicePicker",
@@ -764,7 +794,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
     components: [
       {
         name: 'Button',
-        description: 'Interactive button that triggers an action when clicked. Contains a child component for its content.',
+        description:
+          'Interactive button that triggers an action when clicked. Contains a child component for its content.',
         usage: `{
   "id": "button-1",
   "component": "Button",
@@ -782,7 +813,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'child',
-            description: 'Component ID to render as the button content (typically a Text or Row with Icon + Text).',
+            description:
+              'Component ID to render as the button content (typically a Text or Row with Icon + Text).',
             type: 'string',
           },
           {
@@ -793,7 +825,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
           },
           {
             name: 'action',
-            description: 'Action configuration dispatched when the button is clicked. Contains an event object with name and optional context.',
+            description:
+              'Action configuration dispatched when the button is clicked. Contains an event object with name and optional context.',
             type: 'Action',
           },
         ],
@@ -812,7 +845,7 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
               component: 'Button',
               child: 'button-label-1',
               variant: 'primary',
-              action: { event: { name: 'primary-action' } },
+              action: {event: {name: 'primary-action'}},
             } as A2UIComponent,
             {
               id: 'button-label-1',
@@ -825,7 +858,7 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
               component: 'Button',
               child: 'button-label-2',
               variant: 'borderless',
-              action: { event: { name: 'secondary-action' } },
+              action: {event: {name: 'secondary-action'}},
             } as A2UIComponent,
             {
               id: 'button-label-2',
@@ -849,7 +882,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
       },
       {
         name: 'Tabs',
-        description: 'Tab navigation component with multiple panels. Each tab has a title and associated content.',
+        description:
+          'Tab navigation component with multiple panels. Each tab has a title and associated content.',
         usage: `{
   "id": "tabs-1",
   "component": "Tabs",
@@ -862,7 +896,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'tabs',
-            description: 'Array of tab configurations, each with a title string and child component ID.',
+            description:
+              'Array of tab configurations, each with a title string and child component ID.',
             type: 'array',
           },
         ],
@@ -873,9 +908,9 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
               id: 'tabs-1',
               component: 'Tabs',
               tabs: [
-                { title: 'Overview', child: 'tab-1' },
-                { title: 'Details', child: 'tab-2' },
-                { title: 'Reviews', child: 'tab-3' },
+                {title: 'Overview', child: 'tab-1'},
+                {title: 'Details', child: 'tab-2'},
+                {title: 'Reviews', child: 'tab-3'},
               ],
             } as A2UIComponent,
             {
@@ -911,7 +946,8 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
         props: [
           {
             name: 'trigger',
-            description: 'Component ID of the element that triggers the modal (typically a Button).',
+            description:
+              'Component ID of the element that triggers the modal (typically a Button).',
             type: 'string',
           },
           {
@@ -934,7 +970,7 @@ export const COMPONENTS_DATA_V09: ComponentCategory[] = [
               component: 'Button',
               child: 'modal-trigger-text',
               variant: 'primary',
-              action: { event: { name: 'open-modal' } },
+              action: {event: {name: 'open-modal'}},
             } as A2UIComponent,
             {
               id: 'modal-trigger-text',
diff --git a/tools/composer/src/lib/components-data.ts b/tools/composer/src/lib/components-data.ts
index b1d9aa565..03c6834ec 100644
--- a/tools/composer/src/lib/components-data.ts
+++ b/tools/composer/src/lib/components-data.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { A2UIComponent } from '@/types/widget';
+import type {A2UIComponent} from '@/types/widget';
 
 export interface ComponentProp {
   name: string;
@@ -49,7 +49,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
     components: [
       {
         name: 'Row',
-        description: 'Horizontal flex container that arranges children in a row with configurable alignment and distribution.',
+        description:
+          'Horizontal flex container that arranges children in a row with configurable alignment and distribution.',
         usage: `{
   "id": "row-1",
   "component": {
@@ -65,7 +66,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'children',
-            description: 'Child components to render inside the row. Can be an explicit list of component IDs or a template for dynamic rendering.',
+            description:
+              'Child components to render inside the row. Can be an explicit list of component IDs or a template for dynamic rendering.',
             type: 'ComponentArrayReference',
           },
           {
@@ -92,28 +94,29 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
                 Row: {
                   alignment: 'center',
                   distribution: 'spaceBetween',
-                  children: { explicitList: ['text-1', 'text-2', 'text-3'] },
+                  children: {explicitList: ['text-1', 'text-2', 'text-3']},
                 },
               },
             },
             {
               id: 'text-1',
-              component: { Text: { text: { literalString: 'Left' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Left'}, usageHint: 'body'}},
             },
             {
               id: 'text-2',
-              component: { Text: { text: { literalString: 'Center' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Center'}, usageHint: 'body'}},
             },
             {
               id: 'text-3',
-              component: { Text: { text: { literalString: 'Right' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Right'}, usageHint: 'body'}},
             },
           ],
         },
       },
       {
         name: 'Column',
-        description: 'Vertical flex container that arranges children in a column with configurable alignment and distribution.',
+        description:
+          'Vertical flex container that arranges children in a column with configurable alignment and distribution.',
         usage: `{
   "id": "column-1",
   "component": {
@@ -129,7 +132,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'children',
-            description: 'Child components to render inside the column. Can be an explicit list of component IDs or a template for dynamic rendering.',
+            description:
+              'Child components to render inside the column. Can be an explicit list of component IDs or a template for dynamic rendering.',
             type: 'ComponentArrayReference',
           },
           {
@@ -156,28 +160,31 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
                 Column: {
                   alignment: 'center',
                   distribution: 'start',
-                  children: { explicitList: ['text-1', 'text-2', 'text-3'] },
+                  children: {explicitList: ['text-1', 'text-2', 'text-3']},
                 },
               },
             },
             {
               id: 'text-1',
-              component: { Text: { text: { literalString: 'Header' }, usageHint: 'h3' } },
+              component: {Text: {text: {literalString: 'Header'}, usageHint: 'h3'}},
             },
             {
               id: 'text-2',
-              component: { Text: { text: { literalString: 'Content goes here' }, usageHint: 'body' } },
+              component: {
+                Text: {text: {literalString: 'Content goes here'}, usageHint: 'body'},
+              },
             },
             {
               id: 'text-3',
-              component: { Text: { text: { literalString: 'Footer' }, usageHint: 'caption' } },
+              component: {Text: {text: {literalString: 'Footer'}, usageHint: 'caption'}},
             },
           ],
         },
       },
       {
         name: 'List',
-        description: 'Container for rendering lists of items, supporting both vertical and horizontal layouts.',
+        description:
+          'Container for rendering lists of items, supporting both vertical and horizontal layouts.',
         usage: `{
   "id": "list-1",
   "component": {
@@ -195,7 +202,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'children',
-            description: 'Child components or template for list items. Use template with dataBinding to render items from data.',
+            description:
+              'Child components or template for list items. Use template with dataBinding to render items from data.',
             type: 'ComponentArrayReference',
           },
           {
@@ -214,28 +222,29 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               component: {
                 List: {
                   direction: 'vertical',
-                  children: { explicitList: ['item-1', 'item-2', 'item-3'] },
+                  children: {explicitList: ['item-1', 'item-2', 'item-3']},
                 },
               },
             },
             {
               id: 'item-1',
-              component: { Text: { text: { literalString: '• First item' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: '• First item'}, usageHint: 'body'}},
             },
             {
               id: 'item-2',
-              component: { Text: { text: { literalString: '• Second item' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: '• Second item'}, usageHint: 'body'}},
             },
             {
               id: 'item-3',
-              component: { Text: { text: { literalString: '• Third item' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: '• Third item'}, usageHint: 'body'}},
             },
           ],
         },
       },
       {
         name: 'Card',
-        description: 'A styled container that provides card-like appearance with elevation and padding.',
+        description:
+          'A styled container that provides card-like appearance with elevation and padding.',
         usage: `{
   "id": "card-1",
   "component": {
@@ -266,17 +275,22 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'card-content',
               component: {
                 Column: {
-                  children: { explicitList: ['card-title', 'card-body'] },
+                  children: {explicitList: ['card-title', 'card-body']},
                 },
               },
             },
             {
               id: 'card-title',
-              component: { Text: { text: { literalString: 'Card Title' }, usageHint: 'h4' } },
+              component: {Text: {text: {literalString: 'Card Title'}, usageHint: 'h4'}},
             },
             {
               id: 'card-body',
-              component: { Text: { text: { literalString: 'This is the card content with some descriptive text.' }, usageHint: 'body' } },
+              component: {
+                Text: {
+                  text: {literalString: 'This is the card content with some descriptive text.'},
+                  usageHint: 'body',
+                },
+              },
             },
           ],
         },
@@ -288,7 +302,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
     components: [
       {
         name: 'Text',
-        description: 'Display text content with semantic styling hints. Supports markdown rendering and data binding.',
+        description:
+          'Display text content with semantic styling hints. Supports markdown rendering and data binding.',
         usage: `{
   "id": "text-1",
   "component": {
@@ -301,12 +316,14 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'text',
-            description: 'The text content to display. Can be a literal string or a path binding to data.',
+            description:
+              'The text content to display. Can be a literal string or a path binding to data.',
             type: 'StringValue',
           },
           {
             name: 'usageHint',
-            description: 'Semantic hint for text styling. Determines font size, weight, and other typographic properties.',
+            description:
+              'Semantic hint for text styling. Determines font size, weight, and other typographic properties.',
             type: 'enum',
             values: ['h1', 'h2', 'h3', 'h4', 'h5', 'caption', 'body'],
           },
@@ -318,29 +335,41 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'text-container',
               component: {
                 Column: {
-                  children: { explicitList: ['text-h1', 'text-h2', 'text-h3', 'text-body', 'text-caption'] },
+                  children: {
+                    explicitList: ['text-h1', 'text-h2', 'text-h3', 'text-body', 'text-caption'],
+                  },
                 },
               },
             },
             {
               id: 'text-h1',
-              component: { Text: { text: { literalString: 'Heading 1' }, usageHint: 'h1' } },
+              component: {Text: {text: {literalString: 'Heading 1'}, usageHint: 'h1'}},
             },
             {
               id: 'text-h2',
-              component: { Text: { text: { literalString: 'Heading 2' }, usageHint: 'h2' } },
+              component: {Text: {text: {literalString: 'Heading 2'}, usageHint: 'h2'}},
             },
             {
               id: 'text-h3',
-              component: { Text: { text: { literalString: 'Heading 3' }, usageHint: 'h3' } },
+              component: {Text: {text: {literalString: 'Heading 3'}, usageHint: 'h3'}},
             },
             {
               id: 'text-body',
-              component: { Text: { text: { literalString: 'Body text for paragraphs and content.' }, usageHint: 'body' } },
+              component: {
+                Text: {
+                  text: {literalString: 'Body text for paragraphs and content.'},
+                  usageHint: 'body',
+                },
+              },
             },
             {
               id: 'text-caption',
-              component: { Text: { text: { literalString: 'Caption text for labels and hints' }, usageHint: 'caption' } },
+              component: {
+                Text: {
+                  text: {literalString: 'Caption text for labels and hints'},
+                  usageHint: 'caption',
+                },
+              },
             },
           ],
         },
@@ -385,7 +414,7 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'image-1',
               component: {
                 Image: {
-                  url: { literalString: 'https://picsum.photos/200/150' },
+                  url: {literalString: 'https://picsum.photos/200/150'},
                   usageHint: 'mediumFeature',
                   fit: 'cover',
                 },
@@ -396,7 +425,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
       },
       {
         name: 'Icon',
-        description: 'Display Material Icons by name. Icons are rendered using the Google Icon font.',
+        description:
+          'Display Material Icons by name. Icons are rendered using the Google Icon font.',
         usage: `{
   "id": "icon-1",
   "component": {
@@ -408,7 +438,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'name',
-            description: 'The Material Icon name (e.g., "check_circle", "home", "settings"). Uses snake_case naming.',
+            description:
+              'The Material Icon name (e.g., "check_circle", "home", "settings"). Uses snake_case naming.',
             type: 'StringValue',
           },
         ],
@@ -421,29 +452,29 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
                 Row: {
                   distribution: 'start',
                   alignment: 'center',
-                  children: { explicitList: ['icon-1', 'icon-2', 'icon-3', 'icon-4', 'icon-5'] },
+                  children: {explicitList: ['icon-1', 'icon-2', 'icon-3', 'icon-4', 'icon-5']},
                 },
               },
             },
             {
               id: 'icon-1',
-              component: { Icon: { name: { literalString: 'home' } } },
+              component: {Icon: {name: {literalString: 'home'}}},
             },
             {
               id: 'icon-2',
-              component: { Icon: { name: { literalString: 'settings' } } },
+              component: {Icon: {name: {literalString: 'settings'}}},
             },
             {
               id: 'icon-3',
-              component: { Icon: { name: { literalString: 'check_circle' } } },
+              component: {Icon: {name: {literalString: 'check_circle'}}},
             },
             {
               id: 'icon-4',
-              component: { Icon: { name: { literalString: 'favorite' } } },
+              component: {Icon: {name: {literalString: 'favorite'}}},
             },
             {
               id: 'icon-5',
-              component: { Icon: { name: { literalString: 'star' } } },
+              component: {Icon: {name: {literalString: 'star'}}},
             },
           ],
         },
@@ -473,7 +504,7 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'video-1',
               component: {
                 Video: {
-                  url: { literalString: 'https://www.w3schools.com/html/mov_bbb.mp4' },
+                  url: {literalString: 'https://www.w3schools.com/html/mov_bbb.mp4'},
                 },
               },
             },
@@ -519,7 +550,7 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'audio-1',
               component: {
                 AudioPlayer: {
-                  url: { literalString: 'https://www.w3schools.com/html/horse.mp3' },
+                  url: {literalString: 'https://www.w3schools.com/html/horse.mp3'},
                 },
               },
             },
@@ -547,7 +578,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'text',
-            description: 'The current input value. Typically bound to a data path for two-way binding.',
+            description:
+              'The current input value. Typically bound to a data path for two-way binding.',
             type: 'StringValue',
           },
           {
@@ -574,14 +606,14 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'textfield-1',
               component: {
                 TextField: {
-                  text: { path: '/name' },
-                  label: { literalString: 'Enter your name' },
+                  text: {path: '/name'},
+                  label: {literalString: 'Enter your name'},
                   type: 'shortText',
                 },
               },
             },
           ],
-          data: { name: '' },
+          data: {name: ''},
         },
       },
       {
@@ -615,13 +647,13 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'checkbox-1',
               component: {
                 CheckBox: {
-                  label: { literalString: 'I agree to the terms and conditions' },
-                  value: { path: '/agreed' },
+                  label: {literalString: 'I agree to the terms and conditions'},
+                  value: {path: '/agreed'},
                 },
               },
             },
           ],
-          data: { agreed: false },
+          data: {agreed: false},
         },
       },
       {
@@ -640,7 +672,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'value',
-            description: 'The current slider value. Typically bound to a data path for two-way binding.',
+            description:
+              'The current slider value. Typically bound to a data path for two-way binding.',
             type: 'NumberValue',
           },
           {
@@ -661,14 +694,14 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'slider-1',
               component: {
                 Slider: {
-                  value: { path: '/volume' },
+                  value: {path: '/volume'},
                   minValue: 0,
                   maxValue: 100,
                 },
               },
             },
           ],
-          data: { volume: 50 },
+          data: {volume: 50},
         },
       },
       {
@@ -688,7 +721,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'value',
-            description: 'The current date/time value in ISO format. Typically bound to a data path.',
+            description:
+              'The current date/time value in ISO format. Typically bound to a data path.',
             type: 'StringValue',
           },
           {
@@ -716,14 +750,14 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'datetime-1',
               component: {
                 DateTimeInput: {
-                  value: { path: '/date' },
+                  value: {path: '/date'},
                   enableDate: true,
                   enableTime: false,
                 },
               },
             },
           ],
-          data: { date: '2025-01-15' },
+          data: {date: '2025-01-15'},
         },
       },
       {
@@ -767,18 +801,18 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'select-1',
               component: {
                 MultipleChoice: {
-                  selections: { path: '/country' },
+                  selections: {path: '/country'},
                   options: [
-                    { label: { literalString: 'United States' }, value: 'US' },
-                    { label: { literalString: 'Canada' }, value: 'CA' },
-                    { label: { literalString: 'Mexico' }, value: 'MX' },
+                    {label: {literalString: 'United States'}, value: 'US'},
+                    {label: {literalString: 'Canada'}, value: 'CA'},
+                    {label: {literalString: 'Mexico'}, value: 'MX'},
                   ],
                   maxAllowedSelections: 1,
                 },
               },
             },
           ],
-          data: { country: ['US'] },
+          data: {country: ['US']},
         },
       },
     ],
@@ -788,7 +822,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
     components: [
       {
         name: 'Button',
-        description: 'Interactive button that triggers an action when clicked. Contains a child component for its content.',
+        description:
+          'Interactive button that triggers an action when clicked. Contains a child component for its content.',
         usage: `{
   "id": "button-1",
   "component": {
@@ -806,7 +841,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'child',
-            description: 'Component ID to render as the button content (typically a Text or Row with Icon + Text).',
+            description:
+              'Component ID to render as the button content (typically a Text or Row with Icon + Text).',
             type: 'string',
           },
           {
@@ -824,7 +860,7 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
                 Row: {
                   distribution: 'start',
                   alignment: 'center',
-                  children: { explicitList: ['button-1', 'button-2'] },
+                  children: {explicitList: ['button-1', 'button-2']},
                 },
               },
             },
@@ -833,20 +869,20 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               component: {
                 Button: {
                   child: 'button-label-1',
-                  action: { name: 'primary-action' },
+                  action: {name: 'primary-action'},
                 },
               },
             },
             {
               id: 'button-label-1',
-              component: { Text: { text: { literalString: 'Submit' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Submit'}, usageHint: 'body'}},
             },
             {
               id: 'button-2',
               component: {
                 Button: {
                   child: 'button-label-2',
-                  action: { name: 'secondary-action' },
+                  action: {name: 'secondary-action'},
                 },
               },
             },
@@ -855,24 +891,25 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               component: {
                 Row: {
                   alignment: 'center',
-                  children: { explicitList: ['btn-icon', 'btn-text'] },
+                  children: {explicitList: ['btn-icon', 'btn-text']},
                 },
               },
             },
             {
               id: 'btn-icon',
-              component: { Icon: { name: { literalString: 'add' } } },
+              component: {Icon: {name: {literalString: 'add'}}},
             },
             {
               id: 'btn-text',
-              component: { Text: { text: { literalString: 'Add Item' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Add Item'}, usageHint: 'body'}},
             },
           ],
         },
       },
       {
         name: 'Tabs',
-        description: 'Tab navigation component with multiple panels. Each tab has a title and associated content.',
+        description:
+          'Tab navigation component with multiple panels. Each tab has a title and associated content.',
         usage: `{
   "id": "tabs-1",
   "component": {
@@ -900,24 +937,33 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               component: {
                 Tabs: {
                   tabItems: [
-                    { title: { literalString: 'Overview' }, child: 'tab-1' },
-                    { title: { literalString: 'Details' }, child: 'tab-2' },
-                    { title: { literalString: 'Reviews' }, child: 'tab-3' },
+                    {title: {literalString: 'Overview'}, child: 'tab-1'},
+                    {title: {literalString: 'Details'}, child: 'tab-2'},
+                    {title: {literalString: 'Reviews'}, child: 'tab-3'},
                   ],
                 },
               },
             },
             {
               id: 'tab-1',
-              component: { Text: { text: { literalString: 'This is the overview content.' }, usageHint: 'body' } },
+              component: {
+                Text: {
+                  text: {literalString: 'This is the overview content.'},
+                  usageHint: 'body',
+                },
+              },
             },
             {
               id: 'tab-2',
-              component: { Text: { text: { literalString: 'Here are the details.' }, usageHint: 'body' } },
+              component: {
+                Text: {text: {literalString: 'Here are the details.'}, usageHint: 'body'},
+              },
             },
             {
               id: 'tab-3',
-              component: { Text: { text: { literalString: 'User reviews go here.' }, usageHint: 'body' } },
+              component: {
+                Text: {text: {literalString: 'User reviews go here.'}, usageHint: 'body'},
+              },
             },
           ],
         },
@@ -937,7 +983,8 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
         props: [
           {
             name: 'entryPointChild',
-            description: 'Component ID of the element that triggers the modal (typically a Button).',
+            description:
+              'Component ID of the element that triggers the modal (typically a Button).',
             type: 'string',
           },
           {
@@ -963,29 +1010,36 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               component: {
                 Button: {
                   child: 'modal-trigger-text',
-                  action: { name: 'open-modal' },
+                  action: {name: 'open-modal'},
                 },
               },
             },
             {
               id: 'modal-trigger-text',
-              component: { Text: { text: { literalString: 'Open Modal' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Open Modal'}, usageHint: 'body'}},
             },
             {
               id: 'modal-content',
               component: {
                 Column: {
-                  children: { explicitList: ['modal-title', 'modal-body'] },
+                  children: {explicitList: ['modal-title', 'modal-body']},
                 },
               },
             },
             {
               id: 'modal-title',
-              component: { Text: { text: { literalString: 'Modal Title' }, usageHint: 'h3' } },
+              component: {Text: {text: {literalString: 'Modal Title'}, usageHint: 'h3'}},
             },
             {
               id: 'modal-body',
-              component: { Text: { text: { literalString: 'This is the modal content. Click outside or the X to close.' }, usageHint: 'body' } },
+              component: {
+                Text: {
+                  text: {
+                    literalString: 'This is the modal content. Click outside or the X to close.',
+                  },
+                  usageHint: 'body',
+                },
+              },
             },
           ],
         },
@@ -1032,13 +1086,13 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
               id: 'divider-demo',
               component: {
                 Column: {
-                  children: { explicitList: ['text-above', 'divider-1', 'text-below'] },
+                  children: {explicitList: ['text-above', 'divider-1', 'text-below']},
                 },
               },
             },
             {
               id: 'text-above',
-              component: { Text: { text: { literalString: 'Content above' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Content above'}, usageHint: 'body'}},
             },
             {
               id: 'divider-1',
@@ -1051,7 +1105,7 @@ export const COMPONENTS_DATA: ComponentCategory[] = [
             },
             {
               id: 'text-below',
-              component: { Text: { text: { literalString: 'Content below' }, usageHint: 'body' } },
+              component: {Text: {text: {literalString: 'Content below'}, usageHint: 'body'}},
             },
           ],
         },
diff --git a/tools/composer/src/lib/json-parser.test.ts b/tools/composer/src/lib/json-parser.test.ts
index 150492bfb..24908d5d4 100644
--- a/tools/composer/src/lib/json-parser.test.ts
+++ b/tools/composer/src/lib/json-parser.test.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { describe, it, expect } from 'vitest';
-import { parseRobustJSON, parseRobustJSONSafe } from './json-parser';
+import {describe, it, expect} from 'vitest';
+import {parseRobustJSON, parseRobustJSONSafe} from './json-parser';
 
 describe('parseRobustJSON', () => {
   it('should parse valid JSON', () => {
@@ -28,31 +28,31 @@ describe('parseRobustJSON', () => {
   });
 
   it('should handle non-string input by returning it as-is', () => {
-    const input = { foo: 'bar' };
+    const input = {foo: 'bar'};
     expect(parseRobustJSON(input)).toEqual(input);
   });
 
   it('should parse JSON wrapped in double quotes with unescaped internal quotes', () => {
     // This simulates AI sending: "{ "foo": "bar" }"
     const input = '"{"foo": "bar"}"';
-    expect(parseRobustJSON(input)).toEqual({ foo: 'bar' });
+    expect(parseRobustJSON(input)).toEqual({foo: 'bar'});
   });
 
   it('should parse JSON wrapped in single quotes', () => {
-    const input = "'{\"foo\": \"bar\"}'";
-    expect(parseRobustJSON(input)).toEqual({ foo: 'bar' });
+    const input = '\'{"foo": "bar"}\'';
+    expect(parseRobustJSON(input)).toEqual({foo: 'bar'});
   });
 
   it('should handle escaped quotes in a quoted string', () => {
     const input = '"{\\"foo\\": \\"bar\\"}"';
-    expect(parseRobustJSON(input)).toEqual({ foo: 'bar' });
+    expect(parseRobustJSON(input)).toEqual({foo: 'bar'});
   });
 
   it('should handle double-escaped sequences', () => {
     // This is a bit tricky to represent in a JS string literal
     // We want to simulate a string that when trimmed is: "{\"foo\": \"bar\"}"
     const input = '"{\\\\"foo\\\\": \\\\"bar\\\\"}"';
-    expect(parseRobustJSON(input)).toEqual({ foo: 'bar' });
+    expect(parseRobustJSON(input)).toEqual({foo: 'bar'});
   });
 
   it('should throw an error for completely invalid JSON', () => {
@@ -68,11 +68,11 @@ describe('parseRobustJSON', () => {
 
 describe('parseRobustJSONSafe', () => {
   it('should return parsed JSON for valid input', () => {
-    expect(parseRobustJSONSafe('{"a": 1}', {})).toEqual({ a: 1 });
+    expect(parseRobustJSONSafe('{"a": 1}', {})).toEqual({a: 1});
   });
 
   it('should return default value for invalid input', () => {
-    expect(parseRobustJSONSafe('invalid', { default: true })).toEqual({
+    expect(parseRobustJSONSafe('invalid', {default: true})).toEqual({
       default: true,
     });
   });
diff --git a/tools/composer/src/lib/json-parser.ts b/tools/composer/src/lib/json-parser.ts
index d82ae93bf..ecb4db1c0 100644
--- a/tools/composer/src/lib/json-parser.ts
+++ b/tools/composer/src/lib/json-parser.ts
@@ -45,7 +45,7 @@
  */
 export function parseRobustJSON(input: string | unknown): unknown {
   // If already an object (shouldn't happen but be defensive)
-  if (typeof input !== "string") {
+  if (typeof input !== 'string') {
     return input;
   }
 
@@ -57,8 +57,8 @@ export function parseRobustJSON(input: string | unknown): unknown {
     const result = JSON.parse(trimmed);
     // If the result is a string that looks like JSON, try parsing it again
     if (
-      typeof result === "string" &&
-      (result.trim().startsWith("{") || result.trim().startsWith("["))
+      typeof result === 'string' &&
+      (result.trim().startsWith('{') || result.trim().startsWith('['))
     ) {
       try {
         return parseRobustJSON(result);
@@ -85,7 +85,7 @@ export function parseRobustJSON(input: string | unknown): unknown {
         try {
           const unescaped = trimmed
             .slice(1, -1)
-            .replace(/\\\\/g, "\\")
+            .replace(/\\\\/g, '\\')
             .replace(/\\"/g, '"')
             .replace(/\\'/g, "'");
           return JSON.parse(unescaped);
@@ -96,7 +96,7 @@ export function parseRobustJSON(input: string | unknown): unknown {
     }
 
     // Strategy 4: Try parsing if it looks like JSON but without outer quotes
-    if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
       try {
         return JSON.parse(trimmed);
       } catch {
diff --git a/tools/composer/src/lib/storage.test.ts b/tools/composer/src/lib/storage.test.ts
index 3a986c5ab..28f5aac88 100644
--- a/tools/composer/src/lib/storage.test.ts
+++ b/tools/composer/src/lib/storage.test.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {describe, it, expect, vi, beforeEach} from 'vitest';
 import localforage from 'localforage';
-import { getWidgets, saveWidget, deleteWidget } from './storage';
-import { Widget } from '@/types/widget';
+import {getWidgets, saveWidget, deleteWidget} from './storage';
+import {Widget} from '@/types/widget';
 
 vi.mock('localforage', () => ({
   default: {
@@ -65,12 +65,12 @@ describe('storage', () => {
     });
 
     it('should update existing widget', async () => {
-      const existingWidget = { ...mockWidget, name: 'Old Name' };
+      const existingWidget = {...mockWidget, name: 'Old Name'};
       vi.mocked(localforage.getItem).mockResolvedValue([existingWidget]);
-      
-      const updatedWidget = { ...mockWidget, name: 'New Name' };
+
+      const updatedWidget = {...mockWidget, name: 'New Name'};
       await saveWidget(updatedWidget);
-      
+
       expect(localforage.setItem).toHaveBeenCalledWith('widgets', [updatedWidget]);
     });
   });
diff --git a/tools/composer/src/lib/storage.ts b/tools/composer/src/lib/storage.ts
index c7391b883..236722ead 100644
--- a/tools/composer/src/lib/storage.ts
+++ b/tools/composer/src/lib/storage.ts
@@ -15,7 +15,7 @@
  */
 
 import localforage from 'localforage';
-import { Widget } from '@/types/widget';
+import {Widget} from '@/types/widget';
 
 const WIDGETS_KEY = 'widgets';
 
@@ -42,5 +42,8 @@ export async function saveWidget(widget: Widget): Promise<void> {
 
 export async function deleteWidget(id: string): Promise<void> {
   const widgets = await getWidgets();
-  await localforage.setItem(WIDGETS_KEY, widgets.filter(w => w.id !== id));
+  await localforage.setItem(
+    WIDGETS_KEY,
+    widgets.filter(w => w.id !== id),
+  );
 }
diff --git a/tools/composer/src/lib/transcoder.ts b/tools/composer/src/lib/transcoder.ts
index 449e521a3..7dc6a23e2 100644
--- a/tools/composer/src/lib/transcoder.ts
+++ b/tools/composer/src/lib/transcoder.ts
@@ -16,7 +16,7 @@
 
 /**
  * Transpile A2UI messages to v0.8 format that the React renderer understands.
- * 
+ *
  * v0.8 messages (beginRendering, surfaceUpdate, dataModelUpdate) pass through as-is.
  * v0.9 messages (createSurface, updateComponents, updateDataModel) get converted.
  */
@@ -26,9 +26,9 @@ export function transpileToV0_8(msg: any): any {
     return {
       beginRendering: {
         surfaceId: msg.createSurface.surfaceId,
-        root: msg.createSurface.root || "root",
-        styles: msg.createSurface.styles || {}
-      }
+        root: msg.createSurface.root || 'root',
+        styles: msg.createSurface.styles || {},
+      },
     };
   }
   if (msg.updateComponents) {
@@ -42,21 +42,21 @@ export function transpileToV0_8(msg: any): any {
         // v0.9 format: convert type/props to v0.8 component map
         const props = comp.props || {};
         const v08Props: Record<string, any> = {};
-        
+
         for (const [key, value] of Object.entries(props)) {
           if (key === 'children' && Array.isArray(value)) {
             // v0.9 children: ["id1", "id2"] -> v0.8 children: { explicitList: ["id1", "id2"] }
-            v08Props.children = { explicitList: value };
+            v08Props.children = {explicitList: value};
           } else if (key === 'variant') {
             // v0.9 variant -> v0.8 usageHint
             v08Props.usageHint = value;
           } else if (key === 'text' && typeof value === 'string') {
             // v0.9 text: "Hello" -> v0.8 text: { stringValue: "Hello" }
-            v08Props.text = { stringValue: value };
+            v08Props.text = {stringValue: value};
           } else if (key === 'url' && typeof value === 'string') {
-            v08Props.url = { stringValue: value };
+            v08Props.url = {stringValue: value};
           } else if (key === 'label' && typeof value === 'string') {
-            v08Props.label = { stringValue: value };
+            v08Props.label = {stringValue: value};
           } else if (key === 'child' && typeof value === 'string') {
             // Single child ref
             v08Props.child = value;
@@ -64,20 +64,20 @@ export function transpileToV0_8(msg: any): any {
             v08Props[key] = value;
           }
         }
-        
+
         return {
           id: comp.id,
-          component: { [comp.type]: v08Props }
+          component: {[comp.type]: v08Props},
         };
       }
       return comp;
     });
-    
+
     return {
       surfaceUpdate: {
         surfaceId: msg.updateComponents.surfaceId,
-        components
-      }
+        components,
+      },
     };
   }
   if (msg.updateDataModel) {
@@ -85,18 +85,18 @@ export function transpileToV0_8(msg: any): any {
       dataModelUpdate: {
         surfaceId: msg.updateDataModel.surfaceId,
         path: msg.updateDataModel.path || '/',
-        contents: msg.updateDataModel.contents
-      }
+        contents: msg.updateDataModel.contents,
+      },
     };
   }
   if (msg.deleteSurface) {
     return {
       deleteSurface: {
-        surfaceId: msg.deleteSurface.surfaceId
-      }
+        surfaceId: msg.deleteSurface.surfaceId,
+      },
     };
   }
-  
+
   // v0.8 messages pass through as-is
   return msg;
 }
diff --git a/tools/composer/src/lib/utils.ts b/tools/composer/src/lib/utils.ts
index 8b9d0b41e..1ac12b144 100644
--- a/tools/composer/src/lib/utils.ts
+++ b/tools/composer/src/lib/utils.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import {clsx, type ClassValue} from 'clsx';
+import {twMerge} from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/tools/composer/src/lib/v09Viewer.tsx b/tools/composer/src/lib/v09Viewer.tsx
index 45278cc56..fbfef724e 100644
--- a/tools/composer/src/lib/v09Viewer.tsx
+++ b/tools/composer/src/lib/v09Viewer.tsx
@@ -25,9 +25,9 @@
  */
 'use client';
 
-import { useMemo } from 'react';
-import { A2uiSurface, basicCatalog } from '@a2ui/react/v0_9';
-import { MessageProcessor } from '@a2ui/web_core/v0_9';
+import {useMemo} from 'react';
+import {A2uiSurface, basicCatalog} from '@a2ui/react/v0_9';
+import {MessageProcessor} from '@a2ui/web_core/v0_9';
 
 const CATALOG_ID = 'https://a2ui.org/specification/v0_9/basic_catalog.json';
 const SURFACE_ID = 'v09-preview';
@@ -45,12 +45,7 @@ export interface V09ViewerProps {
   onAction?: (action: unknown) => void;
 }
 
-export function V09Viewer({
-  root,
-  components,
-  data = {},
-  onAction,
-}: V09ViewerProps) {
+export function V09Viewer({root, components, data = {}, onAction}: V09ViewerProps) {
   const surface = useMemo(() => {
     const processor = new MessageProcessor(
       [basicCatalog],
@@ -73,10 +68,10 @@ export function V09Viewer({
         version: 'v0.9',
         updateComponents: {
           surfaceId: SURFACE_ID,
-          components: components.map((c) => {
+          components: components.map(c => {
             // Ensure root component is mapped correctly
             if (c.id === root) {
-              return { ...c, id: 'root' };
+              return {...c, id: 'root'};
             }
             return c;
           }),
@@ -102,7 +97,7 @@ export function V09Viewer({
   }, [root, components, data, onAction]);
 
   if (!surface) {
-    return <div style={{ color: 'gray', padding: '8px' }}>No surface created</div>;
+    return <div style={{color: 'gray', padding: '8px'}}>No surface created</div>;
   }
 
   return <A2uiSurface surface={surface} />;
diff --git a/tools/composer/src/lib/viewerTheme.ts b/tools/composer/src/lib/viewerTheme.ts
index daac85598..b1bd9fb17 100644
--- a/tools/composer/src/lib/viewerTheme.ts
+++ b/tools/composer/src/lib/viewerTheme.ts
@@ -38,7 +38,7 @@ const a = {
   'layout-al-c': true,
 };
 
-const audio = { 'layout-w-100': true };
+const audio = {'layout-w-100': true};
 
 const body = {
   'typography-f-s': true,
@@ -77,11 +77,11 @@ const heading = {
   'color-c-n10': true,
 };
 
-const h1 = { ...heading, 'typography-sz-tl': true };
-const h2 = { ...heading, 'typography-sz-tm': true };
-const h3 = { ...heading, 'typography-sz-ts': true };
+const h1 = {...heading, 'typography-sz-tl': true};
+const h2 = {...heading, 'typography-sz-tm': true};
+const h3 = {...heading, 'typography-sz-ts': true};
 
-const iframe = { 'behavior-sw-n': true };
+const iframe = {'behavior-sw-n': true};
 
 const input = {
   'typography-f-sf': true,
@@ -118,8 +118,8 @@ const orderedList = {
   'layout-as-n': true,
 };
 
-const unorderedList = { ...orderedList };
-const listItem = { ...orderedList };
+const unorderedList = {...orderedList};
+const listItem = {...orderedList};
 
 const pre = {
   'typography-f-c': true,
@@ -136,22 +136,22 @@ const textarea = {
   'layout-fs-c': true,
 };
 
-const video = { 'layout-el-cv': true };
+const video = {'layout-el-cv': true};
 
 // Light variants (replaces v0_8.Styles.merge with plain spreads)
-const aLight = { ...a, 'color-c-n5': true };
-const inputLight = { ...input, 'color-c-n5': true };
-const textareaLight = { ...textarea, 'color-c-n5': true };
-const buttonLight = { ...button, 'color-c-n100': true };
-const h1Light = { ...h1, 'color-c-n5': true };
-const h2Light = { ...h2, 'color-c-n5': true };
-const h3Light = { ...h3, 'color-c-n5': true };
-const bodyLight = { ...body, 'color-c-n5': true };
-const pLight = { ...p, 'color-c-n35': true };
-const preLight = { ...pre, 'color-c-n35': true };
-const orderedListLight = { ...orderedList, 'color-c-n35': true };
-const unorderedListLight = { ...unorderedList, 'color-c-n35': true };
-const listItemLight = { ...listItem, 'color-c-n35': true };
+const aLight = {...a, 'color-c-n5': true};
+const inputLight = {...input, 'color-c-n5': true};
+const textareaLight = {...textarea, 'color-c-n5': true};
+const buttonLight = {...button, 'color-c-n100': true};
+const h1Light = {...h1, 'color-c-n5': true};
+const h2Light = {...h2, 'color-c-n5': true};
+const h3Light = {...h3, 'color-c-n5': true};
+const bodyLight = {...body, 'color-c-n5': true};
+const pLight = {...p, 'color-c-n35': true};
+const preLight = {...pre, 'color-c-n35': true};
+const orderedListLight = {...orderedList, 'color-c-n35': true};
+const unorderedListLight = {...unorderedList, 'color-c-n35': true};
+const listItemLight = {...listItem, 'color-c-n35': true};
 
 // =============================================================================
 // Theme export
@@ -210,7 +210,7 @@ export const viewerTheme = {
         'layout-al-c': true,
       },
     },
-    Column: { 'layout-g-2': true },
+    Column: {'layout-g-2': true},
     DateTimeInput: {
       container: {},
       label: {},
@@ -236,7 +236,7 @@ export const viewerTheme = {
         'layout-w-100': true,
         'layout-h-100': true,
       },
-      avatar: { 'is-avatar': true },
+      avatar: {'is-avatar': true},
       header: {},
       icon: {},
       largeFeature: {},
@@ -249,7 +249,7 @@ export const viewerTheme = {
       'layout-p-2': true,
     },
     Modal: {
-      backdrop: { 'color-bbgc-p60_20': true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
         'border-br-2': true,
         'color-bgc-p100': true,
@@ -264,7 +264,7 @@ export const viewerTheme = {
       label: {},
       element: {},
     },
-    Row: { 'layout-g-4': true },
+    Row: {'layout-g-4': true},
     Slider: {
       container: {},
       label: {},
@@ -272,7 +272,7 @@ export const viewerTheme = {
     },
     Tabs: {
       container: {},
-      controls: { all: {}, selected: {} },
+      controls: {all: {}, selected: {}},
       element: {},
     },
     Text: {
diff --git a/tools/composer/src/test/setup.ts b/tools/composer/src/test/setup.ts
index ea4a5848b..f83d1e2a1 100644
--- a/tools/composer/src/test/setup.ts
+++ b/tools/composer/src/test/setup.ts
@@ -15,7 +15,7 @@
  */
 
 import '@testing-library/jest-dom';
-import { vi } from 'vitest';
+import {vi} from 'vitest';
 
 // Mock matchMedia if needed (common for some Radix/UI components)
 Object.defineProperty(window, 'matchMedia', {
diff --git a/tools/composer/src/types/widget.ts b/tools/composer/src/types/widget.ts
index 6159297c0..d54984249 100644
--- a/tools/composer/src/types/widget.ts
+++ b/tools/composer/src/types/widget.ts
@@ -21,7 +21,7 @@
  * and the adapter interprets them based on specVersion. Only two places need
  * to understand the internal structure: the renderer adapter and the AI prompt.
  */
-export type A2UIComponent = Record<string, unknown> & { id: string };
+export type A2UIComponent = Record<string, unknown> & {id: string};
 
 export interface DataState {
   name: string;
diff --git a/tools/composer/tsconfig.json b/tools/composer/tsconfig.json
index d3b639425..b7a7cc53d 100644
--- a/tools/composer/tsconfig.json
+++ b/tools/composer/tsconfig.json
@@ -6,11 +6,7 @@
     "esModuleInterop": true,
     "incremental": true,
     "isolatedModules": true,
-    "lib": [
-      "es2022",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
     "moduleDetection": "force",
     "moduleResolution": "Bundler",
     "noUncheckedIndexedAccess": true,
@@ -28,9 +24,7 @@
     "jsx": "react-jsx",
     "noEmit": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   },
   "include": [
@@ -42,7 +36,5 @@
     "**/*.mts",
     ".next/dev/dev/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }
diff --git a/tools/composer/vitest.config.ts b/tools/composer/vitest.config.ts
index e2766f9ad..1c505b4e0 100644
--- a/tools/composer/vitest.config.ts
+++ b/tools/composer/vitest.config.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { defineConfig } from 'vitest/config';
+import {defineConfig} from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
diff --git a/tools/editor/client.ts b/tools/editor/client.ts
index 315e16101..1d7a33a77 100644
--- a/tools/editor/client.ts
+++ b/tools/editor/client.ts
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
+import {v0_8} from '@a2ui/lit';
 
 const catalog: v0_8.Types.ClientCapabilitiesDynamic = {
   components:
-    v0_8.Schemas.A2UIClientEventMessage["properties"]["surfaceUpdate"][
-    "properties"
-    ]["components"]["items"]["properties"]["component"]["properties"],
+    v0_8.Schemas.A2UIClientEventMessage['properties']['surfaceUpdate']['properties']['components'][
+      'items'
+    ]['properties']['component']['properties'],
   styles: {},
 };
 
@@ -39,7 +39,7 @@ export class A2UIClient {
               dynamicCatalog: catalog,
             },
           });
-          console.log("A2UI Client Handshake");
+          console.log('A2UI Client Handshake');
           resolve();
         })();
       } catch (err) {
@@ -53,11 +53,8 @@ export class A2UIClient {
   }
 
   async sendMultipart(imageData?: string, instructions?: string) {
-    if (
-      typeof instructions === "undefined" &&
-      typeof imageData === "undefined"
-    ) {
-      throw new Error("No data provided");
+    if (typeof instructions === 'undefined' && typeof imageData === 'undefined') {
+      throw new Error('No data provided');
     }
 
     return this.#send({
@@ -68,15 +65,15 @@ export class A2UIClient {
     });
   }
 
-  async #send<T extends { role: "model"; parts: Array<{ text: string }> }>(
-    message: v0_8.Types.A2UIClientEventMessage
+  async #send<T extends {role: 'model'; parts: Array<{text: string}>}>(
+    message: v0_8.Types.A2UIClientEventMessage,
   ) {
-    const response = await fetch("/a2ui", {
+    const response = await fetch('/a2ui', {
       body: JSON.stringify(message),
-      method: "POST",
+      method: 'POST',
     });
     if (response.ok) return response.json() as unknown as T;
-    const error = (await response.json()) as { error: string };
+    const error = (await response.json()) as {error: string};
     throw new Error(error.error);
   }
 }
diff --git a/tools/editor/editor.ts b/tools/editor/editor.ts
index 9ef7423ca..15d811d7d 100644
--- a/tools/editor/editor.ts
+++ b/tools/editor/editor.ts
@@ -14,44 +14,31 @@
  * limitations under the License.
  */
 
-import { A2UIClient } from "./client";
-import {
-  LitElement,
-  html,
-  css,
-  nothing,
-  TemplateResult,
-  HTMLTemplateResult,
-  unsafeCSS,
-} from "lit";
-import { customElement, query, state } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
-import { SignalWatcher } from "@lit-labs/signals";
-import { provide } from "@lit/context";
-import { theme as uiTheme } from "./theme/theme.js";
-import "./ui/ui.js";
-import { classMap } from "lit/directives/class-map.js";
-import { Snackbar } from "./ui/snackbar.js";
-import { ref } from "lit/directives/ref.js";
-import {
-  SnackbarAction,
-  SnackbarMessage,
-  SnackbarUUID,
-  SnackType,
-} from "./types/types.js";
-import { DrawableCanvas } from "./ui/ui.js";
-import { v0_8 } from "@a2ui/lit";
-import * as UI from "@a2ui/lit/ui";
-
-type UserMode = "upload" | "sketch";
-type RenderMode = "surfaces" | "messages";
-
-const USER_MODE_KEY = "ui-user-mode";
-const RENDER_MODE_KEY = "ui-render-mode";
-
-@customElement("a2ui-layout-editor")
+import {A2UIClient} from './client';
+import {LitElement, html, css, nothing, TemplateResult, HTMLTemplateResult, unsafeCSS} from 'lit';
+import {customElement, query, state} from 'lit/decorators.js';
+import {repeat} from 'lit/directives/repeat.js';
+import {SignalWatcher} from '@lit-labs/signals';
+import {provide} from '@lit/context';
+import {theme as uiTheme} from './theme/theme.js';
+import './ui/ui.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {Snackbar} from './ui/snackbar.js';
+import {ref} from 'lit/directives/ref.js';
+import {SnackbarAction, SnackbarMessage, SnackbarUUID, SnackType} from './types/types.js';
+import {DrawableCanvas} from './ui/ui.js';
+import {v0_8} from '@a2ui/lit';
+import * as UI from '@a2ui/lit/ui';
+
+type UserMode = 'upload' | 'sketch';
+type RenderMode = 'surfaces' | 'messages';
+
+const USER_MODE_KEY = 'ui-user-mode';
+const RENDER_MODE_KEY = 'ui-render-mode';
+
+@customElement('a2ui-layout-editor')
 export class A2UILayoutEditor extends SignalWatcher(LitElement) {
-  @provide({ context: UI.Context.themeContext })
+  @provide({context: UI.Context.themeContext})
   accessor theme: v0_8.Types.Theme = uiTheme;
 
   @state()
@@ -75,7 +62,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     replaceAll: boolean;
   }> = [];
 
-  @query("drawable-canvas")
+  @query('drawable-canvas')
   accessor #drawableCanvas: DrawableCanvas | null = null;
 
   @state()
@@ -155,7 +142,8 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
               color: var(--text-color);
               opacity: 0.5;
               border-bottom: 2px solid var(--border-color);
-              transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1),
+              transition:
+                opacity 0.3s cubic-bezier(0, 0, 0.3, 1),
                 border-color 0.3s cubic-bezier(0, 0, 0.3, 1);
 
               &:not([disabled]):not(.active) {
@@ -271,7 +259,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
             resize: none;
           }
 
-          & button[type="submit"] {
+          & button[type='submit'] {
             border-radius: var(--bb-grid-size-2);
             color: var(--text-color);
             background: var(--primary);
@@ -372,8 +360,8 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
               opacity: 0.4;
               border: none;
               transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
-              padding: var(--bb-grid-size-2) var(--bb-grid-size-5)
-                var(--bb-grid-size-2) var(--bb-grid-size-2);
+              padding: var(--bb-grid-size-2) var(--bb-grid-size-5) var(--bb-grid-size-2)
+                var(--bb-grid-size-2);
               color: var(--primary);
 
               & .g-icon {
@@ -438,7 +426,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   get userMode() {
     return this.#userMode;
   }
-  #userMode: UserMode = "upload";
+  #userMode: UserMode = 'upload';
 
   @state()
   set renderMode(renderMode: RenderMode) {
@@ -448,7 +436,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   get renderMode() {
     return this.#renderMode;
   }
-  #renderMode: RenderMode = "surfaces";
+  #renderMode: RenderMode = 'surfaces';
 
   #processor = v0_8.Data.createSignalA2uiMessageProcessor();
   #a2uiClient = new A2UIClient();
@@ -456,10 +444,8 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   constructor() {
     super();
 
-    this.#userMode =
-      (localStorage.getItem(USER_MODE_KEY) as UserMode) ?? "upload";
-    this.#renderMode =
-      (localStorage.getItem(RENDER_MODE_KEY) as RenderMode) ?? "surfaces";
+    this.#userMode = (localStorage.getItem(USER_MODE_KEY) as UserMode) ?? 'upload';
+    this.#renderMode = (localStorage.getItem(RENDER_MODE_KEY) as RenderMode) ?? 'surfaces';
     this.#a2uiClient.ready.then(() => {
       this.#ready = true;
     });
@@ -467,14 +453,11 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
 
   async #processRequest(
     image?: HTMLImageElement | null,
-    instructions?: string
+    instructions?: string,
   ): Promise<v0_8.Types.ServerToClientMessage[]> {
     try {
       this.#requesting = true;
-      const response = await this.#a2uiClient.sendMultipart(
-        image?.src,
-        instructions
-      );
+      const response = await this.#a2uiClient.sendMultipart(image?.src, instructions);
 
       const message = JSON.parse(response.parts[0].text) as
         | v0_8.Types.ServerToClientMessage
@@ -499,8 +482,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       return html`<section id="surfaces">
         <div id="generating-surfaces">
           <h2 class="typography-w-400 typography-f-s typography-sz-tl">
-            <span class="g-icon filled round rotate">progress_activity</span
-            >Generating your UI
+            <span class="g-icon filled round rotate">progress_activity</span>Generating your UI
           </h2>
           <p class="typography-f-s typography-sz-bl">Working on it...</p>
         </div>
@@ -510,17 +492,15 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     const renderNoData = () =>
       html`<section id="surfaces">
         <div id="no-surfaces">
-          <h2 class="typography-w-400 typography-f-s typography-sz-tl">
-            No UI Generated Yet
-          </h2>
+          <h2 class="typography-w-400 typography-f-s typography-sz-tl">No UI Generated Yet</h2>
           <p class="typography-f-s typography-sz-bl">
-            Describe your desired UI in the left panel and click 'Generate UI'
-            to see the result here.
+            Describe your desired UI in the left panel and click 'Generate UI' to see the result
+            here.
           </p>
         </div>
       </section>`;
 
-    if (this.#renderMode === "surfaces") {
+    if (this.#renderMode === 'surfaces') {
       const surfaces = this.#processor.getSurfaces();
 
       if (surfaces.size === 0) {
@@ -529,16 +509,16 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
 
       return html`<section id="surfaces">
         ${repeat(
-        this.#processor.getSurfaces(),
-        ([surfaceId]) => surfaceId,
-        ([surfaceId, surface]) => {
-          return html`<a2ui-surface
+          this.#processor.getSurfaces(),
+          ([surfaceId]) => surfaceId,
+          ([surfaceId, surface]) => {
+            return html`<a2ui-surface
               .surfaceId=${surfaceId}
               .surface=${surface}
               .processor=${this.#processor}
             ></a2-uisurface>`;
-        }
-      )}
+          },
+        )}
       </section>`;
     }
 
@@ -550,11 +530,11 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       <div>${JSON.stringify(this.#lastMessages, null, 2)}</div>
       <button
         @click=${async () => {
-        const content = JSON.stringify(this.#lastMessages, null, 2);
-        await navigator.clipboard.writeText(content);
+          const content = JSON.stringify(this.#lastMessages, null, 2);
+          await navigator.clipboard.writeText(content);
 
-        this.snackbar(html`Copied to clipboard`, SnackType.INFORMATION);
-      }}
+          this.snackbar(html`Copied to clipboard`, SnackType.INFORMATION);
+        }}
       >
         <span class="g-icon filled round">content_copy</span> Copy to Clipboard
       </button>
@@ -565,20 +545,20 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     this.#processingImage = true;
 
     const reader = new FileReader();
-    reader.addEventListener("loadend", () => {
+    reader.addEventListener('loadend', () => {
       this.#processingImage = false;
       const file = reader.result as string;
-      if (!file.startsWith("data:image/")) {
+      if (!file.startsWith('data:image/')) {
         return;
       }
 
       this.#image = new Image();
       this.#image.src = file;
     });
-    reader.addEventListener("error", () => {
+    reader.addEventListener('error', () => {
       this.#processingImage = false;
     });
-    reader.addEventListener("false", () => {
+    reader.addEventListener('false', () => {
       this.#processingImage = false;
     });
     reader.readAsDataURL(file);
@@ -589,52 +569,47 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       ${this.#image}
       <button
         @click=${() => {
-        this.#image = null;
-      }}
+          this.#image = null;
+        }}
         type="button"
       >
         <span class="g-icon filled round">delete</span>
       </button>
     </div>`;
 
-    const dragView = html` <div class="g-icon large filled round color-c-n50">
-        check_circle
-      </div>
+    const dragView = html` <div class="g-icon large filled round color-c-n50">check_circle</div>
       <p>Drop your image</p>`;
 
     const processingView = html`<p>
-      <span class="g-icon filled round rotate color-c-n50"
-        >progress_activity</span
-      >Processing image...
+      <span class="g-icon filled round rotate color-c-n50">progress_activity</span>Processing
+      image...
     </p>`;
 
-    const defaultView = html` <div class="g-icon large filled round upload">
-        upload
-      </div>
+    const defaultView = html` <div class="g-icon large filled round upload">upload</div>
       <p>Drag &amp; drop an image here, or click upload</p>
       <div>
         <button
           class=${classMap({
-      "typography-w-500": true,
-      "typography-f-s": true,
-      "typography-sz-bl": true,
-    })}
+            'typography-w-500': true,
+            'typography-f-s': true,
+            'typography-sz-bl': true,
+          })}
           ?disabled=${this.#requesting}
           type="button"
           @click=${() => {
-        const file = document.createElement("input");
-        file.type = "file";
-        file.accept = "image/*";
-        file.click();
-
-        file.addEventListener("input", () => {
-          if (!file.files) {
-            return;
-          }
+            const file = document.createElement('input');
+            file.type = 'file';
+            file.accept = 'image/*';
+            file.click();
+
+            file.addEventListener('input', () => {
+              if (!file.files) {
+                return;
+              }
 
-          this.#processImage(file.files[0]);
-        });
-      }}
+              this.#processImage(file.files[0]);
+            });
+          }}
         >
           Upload Image
         </button>
@@ -655,28 +630,28 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       <div id="controls">
         <button
           class=${classMap({
-      active: this.userMode === "upload",
-      "typography-w-400": true,
-      "typography-f-s": true,
-      "typography-sz-tm": true,
-    })}
+            active: this.userMode === 'upload',
+            'typography-w-400': true,
+            'typography-f-s': true,
+            'typography-sz-tm': true,
+          })}
           @click=${() => {
-        this.userMode = "upload";
-      }}
+            this.userMode = 'upload';
+          }}
           type="button"
         >
           <span class="g-icon filled round">upload</span>Upload
         </button>
         <button
           class=${classMap({
-        active: this.userMode === "sketch",
-        "typography-w-400": true,
-        "typography-f-s": true,
-        "typography-sz-tm": true,
-      })}
+            active: this.userMode === 'sketch',
+            'typography-w-400': true,
+            'typography-f-s': true,
+            'typography-sz-tm': true,
+          })}
           @click=${() => {
-        this.userMode = "sketch";
-      }}
+            this.userMode = 'sketch';
+          }}
           type="button"
         >
           <span class="g-icon filled round">draw</span>Sketch
@@ -684,73 +659,70 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
       </div>
       <div
         @dragstart=${(evt: Event) => {
-        evt.preventDefault();
-      }}
+          evt.preventDefault();
+        }}
         @dragenter=${(evt: Event) => {
-        evt.preventDefault();
-        this.#draggingImage = true;
-      }}
+          evt.preventDefault();
+          this.#draggingImage = true;
+        }}
         @dragleave=${(evt: Event) => {
-        evt.preventDefault();
-        this.#draggingImage = false;
-      }}
+          evt.preventDefault();
+          this.#draggingImage = false;
+        }}
         @dragover=${(evt: Event) => {
-        evt.preventDefault();
-      }}
+          evt.preventDefault();
+        }}
         @drop=${(evt: DragEvent) => {
-        evt.preventDefault();
-        this.#draggingImage = false;
+          evt.preventDefault();
+          this.#draggingImage = false;
 
-        if (!evt.dataTransfer) {
-          return;
-        }
+          if (!evt.dataTransfer) {
+            return;
+          }
 
-        if (evt.dataTransfer.files.length === 0) {
-          return;
-        }
+          if (evt.dataTransfer.files.length === 0) {
+            return;
+          }
 
-        this.#processImage(evt.dataTransfer.files[0]);
-      }}
+          this.#processImage(evt.dataTransfer.files[0]);
+        }}
         id="upload"
-        class=${classMap({ active: this.userMode === "upload" })}
+        class=${classMap({active: this.userMode === 'upload'})}
       >
         ${view}
       </div>
-      <div
-        id="sketch"
-        class=${classMap({ active: this.userMode === "sketch" })}
-      >
+      <div id="sketch" class=${classMap({active: this.userMode === 'sketch'})}>
         <drawable-canvas></drawable-canvas>
       </div>
       <textarea
         name="instructions"
         class=${classMap({
-        "typography-w-400": true,
-        "typography-f-s": true,
-        "typography-sz-bl": true,
-      })}
+          'typography-w-400': true,
+          'typography-f-s': true,
+          'typography-sz-bl': true,
+        })}
         @keydown=${(evt: KeyboardEvent) => {
-        if (evt.key !== "Enter" || evt.shiftKey) {
-          return;
-        }
+          if (evt.key !== 'Enter' || evt.shiftKey) {
+            return;
+          }
 
-        if (!(evt.target instanceof HTMLTextAreaElement)) {
-          return;
-        }
+          if (!(evt.target instanceof HTMLTextAreaElement)) {
+            return;
+          }
 
-        evt.preventDefault();
-        const form = evt.target.closest("form")!;
-        form.dispatchEvent(new SubmitEvent("submit", { bubbles: true }));
-      }}
+          evt.preventDefault();
+          const form = evt.target.closest('form')!;
+          form.dispatchEvent(new SubmitEvent('submit', {bubbles: true}));
+        }}
         placeholder="Optional: Provide a text description with more details."
       ></textarea>
       <button
         ?disabled=${this.#requesting}
         class=${classMap({
-        "typography-w-500": true,
-        "typography-f-s": true,
-        "typography-sz-bl": true,
-      })}
+          'typography-w-500': true,
+          'typography-f-s': true,
+          'typography-sz-bl': true,
+        })}
         type="submit"
       >
         Generate UI
@@ -759,9 +731,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   }
 
   #renderHeader() {
-    return html`<header
-      class="typography-w-400 typography-f-sf typography-sz-tm"
-    >
+    return html`<header class="typography-w-400 typography-f-sf typography-sz-tm">
       UI Generator
     </header>`;
   }
@@ -769,7 +739,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   #renderMain() {
     return html`<section id="main">
       <ui-splitter
-        direction=${"horizontal"}
+        direction=${'horizontal'}
         name="layout-main"
         split="[0.20, 0.80]"
         .minSegmentSizeHorizontal=${325}
@@ -778,53 +748,41 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
           id="controls-container"
           slot="slot-0"
           @submit=${async (evt: SubmitEvent) => {
-        evt.preventDefault();
-        const formData = new FormData(evt.target as HTMLFormElement);
-        const instructions = formData.get("instructions");
-        if (instructions === null) {
-          return;
-        }
+            evt.preventDefault();
+            const formData = new FormData(evt.target as HTMLFormElement);
+            const instructions = formData.get('instructions');
+            if (instructions === null) {
+              return;
+            }
 
-        let img: HTMLImageElement | null = this.#image;
-        if (this.userMode === "sketch" && this.#drawableCanvas) {
-          img = await this.#drawableCanvas.getValue();
-        }
+            let img: HTMLImageElement | null = this.#image;
+            if (this.userMode === 'sketch' && this.#drawableCanvas) {
+              img = await this.#drawableCanvas.getValue();
+            }
 
-        const messages = await this.#processRequest(
-          img,
-          instructions as string
-        );
-        this.#lastMessages = messages;
-        this.#processor.clearSurfaces();
-        this.#processor.processMessages(messages);
-      }}
+            const messages = await this.#processRequest(img, instructions as string);
+            this.#lastMessages = messages;
+            this.#processor.clearSurfaces();
+            this.#processor.processMessages(messages);
+          }}
         >
-          <h2 class="typography-w-400 typography-f-s typography-sz-tl">
-            Describe your UI
-          </h2>
+          <h2 class="typography-w-400 typography-f-s typography-sz-tl">Describe your UI</h2>
           ${this.#renderInput()}
         </form>
         <div id="surface-container" slot="slot-1">
-          <h2
-            class="typography-w-400 typography-f-s typography-sz-tl layout-sp-bt"
-          >
+          <h2 class="typography-w-400 typography-f-s typography-sz-tl layout-sp-bt">
             Generated UI
             <button
               id="render-mode"
               @click=${() => {
-        this.renderMode =
-          this.renderMode === "messages" ? "surfaces" : "messages";
-      }}
+                this.renderMode = this.renderMode === 'messages' ? 'surfaces' : 'messages';
+              }}
             >
-              <span
-                class=${classMap({ active: this.#renderMode === "surfaces" })}
-              >
+              <span class=${classMap({active: this.#renderMode === 'surfaces'})}>
                 <span class="g-icon filled round">mobile_layout</span>Surfaces
               </span>
 
-              <span
-                class=${classMap({ active: this.#renderMode === "messages" })}
-              >
+              <span class=${classMap({active: this.#renderMode === 'messages'})}>
                 <span class="g-icon filled round">communication</span>A2UI
               </span>
             </button>
@@ -838,19 +796,18 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
   #renderSnackbar() {
     return html`<ui-snackbar
       ${ref((el: Element | undefined) => {
-      if (!el) {
-        this.#snackbar = undefined;
-      }
+        if (!el) {
+          this.#snackbar = undefined;
+        }
 
-      this.#snackbar = el as Snackbar;
-      for (const pendingMessage of this.#pendingSnackbarMessages) {
-        const { message, id, persistent, type, actions } =
-          pendingMessage.message;
-        this.snackbar(message, type, actions, persistent, id);
-      }
+        this.#snackbar = el as Snackbar;
+        for (const pendingMessage of this.#pendingSnackbarMessages) {
+          const {message, id, persistent, type, actions} = pendingMessage.message;
+          this.snackbar(message, type, actions, persistent, id);
+        }
 
-      this.#pendingSnackbarMessages.length = 0;
-    })}
+        this.#pendingSnackbarMessages.length = 0;
+      })}
     ></ui-snackbar>`;
   }
 
@@ -864,7 +821,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
     actions: SnackbarAction[] = [],
     persistent = false,
     id = globalThis.crypto.randomUUID(),
-    replaceAll = false
+    replaceAll = false,
   ) {
     if (!this.#snackbar) {
       this.#pendingSnackbarMessages.push({
@@ -888,7 +845,7 @@ export class A2UILayoutEditor extends SignalWatcher(LitElement) {
         persistent,
         actions,
       },
-      replaceAll
+      replaceAll,
     );
   }
 
diff --git a/tools/editor/events/events.ts b/tools/editor/events/events.ts
index 2b7811ab9..95ec43396 100644
--- a/tools/editor/events/events.ts
+++ b/tools/editor/events/events.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { HTMLTemplateResult } from "lit";
+import {HTMLTemplateResult} from 'lit';
 
 const eventInit = {
   bubbles: true,
@@ -23,13 +23,13 @@ const eventInit = {
 };
 
 export class SnackbarActionEvent extends Event {
-  static eventName = "snackbaraction";
+  static eventName = 'snackbaraction';
 
   constructor(
     public readonly action: string,
     public readonly value?: HTMLTemplateResult | string,
-    public readonly callback?: () => void
+    public readonly callback?: () => void,
   ) {
-    super(SnackbarActionEvent.eventName, { ...eventInit });
+    super(SnackbarActionEvent.eventName, {...eventInit});
   }
 }
diff --git a/tools/editor/index.html b/tools/editor/index.html
index 6e9916592..c8a297d66 100644
--- a/tools/editor/index.html
+++ b/tools/editor/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2025 Google LLC
 
@@ -146,12 +146,8 @@
         --text-color: #fff;
         --background-light: #f6f7f8;
         --background-dark: #101922;
-        --border-color: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.15)
-        );
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --border-color: oklch(from var(--background-light) l c h / calc(alpha * 0.15));
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
@@ -176,8 +172,8 @@
 
       html,
       body {
-        --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         background: var(--background-dark);
diff --git a/tools/editor/middleware/gemini.ts b/tools/editor/middleware/gemini.ts
index 59a19291f..71d11be0a 100644
--- a/tools/editor/middleware/gemini.ts
+++ b/tools/editor/middleware/gemini.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { IncomingMessage, ServerResponse } from "http";
-import { Plugin, ViteDevServer } from "vite";
-import { GoogleGenAI } from "@google/genai";
-import { v0_8 } from "@a2ui/lit";
-import { createA2UIPrompt, createImageParsePrompt } from "./prompts";
+import {IncomingMessage, ServerResponse} from 'http';
+import {Plugin, ViteDevServer} from 'vite';
+import {GoogleGenAI} from '@google/genai';
+import {v0_8} from '@a2ui/lit';
+import {createA2UIPrompt, createImageParsePrompt} from './prompts';
 
 // TODO: Reenable.
 // import ServerToClientMessage from "../schemas/a2ui-message.js";
@@ -26,44 +26,42 @@ import { createA2UIPrompt, createImageParsePrompt } from "./prompts";
 let catalog: v0_8.Types.ClientCapabilitiesDynamic | null = null;
 let ai: GoogleGenAI;
 export const plugin = (): Plugin => {
-  if (!("GEMINI_API_KEY" in process.env && process.env.GEMINI_KEY !== "")) {
-    throw new Error("No GEMINI_API_KEY environment variable; add one to .env");
+  if (!('GEMINI_API_KEY' in process.env && process.env.GEMINI_KEY !== '')) {
+    throw new Error('No GEMINI_API_KEY environment variable; add one to .env');
   }
 
   return {
-    name: "custom-gemini-handler",
+    name: 'custom-gemini-handler',
     configureServer(server: ViteDevServer) {
       server.middlewares.use(
-        "/a2ui",
+        '/a2ui',
         async (req: IncomingMessage, res: ServerResponse, next: () => void) => {
           if (!ai) {
-            ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
+            ai = new GoogleGenAI({apiKey: process.env.GEMINI_API_KEY});
           }
 
-          if (req.method === "POST") {
-            let contents = "";
+          if (req.method === 'POST') {
+            let contents = '';
 
-            req.on("data", (chunk) => {
+            req.on('data', chunk => {
               contents += chunk.toString();
             });
 
-            req.on("end", async () => {
+            req.on('end', async () => {
               try {
-                const payload = JSON.parse(
-                  contents
-                ) as v0_8.Types.A2UIClientEventMessage;
+                const payload = JSON.parse(contents) as v0_8.Types.A2UIClientEventMessage;
                 if (payload.clientUiCapabilities || payload.userAction) {
                   if (payload.clientUiCapabilities) {
-                    if ("dynamicCatalog" in payload.clientUiCapabilities) {
+                    if ('dynamicCatalog' in payload.clientUiCapabilities) {
                       catalog = payload.clientUiCapabilities.dynamicCatalog;
 
                       res.statusCode = 200;
-                      res.setHeader("Content-Type", "application/json");
+                      res.setHeader('Content-Type', 'application/json');
                       res.end(
                         JSON.stringify({
-                          role: "model",
-                          parts: [{ text: "Dynamic Catalog Received" }],
-                        })
+                          role: 'model',
+                          parts: [{text: 'Dynamic Catalog Received'}],
+                        }),
                       );
                       return;
                     }
@@ -75,11 +73,11 @@ export const plugin = (): Plugin => {
                   // Other payload - assume this is a user request.
                   if (!payload.request || !catalog) {
                     res.statusCode = 400;
-                    res.setHeader("Content-Type", "application/json");
+                    res.setHeader('Content-Type', 'application/json');
                     res.end(
                       JSON.stringify({
                         error: `Invalid message - No payload or catalog`,
-                      })
+                      }),
                     );
                     return;
                   }
@@ -90,20 +88,13 @@ export const plugin = (): Plugin => {
                       instructions: string;
                     };
 
-                    let imageDescription = "";
-                    if (
-                      request.imageData &&
-                      request.imageData.startsWith("data:")
-                    ) {
-                      const mimeType = /data:(.*);/
-                        .exec(request.imageData)
-                        ?.at(1);
+                    let imageDescription = '';
+                    if (request.imageData && request.imageData.startsWith('data:')) {
+                      const mimeType = /data:(.*);/.exec(request.imageData)?.at(1);
                       if (!mimeType) {
-                        throw new Error("Invalid inline data");
+                        throw new Error('Invalid inline data');
                       }
-                      const data = request.imageData.substring(
-                        `data:${mimeType};base64,`.length
-                      );
+                      const data = request.imageData.substring(`data:${mimeType};base64,`.length);
                       const contentPart = {
                         inlineData: {
                           mimeType,
@@ -111,12 +102,9 @@ export const plugin = (): Plugin => {
                         },
                       };
 
-                      const prompt = createImageParsePrompt(
-                        catalog,
-                        contentPart
-                      );
+                      const prompt = createImageParsePrompt(catalog, contentPart);
                       const modelResponse = await ai.models.generateContent({
-                        model: "gemini-2.5-flash",
+                        model: 'gemini-2.5-flash',
                         contents: prompt,
                         config: {
                           systemInstruction: `
@@ -126,17 +114,17 @@ export const plugin = (): Plugin => {
                         please.`,
                         },
                       });
-                      imageDescription = modelResponse.text ?? "";
+                      imageDescription = modelResponse.text ?? '';
                     }
 
                     const prompt = createA2UIPrompt(
                       catalog,
                       imageDescription,
-                      request.instructions
+                      request.instructions,
                     );
 
                     const modelResponse = await ai.models.generateContent({
-                      model: "gemini-2.5-flash",
+                      model: 'gemini-2.5-flash',
                       contents: prompt,
                       config: {
                         // responseMimeType: "application/json",
@@ -162,24 +150,24 @@ export const plugin = (): Plugin => {
                       },
                     });
                     res.statusCode = 200;
-                    res.setHeader("Content-Type", "application/json");
+                    res.setHeader('Content-Type', 'application/json');
                     res.end(
                       JSON.stringify({
-                        role: "model",
-                        parts: [{ text: modelResponse.text }],
-                      })
+                        role: 'model',
+                        parts: [{text: modelResponse.text}],
+                      }),
                     );
                   } else {
-                    throw new Error("Expected request to be an object");
+                    throw new Error('Expected request to be an object');
                   }
                 }
               } catch (err) {
                 res.statusCode = 400;
-                res.setHeader("Content-Type", "application/json");
+                res.setHeader('Content-Type', 'application/json');
                 res.end(
                   JSON.stringify({
                     error: `Invalid message - ${err}`,
-                  })
+                  }),
                 );
               }
             });
@@ -188,7 +176,7 @@ export const plugin = (): Plugin => {
           } else {
             next();
           }
-        }
+        },
       );
     },
   };
diff --git a/tools/editor/middleware/image-fallback.ts b/tools/editor/middleware/image-fallback.ts
index f2019f37f..576867f6d 100644
--- a/tools/editor/middleware/image-fallback.ts
+++ b/tools/editor/middleware/image-fallback.ts
@@ -14,51 +14,48 @@
  * limitations under the License.
  */
 
-import { Plugin, ViteDevServer } from "vite";
-import fs from "fs";
-import path from "path";
+import {Plugin, ViteDevServer} from 'vite';
+import fs from 'fs';
+import path from 'path';
 
-export function plugin(fallbackPath = "public/default-fallback.png"): Plugin {
+export function plugin(fallbackPath = 'public/default-fallback.png'): Plugin {
   return {
-    name: "image-fallback",
-    apply: "serve",
-    enforce: "post",
+    name: 'image-fallback',
+    apply: 'serve',
+    enforce: 'post',
 
     configureServer(server: ViteDevServer) {
       const FALLBACK_FILE = path.resolve(server.config.root, fallbackPath);
       if (!fs.existsSync(FALLBACK_FILE)) {
         console.warn(
-          `[image-fallback] Fallback file not found: ${FALLBACK_FILE}. Plugin disabled.`
+          `[image-fallback] Fallback file not found: ${FALLBACK_FILE}. Plugin disabled.`,
         );
         return;
       }
 
       const fallbackBytes = fs.readFileSync(FALLBACK_FILE);
-      const fallbackMime =
-        path.extname(fallbackPath) === ".png" ? "image/png" : "image/jpeg";
+      const fallbackMime = path.extname(fallbackPath) === '.png' ? 'image/png' : 'image/jpeg';
 
       server.middlewares.use(async (req, res, next) => {
-        const url = req.url ?? "";
+        const url = req.url ?? '';
         // Check if the request looks like an image URL
         const isImageRequest = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i.test(url);
 
         if (isImageRequest) {
           const requestedFilePath = path.resolve(
             server.config.root,
-            "public",
-            url.slice(1).split("?")[0]
+            'public',
+            url.slice(1).split('?')[0],
           );
 
           // Check if the file *does not* exist on disk
-          if (!fs.existsSync(requestedFilePath) && url !== "/") {
-            console.log(
-              `[image-fallback] Non-existent image: ${url}. Serving fallback.`
-            );
+          if (!fs.existsSync(requestedFilePath) && url !== '/') {
+            console.log(`[image-fallback] Non-existent image: ${url}. Serving fallback.`);
 
             // Serve the fallback image bytes
             res.statusCode = 200;
-            res.setHeader("Content-Type", fallbackMime);
-            res.setHeader("Content-Length", fallbackBytes.length);
+            res.setHeader('Content-Type', fallbackMime);
+            res.setHeader('Content-Length', fallbackBytes.length);
             res.end(fallbackBytes);
 
             // Do not call next() as the request is resolved
diff --git a/tools/editor/middleware/index.ts b/tools/editor/middleware/index.ts
index 2ad6ceeb3..d4b3a7678 100644
--- a/tools/editor/middleware/index.ts
+++ b/tools/editor/middleware/index.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export * as GeminiMiddleware from "./gemini.js";
-export * as ImageFallbackMiddleware from "./image-fallback.js";
+export * as GeminiMiddleware from './gemini.js';
+export * as ImageFallbackMiddleware from './image-fallback.js';
diff --git a/tools/editor/middleware/prompts.ts b/tools/editor/middleware/prompts.ts
index 488da5b4c..76347f044 100644
--- a/tools/editor/middleware/prompts.ts
+++ b/tools/editor/middleware/prompts.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
+import {v0_8} from '@a2ui/lit';
 
 export function createImageParsePrompt(
   catalog: v0_8.Types.ClientCapabilitiesDynamic,
@@ -23,15 +23,15 @@ export function createImageParsePrompt(
       mimeType: string;
       data: string;
     };
-  }
+  },
 ) {
   if (!catalog) {
-    throw new Error("No catalog specified");
+    throw new Error('No catalog specified');
   }
 
   const componentTypes = Object.keys(catalog.components);
   const prompt = {
-    role: "user",
+    role: 'user',
     parts: [
       `You are creating a text description for a User Interface. Ultimately this
       description will given to an agent which will use the A2UI Protocol to
@@ -49,13 +49,13 @@ export function createImageParsePrompt(
 
       `The user's layout image is: `,
       content,
-      `The Component Catalog you can refer to is: ${componentTypes.join(", ")}`,
-    ].map((item) => {
-      if (typeof item === "object") {
+      `The Component Catalog you can refer to is: ${componentTypes.join(', ')}`,
+    ].map(item => {
+      if (typeof item === 'object') {
         return item;
       }
 
-      return { text: item };
+      return {text: item};
     }),
   };
 
@@ -65,26 +65,26 @@ export function createImageParsePrompt(
 export function createA2UIPrompt(
   catalog: v0_8.Types.ClientCapabilitiesDynamic,
   imageDescription: string,
-  instructions: string
+  instructions: string,
 ) {
   if (!catalog) {
-    throw new Error("No catalog specified");
+    throw new Error('No catalog specified');
   }
 
   const combinedInstructions: string[] = [];
-  if (imageDescription !== "") {
+  if (imageDescription !== '') {
     combinedInstructions.push(imageDescription);
   }
-  if (instructions !== "") {
+  if (instructions !== '') {
     combinedInstructions.push(instructions);
   }
 
   if (combinedInstructions.length === 0) {
-    throw new Error("No instructions provided");
+    throw new Error('No instructions provided');
   }
 
   const prompt = {
-    role: "user",
+    role: 'user',
     parts: [
       `You are creating a layout for a User Interface. It will be using a
     format called A2UI which has several distinct schemas, each of which I will
@@ -97,9 +97,7 @@ export function createA2UIPrompt(
 
       `The user's layout request is: "${combinedInstructions.join('" and "')}"`,
       `The Component Catalog you can use is: ${JSON.stringify(catalog)}`,
-      `The A2UI Protocol Message Schema: "${JSON.stringify(
-        v0_8.Schemas.A2UIClientEventMessage
-      )}"`,
+      `The A2UI Protocol Message Schema: "${JSON.stringify(v0_8.Schemas.A2UIClientEventMessage)}"`,
 
       `Please return a valid A2UI Protocol Message object necessary to build the
       user interface from scratch. If you choose to return multiple object you
@@ -108,8 +106,8 @@ export function createA2UIPrompt(
       `If no data is provided create some. If there are any URLs you must
     make them absolute and begin with a /. Nothing should ever be loaded from
     a remote source`,
-    ].map((text) => {
-      return { text };
+    ].map(text => {
+      return {text};
     }),
   };
 
diff --git a/tools/editor/theme/theme.ts b/tools/editor/theme/theme.ts
index 5416528b2..441a5aeb2 100644
--- a/tools/editor/theme/theme.ts
+++ b/tools/editor/theme/theme.ts
@@ -14,169 +14,169 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
+import {v0_8} from '@a2ui/lit';
 
 /** Elements */
 
 const a = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-as-n": true,
-  "layout-dis-iflx": true,
-  "layout-al-c": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-as-n': true,
+  'layout-dis-iflx': true,
+  'layout-al-c': true,
 };
 
 const audio = {
-  "layout-w-100": true,
+  'layout-w-100': true,
 };
 
 const body = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
-  "typography-sz-bm": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
+  'typography-sz-bm': true,
+  'color-c-n10': true,
 };
 
 const button = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-pt-3": true,
-  "layout-pb-3": true,
-  "layout-pl-5": true,
-  "layout-pr-5": true,
-  "layout-mb-1": true,
-  "border-br-16": true,
-  "border-bw-0": true,
-  "border-c-n70": true,
-  "border-bs-s": true,
-  "color-bgc-s30": true,
-  "color-c-n100": true,
-  "behavior-ho-80": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-pt-3': true,
+  'layout-pb-3': true,
+  'layout-pl-5': true,
+  'layout-pr-5': true,
+  'layout-mb-1': true,
+  'border-br-16': true,
+  'border-bw-0': true,
+  'border-c-n70': true,
+  'border-bs-s': true,
+  'color-bgc-s30': true,
+  'color-c-n100': true,
+  'behavior-ho-80': true,
 };
 
 const heading = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
-  "color-c-n10": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
+  'color-c-n10': true,
 };
 
 const h1 = {
   ...heading,
-  "typography-sz-tl": true,
+  'typography-sz-tl': true,
 };
 
 const h2 = {
   ...heading,
-  "typography-sz-tm": true,
+  'typography-sz-tm': true,
 };
 
 const h3 = {
   ...heading,
-  "typography-sz-ts": true,
+  'typography-sz-ts': true,
 };
 
 const iframe = {
-  "behavior-sw-n": true,
+  'behavior-sw-n': true,
 };
 
 const input = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-pl-4": true,
-  "layout-pr-4": true,
-  "layout-pt-2": true,
-  "layout-pb-2": true,
-  "border-br-6": true,
-  "border-bw-1": true,
-  "color-bc-s70": true,
-  "border-bs-s": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-pl-4': true,
+  'layout-pr-4': true,
+  'layout-pt-2': true,
+  'layout-pb-2': true,
+  'border-br-6': true,
+  'border-bw-1': true,
+  'color-bc-s70': true,
+  'border-bs-s': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const p = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const orderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const unorderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const listItem = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const pre = {
-  "typography-f-c": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "typography-sz-bm": true,
-  "typography-ws-p": true,
-  "layout-as-n": true,
+  'typography-f-c': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'typography-sz-bm': true,
+  'typography-ws-p': true,
+  'layout-as-n': true,
 };
 
 const textarea = {
   ...input,
-  "layout-r-none": true,
-  "layout-fs-c": true,
+  'layout-r-none': true,
+  'layout-fs-c': true,
 };
 
 const video = {
-  "layout-el-cv": true,
+  'layout-el-cv': true,
 };
 
-const aLight = v0_8.Styles.merge(a, { "color-c-n5": true });
-const inputLight = v0_8.Styles.merge(input, { "color-c-n5": true });
-const textareaLight = v0_8.Styles.merge(textarea, { "color-c-n5": true });
-const buttonLight = v0_8.Styles.merge(button, { "color-c-n100": true });
-const h1Light = v0_8.Styles.merge(h1, { "color-c-n5": true });
-const h2Light = v0_8.Styles.merge(h2, { "color-c-n5": true });
-const h3Light = v0_8.Styles.merge(h3, { "color-c-n5": true });
-const bodyLight = v0_8.Styles.merge(body, { "color-c-n5": true });
-const pLight = v0_8.Styles.merge(p, { "color-c-n35": true });
-const preLight = v0_8.Styles.merge(pre, { "color-c-n35": true });
+const aLight = v0_8.Styles.merge(a, {'color-c-n5': true});
+const inputLight = v0_8.Styles.merge(input, {'color-c-n5': true});
+const textareaLight = v0_8.Styles.merge(textarea, {'color-c-n5': true});
+const buttonLight = v0_8.Styles.merge(button, {'color-c-n100': true});
+const h1Light = v0_8.Styles.merge(h1, {'color-c-n5': true});
+const h2Light = v0_8.Styles.merge(h2, {'color-c-n5': true});
+const h3Light = v0_8.Styles.merge(h3, {'color-c-n5': true});
+const bodyLight = v0_8.Styles.merge(body, {'color-c-n5': true});
+const pLight = v0_8.Styles.merge(p, {'color-c-n35': true});
+const preLight = v0_8.Styles.merge(pre, {'color-c-n35': true});
 const orderedListLight = v0_8.Styles.merge(orderedList, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 const unorderedListLight = v0_8.Styles.merge(unorderedList, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 const listItemLight = v0_8.Styles.merge(listItem, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 
 export const theme: v0_8.Types.Theme = {
@@ -189,70 +189,70 @@ export const theme: v0_8.Types.Theme = {
   components: {
     AudioPlayer: {},
     Button: {
-      "layout-pt-2": true,
-      "layout-pb-2": true,
-      "layout-pl-3": true,
-      "layout-pr-3": true,
-      "border-br-12": true,
-      "border-bw-0": true,
-      "border-bs-s": true,
-      "color-bgc-p30": true,
-      "color-c-n100": true,
-      "behavior-ho-70": true,
+      'layout-pt-2': true,
+      'layout-pb-2': true,
+      'layout-pl-3': true,
+      'layout-pr-3': true,
+      'border-br-12': true,
+      'border-bw-0': true,
+      'border-bs-s': true,
+      'color-bgc-p30': true,
+      'color-c-n100': true,
+      'behavior-ho-70': true,
     },
-    Card: { "border-br-9": true, "color-bgc-p100": true, "layout-p-4": true },
+    Card: {'border-br-9': true, 'color-bgc-p100': true, 'layout-p-4': true},
     CheckBox: {
       element: {
-        "layout-m-0": true,
-        "layout-mr-2": true,
-        "layout-p-2": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'layout-m-0': true,
+        'layout-mr-2': true,
+        'layout-p-2': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
       label: {
-        "color-c-p30": true,
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-flx-1": true,
-        "typography-sz-ll": true,
+        'color-c-p30': true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-flx-1': true,
+        'typography-sz-ll': true,
       },
       container: {
-        "layout-dsp-iflex": true,
-        "layout-al-c": true,
+        'layout-dsp-iflex': true,
+        'layout-al-c': true,
       },
     },
     Column: {
-      "layout-g-2": true,
+      'layout-g-2': true,
     },
     DateTimeInput: {
       container: {},
       label: {},
       element: {
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
       },
     },
     Divider: {},
     Image: {
       all: {
-        "layout-el-cv": true,
-        "layout-w-100": true,
-        "layout-h-100": true,
-        "border-br-5": true,
+        'layout-el-cv': true,
+        'layout-w-100': true,
+        'layout-h-100': true,
+        'border-br-5': true,
       },
       avatar: {},
       header: {},
@@ -263,18 +263,18 @@ export const theme: v0_8.Types.Theme = {
     },
     Icon: {},
     List: {
-      "layout-g-4": true,
-      "layout-p-2": true,
+      'layout-g-4': true,
+      'layout-p-2': true,
     },
     Modal: {
-      backdrop: { "color-bbgc-p60_20": true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
-        "border-br-2": true,
-        "color-bgc-p100": true,
-        "layout-p-4": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bc-p80": true,
+        'border-br-2': true,
+        'color-bgc-p100': true,
+        'layout-p-4': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bc-p80': true,
       },
     },
     MultipleChoice: {
@@ -283,88 +283,88 @@ export const theme: v0_8.Types.Theme = {
       element: {},
     },
     Row: {
-      "layout-g-4": true,
+      'layout-g-4': true,
     },
     Slider: {
       container: {},
       label: {},
       element: {},
     },
-    Tabs: { container: {}, controls: { all: {}, selected: {} }, element: {} },
+    Tabs: {container: {}, controls: {all: {}, selected: {}}, element: {}},
     Text: {
-      all: { "layout-w-100": true, "layout-g-2": true, "color-c-p30": true },
+      all: {'layout-w-100': true, 'layout-g-2': true, 'color-c-p30': true},
       h1: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-tl': true,
       },
       h2: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-tm": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-tm': true,
       },
       h3: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-ts": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-ts': true,
       },
       h4: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-bl": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-bl': true,
       },
       h5: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-bm": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-bm': true,
       },
       body: {},
       caption: {},
     },
     TextField: {
       container: {
-        "typography-sz-bm": true,
-        "layout-w-100": true,
-        "layout-g-2": true,
-        "layout-dsp-flexhor": true,
-        "layout-al-c": true,
+        'typography-sz-bm': true,
+        'layout-w-100': true,
+        'layout-g-2': true,
+        'layout-dsp-flexhor': true,
+        'layout-al-c': true,
       },
       label: {
-        "layout-flx-0": true,
+        'layout-flx-0': true,
       },
       element: {
-        "typography-sz-bm": true,
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'typography-sz-bm': true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
     },
     Video: {
-      "border-br-5": true,
-      "layout-el-cv": true,
+      'border-br-5': true,
+      'layout-el-cv': true,
     },
   },
   elements: {
diff --git a/tools/editor/types/types.ts b/tools/editor/types/types.ts
index b00b9cf54..8cc74f62e 100644
--- a/tools/editor/types/types.ts
+++ b/tools/editor/types/types.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { HTMLTemplateResult } from "lit";
+import {HTMLTemplateResult} from 'lit';
 
 export enum SnackType {
-  NONE = "none",
-  INFORMATION = "information",
-  WARNING = "warning",
-  ERROR = "error",
-  PENDING = "pending",
+  NONE = 'none',
+  INFORMATION = 'information',
+  WARNING = 'warning',
+  ERROR = 'error',
+  PENDING = 'pending',
 }
 
 export type SnackbarUUID = ReturnType<typeof globalThis.crypto.randomUUID>;
diff --git a/tools/editor/ui/drawable-canvas.ts b/tools/editor/ui/drawable-canvas.ts
index ba3b6a765..393db9aaa 100644
--- a/tools/editor/ui/drawable-canvas.ts
+++ b/tools/editor/ui/drawable-canvas.ts
@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-import { LitElement, css, html, nothing, svg, unsafeCSS } from "lit";
-import { customElement, query, state } from "lit/decorators.js";
-import { EnumValue } from "../types/types";
-import { ItemSelect } from "./item-select";
-import { v0_8 } from "@a2ui/lit";
+import {LitElement, css, html, nothing, svg, unsafeCSS} from 'lit';
+import {customElement, query, state} from 'lit/decorators.js';
+import {EnumValue} from '../types/types';
+import {ItemSelect} from './item-select';
+import {v0_8} from '@a2ui/lit';
 
-type RenderMode = "free" | "line" | "rect";
+type RenderMode = 'free' | 'line' | 'rect';
 interface Path {
-  type: "free";
+  type: 'free';
   value: string;
 }
 interface Line {
-  type: "line";
-  value: { sx: number; sy: number; dx: number; dy: number };
+  type: 'line';
+  value: {sx: number; sy: number; dx: number; dy: number};
 }
 interface Rect {
-  type: "rect";
+  type: 'rect';
   value: {
     bx: number;
     by: number;
@@ -43,36 +43,36 @@ interface Rect {
 type Shape = Path | Line | Rect;
 
 function isPath(shape: Shape | null): shape is Path {
-  return shape !== null && shape.type === "free";
+  return shape !== null && shape.type === 'free';
 }
 
 function isLine(shape: Shape | null): shape is Line {
-  return shape !== null && shape.type === "line";
+  return shape !== null && shape.type === 'line';
 }
 
 function isRect(shape: Shape | null): shape is Rect {
-  return shape !== null && shape.type === "rect";
+  return shape !== null && shape.type === 'rect';
 }
 
 const values: EnumValue[] = [
   {
-    id: "free",
-    title: "Freehand",
-    icon: "draw",
+    id: 'free',
+    title: 'Freehand',
+    icon: 'draw',
   },
   {
-    id: "line",
-    title: "Line",
-    icon: "pen_size_1",
+    id: 'line',
+    title: 'Line',
+    icon: 'pen_size_1',
   },
   {
-    id: "rect",
-    title: "Rectangle",
-    icon: "rectangle",
+    id: 'rect',
+    title: 'Rectangle',
+    icon: 'rectangle',
   },
 ];
 
-@customElement("drawable-canvas")
+@customElement('drawable-canvas')
 export class DrawableCanvas extends LitElement {
   static styles = [
     unsafeCSS(v0_8.Styles.structuralStyles),
@@ -138,8 +138,8 @@ export class DrawableCanvas extends LitElement {
         --selected-item-height: var(--bb-grid-size-9);
         --selected-item-hover-color: var(--bb-neutral-50);
         --selected-item-border-radius: var(--bb-grid-size-2);
-        --selected-item-font: 400 var(--bb-label-large) /
-          var(--bb-label-line-height-large) var(--bb-font-family);
+        --selected-item-font: 400 var(--bb-label-large) / var(--bb-label-line-height-large)
+          var(--bb-font-family);
         --selected-item-title-padding: 0 var(--bb-grid-size-2) 0 0;
       }
     `,
@@ -151,7 +151,7 @@ export class DrawableCanvas extends LitElement {
   @state()
   accessor #currentShape: Shape | null = null;
 
-  @query("svg")
+  @query('svg')
   accessor #svg: SVGElement | null = null;
 
   #bounds: DOMRect = new DOMRect();
@@ -160,13 +160,13 @@ export class DrawableCanvas extends LitElement {
   @state()
   set mode(mode: RenderMode) {
     this.#mode = mode;
-    localStorage.setItem("drawable-mode", mode);
+    localStorage.setItem('drawable-mode', mode);
   }
   get mode() {
     return this.#mode;
   }
 
-  #mode: RenderMode = "free";
+  #mode: RenderMode = 'free';
 
   #isDrawing = false;
   #resizeObserver = new ResizeObserver(() => {
@@ -196,8 +196,7 @@ export class DrawableCanvas extends LitElement {
   constructor() {
     super();
 
-    this.#mode =
-      (localStorage.getItem("drawable-mode") as RenderMode) ?? "free";
+    this.#mode = (localStorage.getItem('drawable-mode') as RenderMode) ?? 'free';
   }
 
   connectedCallback(): void {
@@ -220,17 +219,17 @@ export class DrawableCanvas extends LitElement {
     const y = e.offsetY + this.#adjustment.y;
 
     switch (this.#mode) {
-      case "free": {
+      case 'free': {
         this.#currentShape = {
-          type: "free",
+          type: 'free',
           value: `M ${x} ${y}`,
         };
         break;
       }
 
-      case "rect": {
+      case 'rect': {
         this.#currentShape = {
-          type: "rect",
+          type: 'rect',
           value: {
             bx: x,
             by: y,
@@ -243,10 +242,10 @@ export class DrawableCanvas extends LitElement {
         break;
       }
 
-      case "line": {
+      case 'line': {
         this.#currentShape = {
-          type: "line",
-          value: { sx: x, sy: y, dx: 0, dy: 0 },
+          type: 'line',
+          value: {sx: x, sy: y, dx: 0, dy: 0},
         };
         break;
       }
@@ -259,7 +258,7 @@ export class DrawableCanvas extends LitElement {
 
     if (!this.#isDrawing) return;
     switch (this.#mode) {
-      case "free": {
+      case 'free': {
         if (!isPath(this.#currentShape)) {
           break;
         }
@@ -268,7 +267,7 @@ export class DrawableCanvas extends LitElement {
         break;
       }
 
-      case "rect": {
+      case 'rect': {
         if (!isRect(this.#currentShape)) {
           break;
         }
@@ -284,7 +283,7 @@ export class DrawableCanvas extends LitElement {
         break;
       }
 
-      case "line": {
+      case 'line': {
         if (!isLine(this.#currentShape)) {
           break;
         }
@@ -304,7 +303,7 @@ export class DrawableCanvas extends LitElement {
 
     if (isPath(this.#currentShape)) {
       // Adjust paths that were clicks to have a least one pixel.
-      if (!this.#currentShape.value.includes("L")) {
+      if (!this.#currentShape.value.includes('L')) {
         const x = e.offsetX + this.#adjustment.x;
         const y = e.offsetY + this.#adjustment.y;
 
@@ -350,34 +349,33 @@ export class DrawableCanvas extends LitElement {
   render() {
     return html`${svg`
       <svg
-        viewBox="${this.#adjustment.x} ${this.#adjustment.y} ${this.#bounds.width
-      } ${this.#bounds.height}"
+        viewBox="${this.#adjustment.x} ${this.#adjustment.y} ${this.#bounds.width} ${this.#bounds.height}"
         @pointerdown=${this.#startDrawing}
         @pointermove=${this.#draw}
         @pointerup=${this.#stopDrawing}
         @pointerleave=${this.#stopDrawing}
       >
-        ${this.#shapes.map((shape) => this.#renderShape(shape))}
+        ${this.#shapes.map(shape => this.#renderShape(shape))}
         ${this.#renderCurrentPath()}
       </svg>
     `}
       <div id="controls">
         <item-select
           @change=${(e: Event) => {
-        if (!(e.target instanceof ItemSelect)) {
-          return;
-        }
+            if (!(e.target instanceof ItemSelect)) {
+              return;
+            }
 
-        this.mode = e.target.value as RenderMode;
-      }}
+            this.mode = e.target.value as RenderMode;
+          }}
           .values=${values}
           .value=${this.mode}
         ></item-select>
 
         <button
           @click=${() => {
-        this.clear();
-      }}
+            this.clear();
+          }}
         >
           <span class="g-icon filled round">delete</span> Clear
         </button>
@@ -392,12 +390,12 @@ export class DrawableCanvas extends LitElement {
   public async getValue(): Promise<HTMLImageElement> {
     const svgEl = this.#svg;
     if (!svgEl) {
-      throw new Error("SVG element not found.");
+      throw new Error('SVG element not found.');
     }
 
-    const { width, height } = this.getBoundingClientRect();
+    const {width, height} = this.getBoundingClientRect();
     if (width === 0 || height === 0) {
-      throw new Error("Canvas has zero dimensions, cannot generate image.");
+      throw new Error('Canvas has zero dimensions, cannot generate image.');
     }
 
     const adjustedWidth = width * 1.5;
@@ -405,21 +403,21 @@ export class DrawableCanvas extends LitElement {
 
     // Clone the SVG to avoid modifying the original
     const svgClone = svgEl.cloneNode(true) as SVGElement;
-    svgClone.setAttribute("width", `${adjustedWidth}px`);
-    svgClone.setAttribute("height", `${adjustedHeight}px`);
+    svgClone.setAttribute('width', `${adjustedWidth}px`);
+    svgClone.setAttribute('height', `${adjustedHeight}px`);
 
     const svgString = new XMLSerializer().serializeToString(svgClone);
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
 
     if (!ctx) {
-      throw new Error("Could not get 2D canvas context.");
+      throw new Error('Could not get 2D canvas context.');
     }
 
     canvas.width = adjustedWidth;
     canvas.height = adjustedHeight;
 
-    ctx.fillStyle = "#f2f2f2";
+    ctx.fillStyle = '#f2f2f2';
     ctx.fillRect(0, 0, adjustedWidth, adjustedHeight);
 
     return new Promise<HTMLImageElement>((resolve, reject) => {
@@ -429,17 +427,17 @@ export class DrawableCanvas extends LitElement {
         URL.revokeObjectURL(svgImage.src);
 
         const img = new Image();
-        img.src = canvas.toDataURL("image/jpeg", 85);
+        img.src = canvas.toDataURL('image/jpeg', 85);
 
         resolve(img);
       };
-      svgImage.onerror = (err) => {
+      svgImage.onerror = err => {
         URL.revokeObjectURL(svgImage.src);
         reject(new Error(`Failed to load SVG into image: ${err}`));
       };
 
       const svgBlob = new Blob([svgString], {
-        type: "image/svg+xml;charset=utf-8",
+        type: 'image/svg+xml;charset=utf-8',
       });
       svgImage.src = URL.createObjectURL(svgBlob);
     });
diff --git a/tools/editor/ui/item-select.ts b/tools/editor/ui/item-select.ts
index 988817879..6690287dc 100644
--- a/tools/editor/ui/item-select.ts
+++ b/tools/editor/ui/item-select.ts
@@ -14,29 +14,29 @@
  * limitations under the License.
  */
 
-import { LitElement, html, css, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { createRef, ref, Ref } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
-import { EnumValue } from "../types/types";
-import { v0_8 } from "@a2ui/lit";
-
-@customElement("item-select")
+import {LitElement, html, css, nothing, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {createRef, ref, Ref} from 'lit/directives/ref.js';
+import {repeat} from 'lit/directives/repeat.js';
+import {EnumValue} from '../types/types';
+import {v0_8} from '@a2ui/lit';
+
+@customElement('item-select')
 export class ItemSelect extends LitElement {
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor transparent = false;
 
   @property()
   accessor heading: string | null = null;
 
-  @property({ reflect: true, type: String })
-  accessor alignment: "top" | "bottom" = "bottom";
+  @property({reflect: true, type: String})
+  accessor alignment: 'top' | 'bottom' = 'bottom';
 
   @property()
   accessor freezeValue = -1;
 
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor showDownArrow = true;
 
   @property()
@@ -46,7 +46,7 @@ export class ItemSelect extends LitElement {
   set values(values: EnumValue[]) {
     this.#values = values;
     if (this.#value) {
-      this.#selected = this.#values.findIndex((v) => v.id === this.#value);
+      this.#selected = this.#values.findIndex(v => v.id === this.#value);
       if (this.#selected === -1) {
         this.#selected = 0;
       }
@@ -63,22 +63,19 @@ export class ItemSelect extends LitElement {
   @property()
   set value(value: string) {
     this.#value = value;
-    this.#selected = this.#values.findIndex((v) => v.id === value);
+    this.#selected = this.#values.findIndex(v => v.id === value);
     if (this.#selected === -1) {
       // If none selected, find first non-hidden value.
-      this.#selected = this.#values.findIndex((v) => !v.hidden);
+      this.#selected = this.#values.findIndex(v => !v.hidden);
       if (this.#selected === -1) {
-        console.warn(
-          `Couldn't find any non-hidden values in item selector`,
-          this.#values
-        );
+        console.warn(`Couldn't find any non-hidden values in item selector`, this.#values);
         this.#selected = 0;
       }
     }
     this.#highlighted = this.#selected;
   }
   get value() {
-    return this.#values[this.#selected]?.id ?? "";
+    return this.#values[this.#selected]?.id ?? '';
   }
 
   static styles = [
@@ -94,8 +91,8 @@ export class ItemSelect extends LitElement {
         --selected-item-height: var(--bb-grid-size-7);
         --selected-item-hover-color: transparent;
         --selected-item-border-radius: var(--bb-grid-size);
-        --selected-item-font: normal var(--bb-label-medium) /
-          var(--bb-label-line-height-medium) var(--bb-font-family);
+        --selected-item-font: normal var(--bb-label-medium) / var(--bb-label-line-height-medium)
+          var(--bb-font-family);
         --selected-item-title-padding: 0;
         --selected-item-padding-left: var(--bb-grid-size-3);
         --selected-item-padding-right: var(--bb-grid-size-3);
@@ -225,7 +222,8 @@ export class ItemSelect extends LitElement {
         overflow: auto;
         color: var(--n-10);
         border-radius: var(--bb-grid-size-3);
-        box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.05),
+        box-shadow:
+          0px 4px 8px 3px rgba(0, 0, 0, 0.05),
           0px 1px 3px 0 rgba(0, 0, 0, 0.1);
 
         & .heading {
@@ -259,12 +257,12 @@ export class ItemSelect extends LitElement {
         }
       }
 
-      :host([alignment="top"]) #item-selector {
+      :host([alignment='top']) #item-selector {
         top: auto;
         bottom: var(--bottom);
       }
 
-      :host([alignment="bottom"]) #item-selector {
+      :host([alignment='bottom']) #item-selector {
         top: var(--top);
         bottom: auto;
       }
@@ -273,7 +271,7 @@ export class ItemSelect extends LitElement {
 
   #selected = 0;
   #highlighted = 0;
-  #value = "";
+  #value = '';
   #values: EnumValue[] = [];
   #toggleRef: Ref<HTMLButtonElement> = createRef();
   #selectorRef: Ref<HTMLDialogElement> = createRef();
@@ -284,9 +282,7 @@ export class ItemSelect extends LitElement {
       this.#selectorRef.value.close();
     }
 
-    this.dispatchEvent(
-      new Event("change", { bubbles: true, composed: true, cancelable: true })
-    );
+    this.dispatchEvent(new Event('change', {bubbles: true, composed: true, cancelable: true}));
     this.requestUpdate();
   }
 
@@ -307,40 +303,40 @@ export class ItemSelect extends LitElement {
   render() {
     const idx = this.freezeValue !== -1 ? this.freezeValue : this.#selected;
     const renderedValue = this.#values[idx] ?? {
-      title: "No items available",
-      value: "none",
-      icon: "",
+      title: 'No items available',
+      value: 'none',
+      icon: '',
     };
     const classes: Record<string, boolean> = {
       selected: true,
       icon: renderedValue.icon !== undefined,
       round: true,
-      "w-500": true,
-      "sans-flex": true,
+      'w-500': true,
+      'sans-flex': true,
     };
 
     return html`${this.autoActivate
-      ? nothing
-      : html`<button
+        ? nothing
+        : html`<button
             class=${classMap(classes)}
             @click=${() => {
-          if (!this.#selectorRef.value) {
-            return;
-          }
+              if (!this.#selectorRef.value) {
+                return;
+              }
 
-          this.#selectorRef.value.showModal();
-        }}
+              this.#selectorRef.value.showModal();
+            }}
             ${ref(this.#toggleRef)}
           >
             ${renderedValue.icon
-          ? html`<span class="g-icon filled">${renderedValue.icon}</span>`
-          : nothing}
+              ? html`<span class="g-icon filled">${renderedValue.icon}</span>`
+              : nothing}
             ${renderedValue.title
-          ? html`<span class="title">${renderedValue.title}</span>`
-          : nothing}
+              ? html`<span class="title">${renderedValue.title}</span>`
+              : nothing}
             ${this.showDownArrow
-          ? html`<span class="g-icon filled">arrow_drop_down</span>`
-          : nothing}
+              ? html`<span class="g-icon filled">arrow_drop_down</span>`
+              : nothing}
           </button>`}
 
       <dialog
@@ -349,130 +345,120 @@ export class ItemSelect extends LitElement {
         popover
         ${ref(this.#selectorRef)}
         @keydown=${(evt: KeyboardEvent) => {
-        const forwards =
-          evt.key === "ArrowDown" || (evt.key === "Tab" && !evt.shiftKey);
-        const backwards =
-          evt.key === "ArrowUp" || (evt.key === "Tab" && evt.shiftKey);
-        if (backwards && this.#highlighted > 0) {
-          this.#highlighted--;
-          this.requestUpdate();
-        }
+          const forwards = evt.key === 'ArrowDown' || (evt.key === 'Tab' && !evt.shiftKey);
+          const backwards = evt.key === 'ArrowUp' || (evt.key === 'Tab' && evt.shiftKey);
+          if (backwards && this.#highlighted > 0) {
+            this.#highlighted--;
+            this.requestUpdate();
+          }
 
-        if (forwards && this.#highlighted < this.values.length - 1) {
-          this.#highlighted++;
-          this.requestUpdate();
-        }
+          if (forwards && this.#highlighted < this.values.length - 1) {
+            this.#highlighted++;
+            this.requestUpdate();
+          }
 
-        if (evt.key === "Enter") {
-          evt.preventDefault();
-          this.#handleChange();
-        }
-      }}
+          if (evt.key === 'Enter') {
+            evt.preventDefault();
+            this.#handleChange();
+          }
+        }}
         @click=${(evt: PointerEvent) => {
-        const [top] = evt.composedPath();
-        if (top !== this.#selectorRef.value || !this.#selectorRef.value) {
-          return;
-        }
+          const [top] = evt.composedPath();
+          if (top !== this.#selectorRef.value || !this.#selectorRef.value) {
+            return;
+          }
 
-        this.#selectorRef.value.close();
-        this.dispatchEvent(
-          new Event("close", {
-            cancelable: true,
-            bubbles: true,
-            composed: true,
-          })
-        );
-      }}
+          this.#selectorRef.value.close();
+          this.dispatchEvent(
+            new Event('close', {
+              cancelable: true,
+              bubbles: true,
+              composed: true,
+            }),
+          );
+        }}
         @beforetoggle=${(evt: ToggleEvent) => {
-        this.#highlighted = this.#selected;
-        this.requestUpdate();
+          this.#highlighted = this.#selected;
+          this.requestUpdate();
 
-        if (evt.newState === "closed") {
-          return;
-        }
+          if (evt.newState === 'closed') {
+            return;
+          }
 
-        // Position this directly because the relevant CSS properties aren't
-        // available everywhere yet.
-        if (!this.#toggleRef.value) {
-          return;
-        }
+          // Position this directly because the relevant CSS properties aren't
+          // available everywhere yet.
+          if (!this.#toggleRef.value) {
+            return;
+          }
 
-        const bounds = this.#toggleRef.value.getBoundingClientRect();
-        let { left, top, bottom } = bounds;
-        if (left + 296 > window.innerWidth) {
-          left = window.innerWidth - 296;
-        }
+          const bounds = this.#toggleRef.value.getBoundingClientRect();
+          let {left, top, bottom} = bounds;
+          if (left + 296 > window.innerWidth) {
+            left = window.innerWidth - 296;
+          }
 
-        if (top + 420 > window.innerHeight) {
-          top = window.innerHeight - 420;
-        }
+          if (top + 420 > window.innerHeight) {
+            top = window.innerHeight - 420;
+          }
 
-        const adjustment = bounds.height + 8;
-        if (this.alignment === "bottom") {
-          // Adjust to below the button.
-          top += adjustment;
-          this.style.setProperty("--top", `${top}px`);
-        } else {
-          // Adjust so that it's the distance from the viewport bottom.
-          bottom = window.innerHeight - bottom + adjustment;
-          this.style.setProperty("--bottom", `${bottom}px`);
-        }
-        this.style.setProperty("--left", `${left}px`);
-      }}
+          const adjustment = bounds.height + 8;
+          if (this.alignment === 'bottom') {
+            // Adjust to below the button.
+            top += adjustment;
+            this.style.setProperty('--top', `${top}px`);
+          } else {
+            // Adjust so that it's the distance from the viewport bottom.
+            bottom = window.innerHeight - bottom + adjustment;
+            this.style.setProperty('--bottom', `${bottom}px`);
+          }
+          this.style.setProperty('--left', `${left}px`);
+        }}
       >
-        ${this.heading
-        ? html`<h1 class="heading">${this.heading}</h1>`
-        : nothing}
+        ${this.heading ? html`<h1 class="heading">${this.heading}</h1>` : nothing}
         <menu>
           ${repeat(
-          this.#values,
-          (v) => v.id,
-          (value, idx) => {
-            if (value.hidden) {
-              return nothing;
-            }
-
-            const classes: Record<string, boolean> = {
-              double: value.description !== undefined,
-              icon: value.icon !== undefined,
-              tag: value.tag !== undefined,
-              active: idx === this.#highlighted,
-              round: true,
-              "w-500": true,
-              "sans-flex": true,
-            };
-
-            return html`<li>
+            this.#values,
+            v => v.id,
+            (value, idx) => {
+              if (value.hidden) {
+                return nothing;
+              }
+
+              const classes: Record<string, boolean> = {
+                double: value.description !== undefined,
+                icon: value.icon !== undefined,
+                tag: value.tag !== undefined,
+                active: idx === this.#highlighted,
+                round: true,
+                'w-500': true,
+                'sans-flex': true,
+              };
+
+              return html`<li>
                 <button
                   ?autofocus=${idx === this.#highlighted}
                   @pointerover=${() => {
-                this.#highlighted = idx;
-                this.requestUpdate();
-              }}
+                    this.#highlighted = idx;
+                    this.requestUpdate();
+                  }}
                   @pointerdown=${() => {
-                this.#handleChange();
-              }}
+                    this.#handleChange();
+                  }}
                   class=${classMap(classes)}
                 >
-                  ${value.icon
-                ? html`<span class="g-icon filled">${value.icon}</span>`
-                : nothing}
+                  ${value.icon ? html`<span class="g-icon filled">${value.icon}</span>` : nothing}
                   <span>
                     <span class="title">${value.title}</span>
 
                     ${value.description
-                ? html`<span class="description"
-                          >${value.description}</span
-                        >`
-                : nothing}
+                      ? html`<span class="description">${value.description}</span>`
+                      : nothing}
                   </span>
-                  ${value.tag
-                ? html`<span class="i-tag">${value.tag}</span>`
-                : nothing}
+                  ${value.tag ? html`<span class="i-tag">${value.tag}</span>` : nothing}
                 </button>
               </li>`;
-          }
-        )}
+            },
+          )}
         </menu>
       </dialog>`;
   }
diff --git a/tools/editor/ui/snackbar.ts b/tools/editor/ui/snackbar.ts
index 652efe528..3bc1be729 100644
--- a/tools/editor/ui/snackbar.ts
+++ b/tools/editor/ui/snackbar.ts
@@ -14,22 +14,22 @@
  * limitations under the License.
  */
 
-import { LitElement, html, css, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { SnackbarMessage, SnackbarUUID, SnackType } from "../types/types";
-import { repeat } from "lit/directives/repeat.js";
-import { SnackbarActionEvent } from "../events/events";
-import { classMap } from "lit/directives/class-map.js";
-import { v0_8 } from "@a2ui/lit";
+import {LitElement, html, css, nothing, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {SnackbarMessage, SnackbarUUID, SnackType} from '../types/types';
+import {repeat} from 'lit/directives/repeat.js';
+import {SnackbarActionEvent} from '../events/events';
+import {classMap} from 'lit/directives/class-map.js';
+import {v0_8} from '@a2ui/lit';
 
 const DEFAULT_TIMEOUT = 8000;
 
-@customElement("ui-snackbar")
+@customElement('ui-snackbar')
 export class Snackbar extends LitElement {
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor active = false;
 
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor error = false;
 
   @property()
@@ -62,8 +62,7 @@ export class Snackbar extends LitElement {
         z-index: 1800;
         scrollbar-width: none;
         overflow-x: scroll;
-        font: 400 var(--bb-body-medium) / var(--bb-body-line-height-medium)
-          var(--bb-font-family);
+        font: 400 var(--bb-body-medium) / var(--bb-body-line-height-medium) var(--bb-font-family);
       }
 
       :host([active]) {
@@ -110,8 +109,7 @@ export class Snackbar extends LitElement {
         margin-right: var(--bb-grid-size-3);
 
         & button {
-          font: 500 var(--bb-body-medium) / var(--bb-body-line-height-medium)
-            var(--bb-font-family);
+          font: 500 var(--bb-body-medium) / var(--bb-body-line-height-medium) var(--bb-font-family);
           padding: 0;
           background: transparent;
           border: none;
@@ -169,9 +167,7 @@ export class Snackbar extends LitElement {
   ];
 
   show(message: SnackbarMessage, replaceAll = false) {
-    const existingMessage = this.#messages.findIndex(
-      (msg) => msg.id === message.id
-    );
+    const existingMessage = this.#messages.findIndex(msg => msg.id === message.id);
     if (existingMessage === -1) {
       if (replaceAll) {
         this.#messages.length = 0;
@@ -183,13 +179,13 @@ export class Snackbar extends LitElement {
     }
 
     window.clearTimeout(this.#timeout);
-    if (!this.#messages.every((msg) => msg.persistent)) {
+    if (!this.#messages.every(msg => msg.persistent)) {
       this.#timeout = window.setTimeout(() => {
         this.hide();
       }, this.timeout);
     }
 
-    this.error = this.#messages.some((msg) => msg.type === SnackType.ERROR);
+    this.error = this.#messages.some(msg => msg.type === SnackType.ERROR);
     this.active = true;
     this.requestUpdate();
 
@@ -198,7 +194,7 @@ export class Snackbar extends LitElement {
 
   hide(id?: SnackbarUUID) {
     if (id) {
-      const idx = this.#messages.findIndex((msg) => msg.id === id);
+      const idx = this.#messages.findIndex(msg => msg.id === id);
       if (idx !== -1) {
         this.#messages.splice(idx, 1);
       }
@@ -207,7 +203,7 @@ export class Snackbar extends LitElement {
     }
 
     this.active = this.#messages.length !== 0;
-    this.updateComplete.then((avoidedUpdate) => {
+    this.updateComplete.then(avoidedUpdate => {
       if (!avoidedUpdate) {
         return;
       }
@@ -218,81 +214,74 @@ export class Snackbar extends LitElement {
 
   render() {
     let rotate = false;
-    let icon = "";
+    let icon = '';
     for (let i = this.#messages.length - 1; i >= 0; i--) {
-      if (
-        !this.#messages[i].type ||
-        this.#messages[i].type === SnackType.NONE
-      ) {
+      if (!this.#messages[i].type || this.#messages[i].type === SnackType.NONE) {
         continue;
       }
 
       icon = this.#messages[i].type;
       if (this.#messages[i].type === SnackType.PENDING) {
-        icon = "progress_activity";
+        icon = 'progress_activity';
         rotate = true;
       }
       break;
     }
 
     return html` ${icon
-      ? html`<span
+        ? html`<span
             class=${classMap({
-        "g-icon": true,
-        round: true,
-        filled: true,
-        rotate,
-      })}
+              'g-icon': true,
+              round: true,
+              filled: true,
+              rotate,
+            })}
             >${icon}</span
           >`
-      : nothing}
+        : nothing}
       <div id="messages">
         ${repeat(
-        this.#messages,
-        (message) => message.id,
-        (message) => {
-          return html`<div>${message.message}</div>`;
-        }
-      )}
+          this.#messages,
+          message => message.id,
+          message => {
+            return html`<div>${message.message}</div>`;
+          },
+        )}
       </div>
       <div id="actions">
         ${repeat(
-        this.#messages,
-        (message) => message.id,
-        (message) => {
-          if (!message.actions) {
-            return nothing;
-          }
+          this.#messages,
+          message => message.id,
+          message => {
+            if (!message.actions) {
+              return nothing;
+            }
 
-          return html`${repeat(
-            message.actions,
-            (action) => action.value,
-            (action) => {
-              return html`<button
+            return html`${repeat(
+              message.actions,
+              action => action.value,
+              action => {
+                return html`<button
                   @click=${() => {
-                  this.hide();
-                  this.dispatchEvent(
-                    new SnackbarActionEvent(
-                      action.action,
-                      action.value,
-                      action.callback
-                    )
-                  );
-                }}
+                    this.hide();
+                    this.dispatchEvent(
+                      new SnackbarActionEvent(action.action, action.value, action.callback),
+                    );
+                  }}
                 >
                   ${action.title}
                 </button>`;
-            }
-          )}`;
-        }
-      )}
+              },
+            )}`;
+          },
+        )}
       </div>
       <button
         id="close"
         @click=${() => {
-        this.hide();
-        this.dispatchEvent(new SnackbarActionEvent("dismiss"));
-      }}
+          this.hide();
+          this.dispatchEvent(new SnackbarActionEvent('dismiss'));
+        }}
       >
         <span class="g-icon">close</span>
       </button>`;
diff --git a/tools/editor/ui/splitter.ts b/tools/editor/ui/splitter.ts
index 339095c0a..c701eed0c 100644
--- a/tools/editor/ui/splitter.ts
+++ b/tools/editor/ui/splitter.ts
@@ -14,28 +14,28 @@
  * limitations under the License.
  */
 
-import { LitElement, html, css, nothing, PropertyValueMap } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import {LitElement, html, css, nothing, PropertyValueMap} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 export enum Direction {
-  HORIZONTAL = "horizontal",
-  VERTICAL = "vertical",
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
 }
 
-const STORAGE_PREFIX = "ui-split";
+const STORAGE_PREFIX = 'ui-split';
 
-@customElement("ui-splitter")
+@customElement('ui-splitter')
 export class Splitter extends LitElement {
-  @property({ reflect: true, attribute: true })
+  @property({reflect: true, attribute: true})
   accessor direction = Direction.HORIZONTAL;
 
-  @property({ reflect: true, attribute: true })
-  accessor name = "";
+  @property({reflect: true, attribute: true})
+  accessor name = '';
 
-  @property({ reflect: true, attribute: true, type: "number" })
+  @property({reflect: true, attribute: true, type: 'number'})
   accessor minSegmentSizeHorizontal = 325;
 
-  @property({ reflect: true, attribute: true, type: "number" })
+  @property({reflect: true, attribute: true, type: 'number'})
   accessor minSegmentSizeVertical = 200;
 
   @property({
@@ -45,9 +45,7 @@ export class Splitter extends LitElement {
     hasChanged(value) {
       if (!Array.isArray(value) || value.length < 2) {
         console.warn(
-          `A splitter needs two or more sections; ${JSON.stringify(
-            value
-          )} was provided`
+          `A splitter needs two or more sections; ${JSON.stringify(value)} was provided`,
         );
         return false;
       }
@@ -80,39 +78,37 @@ export class Splitter extends LitElement {
       position: relative;
     }
 
-    :host([direction="horizontal"].active) {
+    :host([direction='horizontal'].active) {
       cursor: ew-resize;
     }
 
-    :host([direction="vertical"].active) {
+    :host([direction='vertical'].active) {
       cursor: ns-resize;
     }
 
-    :host([direction="horizontal"]) .drag-handle {
+    :host([direction='horizontal']) .drag-handle {
       cursor: ew-resize;
       width: var(--handle-size);
       translate: calc(var(--handle-size) * -0.5) 0;
     }
 
-    :host([direction="vertical"]) .drag-handle {
+    :host([direction='vertical']) .drag-handle {
       cursor: ns-resize;
       height: var(--handle-size);
       translate: 0 calc(var(--handle-size) * -0.5);
     }
   `;
 
-  #resizeObserver = new ResizeObserver((entries) => {
+  #resizeObserver = new ResizeObserver(entries => {
     if (entries.length === 0) {
       return;
     }
 
     const [entry] = entries;
     if (this.direction === Direction.HORIZONTAL) {
-      this.#minSizeNormalized =
-        this.minSegmentSizeHorizontal / entry.contentRect.width;
+      this.#minSizeNormalized = this.minSegmentSizeHorizontal / entry.contentRect.width;
     } else {
-      this.#minSizeNormalized =
-        this.minSegmentSizeVertical / entry.contentRect.height;
+      this.#minSizeNormalized = this.minSegmentSizeVertical / entry.contentRect.height;
     }
 
     this.#setAndStore();
@@ -134,7 +130,7 @@ export class Splitter extends LitElement {
     if (this.name) {
       globalThis.sessionStorage.setItem(
         `${STORAGE_PREFIX}-${this.name}`,
-        JSON.stringify(this.split)
+        JSON.stringify(this.split),
       );
     }
 
@@ -151,7 +147,7 @@ export class Splitter extends LitElement {
       return;
     }
 
-    const idx = Number.parseInt(handle.dataset.idx || "");
+    const idx = Number.parseInt(handle.dataset.idx || '');
     if (Number.isNaN(idx)) {
       return;
     }
@@ -172,12 +168,12 @@ export class Splitter extends LitElement {
     this.#bounds.width = end.right - start.left;
     this.#bounds.height = end.bottom - start.top;
 
-    this.style.userSelect = "none";
-    this.classList.add("active");
+    this.style.userSelect = 'none';
+    this.classList.add('active');
 
     handle.setPointerCapture(evt.pointerId);
-    window.addEventListener("pointermove", this.#onPointerMoveBound);
-    window.addEventListener("pointerup", this.#onPointerUpBound, {
+    window.addEventListener('pointermove', this.#onPointerMoveBound);
+    window.addEventListener('pointerup', this.#onPointerUpBound, {
       once: true,
     });
   }
@@ -193,22 +189,14 @@ export class Splitter extends LitElement {
     const total = this.split[this.#handleIdx] + this.split[this.#handleIdx + 1];
     switch (this.direction) {
       case Direction.HORIZONTAL: {
-        x = this.#clamp(
-          x,
-          this.#minSizeNormalized,
-          1 - this.#minSizeNormalized
-        );
+        x = this.#clamp(x, this.#minSizeNormalized, 1 - this.#minSizeNormalized);
         this.split[this.#handleIdx] = x * total;
         this.split[this.#handleIdx + 1] = (1 - x) * total;
         break;
       }
 
       case Direction.VERTICAL: {
-        y = this.#clamp(
-          y,
-          this.#minSizeNormalized,
-          1 - this.#minSizeNormalized
-        );
+        y = this.#clamp(y, this.#minSizeNormalized, 1 - this.#minSizeNormalized);
         this.split[this.#handleIdx] = y * total;
         this.split[this.#handleIdx + 1] = (1 - y) * total;
         break;
@@ -220,10 +208,10 @@ export class Splitter extends LitElement {
 
   #onPointerUp() {
     this.#handleIdx = null;
-    this.style.userSelect = "initial";
-    this.classList.remove("active");
+    this.style.userSelect = 'initial';
+    this.classList.remove('active');
 
-    window.removeEventListener("pointermove", this.#onPointerMoveBound);
+    window.removeEventListener('pointermove', this.#onPointerMoveBound);
   }
 
   #clamp(value: number, min: number, max: number) {
@@ -244,9 +232,7 @@ export class Splitter extends LitElement {
       return;
     }
 
-    const split = globalThis.sessionStorage.getItem(
-      `${STORAGE_PREFIX}-${this.name}`
-    );
+    const split = globalThis.sessionStorage.getItem(`${STORAGE_PREFIX}-${this.name}`);
     if (split) {
       const numSplit: number[] = JSON.parse(split) as number[];
       if (Array.isArray(numSplit)) {
@@ -255,12 +241,8 @@ export class Splitter extends LitElement {
             this.split[i] = numSplit[i];
           }
         } else {
-          console.warn(
-            "Stored splitter value differs from configured value - resetting"
-          );
-          globalThis.sessionStorage.removeItem(
-            `${STORAGE_PREFIX}-${this.name}`
-          );
+          console.warn('Stored splitter value differs from configured value - resetting');
+          globalThis.sessionStorage.removeItem(`${STORAGE_PREFIX}-${this.name}`);
         }
       }
     }
@@ -291,20 +273,16 @@ export class Splitter extends LitElement {
     if (amountToBeBorrowed > 0) {
       // Now we go through all the other segments from which we determined that
       // we could borrow. We reduce each one by a fractional amount of the total.
-      const totalBorrowable = borrowable.reduce(
-        (prev, curr) => prev + split[curr],
-        0
-      );
+      const totalBorrowable = borrowable.reduce((prev, curr) => prev + split[curr], 0);
       for (let s = 0; s < borrowable.length; s++) {
-        const proportion =
-          (split[borrowable[s]] / totalBorrowable) * amountToBeBorrowed;
+        const proportion = (split[borrowable[s]] / totalBorrowable) * amountToBeBorrowed;
 
         // Now ensure that the borrowed item never dips below the min size,
         // either. This could result in competition at very small spaces.
         split[borrowable[s]] = this.#clamp(
           this.split[borrowable[s]] - proportion,
           this.#minSizeNormalized,
-          1
+          1,
         );
       }
     }
@@ -319,13 +297,13 @@ export class Splitter extends LitElement {
     const styles = split.map((_, idx) => `var(--slot-${idx})`).join(` 0px `);
     switch (this.direction) {
       case Direction.VERTICAL: {
-        this.style.gridTemplateColumns = "";
+        this.style.gridTemplateColumns = '';
         this.style.gridTemplateRows = styles;
         break;
       }
 
       case Direction.HORIZONTAL: {
-        this.style.gridTemplateRows = "";
+        this.style.gridTemplateRows = '';
         this.style.gridTemplateColumns = styles;
         break;
       }
@@ -338,11 +316,9 @@ export class Splitter extends LitElement {
   }
 
   protected willUpdate(
-    changedProperties:
-      | PropertyValueMap<{ direction: Direction }>
-      | Map<PropertyKey, unknown>
+    changedProperties: PropertyValueMap<{direction: Direction}> | Map<PropertyKey, unknown>,
   ): void {
-    if (!changedProperties.has("direction")) {
+    if (!changedProperties.has('direction')) {
       return;
     }
 
diff --git a/tools/editor/ui/ui.ts b/tools/editor/ui/ui.ts
index f2c21f423..21373525d 100644
--- a/tools/editor/ui/ui.ts
+++ b/tools/editor/ui/ui.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-export { DrawableCanvas } from "./drawable-canvas";
-export { Splitter } from "./splitter";
-export { Snackbar } from "./snackbar";
-export { ItemSelect } from "./item-select";
+export {DrawableCanvas} from './drawable-canvas';
+export {Splitter} from './splitter';
+export {Snackbar} from './snackbar';
+export {ItemSelect} from './item-select';
diff --git a/tools/editor/vite.config.ts b/tools/editor/vite.config.ts
index e9dfb4198..28fe7565e 100644
--- a/tools/editor/vite.config.ts
+++ b/tools/editor/vite.config.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { config } from "dotenv";
-import { UserConfig } from "vite";
-import * as Middleware from "./middleware";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import {config} from 'dotenv';
+import {UserConfig} from 'vite';
+import * as Middleware from './middleware';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -26,25 +26,23 @@ export default async () => {
   config();
 
   const entry: Record<string, string> = {
-    editor: resolve(__dirname, "index.html"),
+    editor: resolve(__dirname, 'index.html'),
   };
 
   return {
     plugins: [
       Middleware.GeminiMiddleware.plugin(),
-      Middleware.ImageFallbackMiddleware.plugin(
-        "public/sample/forest_path.jpg"
-      ),
+      Middleware.ImageFallbackMiddleware.plugin('public/sample/forest_path.jpg'),
     ],
     build: {
       rollupOptions: {
         input: entry,
       },
-      target: "esnext",
+      target: 'esnext',
     },
     define: {},
     resolve: {
-      dedupe: ["lit"],
+      dedupe: ['lit'],
     },
   } satisfies UserConfig;
 };
diff --git a/tools/inspector/events/events.ts b/tools/inspector/events/events.ts
index 2b7811ab9..95ec43396 100644
--- a/tools/inspector/events/events.ts
+++ b/tools/inspector/events/events.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { HTMLTemplateResult } from "lit";
+import {HTMLTemplateResult} from 'lit';
 
 const eventInit = {
   bubbles: true,
@@ -23,13 +23,13 @@ const eventInit = {
 };
 
 export class SnackbarActionEvent extends Event {
-  static eventName = "snackbaraction";
+  static eventName = 'snackbaraction';
 
   constructor(
     public readonly action: string,
     public readonly value?: HTMLTemplateResult | string,
-    public readonly callback?: () => void
+    public readonly callback?: () => void,
   ) {
-    super(SnackbarActionEvent.eventName, { ...eventInit });
+    super(SnackbarActionEvent.eventName, {...eventInit});
   }
 }
diff --git a/tools/inspector/index.html b/tools/inspector/index.html
index 5dd0eff37..8a4ea0b5f 100644
--- a/tools/inspector/index.html
+++ b/tools/inspector/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
  Copyright 2025 Google LLC
 
@@ -146,12 +146,8 @@
         --text-color: #fff;
         --background-light: #f6f7f8;
         --background-dark: #101922;
-        --border-color: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.15)
-        );
-        --elevated-background-light: oklch(
-          from var(--background-light) l c h / calc(alpha * 0.05)
-        );
+        --border-color: oklch(from var(--background-light) l c h / calc(alpha * 0.15));
+        --elevated-background-light: oklch(from var(--background-light) l c h / calc(alpha * 0.05));
         --bb-grid-size: 4px;
         --bb-grid-size-2: calc(var(--bb-grid-size) * 2);
         --bb-grid-size-3: calc(var(--bb-grid-size) * 3);
@@ -176,8 +172,8 @@
 
       html,
       body {
-        --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        --font-family-flex: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        --font-family-flex: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         --font-family-mono: monospace;
 
         background: var(--background-dark);
diff --git a/tools/inspector/inspector.ts b/tools/inspector/inspector.ts
index 95c565b34..d98679f44 100644
--- a/tools/inspector/inspector.ts
+++ b/tools/inspector/inspector.ts
@@ -14,31 +14,26 @@
  * limitations under the License.
  */
 
-import { LitElement, html, css, HTMLTemplateResult, unsafeCSS } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
-import { SignalWatcher } from "@lit-labs/signals";
-import { provide } from "@lit/context";
-import { theme as uiTheme } from "./theme/theme.js";
-import "./ui/ui.js";
-import { classMap } from "lit/directives/class-map.js";
-import { Snackbar } from "./ui/snackbar.js";
-import { ref } from "lit/directives/ref.js";
-import {
-  SnackbarAction,
-  SnackbarMessage,
-  SnackbarUUID,
-  SnackType,
-} from "./types/types.js";
-import { v0_8 } from "@a2ui/lit";
-import * as UI from "@a2ui/lit/ui";
-import { map } from "lit/directives/map.js";
-
-const LAST_ITEM_KEY = "last-item-value";
-
-@customElement("a2ui-layout-inspector")
+import {LitElement, html, css, HTMLTemplateResult, unsafeCSS} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {repeat} from 'lit/directives/repeat.js';
+import {SignalWatcher} from '@lit-labs/signals';
+import {provide} from '@lit/context';
+import {theme as uiTheme} from './theme/theme.js';
+import './ui/ui.js';
+import {classMap} from 'lit/directives/class-map.js';
+import {Snackbar} from './ui/snackbar.js';
+import {ref} from 'lit/directives/ref.js';
+import {SnackbarAction, SnackbarMessage, SnackbarUUID, SnackType} from './types/types.js';
+import {v0_8} from '@a2ui/lit';
+import * as UI from '@a2ui/lit/ui';
+import {map} from 'lit/directives/map.js';
+
+const LAST_ITEM_KEY = 'last-item-value';
+
+@customElement('a2ui-layout-inspector')
 export class A2UILayoutInspector extends SignalWatcher(LitElement) {
-  @provide({ context: UI.Context.themeContext })
+  @provide({context: UI.Context.themeContext})
   accessor theme: v0_8.Types.Theme = uiTheme;
 
   @state()
@@ -129,7 +124,8 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
               color: var(--text-color);
               opacity: 0.5;
               border-bottom: 2px solid var(--border-color);
-              transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1),
+              transition:
+                opacity 0.3s cubic-bezier(0, 0, 0.3, 1),
                 border-color 0.3s cubic-bezier(0, 0, 0.3, 1);
 
               &:not([disabled]):not(.active) {
@@ -246,7 +242,7 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
             font-family: var(--font-family-mono);
           }
 
-          & button[type="submit"] {
+          & button[type='submit'] {
             border-radius: var(--bb-grid-size-2);
             color: var(--text-color);
             background: var(--primary);
@@ -351,8 +347,8 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
               opacity: 0.4;
               border: none;
               transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
-              padding: var(--bb-grid-size-2) var(--bb-grid-size-5)
-                var(--bb-grid-size-2) var(--bb-grid-size-2);
+              padding: var(--bb-grid-size-2) var(--bb-grid-size-5) var(--bb-grid-size-2)
+                var(--bb-grid-size-2);
               color: var(--primary);
 
               & .g-icon {
@@ -412,7 +408,7 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
   constructor() {
     super();
 
-    this.#lastItem = globalThis.localStorage.getItem(LAST_ITEM_KEY) ?? "";
+    this.#lastItem = globalThis.localStorage.getItem(LAST_ITEM_KEY) ?? '';
   }
 
   #processor = v0_8.Data.createSignalA2uiMessageProcessor();
@@ -422,8 +418,7 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
       return html`<section id="surfaces">
         <div id="generating-surfaces">
           <h2 class="typography-w-400 typography-f-s typography-sz-tl">
-            <span class="g-icon filled round rotate">progress_activity</span
-            >Generating your UI
+            <span class="g-icon filled round rotate">progress_activity</span>Generating your UI
           </h2>
           <p class="typography-f-s typography-sz-bl">Working on it...</p>
         </div>
@@ -433,12 +428,10 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
     const renderNoData = () =>
       html`<section id="surfaces">
         <div id="no-surfaces">
-          <h2 class="typography-w-400 typography-f-s typography-sz-tl">
-            No UI Generated Yet
-          </h2>
+          <h2 class="typography-w-400 typography-f-s typography-sz-tl">No UI Generated Yet</h2>
           <p class="typography-f-s typography-sz-bl">
-            Describe your desired UI in the left panel and click 'Generate UI'
-            to see the result here.
+            Describe your desired UI in the left panel and click 'Generate UI' to see the result
+            here.
           </p>
         </div>
       </section>`;
@@ -451,12 +444,12 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
 
     return html`<section id="surfaces">
       ${map(this.#processor.getSurfaces(), ([surfaceId, surface]) => {
-      return html`<a2ui-surface
+        return html`<a2ui-surface
               .surfaceId=${surfaceId}
               .surface=${surface}
               .processor=${this.#processor}
             ></a2-uisurface>`;
-    })}
+      })}
     </section>`;
   }
 
@@ -464,33 +457,33 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
     return html`<textarea
         name="instructions"
         class=${classMap({
-      "typography-w-400": true,
-      "typography-f-s": true,
-      "typography-sz-bl": true,
-    })}
+          'typography-w-400': true,
+          'typography-f-s': true,
+          'typography-sz-bl': true,
+        })}
         @keydown=${(evt: KeyboardEvent) => {
-        if (evt.key !== "Enter" || evt.shiftKey) {
-          return;
-        }
+          if (evt.key !== 'Enter' || evt.shiftKey) {
+            return;
+          }
 
-        if (!(evt.target instanceof HTMLTextAreaElement)) {
-          return;
-        }
+          if (!(evt.target instanceof HTMLTextAreaElement)) {
+            return;
+          }
 
-        evt.preventDefault();
-        const form = evt.target.closest("form")!;
-        form.dispatchEvent(new SubmitEvent("submit", { bubbles: true }));
-      }}
+          evt.preventDefault();
+          const form = evt.target.closest('form')!;
+          form.dispatchEvent(new SubmitEvent('submit', {bubbles: true}));
+        }}
         placeholder="Provide the A2UI payload."
         .value=${this.#lastItem}
       ></textarea>
       <button
         ?disabled=${this.#requesting}
         class=${classMap({
-        "typography-w-500": true,
-        "typography-f-s": true,
-        "typography-sz-bl": true,
-      })}
+          'typography-w-500': true,
+          'typography-f-s': true,
+          'typography-sz-bl': true,
+        })}
         type="submit"
       >
         Generate UI
@@ -498,9 +491,7 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
   }
 
   #renderHeader() {
-    return html`<header
-      class="typography-w-400 typography-f-sf typography-sz-tm"
-    >
+    return html`<header class="typography-w-400 typography-f-sf typography-sz-tm">
       A2UI Inspector
     </header>`;
   }
@@ -508,7 +499,7 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
   #renderMain() {
     return html`<section id="main">
       <ui-splitter
-        direction=${"horizontal"}
+        direction=${'horizontal'}
         name="layout-main"
         split="[0.20, 0.80]"
         .minSegmentSizeHorizontal=${325}
@@ -517,40 +508,36 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
           id="controls-container"
           slot="slot-0"
           @submit=${async (evt: SubmitEvent) => {
-        evt.preventDefault();
-        const formData = new FormData(evt.target as HTMLFormElement);
-        const instructions = formData.get("instructions");
-        if (instructions === null) {
-          return;
-        }
+            evt.preventDefault();
+            const formData = new FormData(evt.target as HTMLFormElement);
+            const instructions = formData.get('instructions');
+            if (instructions === null) {
+              return;
+            }
 
-        try {
-          const instructionsStr = instructions as string;
+            try {
+              const instructionsStr = instructions as string;
 
-          globalThis.localStorage.setItem(LAST_ITEM_KEY, instructionsStr);
-          const messages = JSON.parse(instructionsStr);
+              globalThis.localStorage.setItem(LAST_ITEM_KEY, instructionsStr);
+              const messages = JSON.parse(instructionsStr);
 
-          console.log(messages);
+              console.log(messages);
 
-          this.#processor.clearSurfaces();
-          console.log(this.#processor.getSurfaces().size);
-          this.#processor.processMessages(messages);
-          this.requestUpdate();
-        } catch (err) {
-          console.warn(err);
-          this.snackbar(html`Unable to render UI`, SnackType.ERROR);
-        }
-      }}
+              this.#processor.clearSurfaces();
+              console.log(this.#processor.getSurfaces().size);
+              this.#processor.processMessages(messages);
+              this.requestUpdate();
+            } catch (err) {
+              console.warn(err);
+              this.snackbar(html`Unable to render UI`, SnackType.ERROR);
+            }
+          }}
         >
-          <h2 class="typography-w-400 typography-f-s typography-sz-tl">
-            Enter your A2UI
-          </h2>
+          <h2 class="typography-w-400 typography-f-s typography-sz-tl">Enter your A2UI</h2>
           ${this.#renderInput()}
         </form>
         <div id="surface-container" slot="slot-1">
-          <h2
-            class="typography-w-400 typography-f-s typography-sz-tl layout-sp-bt"
-          >
+          <h2 class="typography-w-400 typography-f-s typography-sz-tl layout-sp-bt">
             Generated UI
           </h2>
           ${this.#renderSurfacesOrMessages()}
@@ -562,19 +549,18 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
   #renderSnackbar() {
     return html`<ui-snackbar
       ${ref((el: Element | undefined) => {
-      if (!el) {
-        this.#snackbar = undefined;
-      }
+        if (!el) {
+          this.#snackbar = undefined;
+        }
 
-      this.#snackbar = el as Snackbar;
-      for (const pendingMessage of this.#pendingSnackbarMessages) {
-        const { message, id, persistent, type, actions } =
-          pendingMessage.message;
-        this.snackbar(message, type, actions, persistent, id);
-      }
+        this.#snackbar = el as Snackbar;
+        for (const pendingMessage of this.#pendingSnackbarMessages) {
+          const {message, id, persistent, type, actions} = pendingMessage.message;
+          this.snackbar(message, type, actions, persistent, id);
+        }
 
-      this.#pendingSnackbarMessages.length = 0;
-    })}
+        this.#pendingSnackbarMessages.length = 0;
+      })}
     ></ui-snackbar>`;
   }
 
@@ -588,7 +574,7 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
     actions: SnackbarAction[] = [],
     persistent = false,
     id = globalThis.crypto.randomUUID(),
-    replaceAll = false
+    replaceAll = false,
   ) {
     if (!this.#snackbar) {
       this.#pendingSnackbarMessages.push({
@@ -612,7 +598,7 @@ export class A2UILayoutInspector extends SignalWatcher(LitElement) {
         persistent,
         actions,
       },
-      replaceAll
+      replaceAll,
     );
   }
 
diff --git a/tools/inspector/middleware/image-fallback.ts b/tools/inspector/middleware/image-fallback.ts
index f2019f37f..576867f6d 100644
--- a/tools/inspector/middleware/image-fallback.ts
+++ b/tools/inspector/middleware/image-fallback.ts
@@ -14,51 +14,48 @@
  * limitations under the License.
  */
 
-import { Plugin, ViteDevServer } from "vite";
-import fs from "fs";
-import path from "path";
+import {Plugin, ViteDevServer} from 'vite';
+import fs from 'fs';
+import path from 'path';
 
-export function plugin(fallbackPath = "public/default-fallback.png"): Plugin {
+export function plugin(fallbackPath = 'public/default-fallback.png'): Plugin {
   return {
-    name: "image-fallback",
-    apply: "serve",
-    enforce: "post",
+    name: 'image-fallback',
+    apply: 'serve',
+    enforce: 'post',
 
     configureServer(server: ViteDevServer) {
       const FALLBACK_FILE = path.resolve(server.config.root, fallbackPath);
       if (!fs.existsSync(FALLBACK_FILE)) {
         console.warn(
-          `[image-fallback] Fallback file not found: ${FALLBACK_FILE}. Plugin disabled.`
+          `[image-fallback] Fallback file not found: ${FALLBACK_FILE}. Plugin disabled.`,
         );
         return;
       }
 
       const fallbackBytes = fs.readFileSync(FALLBACK_FILE);
-      const fallbackMime =
-        path.extname(fallbackPath) === ".png" ? "image/png" : "image/jpeg";
+      const fallbackMime = path.extname(fallbackPath) === '.png' ? 'image/png' : 'image/jpeg';
 
       server.middlewares.use(async (req, res, next) => {
-        const url = req.url ?? "";
+        const url = req.url ?? '';
         // Check if the request looks like an image URL
         const isImageRequest = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i.test(url);
 
         if (isImageRequest) {
           const requestedFilePath = path.resolve(
             server.config.root,
-            "public",
-            url.slice(1).split("?")[0]
+            'public',
+            url.slice(1).split('?')[0],
           );
 
           // Check if the file *does not* exist on disk
-          if (!fs.existsSync(requestedFilePath) && url !== "/") {
-            console.log(
-              `[image-fallback] Non-existent image: ${url}. Serving fallback.`
-            );
+          if (!fs.existsSync(requestedFilePath) && url !== '/') {
+            console.log(`[image-fallback] Non-existent image: ${url}. Serving fallback.`);
 
             // Serve the fallback image bytes
             res.statusCode = 200;
-            res.setHeader("Content-Type", fallbackMime);
-            res.setHeader("Content-Length", fallbackBytes.length);
+            res.setHeader('Content-Type', fallbackMime);
+            res.setHeader('Content-Length', fallbackBytes.length);
             res.end(fallbackBytes);
 
             // Do not call next() as the request is resolved
diff --git a/tools/inspector/middleware/index.ts b/tools/inspector/middleware/index.ts
index 504287ae8..d19a7c3df 100644
--- a/tools/inspector/middleware/index.ts
+++ b/tools/inspector/middleware/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export * as ImageFallbackMiddleware from "./image-fallback.js";
+export * as ImageFallbackMiddleware from './image-fallback.js';
diff --git a/tools/inspector/theme/theme.ts b/tools/inspector/theme/theme.ts
index 13c0315e5..88bc850a5 100644
--- a/tools/inspector/theme/theme.ts
+++ b/tools/inspector/theme/theme.ts
@@ -14,252 +14,252 @@
  * limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
+import {v0_8} from '@a2ui/lit';
 
 /** Elements */
 
 const a = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-as-n": true,
-  "layout-dis-iflx": true,
-  "layout-al-c": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-as-n': true,
+  'layout-dis-iflx': true,
+  'layout-al-c': true,
 };
 
 const audio = {
-  "layout-w-100": true,
+  'layout-w-100': true,
 };
 
 const body = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
-  "typography-sz-bm": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
+  'typography-sz-bm': true,
+  'color-c-n10': true,
 };
 
 const button = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-pt-3": true,
-  "layout-pb-3": true,
-  "layout-pl-5": true,
-  "layout-pr-5": true,
-  "layout-mb-1": true,
-  "border-br-16": true,
-  "border-bw-0": true,
-  "border-c-n70": true,
-  "border-bs-s": true,
-  "color-bgc-s30": true,
-  "color-c-n100": true,
-  "behavior-ho-80": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-pt-3': true,
+  'layout-pb-3': true,
+  'layout-pl-5': true,
+  'layout-pr-5': true,
+  'layout-mb-1': true,
+  'border-br-16': true,
+  'border-bw-0': true,
+  'border-c-n70': true,
+  'border-bs-s': true,
+  'color-bgc-s30': true,
+  'color-c-n100': true,
+  'behavior-ho-80': true,
 };
 
 const heading = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-500": true,
-  "layout-mt-0": true,
-  "layout-mb-2": true,
-  "color-c-n10": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-500': true,
+  'layout-mt-0': true,
+  'layout-mb-2': true,
+  'color-c-n10': true,
 };
 
 const h1 = {
   ...heading,
-  "typography-sz-tl": true,
+  'typography-sz-tl': true,
 };
 
 const h2 = {
   ...heading,
-  "typography-sz-tm": true,
+  'typography-sz-tm': true,
 };
 
 const h3 = {
   ...heading,
-  "typography-sz-ts": true,
+  'typography-sz-ts': true,
 };
 
 const iframe = {
-  "behavior-sw-n": true,
+  'behavior-sw-n': true,
 };
 
 const input = {
-  "typography-f-sf": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-pl-4": true,
-  "layout-pr-4": true,
-  "layout-pt-2": true,
-  "layout-pb-2": true,
-  "border-br-6": true,
-  "border-bw-1": true,
-  "color-bc-s70": true,
-  "border-bs-s": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-sf': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-pl-4': true,
+  'layout-pr-4': true,
+  'layout-pt-2': true,
+  'layout-pb-2': true,
+  'border-br-6': true,
+  'border-bw-1': true,
+  'color-bc-s70': true,
+  'border-bs-s': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const p = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
-  "color-c-n10": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
+  'color-c-n10': true,
 };
 
 const orderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const unorderedList = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const listItem = {
-  "typography-f-s": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "layout-m-0": true,
-  "typography-sz-bm": true,
-  "layout-as-n": true,
+  'typography-f-s': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'layout-m-0': true,
+  'typography-sz-bm': true,
+  'layout-as-n': true,
 };
 
 const pre = {
-  "typography-f-c": true,
-  "typography-fs-n": true,
-  "typography-w-400": true,
-  "typography-sz-bm": true,
-  "typography-ws-p": true,
-  "layout-as-n": true,
+  'typography-f-c': true,
+  'typography-fs-n': true,
+  'typography-w-400': true,
+  'typography-sz-bm': true,
+  'typography-ws-p': true,
+  'layout-as-n': true,
 };
 
 const textarea = {
   ...input,
-  "layout-r-none": true,
-  "layout-fs-c": true,
+  'layout-r-none': true,
+  'layout-fs-c': true,
 };
 
 const video = {
-  "layout-el-cv": true,
+  'layout-el-cv': true,
 };
 
-const aLight = v0_8.Styles.merge(a, { "color-c-n5": true });
-const inputLight = v0_8.Styles.merge(input, { "color-c-n5": true });
-const textareaLight = v0_8.Styles.merge(textarea, { "color-c-n5": true });
-const buttonLight = v0_8.Styles.merge(button, { "color-c-n100": true });
-const h1Light = v0_8.Styles.merge(h1, { "color-c-n5": true });
-const h2Light = v0_8.Styles.merge(h2, { "color-c-n5": true });
-const h3Light = v0_8.Styles.merge(h3, { "color-c-n5": true });
-const bodyLight = v0_8.Styles.merge(body, { "color-c-n5": true });
-const pLight = v0_8.Styles.merge(p, { "color-c-n35": true });
-const preLight = v0_8.Styles.merge(pre, { "color-c-n35": true });
+const aLight = v0_8.Styles.merge(a, {'color-c-n5': true});
+const inputLight = v0_8.Styles.merge(input, {'color-c-n5': true});
+const textareaLight = v0_8.Styles.merge(textarea, {'color-c-n5': true});
+const buttonLight = v0_8.Styles.merge(button, {'color-c-n100': true});
+const h1Light = v0_8.Styles.merge(h1, {'color-c-n5': true});
+const h2Light = v0_8.Styles.merge(h2, {'color-c-n5': true});
+const h3Light = v0_8.Styles.merge(h3, {'color-c-n5': true});
+const bodyLight = v0_8.Styles.merge(body, {'color-c-n5': true});
+const pLight = v0_8.Styles.merge(p, {'color-c-n35': true});
+const preLight = v0_8.Styles.merge(pre, {'color-c-n35': true});
 const orderedListLight = v0_8.Styles.merge(orderedList, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 const unorderedListLight = v0_8.Styles.merge(unorderedList, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 const listItemLight = v0_8.Styles.merge(listItem, {
-  "color-c-n35": true,
+  'color-c-n35': true,
 });
 
 export const theme: v0_8.Types.Theme = {
   additionalStyles: {
     Button: {
-      "--n-35": "var(--n-100)",
+      '--n-35': 'var(--n-100)',
     },
   },
   components: {
     AudioPlayer: {},
     Button: {
-      "layout-pt-2": true,
-      "layout-pb-2": true,
-      "layout-pl-3": true,
-      "layout-pr-3": true,
-      "border-br-12": true,
-      "border-bw-0": true,
-      "border-bs-s": true,
-      "color-bgc-p30": true,
-      "color-c-n100": true,
-      "behavior-ho-70": true,
+      'layout-pt-2': true,
+      'layout-pb-2': true,
+      'layout-pl-3': true,
+      'layout-pr-3': true,
+      'border-br-12': true,
+      'border-bw-0': true,
+      'border-bs-s': true,
+      'color-bgc-p30': true,
+      'color-c-n100': true,
+      'behavior-ho-70': true,
     },
     Card: {
-      "border-br-2": true,
-      "color-bgc-p100": true,
-      "layout-p-4": true,
-      "border-bw-1": true,
-      "border-bs-s": true,
-      "color-bc-p80": true,
+      'border-br-2': true,
+      'color-bgc-p100': true,
+      'layout-p-4': true,
+      'border-bw-1': true,
+      'border-bs-s': true,
+      'color-bc-p80': true,
     },
     CheckBox: {
       element: {
-        "layout-m-0": true,
-        "layout-mr-2": true,
-        "layout-p-2": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'layout-m-0': true,
+        'layout-mr-2': true,
+        'layout-p-2': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
       label: {
-        "color-c-p30": true,
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-flx-1": true,
-        "typography-sz-ll": true,
+        'color-c-p30': true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-flx-1': true,
+        'typography-sz-ll': true,
       },
       container: {
-        "layout-dsp-iflex": true,
-        "layout-al-c": true,
+        'layout-dsp-iflex': true,
+        'layout-al-c': true,
       },
     },
     Column: {
-      "layout-g-2": true,
+      'layout-g-2': true,
     },
     DateTimeInput: {
       container: {},
       label: {},
       element: {
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
     },
     Divider: {},
     Image: {
       all: {
-        "layout-el-cv": true,
-        "layout-w-100": true,
-        "layout-h-100": true,
-        "border-br-5": true,
+        'layout-el-cv': true,
+        'layout-w-100': true,
+        'layout-h-100': true,
+        'border-br-5': true,
       },
       avatar: {},
       header: {},
@@ -269,22 +269,22 @@ export const theme: v0_8.Types.Theme = {
       smallFeature: {},
     },
     Icon: {
-      "color-c-p30": true,
+      'color-c-p30': true,
     },
     List: {
-      "layout-g-4": true,
-      "layout-pt-2": true,
-      "layout-pb-2": true,
+      'layout-g-4': true,
+      'layout-pt-2': true,
+      'layout-pb-2': true,
     },
     Modal: {
-      backdrop: { "color-bbgc-p60_20": true },
+      backdrop: {'color-bbgc-p60_20': true},
       element: {
-        "border-br-2": true,
-        "color-bgc-p100": true,
-        "layout-p-4": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bc-p80": true,
+        'border-br-2': true,
+        'color-bgc-p100': true,
+        'layout-p-4': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bc-p80': true,
       },
     },
     MultipleChoice: {
@@ -293,88 +293,88 @@ export const theme: v0_8.Types.Theme = {
       element: {},
     },
     Row: {
-      "layout-g-4": true,
+      'layout-g-4': true,
     },
     Slider: {
       container: {},
       label: {},
       element: {},
     },
-    Tabs: { container: {}, controls: { all: {}, selected: {} }, element: {} },
+    Tabs: {container: {}, controls: {all: {}, selected: {}}, element: {}},
     Text: {
-      all: { "layout-w-100": true, "layout-g-2": true, "color-c-p30": true },
+      all: {'layout-w-100': true, 'layout-g-2': true, 'color-c-p30': true},
       h1: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-tl": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-tl': true,
       },
       h2: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-tm": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-tm': true,
       },
       h3: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-ts": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-ts': true,
       },
       h4: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-bl": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-bl': true,
       },
       h5: {
-        "typography-f-sf": true,
-        "typography-v-r": true,
-        "typography-w-400": true,
-        "layout-m-0": true,
-        "layout-p-0": true,
-        "typography-sz-bm": true,
+        'typography-f-sf': true,
+        'typography-v-r': true,
+        'typography-w-400': true,
+        'layout-m-0': true,
+        'layout-p-0': true,
+        'typography-sz-bm': true,
       },
       body: {},
       caption: {},
     },
     TextField: {
       container: {
-        "typography-sz-bm": true,
-        "layout-w-100": true,
-        "layout-g-2": true,
-        "layout-dsp-flexhor": true,
-        "layout-al-c": true,
+        'typography-sz-bm': true,
+        'layout-w-100': true,
+        'layout-g-2': true,
+        'layout-dsp-flexhor': true,
+        'layout-al-c': true,
       },
       label: {
-        "layout-flx-0": true,
+        'layout-flx-0': true,
       },
       element: {
-        "typography-sz-bm": true,
-        "layout-pt-2": true,
-        "layout-pb-2": true,
-        "layout-pl-3": true,
-        "layout-pr-3": true,
-        "border-br-12": true,
-        "border-bw-1": true,
-        "border-bs-s": true,
-        "color-bgc-p100": true,
-        "color-bc-p60": true,
-        "color-c-n30": true,
-        "color-c-p30": true,
+        'typography-sz-bm': true,
+        'layout-pt-2': true,
+        'layout-pb-2': true,
+        'layout-pl-3': true,
+        'layout-pr-3': true,
+        'border-br-12': true,
+        'border-bw-1': true,
+        'border-bs-s': true,
+        'color-bgc-p100': true,
+        'color-bc-p60': true,
+        'color-c-n30': true,
+        'color-c-p30': true,
       },
     },
     Video: {
-      "border-br-5": true,
-      "layout-el-cv": true,
+      'border-br-5': true,
+      'layout-el-cv': true,
     },
   },
   elements: {
diff --git a/tools/inspector/types/types.ts b/tools/inspector/types/types.ts
index b00b9cf54..8cc74f62e 100644
--- a/tools/inspector/types/types.ts
+++ b/tools/inspector/types/types.ts
@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { HTMLTemplateResult } from "lit";
+import {HTMLTemplateResult} from 'lit';
 
 export enum SnackType {
-  NONE = "none",
-  INFORMATION = "information",
-  WARNING = "warning",
-  ERROR = "error",
-  PENDING = "pending",
+  NONE = 'none',
+  INFORMATION = 'information',
+  WARNING = 'warning',
+  ERROR = 'error',
+  PENDING = 'pending',
 }
 
 export type SnackbarUUID = ReturnType<typeof globalThis.crypto.randomUUID>;
diff --git a/tools/inspector/ui/snackbar.ts b/tools/inspector/ui/snackbar.ts
index 652efe528..3bc1be729 100644
--- a/tools/inspector/ui/snackbar.ts
+++ b/tools/inspector/ui/snackbar.ts
@@ -14,22 +14,22 @@
  * limitations under the License.
  */
 
-import { LitElement, html, css, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { SnackbarMessage, SnackbarUUID, SnackType } from "../types/types";
-import { repeat } from "lit/directives/repeat.js";
-import { SnackbarActionEvent } from "../events/events";
-import { classMap } from "lit/directives/class-map.js";
-import { v0_8 } from "@a2ui/lit";
+import {LitElement, html, css, nothing, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {SnackbarMessage, SnackbarUUID, SnackType} from '../types/types';
+import {repeat} from 'lit/directives/repeat.js';
+import {SnackbarActionEvent} from '../events/events';
+import {classMap} from 'lit/directives/class-map.js';
+import {v0_8} from '@a2ui/lit';
 
 const DEFAULT_TIMEOUT = 8000;
 
-@customElement("ui-snackbar")
+@customElement('ui-snackbar')
 export class Snackbar extends LitElement {
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor active = false;
 
-  @property({ reflect: true, type: Boolean })
+  @property({reflect: true, type: Boolean})
   accessor error = false;
 
   @property()
@@ -62,8 +62,7 @@ export class Snackbar extends LitElement {
         z-index: 1800;
         scrollbar-width: none;
         overflow-x: scroll;
-        font: 400 var(--bb-body-medium) / var(--bb-body-line-height-medium)
-          var(--bb-font-family);
+        font: 400 var(--bb-body-medium) / var(--bb-body-line-height-medium) var(--bb-font-family);
       }
 
       :host([active]) {
@@ -110,8 +109,7 @@ export class Snackbar extends LitElement {
         margin-right: var(--bb-grid-size-3);
 
         & button {
-          font: 500 var(--bb-body-medium) / var(--bb-body-line-height-medium)
-            var(--bb-font-family);
+          font: 500 var(--bb-body-medium) / var(--bb-body-line-height-medium) var(--bb-font-family);
           padding: 0;
           background: transparent;
           border: none;
@@ -169,9 +167,7 @@ export class Snackbar extends LitElement {
   ];
 
   show(message: SnackbarMessage, replaceAll = false) {
-    const existingMessage = this.#messages.findIndex(
-      (msg) => msg.id === message.id
-    );
+    const existingMessage = this.#messages.findIndex(msg => msg.id === message.id);
     if (existingMessage === -1) {
       if (replaceAll) {
         this.#messages.length = 0;
@@ -183,13 +179,13 @@ export class Snackbar extends LitElement {
     }
 
     window.clearTimeout(this.#timeout);
-    if (!this.#messages.every((msg) => msg.persistent)) {
+    if (!this.#messages.every(msg => msg.persistent)) {
       this.#timeout = window.setTimeout(() => {
         this.hide();
       }, this.timeout);
     }
 
-    this.error = this.#messages.some((msg) => msg.type === SnackType.ERROR);
+    this.error = this.#messages.some(msg => msg.type === SnackType.ERROR);
     this.active = true;
     this.requestUpdate();
 
@@ -198,7 +194,7 @@ export class Snackbar extends LitElement {
 
   hide(id?: SnackbarUUID) {
     if (id) {
-      const idx = this.#messages.findIndex((msg) => msg.id === id);
+      const idx = this.#messages.findIndex(msg => msg.id === id);
       if (idx !== -1) {
         this.#messages.splice(idx, 1);
       }
@@ -207,7 +203,7 @@ export class Snackbar extends LitElement {
     }
 
     this.active = this.#messages.length !== 0;
-    this.updateComplete.then((avoidedUpdate) => {
+    this.updateComplete.then(avoidedUpdate => {
       if (!avoidedUpdate) {
         return;
       }
@@ -218,81 +214,74 @@ export class Snackbar extends LitElement {
 
   render() {
     let rotate = false;
-    let icon = "";
+    let icon = '';
     for (let i = this.#messages.length - 1; i >= 0; i--) {
-      if (
-        !this.#messages[i].type ||
-        this.#messages[i].type === SnackType.NONE
-      ) {
+      if (!this.#messages[i].type || this.#messages[i].type === SnackType.NONE) {
         continue;
       }
 
       icon = this.#messages[i].type;
       if (this.#messages[i].type === SnackType.PENDING) {
-        icon = "progress_activity";
+        icon = 'progress_activity';
         rotate = true;
       }
       break;
     }
 
     return html` ${icon
-      ? html`<span
+        ? html`<span
             class=${classMap({
-        "g-icon": true,
-        round: true,
-        filled: true,
-        rotate,
-      })}
+              'g-icon': true,
+              round: true,
+              filled: true,
+              rotate,
+            })}
             >${icon}</span
           >`
-      : nothing}
+        : nothing}
       <div id="messages">
         ${repeat(
-        this.#messages,
-        (message) => message.id,
-        (message) => {
-          return html`<div>${message.message}</div>`;
-        }
-      )}
+          this.#messages,
+          message => message.id,
+          message => {
+            return html`<div>${message.message}</div>`;
+          },
+        )}
       </div>
       <div id="actions">
         ${repeat(
-        this.#messages,
-        (message) => message.id,
-        (message) => {
-          if (!message.actions) {
-            return nothing;
-          }
+          this.#messages,
+          message => message.id,
+          message => {
+            if (!message.actions) {
+              return nothing;
+            }
 
-          return html`${repeat(
-            message.actions,
-            (action) => action.value,
-            (action) => {
-              return html`<button
+            return html`${repeat(
+              message.actions,
+              action => action.value,
+              action => {
+                return html`<button
                   @click=${() => {
-                  this.hide();
-                  this.dispatchEvent(
-                    new SnackbarActionEvent(
-                      action.action,
-                      action.value,
-                      action.callback
-                    )
-                  );
-                }}
+                    this.hide();
+                    this.dispatchEvent(
+                      new SnackbarActionEvent(action.action, action.value, action.callback),
+                    );
+                  }}
                 >
                   ${action.title}
                 </button>`;
-            }
-          )}`;
-        }
-      )}
+              },
+            )}`;
+          },
+        )}
       </div>
       <button
         id="close"
         @click=${() => {
-        this.hide();
-        this.dispatchEvent(new SnackbarActionEvent("dismiss"));
-      }}
+          this.hide();
+          this.dispatchEvent(new SnackbarActionEvent('dismiss'));
+        }}
       >
         <span class="g-icon">close</span>
       </button>`;
diff --git a/tools/inspector/ui/splitter.ts b/tools/inspector/ui/splitter.ts
index 339095c0a..c701eed0c 100644
--- a/tools/inspector/ui/splitter.ts
+++ b/tools/inspector/ui/splitter.ts
@@ -14,28 +14,28 @@
  * limitations under the License.
  */
 
-import { LitElement, html, css, nothing, PropertyValueMap } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import {LitElement, html, css, nothing, PropertyValueMap} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
 export enum Direction {
-  HORIZONTAL = "horizontal",
-  VERTICAL = "vertical",
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
 }
 
-const STORAGE_PREFIX = "ui-split";
+const STORAGE_PREFIX = 'ui-split';
 
-@customElement("ui-splitter")
+@customElement('ui-splitter')
 export class Splitter extends LitElement {
-  @property({ reflect: true, attribute: true })
+  @property({reflect: true, attribute: true})
   accessor direction = Direction.HORIZONTAL;
 
-  @property({ reflect: true, attribute: true })
-  accessor name = "";
+  @property({reflect: true, attribute: true})
+  accessor name = '';
 
-  @property({ reflect: true, attribute: true, type: "number" })
+  @property({reflect: true, attribute: true, type: 'number'})
   accessor minSegmentSizeHorizontal = 325;
 
-  @property({ reflect: true, attribute: true, type: "number" })
+  @property({reflect: true, attribute: true, type: 'number'})
   accessor minSegmentSizeVertical = 200;
 
   @property({
@@ -45,9 +45,7 @@ export class Splitter extends LitElement {
     hasChanged(value) {
       if (!Array.isArray(value) || value.length < 2) {
         console.warn(
-          `A splitter needs two or more sections; ${JSON.stringify(
-            value
-          )} was provided`
+          `A splitter needs two or more sections; ${JSON.stringify(value)} was provided`,
         );
         return false;
       }
@@ -80,39 +78,37 @@ export class Splitter extends LitElement {
       position: relative;
     }
 
-    :host([direction="horizontal"].active) {
+    :host([direction='horizontal'].active) {
       cursor: ew-resize;
     }
 
-    :host([direction="vertical"].active) {
+    :host([direction='vertical'].active) {
       cursor: ns-resize;
     }
 
-    :host([direction="horizontal"]) .drag-handle {
+    :host([direction='horizontal']) .drag-handle {
       cursor: ew-resize;
       width: var(--handle-size);
       translate: calc(var(--handle-size) * -0.5) 0;
     }
 
-    :host([direction="vertical"]) .drag-handle {
+    :host([direction='vertical']) .drag-handle {
       cursor: ns-resize;
       height: var(--handle-size);
       translate: 0 calc(var(--handle-size) * -0.5);
     }
   `;
 
-  #resizeObserver = new ResizeObserver((entries) => {
+  #resizeObserver = new ResizeObserver(entries => {
     if (entries.length === 0) {
       return;
     }
 
     const [entry] = entries;
     if (this.direction === Direction.HORIZONTAL) {
-      this.#minSizeNormalized =
-        this.minSegmentSizeHorizontal / entry.contentRect.width;
+      this.#minSizeNormalized = this.minSegmentSizeHorizontal / entry.contentRect.width;
     } else {
-      this.#minSizeNormalized =
-        this.minSegmentSizeVertical / entry.contentRect.height;
+      this.#minSizeNormalized = this.minSegmentSizeVertical / entry.contentRect.height;
     }
 
     this.#setAndStore();
@@ -134,7 +130,7 @@ export class Splitter extends LitElement {
     if (this.name) {
       globalThis.sessionStorage.setItem(
         `${STORAGE_PREFIX}-${this.name}`,
-        JSON.stringify(this.split)
+        JSON.stringify(this.split),
       );
     }
 
@@ -151,7 +147,7 @@ export class Splitter extends LitElement {
       return;
     }
 
-    const idx = Number.parseInt(handle.dataset.idx || "");
+    const idx = Number.parseInt(handle.dataset.idx || '');
     if (Number.isNaN(idx)) {
       return;
     }
@@ -172,12 +168,12 @@ export class Splitter extends LitElement {
     this.#bounds.width = end.right - start.left;
     this.#bounds.height = end.bottom - start.top;
 
-    this.style.userSelect = "none";
-    this.classList.add("active");
+    this.style.userSelect = 'none';
+    this.classList.add('active');
 
     handle.setPointerCapture(evt.pointerId);
-    window.addEventListener("pointermove", this.#onPointerMoveBound);
-    window.addEventListener("pointerup", this.#onPointerUpBound, {
+    window.addEventListener('pointermove', this.#onPointerMoveBound);
+    window.addEventListener('pointerup', this.#onPointerUpBound, {
       once: true,
     });
   }
@@ -193,22 +189,14 @@ export class Splitter extends LitElement {
     const total = this.split[this.#handleIdx] + this.split[this.#handleIdx + 1];
     switch (this.direction) {
       case Direction.HORIZONTAL: {
-        x = this.#clamp(
-          x,
-          this.#minSizeNormalized,
-          1 - this.#minSizeNormalized
-        );
+        x = this.#clamp(x, this.#minSizeNormalized, 1 - this.#minSizeNormalized);
         this.split[this.#handleIdx] = x * total;
         this.split[this.#handleIdx + 1] = (1 - x) * total;
         break;
       }
 
       case Direction.VERTICAL: {
-        y = this.#clamp(
-          y,
-          this.#minSizeNormalized,
-          1 - this.#minSizeNormalized
-        );
+        y = this.#clamp(y, this.#minSizeNormalized, 1 - this.#minSizeNormalized);
         this.split[this.#handleIdx] = y * total;
         this.split[this.#handleIdx + 1] = (1 - y) * total;
         break;
@@ -220,10 +208,10 @@ export class Splitter extends LitElement {
 
   #onPointerUp() {
     this.#handleIdx = null;
-    this.style.userSelect = "initial";
-    this.classList.remove("active");
+    this.style.userSelect = 'initial';
+    this.classList.remove('active');
 
-    window.removeEventListener("pointermove", this.#onPointerMoveBound);
+    window.removeEventListener('pointermove', this.#onPointerMoveBound);
   }
 
   #clamp(value: number, min: number, max: number) {
@@ -244,9 +232,7 @@ export class Splitter extends LitElement {
       return;
     }
 
-    const split = globalThis.sessionStorage.getItem(
-      `${STORAGE_PREFIX}-${this.name}`
-    );
+    const split = globalThis.sessionStorage.getItem(`${STORAGE_PREFIX}-${this.name}`);
     if (split) {
       const numSplit: number[] = JSON.parse(split) as number[];
       if (Array.isArray(numSplit)) {
@@ -255,12 +241,8 @@ export class Splitter extends LitElement {
             this.split[i] = numSplit[i];
           }
         } else {
-          console.warn(
-            "Stored splitter value differs from configured value - resetting"
-          );
-          globalThis.sessionStorage.removeItem(
-            `${STORAGE_PREFIX}-${this.name}`
-          );
+          console.warn('Stored splitter value differs from configured value - resetting');
+          globalThis.sessionStorage.removeItem(`${STORAGE_PREFIX}-${this.name}`);
         }
       }
     }
@@ -291,20 +273,16 @@ export class Splitter extends LitElement {
     if (amountToBeBorrowed > 0) {
       // Now we go through all the other segments from which we determined that
       // we could borrow. We reduce each one by a fractional amount of the total.
-      const totalBorrowable = borrowable.reduce(
-        (prev, curr) => prev + split[curr],
-        0
-      );
+      const totalBorrowable = borrowable.reduce((prev, curr) => prev + split[curr], 0);
       for (let s = 0; s < borrowable.length; s++) {
-        const proportion =
-          (split[borrowable[s]] / totalBorrowable) * amountToBeBorrowed;
+        const proportion = (split[borrowable[s]] / totalBorrowable) * amountToBeBorrowed;
 
         // Now ensure that the borrowed item never dips below the min size,
         // either. This could result in competition at very small spaces.
         split[borrowable[s]] = this.#clamp(
           this.split[borrowable[s]] - proportion,
           this.#minSizeNormalized,
-          1
+          1,
         );
       }
     }
@@ -319,13 +297,13 @@ export class Splitter extends LitElement {
     const styles = split.map((_, idx) => `var(--slot-${idx})`).join(` 0px `);
     switch (this.direction) {
       case Direction.VERTICAL: {
-        this.style.gridTemplateColumns = "";
+        this.style.gridTemplateColumns = '';
         this.style.gridTemplateRows = styles;
         break;
       }
 
       case Direction.HORIZONTAL: {
-        this.style.gridTemplateRows = "";
+        this.style.gridTemplateRows = '';
         this.style.gridTemplateColumns = styles;
         break;
       }
@@ -338,11 +316,9 @@ export class Splitter extends LitElement {
   }
 
   protected willUpdate(
-    changedProperties:
-      | PropertyValueMap<{ direction: Direction }>
-      | Map<PropertyKey, unknown>
+    changedProperties: PropertyValueMap<{direction: Direction}> | Map<PropertyKey, unknown>,
   ): void {
-    if (!changedProperties.has("direction")) {
+    if (!changedProperties.has('direction')) {
       return;
     }
 
diff --git a/tools/inspector/ui/ui.ts b/tools/inspector/ui/ui.ts
index eed1447be..f4cf97e35 100644
--- a/tools/inspector/ui/ui.ts
+++ b/tools/inspector/ui/ui.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { Splitter } from "./splitter";
-export { Snackbar } from "./snackbar";
+export {Splitter} from './splitter';
+export {Snackbar} from './snackbar';
diff --git a/tools/inspector/vite.config.ts b/tools/inspector/vite.config.ts
index b73a02228..55c2ddc03 100644
--- a/tools/inspector/vite.config.ts
+++ b/tools/inspector/vite.config.ts
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { config } from "dotenv";
-import { UserConfig } from "vite";
-import * as Middleware from "./middleware";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
+import {config} from 'dotenv';
+import {UserConfig} from 'vite';
+import * as Middleware from './middleware';
+import {dirname, resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -26,24 +26,20 @@ export default async () => {
   config();
 
   const entry: Record<string, string> = {
-    inspector: resolve(__dirname, "index.html"),
+    inspector: resolve(__dirname, 'index.html'),
   };
 
   return {
-    plugins: [
-      Middleware.ImageFallbackMiddleware.plugin(
-        "public/sample/forest_path.jpg"
-      ),
-    ],
+    plugins: [Middleware.ImageFallbackMiddleware.plugin('public/sample/forest_path.jpg')],
     build: {
       rollupOptions: {
         input: entry,
       },
-      target: "esnext",
+      target: 'esnext',
     },
     define: {},
     resolve: {
-      dedupe: ["lit"],
+      dedupe: ['lit'],
     },
   } satisfies UserConfig;
 };