(
Powered by 🪁 CopilotKit
diff --git a/tools/composer/src/components/layout/sidebar-nav.tsx b/tools/composer/src/components/layout/sidebar-nav.tsx
index 90f41d8fa..f6889e424 100644
--- a/tools/composer/src/components/layout/sidebar-nav.tsx
+++ b/tools/composer/src/components/layout/sidebar-nav.tsx
@@ -25,6 +25,7 @@ import {
Shapes,
LucideIcon,
BookOpen,
+ Play,
} from "lucide-react";
import { cn } from "@/lib/utils";
@@ -78,6 +79,7 @@ export function SidebarNav({ onNavigate }: SidebarNavProps) {
const navItems = [
{ icon: SquarePlus, label: "Create", href: "/" },
+ { icon: Play, label: "Dojo", subtitle: "A2UI Playground", href: "/dojo" },
{ icon: LayoutGrid, label: "Gallery", href: "/gallery" },
{ icon: Box, label: "Components", href: "/components" },
{ icon: Shapes, label: "Icons", href: "/icons" },
diff --git a/tools/composer/src/data/dojo/booking-form.json b/tools/composer/src/data/dojo/booking-form.json
new file mode 100644
index 000000000..23d4f8779
--- /dev/null
+++ b/tools/composer/src/data/dojo/booking-form.json
@@ -0,0 +1,271 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "booking-form",
+ "root": "booking-form-column",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "restaurant-image",
+ "restaurant-address",
+ "party-size-field",
+ "datetime-field",
+ "dietary-field",
+ "submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "type": "number"
+ }
+ }
+ },
+ {
+ "id": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "label": {
+ "literalString": "Date & Time"
+ },
+ "value": {
+ "path": "/reservationTime"
+ },
+ "enableDate": true,
+ "enableTime": true
+ }
+ }
+ },
+ {
+ "id": "dietary-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Dietary Requirements"
+ },
+ "text": {
+ "path": "/dietary"
+ }
+ }
+ }
+ },
+ {
+ "id": "submit-button",
+ "component": {
+ "Button": {
+ "child": "submit-reservation-text",
+ "action": {
+ "name": "submit_booking",
+ "context": [
+ {
+ "key": "restaurantName",
+ "value": {
+ "path": "/restaurantName"
+ }
+ },
+ {
+ "key": "partySize",
+ "value": {
+ "path": "/partySize"
+ }
+ },
+ {
+ "key": "reservationTime",
+ "value": {
+ "path": "/reservationTime"
+ }
+ },
+ {
+ "key": "dietary",
+ "value": {
+ "path": "/dietary"
+ }
+ },
+ {
+ "key": "imageUrl",
+ "value": {
+ "path": "/imageUrl"
+ }
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "submit-reservation-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Submit Reservation"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "booking-form",
+ "path": "/",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Book a Table at [RestaurantName]"
+ },
+ {
+ "key": "address",
+ "valueString": "[Restaurant Address]"
+ },
+ {
+ "key": "restaurantName",
+ "valueString": "[RestaurantName]"
+ },
+ {
+ "key": "partySize",
+ "valueString": "2"
+ },
+ {
+ "key": "reservationTime",
+ "valueString": ""
+ },
+ {
+ "key": "dietary",
+ "valueString": ""
+ },
+ {
+ "key": "imageUrl",
+ "valueString": ""
+ }
+ ]
+ }
+ },
+ {
+ "clientEvent": {
+ "name": "updateDataModel",
+ "surfaceId": "booking-form",
+ "path": "/partySize",
+ "valueString": "4"
+ }
+ },
+ {
+ "clientEvent": {
+ "name": "updateDataModel",
+ "surfaceId": "booking-form",
+ "path": "/reservationTime",
+ "valueString": "2026-03-20T19:30:00Z"
+ }
+ },
+ {
+ "clientEvent": {
+ "name": "updateDataModel",
+ "surfaceId": "booking-form",
+ "path": "/dietary",
+ "valueString": "Vegetarian"
+ }
+ },
+ {
+ "action": {
+ "name": "submit_booking",
+ "surfaceId": "booking-form",
+ "sourceComponentId": "submit-button",
+ "timestamp": "2026-03-15T12:00:00Z",
+ "context": {
+ "restaurantName": "[RestaurantName]",
+ "partySize": "4",
+ "reservationTime": "2026-03-20T19:30:00Z",
+ "dietary": "Vegetarian",
+ "imageUrl": ""
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "success-message",
+ "restaurant-image",
+ "restaurant-address"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "success-message",
+ "component": {
+ "Text": {
+ "usageHint": "body1",
+ "text": {
+ "literalString": "✅ Booking Confirmed for 4 people on March 20th!"
+ }
+ }
+ }
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/component-gallery-stream.json b/tools/composer/src/data/dojo/component-gallery-stream.json
new file mode 100644
index 000000000..bdf63ab9c
--- /dev/null
+++ b/tools/composer/src/data/dojo/component-gallery-stream.json
@@ -0,0 +1,127 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "demo-text",
+ "root": "demo-text-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-text",
+ "components": [
+ {
+ "id": "demo-text-root",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Enter some text"
+ },
+ "text": {
+ "path": "galleryData/textField"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-text",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-button",
+ "root": "demo-button-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-button",
+ "components": [
+ {
+ "id": "demo-button-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Trigger Action"
+ }
+ }
+ }
+ },
+ {
+ "id": "demo-button-root",
+ "component": {
+ "Button": {
+ "child": "demo-button-text",
+ "primary": true,
+ "action": {
+ "name": "custom_action",
+ "context": [
+ {
+ "key": "info",
+ "value": {
+ "literalString": "Custom Button Clicked"
+ }
+ }
+ ]
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "response-surface",
+ "root": "response-text"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "response-surface",
+ "components": [
+ {
+ "id": "response-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Interact with the gallery to see responses. This view is updated by the agent by relaying the raw action commands it received from the client"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "response-surface",
+ "components": [
+ {
+ "id": "response-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Agent Processed Action: ACTION: custom_action with {'info': 'Custom Button Clicked'} at 18:01:44"
+ }
+ }
+ }
+ }
+ ]
+ }
+ }
+]
diff --git a/tools/composer/src/data/dojo/contact-card.json b/tools/composer/src/data/dojo/contact-card.json
new file mode 100644
index 000000000..384b2626c
--- /dev/null
+++ b/tools/composer/src/data/dojo/contact-card.json
@@ -0,0 +1,490 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "contact-card",
+ "root": "main_card"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "profile_image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ },
+ "usageHint": "avatar",
+ "fit": "cover"
+ }
+ }
+ },
+ {
+ "id": "user_heading",
+ "weight": 1,
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/name"
+ },
+ "usageHint": "h2"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "calendar_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "calendar_today"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/calendar"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Calendar"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "calendar_primary_text",
+ "calendar_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "location_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "location_on"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/location"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Location"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "location_primary_text",
+ "location_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "mail_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "mail"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/email"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Email"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "mail_primary_text",
+ "mail_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "div",
+ "component": {
+ "Divider": {}
+ }
+ },
+ {
+ "id": "call_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "call"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/mobile"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Mobile"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "call_primary_text",
+ "call_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "call_icon",
+ "call_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "info_row_3",
+ "info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Message"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2",
+ "component": {
+ "Button": {
+ "child": "button_2_text",
+ "primary": false,
+ "action": {
+ "name": "send_message"
+ }
+ }
+ }
+ },
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "link_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "[View Full Profile](/profile)"
+ }
+ }
+ }
+ },
+ {
+ "id": "link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "link_text"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "div",
+ "info_rows_column",
+ "action_buttons_row",
+ "link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "contact-card",
+ "path": "/",
+ "contents": [
+ {
+ "key": "name",
+ "valueString": ""
+ },
+ {
+ "key": "title",
+ "valueString": ""
+ },
+ {
+ "key": "team",
+ "valueString": ""
+ },
+ {
+ "key": "location",
+ "valueString": ""
+ },
+ {
+ "key": "email",
+ "valueString": ""
+ },
+ {
+ "key": "mobile",
+ "valueString": ""
+ },
+ {
+ "key": "calendar",
+ "valueString": ""
+ },
+ {
+ "key": "imageUrl",
+ "valueString": ""
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/contact-list.json b/tools/composer/src/data/dojo/contact-list.json
new file mode 100644
index 000000000..2cf52bede
--- /dev/null
+++ b/tools/composer/src/data/dojo/contact-list.json
@@ -0,0 +1,232 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "contact-list",
+ "root": "root-column",
+ "styles": {
+ "primaryColor": "#007BFF",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-list",
+ "components": [
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "literalString": "Found Contacts"
+ }
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/contacts"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details",
+ "view-button"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ },
+ "fit": "cover"
+ }
+ }
+ },
+ {
+ "id": "card-details",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-title"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-title",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "view-button-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "View"
+ }
+ }
+ }
+ },
+ {
+ "id": "view-button",
+ "component": {
+ "Button": {
+ "child": "view-button-text",
+ "primary": true,
+ "action": {
+ "name": "view_profile",
+ "context": [
+ {
+ "key": "contactName",
+ "value": {
+ "path": "/name"
+ }
+ },
+ {
+ "key": "department",
+ "value": {
+ "path": "/department"
+ }
+ }
+ ]
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "contact-list",
+ "path": "/",
+ "contents": [
+ {
+ "key": "contacts",
+ "valueMap": [
+ {
+ "key": "contact1",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Alice Wonderland"
+ },
+ {
+ "key": "phone",
+ "valueString": "+1-555-123-4567"
+ },
+ {
+ "key": "email",
+ "valueString": "alice@example.com"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "https://example.com/alice.jpg"
+ },
+ {
+ "key": "title",
+ "valueString": "Mad Hatter"
+ },
+ {
+ "key": "department",
+ "valueString": "Wonderland"
+ }
+ ]
+ },
+ {
+ "key": "contact2",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Bob The Builder"
+ },
+ {
+ "key": "phone",
+ "valueString": "+1-555-765-4321"
+ },
+ {
+ "key": "email",
+ "valueString": "bob@example.com"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "https://example.com/bob.jpg"
+ },
+ {
+ "key": "title",
+ "valueString": "Construction"
+ },
+ {
+ "key": "department",
+ "valueString": "Building"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/contact-lookup.json b/tools/composer/src/data/dojo/contact-lookup.json
new file mode 100644
index 000000000..c4483d695
--- /dev/null
+++ b/tools/composer/src/data/dojo/contact-lookup.json
@@ -0,0 +1,545 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "contact-card",
+ "root": "main_card"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "profile_image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ },
+ "usageHint": "avatar",
+ "fit": "cover"
+ }
+ }
+ },
+ {
+ "id": "user_heading",
+ "weight": 1,
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/name"
+ },
+ "usageHint": "h2"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "calendar_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "calendarToday"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/calendar"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Calendar"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "calendar_primary_text",
+ "calendar_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "location_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "locationOn"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/location"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Location"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "location_primary_text",
+ "location_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "mail_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "mail"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/email"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Email"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "mail_primary_text",
+ "mail_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "div",
+ "component": {
+ "Divider": {}
+ }
+ },
+ {
+ "id": "call_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "call"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/mobile"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_secondary_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Mobile"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "call_primary_text",
+ "call_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "call_icon",
+ "call_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "info_row_3",
+ "info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Message"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2",
+ "component": {
+ "Button": {
+ "child": "button_2_text",
+ "primary": false,
+ "action": {
+ "name": "send_message"
+ }
+ }
+ }
+ },
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "link_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "[View Full Profile](/profile)"
+ }
+ }
+ }
+ },
+ {
+ "id": "link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "link_text"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "div",
+ "info_rows_column",
+ "action_buttons_row",
+ "link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "contact-card",
+ "path": "/",
+ "contents": [
+ {
+ "key": "name",
+ "valueString": "Alex Jordan"
+ },
+ {
+ "key": "title",
+ "valueString": "Product Marketing Manager"
+ },
+ {
+ "key": "team",
+ "valueString": "Team Macally"
+ },
+ {
+ "key": "location",
+ "valueString": "New York"
+ },
+ {
+ "key": "email",
+ "valueString": "alex.jordan@example.com"
+ },
+ {
+ "key": "mobile",
+ "valueString": "+1 (415) 171-1080"
+ },
+ {
+ "key": "calendar",
+ "valueString": "Free until 4:00 PM"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "http://localhost:10006/static/profile1.png"
+ }
+ ]
+ }
+ },
+ {
+ "action": {
+ "name": "message_contact",
+ "surfaceId": "contact-card",
+ "sourceComponentId": "btn_msg",
+ "timestamp": "2026-03-15T13:00:00Z",
+ "context": {
+ "email": "alex.jordan@example.com"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "btn_msg_sent",
+ "btn_call",
+ "btn_meet"
+ ]
+ },
+ "justify": "spaceBetween",
+ "align": "center"
+ }
+ }
+ },
+ {
+ "id": "btn_msg_sent",
+ "component": {
+ "Button": {
+ "child": "btn_msg_sent_text",
+ "action": {
+ "name": "message_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "btn_msg_sent_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Message Sent ✓"
+ }
+ }
+ }
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/flight-status.json b/tools/composer/src/data/dojo/flight-status.json
new file mode 100644
index 000000000..d504442e8
--- /dev/null
+++ b/tools/composer/src/data/dojo/flight-status.json
@@ -0,0 +1,170 @@
+[
+ {
+ "createSurface": {
+ "surfaceId": "flight-1",
+ "catalogId": "core-v0.9"
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "flight-1",
+ "components": [
+ {
+ "id": "root",
+ "type": "Card",
+ "props": {
+ "title": "Flight UA 123",
+ "children": ["layout-col"]
+ }
+ },
+ {
+ "id": "layout-col",
+ "type": "Column",
+ "props": {
+ "spacing": "medium",
+ "children": ["status-row", "divider-1", "details-row", "action-btn"]
+ }
+ },
+ {
+ "id": "status-row",
+ "type": "Row",
+ "props": {
+ "align": "spaceBetween",
+ "children": ["dep-info", "arr-info"]
+ }
+ },
+ {
+ "id": "dep-info",
+ "type": "Column",
+ "props": {
+ "children": ["dep-city", "dep-time"]
+ }
+ },
+ {
+ "id": "dep-city",
+ "type": "Text",
+ "props": {
+ "text": "SFO",
+ "variant": "heading",
+ "size": "large",
+ "weight": "bold"
+ }
+ },
+ {
+ "id": "dep-time",
+ "type": "Text",
+ "props": {
+ "text": "10:45 AM"
+ }
+ },
+ {
+ "id": "arr-info",
+ "type": "Column",
+ "props": {
+ "align": "end",
+ "children": ["arr-city", "arr-time"]
+ }
+ },
+ {
+ "id": "arr-city",
+ "type": "Text",
+ "props": {
+ "text": "JFK",
+ "variant": "heading",
+ "size": "large",
+ "weight": "bold"
+ }
+ },
+ {
+ "id": "arr-time",
+ "type": "Text",
+ "props": {
+ "text": "07:15 PM"
+ }
+ },
+ {
+ "id": "divider-1",
+ "type": "Divider",
+ "props": {}
+ },
+ {
+ "id": "details-row",
+ "type": "Row",
+ "props": {
+ "spacing": "large",
+ "children": ["gate-text", "status-text"]
+ }
+ },
+ {
+ "id": "gate-text",
+ "type": "Text",
+ "props": {
+ "text": "Gate: G4"
+ }
+ },
+ {
+ "id": "status-text",
+ "type": "Text",
+ "props": {
+ "text": "On Time",
+ "color": "success",
+ "weight": "bold"
+ }
+ },
+ {
+ "id": "action-btn",
+ "type": "Button",
+ "props": {
+ "label": "Refresh Status",
+ "onClick": {
+ "actionId": "refresh_flight",
+ "parameters": {"flightNumber": "UA123"}
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "action": {
+ "name": "refresh_flight",
+ "surfaceId": "flight-1",
+ "sourceComponentId": "action-btn",
+ "timestamp": "2026-03-15T12:05:00Z",
+ "context": {
+ "flightNumber": "UA123"
+ }
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "flight-1",
+ "components": [
+ {
+ "id": "status-text",
+ "type": "Text",
+ "props": {
+ "text": "Delayed (Weather)",
+ "color": "warning",
+ "weight": "bold"
+ }
+ },
+ {
+ "id": "arr-time",
+ "type": "Text",
+ "props": {
+ "text": "08:30 PM",
+ "color": "warning"
+ }
+ },
+ {
+ "id": "gate-text",
+ "type": "Text",
+ "props": {
+ "text": "Gate: G8"
+ }
+ }
+ ]
+ }
+ }
+]
diff --git a/tools/composer/src/data/dojo/floor-plan.json b/tools/composer/src/data/dojo/floor-plan.json
new file mode 100644
index 000000000..70fbb3219
--- /dev/null
+++ b/tools/composer/src/data/dojo/floor-plan.json
@@ -0,0 +1,83 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "location-surface",
+ "root": "floor-plan-card"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "location-surface",
+ "components": [
+ {
+ "id": "floor-plan-card",
+ "component": {
+ "Card": {
+ "child": "floor-plan-col"
+ }
+ }
+ },
+ {
+ "id": "floor-plan-col",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "floor-plan-title",
+ "floor-plan-comp",
+ "dismiss-fp"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "floor-plan-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "literalString": "Office Floor Plan"
+ }
+ }
+ }
+ },
+ {
+ "id": "floor-plan-comp",
+ "component": {
+ "WebFrame": {
+ "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"
+ ]
+ }
+ }
+ },
+ {
+ "id": "dismiss-fp-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Close Map"
+ }
+ }
+ }
+ },
+ {
+ "id": "dismiss-fp",
+ "component": {
+ "Button": {
+ "child": "dismiss-fp-text",
+ "action": {
+ "name": "close_modal",
+ "context": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/index.ts b/tools/composer/src/data/dojo/index.ts
new file mode 100644
index 000000000..8331d423d
--- /dev/null
+++ b/tools/composer/src/data/dojo/index.ts
@@ -0,0 +1,16 @@
+// Curated v0.8 scenarios — verified working, distinct, showcase-worthy
+import restaurantBooking from './restaurant-booking.json';
+import restaurantList from './restaurant-list.json';
+import contactCard from './contact-card.json';
+import contactList from './contact-list.json';
+import floorPlan from './floor-plan.json';
+
+export const scenarios = {
+ 'restaurant-booking': restaurantBooking,
+ 'restaurant-list': restaurantList,
+ 'contact-card': contactCard,
+ 'contact-list': contactList,
+ 'floor-plan': floorPlan,
+};
+
+export type ScenarioId = keyof typeof scenarios;
diff --git a/tools/composer/src/data/dojo/kitchen-sink.json b/tools/composer/src/data/dojo/kitchen-sink.json
new file mode 100644
index 000000000..8e11a824c
--- /dev/null
+++ b/tools/composer/src/data/dojo/kitchen-sink.json
@@ -0,0 +1,1313 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "demo-text",
+ "root": "demo-text-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-text",
+ "components": [
+ {
+ "id": "demo-text-root",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Enter some text"
+ },
+ "text": {
+ "path": "galleryData/textField"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-text",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-text-regex",
+ "root": "demo-text-regex-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-text-regex",
+ "components": [
+ {
+ "id": "demo-text-regex-root",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Enter exactly 5 digits"
+ },
+ "text": {
+ "path": "galleryData/textFieldRegex"
+ },
+ "validationRegexp": "^\\d{5}$"
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-text-regex",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-checkbox",
+ "root": "demo-checkbox-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-checkbox",
+ "components": [
+ {
+ "id": "demo-checkbox-root",
+ "component": {
+ "CheckBox": {
+ "label": {
+ "literalString": "Toggle me"
+ },
+ "value": {
+ "path": "galleryData/checkbox"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-checkbox",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-slider",
+ "root": "demo-slider-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-slider",
+ "components": [
+ {
+ "id": "demo-slider-root",
+ "component": {
+ "Slider": {
+ "value": {
+ "path": "galleryData/slider"
+ },
+ "minValue": 0,
+ "maxValue": 100
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-slider",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-date",
+ "root": "demo-date-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-date",
+ "components": [
+ {
+ "id": "demo-date-root",
+ "component": {
+ "DateTimeInput": {
+ "value": {
+ "path": "galleryData/date"
+ },
+ "enableDate": true
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-date",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-multichoice",
+ "root": "demo-multichoice-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-multichoice",
+ "components": [
+ {
+ "id": "demo-multichoice-root",
+ "component": {
+ "MultipleChoice": {
+ "selections": {
+ "path": "galleryData/favorites"
+ },
+ "options": [
+ {
+ "label": {
+ "literalString": "Apple"
+ },
+ "value": "A"
+ },
+ {
+ "label": {
+ "literalString": "Banana"
+ },
+ "value": "B"
+ },
+ {
+ "label": {
+ "literalString": "Cherry"
+ },
+ "value": "C"
+ }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-multichoice",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-multichoice-chips",
+ "root": "demo-multichoice-chips-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-multichoice-chips",
+ "components": [
+ {
+ "id": "demo-multichoice-chips-root",
+ "component": {
+ "MultipleChoice": {
+ "selections": {
+ "path": "galleryData/favoritesChips"
+ },
+ "description": "Select tags (Chips)",
+ "variant": "chips",
+ "options": [
+ {
+ "label": {
+ "literalString": "Work"
+ },
+ "value": "work"
+ },
+ {
+ "label": {
+ "literalString": "Home"
+ },
+ "value": "home"
+ },
+ {
+ "label": {
+ "literalString": "Urgent"
+ },
+ "value": "urgent"
+ },
+ {
+ "label": {
+ "literalString": "Later"
+ },
+ "value": "later"
+ }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-multichoice-chips",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-multichoice-filter",
+ "root": "demo-multichoice-filter-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-multichoice-filter",
+ "components": [
+ {
+ "id": "demo-multichoice-filter-root",
+ "component": {
+ "MultipleChoice": {
+ "selections": {
+ "path": "galleryData/favoritesFilter"
+ },
+ "description": "Select countries (Filterable)",
+ "filterable": true,
+ "options": [
+ {
+ "label": {
+ "literalString": "United States"
+ },
+ "value": "US"
+ },
+ {
+ "label": {
+ "literalString": "Canada"
+ },
+ "value": "CA"
+ },
+ {
+ "label": {
+ "literalString": "United Kingdom"
+ },
+ "value": "UK"
+ },
+ {
+ "label": {
+ "literalString": "Australia"
+ },
+ "value": "AU"
+ },
+ {
+ "label": {
+ "literalString": "Germany"
+ },
+ "value": "DE"
+ },
+ {
+ "label": {
+ "literalString": "France"
+ },
+ "value": "FR"
+ },
+ {
+ "label": {
+ "literalString": "Japan"
+ },
+ "value": "JP"
+ }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-multichoice-filter",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-image",
+ "root": "demo-image-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-image",
+ "components": [
+ {
+ "id": "demo-image-root",
+ "component": {
+ "Image": {
+ "url": {
+ "literalString": "http://localhost:10005/assets/a2ui.png"
+ },
+ "usageHint": "mediumFeature"
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-image",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-button",
+ "root": "demo-button-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-button",
+ "components": [
+ {
+ "id": "demo-button-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Trigger Action"
+ }
+ }
+ }
+ },
+ {
+ "id": "demo-button-root",
+ "component": {
+ "Button": {
+ "child": "demo-button-text",
+ "primary": true,
+ "action": {
+ "name": "custom_action",
+ "context": [
+ {
+ "key": "info",
+ "value": {
+ "literalString": "Custom Button Clicked"
+ }
+ }
+ ]
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-tabs",
+ "root": "demo-tabs-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-tabs",
+ "components": [
+ {
+ "id": "tab-1-content",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "First Tab Content"
+ }
+ }
+ }
+ },
+ {
+ "id": "tab-2-content",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Second Tab Content"
+ }
+ }
+ }
+ },
+ {
+ "id": "demo-tabs-root",
+ "component": {
+ "Tabs": {
+ "tabItems": [
+ {
+ "title": {
+ "literalString": "View One"
+ },
+ "child": "tab-1-content"
+ },
+ {
+ "title": {
+ "literalString": "View Two"
+ },
+ "child": "tab-2-content"
+ }
+ ]
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-icon",
+ "root": "icon-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-icon",
+ "components": [
+ {
+ "id": "icon-root",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "icon-1",
+ "icon-2",
+ "icon-3"
+ ]
+ },
+ "distribution": "spaceEvenly",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "icon-1",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "star"
+ }
+ }
+ }
+ },
+ {
+ "id": "icon-2",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "home"
+ }
+ }
+ }
+ },
+ {
+ "id": "icon-3",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "settings"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-divider",
+ "root": "div-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-divider",
+ "components": [
+ {
+ "id": "div-root",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "div-text-1",
+ "div-horiz",
+ "div-text-2"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "div-text-1",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Above Divider"
+ }
+ }
+ }
+ },
+ {
+ "id": "div-horiz",
+ "component": {
+ "Divider": {
+ "axis": "horizontal"
+ }
+ }
+ },
+ {
+ "id": "div-text-2",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Below Divider"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-card",
+ "root": "card-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-card",
+ "components": [
+ {
+ "id": "card-root",
+ "component": {
+ "Card": {
+ "child": "card-text"
+ }
+ }
+ },
+ {
+ "id": "card-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "I am inside a Card"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-video",
+ "root": "demo-video-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-video",
+ "components": [
+ {
+ "id": "demo-video-root",
+ "component": {
+ "Video": {
+ "url": {
+ "literalString": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-video",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-modal",
+ "root": "modal-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-modal",
+ "components": [
+ {
+ "id": "modal-root",
+ "component": {
+ "Modal": {
+ "entryPointChild": "modal-btn",
+ "contentChild": "modal-content"
+ }
+ }
+ },
+ {
+ "id": "modal-btn",
+ "component": {
+ "Button": {
+ "child": "modal-btn-text",
+ "primary": false,
+ "action": {
+ "name": "noop"
+ }
+ }
+ }
+ },
+ {
+ "id": "modal-btn-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Open Modal"
+ }
+ }
+ }
+ },
+ {
+ "id": "modal-content",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "This is the modal content!"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-list",
+ "root": "list-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-list",
+ "components": [
+ {
+ "id": "list-root",
+ "component": {
+ "List": {
+ "children": {
+ "explicitList": [
+ "list-item-1",
+ "list-item-2",
+ "list-item-3"
+ ]
+ },
+ "direction": "vertical",
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "list-item-1",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Item 1"
+ }
+ }
+ }
+ },
+ {
+ "id": "list-item-2",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Item 2"
+ }
+ }
+ }
+ },
+ {
+ "id": "list-item-3",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Item 3"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "demo-audio",
+ "root": "demo-audio-root"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "demo-audio",
+ "components": [
+ {
+ "id": "demo-audio-root",
+ "component": {
+ "AudioPlayer": {
+ "url": {
+ "literalString": "http://localhost:10005/assets/audio.mp3"
+ },
+ "description": {
+ "literalString": "Local Audio Sample"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "demo-audio",
+ "contents": [
+ {
+ "key": "galleryData",
+ "valueMap": [
+ {
+ "key": "textField",
+ "valueString": "Hello World"
+ },
+ {
+ "key": "checkbox",
+ "valueBoolean": false
+ },
+ {
+ "key": "checkboxChecked",
+ "valueBoolean": true
+ },
+ {
+ "key": "slider",
+ "valueNumber": 30
+ },
+ {
+ "key": "date",
+ "valueString": "2025-10-26"
+ },
+ {
+ "key": "favorites",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueString": "A"
+ }
+ ]
+ },
+ {
+ "key": "favoritesChips",
+ "valueMap": []
+ },
+ {
+ "key": "favoritesFilter",
+ "valueMap": []
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "beginRendering": {
+ "surfaceId": "response-surface",
+ "root": "response-text"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "response-surface",
+ "components": [
+ {
+ "id": "response-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Interact with the gallery to see responses. This view is updated by the agent by relaying the raw action commands it received from the client"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "action": {
+ "name": "custom_action",
+ "surfaceId": "demo-buttons",
+ "sourceComponentId": "demo-btn-3",
+ "timestamp": "2026-03-15T12:05:00Z",
+ "context": {
+ "info": "Custom Button Clicked"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "response-surface",
+ "components": [
+ {
+ "id": "response-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Agent Processed Action: ACTION: custom_action with {\"info\": \"Custom Button Clicked\"} at 12:05:00"
+ }
+ }
+ }
+ }
+ ]
+ }
+ }
+]
diff --git a/tools/composer/src/data/dojo/northstar-tour.json b/tools/composer/src/data/dojo/northstar-tour.json
new file mode 100644
index 000000000..1f3a1e2a4
--- /dev/null
+++ b/tools/composer/src/data/dojo/northstar-tour.json
@@ -0,0 +1,304 @@
+[
+ {
+ "createSurface": {
+ "surfaceId": "chat-1",
+ "catalogId": "core-v0.9"
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "chat-1",
+ "components": [
+ {
+ "id": "root",
+ "type": "Column",
+ "props": {
+ "children": ["msg-1"]
+ }
+ },
+ {
+ "id": "msg-1",
+ "type": "Text",
+ "props": {
+ "text": "How can I help you today?",
+ "variant": "body1"
+ }
+ }
+ ]
+ }
+ },
+ {
+ "clientEvent": {
+ "name": "chatMessage",
+ "text": "I need to book a flight to New York and find a good restaurant."
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "chat-1",
+ "components": [
+ {
+ "id": "root",
+ "type": "Column",
+ "props": {
+ "children": ["msg-1", "msg-2"]
+ }
+ },
+ {
+ "id": "msg-2",
+ "type": "Text",
+ "props": {
+ "text": "Sure! I can help with that. Searching for flights to JFK...",
+ "variant": "body1"
+ }
+ }
+ ]
+ }
+ },
+ {
+ "createSurface": {
+ "surfaceId": "flight-selector",
+ "catalogId": "core-v0.9"
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "flight-selector",
+ "components": [
+ {
+ "id": "root",
+ "type": "Card",
+ "props": {
+ "title": "Available Flights to JFK",
+ "children": ["flight-list"]
+ }
+ },
+ {
+ "id": "flight-list",
+ "type": "Column",
+ "props": {
+ "spacing": "small",
+ "children": ["flight-1", "flight-2"]
+ }
+ },
+ {
+ "id": "flight-1",
+ "type": "Row",
+ "props": {
+ "align": "spaceBetween",
+ "children": ["f1-info", "f1-select"]
+ }
+ },
+ {
+ "id": "f1-info",
+ "type": "Text",
+ "props": { "text": "UA 123 - 10:45 AM - $450" }
+ },
+ {
+ "id": "f1-select",
+ "type": "Button",
+ "props": {
+ "label": "Select",
+ "onClick": { "actionId": "select_flight", "parameters": { "id": "UA123" } }
+ }
+ },
+ {
+ "id": "flight-2",
+ "type": "Row",
+ "props": {
+ "align": "spaceBetween",
+ "children": ["f2-info", "f2-select"]
+ }
+ },
+ {
+ "id": "f2-info",
+ "type": "Text",
+ "props": { "text": "DL 456 - 01:20 PM - $520" }
+ },
+ {
+ "id": "f2-select",
+ "type": "Button",
+ "props": {
+ "label": "Select",
+ "onClick": { "actionId": "select_flight", "parameters": { "id": "DL456" } }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "action": {
+ "name": "select_flight",
+ "surfaceId": "flight-selector",
+ "sourceComponentId": "f1-select",
+ "timestamp": "2026-03-15T15:00:00Z",
+ "context": { "id": "UA123" }
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "flight-selector",
+ "components": [
+ {
+ "id": "root",
+ "type": "Card",
+ "props": {
+ "title": "Flight Selected: UA 123",
+ "children": ["selected-info"]
+ }
+ },
+ {
+ "id": "selected-info",
+ "type": "Text",
+ "props": { "text": "Confirmed for 10:45 AM departure. Now searching for restaurants..." }
+ }
+ ]
+ }
+ },
+ {
+ "createSurface": {
+ "surfaceId": "restaurant-list",
+ "catalogId": "core-v0.9"
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "restaurant-list",
+ "components": [
+ {
+ "id": "root",
+ "type": "Card",
+ "props": {
+ "title": "Top Restaurants near JFK",
+ "children": ["r-list"]
+ }
+ },
+ {
+ "id": "r-list",
+ "type": "Column",
+ "props": {
+ "children": ["r1", "r2"]
+ }
+ },
+ {
+ "id": "r1",
+ "type": "Row",
+ "props": {
+ "align": "spaceBetween",
+ "children": ["r1-text", "r1-book"]
+ }
+ },
+ {
+ "id": "r1-text",
+ "type": "Text",
+ "props": { "text": "Carbone - Italian - ★★★★★" }
+ },
+ {
+ "id": "r1-book",
+ "type": "Button",
+ "props": {
+ "label": "Book",
+ "onClick": { "actionId": "book_restaurant", "parameters": { "name": "Carbone" } }
+ }
+ },
+ {
+ "id": "r2",
+ "type": "Row",
+ "props": {
+ "align": "spaceBetween",
+ "children": ["r2-text", "r2-book"]
+ }
+ },
+ {
+ "id": "r2-text",
+ "type": "Text",
+ "props": { "text": "TWA Constellation - American - ★★★★☆" }
+ },
+ {
+ "id": "r2-book",
+ "type": "Button",
+ "props": {
+ "label": "Book",
+ "onClick": { "actionId": "book_restaurant", "parameters": { "name": "TWA Constellation" } }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "action": {
+ "name": "book_restaurant",
+ "surfaceId": "restaurant-list",
+ "sourceComponentId": "r1-book",
+ "timestamp": "2026-03-15T15:05:00Z",
+ "context": { "name": "Carbone" }
+ }
+ },
+ {
+ "createSurface": {
+ "surfaceId": "booking-form",
+ "catalogId": "core-v0.9"
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "root",
+ "type": "Column",
+ "props": {
+ "children": ["b-title", "b-party", "b-submit"]
+ }
+ },
+ {
+ "id": "b-title",
+ "type": "Text",
+ "props": { "text": "Book at Carbone", "variant": "h3" }
+ },
+ {
+ "id": "b-party",
+ "type": "TextField",
+ "props": { "label": "Party Size", "value": "2" }
+ },
+ {
+ "id": "b-submit",
+ "type": "Button",
+ "props": {
+ "label": "Confirm Booking",
+ "onClick": { "actionId": "submit_booking" }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "clientEvent": {
+ "name": "updateDataModel",
+ "surfaceId": "booking-form",
+ "path": "/b-party",
+ "valueString": "4"
+ }
+ },
+ {
+ "action": {
+ "name": "submit_booking",
+ "surfaceId": "booking-form",
+ "sourceComponentId": "b-submit",
+ "timestamp": "2026-03-15T15:10:00Z",
+ "context": { "partySize": "4" }
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "root",
+ "type": "Text",
+ "props": { "text": "✅ All set! UA 123 booked and Carbone reserved for 4.", "color": "success" }
+ }
+ ]
+ }
+ }
+]
diff --git a/tools/composer/src/data/dojo/org-chart.json b/tools/composer/src/data/dojo/org-chart.json
new file mode 100644
index 000000000..bc3c7f5fe
--- /dev/null
+++ b/tools/composer/src/data/dojo/org-chart.json
@@ -0,0 +1,118 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "org-chart-view",
+ "root": "main-column"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "org-chart-view",
+ "components": [
+ {
+ "id": "main-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title",
+ "org-chart"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "literalString": "Organizational Chart"
+ }
+ }
+ }
+ },
+ {
+ "id": "org-chart",
+ "component": {
+ "OrgChart": {
+ "chain": {
+ "path": "/hierarchy"
+ },
+ "action": {
+ "name": "chart_node_click",
+ "context": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "org-chart-view",
+ "path": "/",
+ "contents": [
+ {
+ "key": "hierarchy",
+ "valueMap": [
+ {
+ "key": "0",
+ "valueMap": [
+ {
+ "key": "title",
+ "valueString": "CEO"
+ },
+ {
+ "key": "name",
+ "valueString": "Jane Doe"
+ }
+ ]
+ },
+ {
+ "key": "1",
+ "valueMap": [
+ {
+ "key": "title",
+ "valueString": "VP Marketing"
+ },
+ {
+ "key": "name",
+ "valueString": "John Smith"
+ }
+ ]
+ },
+ {
+ "key": "2",
+ "valueMap": [
+ {
+ "key": "title",
+ "valueString": "Director"
+ },
+ {
+ "key": "name",
+ "valueString": "Alice Johnson"
+ }
+ ]
+ },
+ {
+ "key": "3",
+ "valueMap": [
+ {
+ "key": "title",
+ "valueString": "Digital Marketing Specialist"
+ },
+ {
+ "key": "name",
+ "valueString": "Casey Smith"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/restaurant-booking.json b/tools/composer/src/data/dojo/restaurant-booking.json
new file mode 100644
index 000000000..15cacd90a
--- /dev/null
+++ b/tools/composer/src/data/dojo/restaurant-booking.json
@@ -0,0 +1,327 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "booking-form",
+ "root": "booking-form-column",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "restaurant-image",
+ "restaurant-address",
+ "party-size-field",
+ "datetime-field",
+ "dietary-field",
+ "submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "type": "number"
+ }
+ }
+ },
+ {
+ "id": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "label": {
+ "literalString": "Date & Time"
+ },
+ "value": {
+ "path": "/reservationTime"
+ },
+ "enableDate": true,
+ "enableTime": true
+ }
+ }
+ },
+ {
+ "id": "dietary-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Dietary Requirements"
+ },
+ "text": {
+ "path": "/dietary"
+ }
+ }
+ }
+ },
+ {
+ "id": "submit-button",
+ "component": {
+ "Button": {
+ "child": "submit-reservation-text",
+ "action": {
+ "name": "submit_booking",
+ "context": [
+ {
+ "key": "restaurantName",
+ "value": {
+ "path": "/restaurantName"
+ }
+ },
+ {
+ "key": "partySize",
+ "value": {
+ "path": "/partySize"
+ }
+ },
+ {
+ "key": "reservationTime",
+ "value": {
+ "path": "/reservationTime"
+ }
+ },
+ {
+ "key": "dietary",
+ "value": {
+ "path": "/dietary"
+ }
+ },
+ {
+ "key": "imageUrl",
+ "value": {
+ "path": "/imageUrl"
+ }
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "submit-reservation-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Submit Reservation"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "booking-form",
+ "path": "/",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Book a Table at Szechuan Garden"
+ },
+ {
+ "key": "address",
+ "valueString": "456 Main Street, New York, NY 10001"
+ },
+ {
+ "key": "restaurantName",
+ "valueString": "Szechuan Garden"
+ },
+ {
+ "key": "partySize",
+ "valueString": "4"
+ },
+ {
+ "key": "reservationTime",
+ "valueString": ""
+ },
+ {
+ "key": "dietary",
+ "valueString": ""
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600"
+ }
+ ]
+ }
+ },
+ {
+ "clientEvent": {
+ "surfaceId": "booking-form",
+ "name": "userAction",
+ "sourceComponentId": "submit-button",
+ "timestamp": "2026-03-16T14:30:00Z",
+ "context": {
+ "action": "book_restaurant",
+ "restaurantName": "Szechuan Garden",
+ "partySize": "4",
+ "reservationTime": "2026-03-20T19:00:00",
+ "dietary": "No shellfish"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-icon",
+ "confirm-title",
+ "confirm-details",
+ "confirm-divider",
+ "confirm-summary",
+ "done-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-icon",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "literalString": "\u2705"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/confirmTitle"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-details",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/confirmDetails"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-divider",
+ "component": {
+ "Divider": {}
+ }
+ },
+ {
+ "id": "confirm-summary",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/confirmSummary"
+ }
+ }
+ }
+ },
+ {
+ "id": "done-button",
+ "component": {
+ "Button": {
+ "child": "done-button-text",
+ "action": {
+ "name": "dismiss"
+ }
+ }
+ }
+ },
+ {
+ "id": "done-button-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Done"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "booking-form",
+ "path": "/",
+ "contents": [
+ {
+ "key": "confirmTitle",
+ "valueString": "Reservation Confirmed!"
+ },
+ {
+ "key": "confirmDetails",
+ "valueString": "Szechuan Garden \u2014 4 guests \u2014 Mar 20, 7:00 PM"
+ },
+ {
+ "key": "confirmSummary",
+ "valueString": "Dietary note: No shellfish. Confirmation #SZG-4821 sent to your email."
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/restaurant-confirmation.json b/tools/composer/src/data/dojo/restaurant-confirmation.json
new file mode 100644
index 000000000..4d2693be4
--- /dev/null
+++ b/tools/composer/src/data/dojo/restaurant-confirmation.json
@@ -0,0 +1,133 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "confirmation",
+ "root": "confirmation-card",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "confirm-image",
+ "confirm-details",
+ "confirm-dietary",
+ "divider1",
+ "confirm-text",
+ "divider2"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-details",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/bookingDetails"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-dietary",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/dietaryRequirements"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "literalString": "We look forward to seeing you!"
+ }
+ }
+ }
+ },
+ {
+ "id": "divider1",
+ "component": {
+ "Divider": {}
+ }
+ },
+ {
+ "id": "divider2",
+ "component": {
+ "Divider": {}
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "confirmation",
+ "path": "/",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Booking at [RestaurantName]"
+ },
+ {
+ "key": "bookingDetails",
+ "valueString": "[PartySize] people at [Time]"
+ },
+ {
+ "key": "dietaryRequirements",
+ "valueString": "Dietary Requirements: [Requirements]"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "[ImageUrl]"
+ }
+ ]
+ }
+ }
+]
diff --git a/tools/composer/src/data/dojo/restaurant-finder.json b/tools/composer/src/data/dojo/restaurant-finder.json
new file mode 100644
index 000000000..2a378af8f
--- /dev/null
+++ b/tools/composer/src/data/dojo/restaurant-finder.json
@@ -0,0 +1,445 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "default",
+ "root": "root",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "root",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-rating",
+ "template-detail",
+ "template-link",
+ "template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-detail",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-link",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/infoLink"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-book-button",
+ "component": {
+ "Button": {
+ "child": "book-now-text",
+ "primary": true,
+ "action": {
+ "name": "book_restaurant",
+ "context": [
+ {
+ "key": "restaurantName",
+ "value": {
+ "path": "/name"
+ }
+ },
+ {
+ "key": "imageUrl",
+ "value": {
+ "path": "/imageUrl"
+ }
+ },
+ {
+ "key": "address",
+ "value": {
+ "path": "/address"
+ }
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "book-now-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Book Now"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "path": "/",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Szechuan Restaurants in New York"
+ },
+ {
+ "key": "items",
+ "valueMap": [
+ {
+ "key": "item1",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Xi'an Famous Foods"
+ },
+ {
+ "key": "rating",
+ "valueString": "\u2605\u2605\u2605\u2605\u2606"
+ },
+ {
+ "key": "detail",
+ "valueString": "Spicy and savory hand-pulled noodles."
+ },
+ {
+ "key": "infoLink",
+ "valueString": "[More Info](https://www.xianfoods.com/)"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "http://localhost:10007/static/shrimpchowmein.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "81 St Marks Pl, New York, NY 10003"
+ }
+ ]
+ },
+ {
+ "key": "item2",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Han Dynasty"
+ },
+ {
+ "key": "rating",
+ "valueString": "\u2605\u2605\u2605\u2605\u2606"
+ },
+ {
+ "key": "detail",
+ "valueString": "Authentic Szechuan cuisine."
+ },
+ {
+ "key": "infoLink",
+ "valueString": "[More Info](https://www.handynasty.net/)"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "http://localhost:10007/static/mapotofu.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "90 3rd Ave, New York, NY 10003"
+ }
+ ]
+ },
+ {
+ "key": "item3",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "RedFarm"
+ },
+ {
+ "key": "rating",
+ "valueString": "\u2605\u2605\u2605\u2605\u2606"
+ },
+ {
+ "key": "detail",
+ "valueString": "Modern Chinese with a farm-to-table approach."
+ },
+ {
+ "key": "infoLink",
+ "valueString": "[More Info](https://www.redfarmnyc.com/)"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "http://localhost:10007/static/beefbroccoli.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "529 Hudson St, New York, NY 10014"
+ }
+ ]
+ },
+ {
+ "key": "item4",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Mott 32"
+ },
+ {
+ "key": "rating",
+ "valueString": "\u2605\u2605\u2605\u2605\u2605"
+ },
+ {
+ "key": "detail",
+ "valueString": "Upscale Cantonese dining."
+ },
+ {
+ "key": "infoLink",
+ "valueString": "[More Info](https://mott32.com/newyork/)"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "http://localhost:10007/static/springrolls.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "111 W 57th St, New York, NY 10019"
+ }
+ ]
+ },
+ {
+ "key": "item5",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Hwa Yuan Szechuan"
+ },
+ {
+ "key": "rating",
+ "valueString": "\u2605\u2605\u2605\u2605\u2606"
+ },
+ {
+ "key": "detail",
+ "valueString": "Famous for its cold noodles with sesame sauce."
+ },
+ {
+ "key": "infoLink",
+ "valueString": "[More Info](https://hwayuannyc.com/)"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "http://localhost:10007/static/kungpao.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "40 E Broadway, New York, NY 10002"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "clientEvent": {
+ "name": "updateDataModel",
+ "surfaceId": "restaurant-list",
+ "path": "/cuisine",
+ "valueString": "Italian"
+ }
+ },
+ {
+ "action": {
+ "name": "search_restaurants",
+ "surfaceId": "restaurant-list",
+ "sourceComponentId": "search_button",
+ "timestamp": "2026-03-15T14:00:00Z",
+ "context": {
+ "location": "New York, NY",
+ "cuisine": "Italian",
+ "distance": "5"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "restaurant-list",
+ "components": [
+ {
+ "id": "result_0_name",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "literalString": "Carbone"
+ }
+ }
+ }
+ },
+ {
+ "id": "result_0_rating",
+ "component": {
+ "Text": {
+ "usageHint": "body1",
+ "text": {
+ "literalString": "★★★★★"
+ }
+ }
+ }
+ },
+ {
+ "id": "result_0_detail",
+ "component": {
+ "Text": {
+ "usageHint": "body2",
+ "text": {
+ "literalString": "Classic Italian-American dining."
+ }
+ }
+ }
+ },
+ {
+ "id": "result_1_name",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "literalString": "L'Artusi"
+ }
+ }
+ }
+ },
+ {
+ "id": "result_1_rating",
+ "component": {
+ "Text": {
+ "usageHint": "body1",
+ "text": {
+ "literalString": "★★★★☆"
+ }
+ }
+ }
+ },
+ {
+ "id": "result_1_detail",
+ "component": {
+ "Text": {
+ "usageHint": "body2",
+ "text": {
+ "literalString": "Modern Italian dishes & an extensive wine list."
+ }
+ }
+ }
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/restaurant-grid.json b/tools/composer/src/data/dojo/restaurant-grid.json
new file mode 100644
index 000000000..25cae4845
--- /dev/null
+++ b/tools/composer/src/data/dojo/restaurant-grid.json
@@ -0,0 +1,393 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "default",
+ "root": "root-column",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "restaurant-row-1"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-row-1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "item-card-1",
+ "item-card-2"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-1",
+ "weight": 1,
+ "component": {
+ "Card": {
+ "child": "card-layout-1"
+ }
+ }
+ },
+ {
+ "id": "card-layout-1",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-image-1",
+ "card-details-1"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image-1",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/items/0/imageUrl"
+ },
+ "width": "100%"
+ }
+ }
+ },
+ {
+ "id": "card-details-1",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name-1",
+ "template-rating-1",
+ "template-detail-1",
+ "template-link-1",
+ "template-book-button-1"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name-1",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/items/0/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating-1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/items/0/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-detail-1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/items/0/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-link-1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/items/0/infoLink"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-book-button-1",
+ "component": {
+ "Button": {
+ "child": "book-now-text-1",
+ "action": {
+ "name": "book_restaurant",
+ "context": [
+ {
+ "key": "restaurantName",
+ "value": {
+ "path": "/items/0/name"
+ }
+ },
+ {
+ "key": "imageUrl",
+ "value": {
+ "path": "/items/0/imageUrl"
+ }
+ },
+ {
+ "key": "address",
+ "value": {
+ "path": "/items/0/address"
+ }
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "book-now-text-1",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Book Now"
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-2",
+ "weight": 1,
+ "component": {
+ "Card": {
+ "child": "card-layout-2"
+ }
+ }
+ },
+ {
+ "id": "card-layout-2",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-image-2",
+ "card-details-2"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image-2",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/items/1/imageUrl"
+ },
+ "width": "100%"
+ }
+ }
+ },
+ {
+ "id": "card-details-2",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name-2",
+ "template-rating-2",
+ "template-detail-2",
+ "template-link-2",
+ "template-book-button-2"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name-2",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/items/1/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating-2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/items/1/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-detail-2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/items/1/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-link-2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/items/1/infoLink"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-book-button-2",
+ "component": {
+ "Button": {
+ "child": "book-now-text-2",
+ "action": {
+ "name": "book_restaurant",
+ "context": [
+ {
+ "key": "restaurantName",
+ "value": {
+ "path": "/items/1/name"
+ }
+ },
+ {
+ "key": "imageUrl",
+ "value": {
+ "path": "/items/1/imageUrl"
+ }
+ },
+ {
+ "key": "address",
+ "value": {
+ "path": "/items/1/address"
+ }
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "book-now-text-2",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Book Now"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "path": "/",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Top Restaurants"
+ },
+ {
+ "key": "items",
+ "valueMap": [
+ {
+ "key": "item1",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "The Fancy Place"
+ },
+ {
+ "key": "rating",
+ "valueNumber": 4.8
+ },
+ {
+ "key": "detail",
+ "valueString": "Fine dining experience"
+ },
+ {
+ "key": "infoLink",
+ "valueString": "https://example.com/fancy"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "https://example.com/fancy.jpg"
+ },
+ {
+ "key": "address",
+ "valueString": "123 Main St"
+ }
+ ]
+ },
+ {
+ "key": "item2",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Quick Bites"
+ },
+ {
+ "key": "rating",
+ "valueNumber": 4.2
+ },
+ {
+ "key": "detail",
+ "valueString": "Casual and fast"
+ },
+ {
+ "key": "infoLink",
+ "valueString": "https://example.com/quick"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "https://example.com/quick.jpg"
+ },
+ {
+ "key": "address",
+ "valueString": "456 Oak Ave"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/restaurant-list.json b/tools/composer/src/data/dojo/restaurant-list.json
new file mode 100644
index 000000000..a9d0f272d
--- /dev/null
+++ b/tools/composer/src/data/dojo/restaurant-list.json
@@ -0,0 +1,260 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "default",
+ "root": "root-column",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-rating",
+ "template-detail",
+ "template-link",
+ "template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-detail",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-link",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/infoLink"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-book-button",
+ "component": {
+ "Button": {
+ "child": "book-now-text",
+ "primary": true,
+ "action": {
+ "name": "book_restaurant",
+ "context": [
+ {
+ "key": "restaurantName",
+ "value": {
+ "path": "/name"
+ }
+ },
+ {
+ "key": "imageUrl",
+ "value": {
+ "path": "/imageUrl"
+ }
+ },
+ {
+ "key": "address",
+ "value": {
+ "path": "/address"
+ }
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "book-now-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Book Now"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "path": "/",
+ "contents": [
+ {
+ "key": "items",
+ "valueMap": [
+ {
+ "key": "item1",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "The Fancy Place"
+ },
+ {
+ "key": "rating",
+ "valueNumber": 4.8
+ },
+ {
+ "key": "detail",
+ "valueString": "Fine dining experience"
+ },
+ {
+ "key": "infoLink",
+ "valueString": "https://example.com/fancy"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "https://example.com/fancy.jpg"
+ },
+ {
+ "key": "address",
+ "valueString": "123 Main St"
+ }
+ ]
+ },
+ {
+ "key": "item2",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Quick Bites"
+ },
+ {
+ "key": "rating",
+ "valueNumber": 4.2
+ },
+ {
+ "key": "detail",
+ "valueString": "Casual and fast"
+ },
+ {
+ "key": "infoLink",
+ "valueString": "https://example.com/quick"
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "https://example.com/quick.jpg"
+ },
+ {
+ "key": "address",
+ "valueString": "456 Oak Ave"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/dojo/rizzcharts-chart.json b/tools/composer/src/data/dojo/rizzcharts-chart.json
new file mode 100644
index 000000000..c7e105461
--- /dev/null
+++ b/tools/composer/src/data/dojo/rizzcharts-chart.json
@@ -0,0 +1,117 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "sales-dashboard",
+ "root": "root-column",
+ "styles": {
+ "primaryColor": "#00BFFF",
+ "font": "Arial"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "sales-dashboard",
+ "components": [
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "chart-title",
+ "category-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "chart-title",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "chart.title"
+ },
+ "usageHint": "h2"
+ }
+ }
+ },
+ {
+ "id": "category-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "category-item-template",
+ "dataBinding": "/chart.items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "category-item-template",
+ "component": {
+ "Card": {
+ "child": "item-row"
+ }
+ }
+ },
+ {
+ "id": "item-row",
+ "component": {
+ "Row": {
+ "distribution": "spaceBetween",
+ "children": {
+ "explicitList": [
+ "item-label",
+ "item-value"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-label",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "label"
+ }
+ }
+ }
+ },
+ {
+ "id": "item-value",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "value"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "sales-dashboard",
+ "path": "/",
+ "contents": {
+ "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 }
+ ]
+ }
+ }
+ }
+ }
+]
diff --git a/tools/composer/src/data/dojo/weather-widget.json b/tools/composer/src/data/dojo/weather-widget.json
new file mode 100644
index 000000000..868fe7400
--- /dev/null
+++ b/tools/composer/src/data/dojo/weather-widget.json
@@ -0,0 +1,155 @@
+[
+ {
+ "createSurface": {
+ "surfaceId": "weather-1",
+ "catalogId": "core-v0.9"
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "weather-1",
+ "components": [
+ {
+ "id": "root",
+ "type": "Card",
+ "props": {
+ "title": "Current Weather",
+ "children": ["main-col"]
+ }
+ },
+ {
+ "id": "main-col",
+ "type": "Column",
+ "props": {
+ "spacing": "medium",
+ "align": "center",
+ "children": ["temp-row", "desc-text", "forecast-list"]
+ }
+ },
+ {
+ "id": "temp-row",
+ "type": "Row",
+ "props": {
+ "spacing": "small",
+ "align": "center",
+ "children": ["icon", "temp"]
+ }
+ },
+ {
+ "id": "icon",
+ "type": "Icon",
+ "props": {
+ "name": "sunny"
+ }
+ },
+ {
+ "id": "temp",
+ "type": "Text",
+ "props": {
+ "text": "72°F",
+ "size": "xlarge",
+ "weight": "bold"
+ }
+ },
+ {
+ "id": "desc-text",
+ "type": "Text",
+ "props": {
+ "text": "Sunny and clear in San Francisco.",
+ "color": "secondary"
+ }
+ },
+ {
+ "id": "forecast-list",
+ "type": "List",
+ "props": {
+ "items": ["Mon: 70°F", "Tue: 68°F", "Wed: 65°F"]
+ }
+ },
+ {
+ "id": "action-row",
+ "type": "Row",
+ "props": {
+ "spacing": "small",
+ "children": ["location-input", "refresh-btn"]
+ }
+ },
+ {
+ "id": "location-input",
+ "type": "TextField",
+ "props": {
+ "placeholder": "Enter City"
+ }
+ },
+ {
+ "id": "refresh-btn",
+ "type": "Button",
+ "props": {
+ "label": "Change Location",
+ "onClick": {
+ "actionId": "change_location",
+ "parameters": {"city": "{location-input.value}"}
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "clientEvent": {
+ "name": "updateDataModel",
+ "surfaceId": "weather-1",
+ "path": "/location-input",
+ "valueString": "Seattle"
+ }
+ },
+ {
+ "action": {
+ "name": "change_location",
+ "surfaceId": "weather-1",
+ "sourceComponentId": "refresh-btn",
+ "timestamp": "2026-03-15T12:10:00Z",
+ "context": {
+ "city": "Seattle"
+ }
+ }
+ },
+ {
+ "updateComponents": {
+ "surfaceId": "weather-1",
+ "components": [
+ {
+ "id": "icon",
+ "type": "Icon",
+ "props": {
+ "name": "rainy"
+ }
+ },
+ {
+ "id": "temp",
+ "type": "Text",
+ "props": {
+ "text": "55°F",
+ "size": "xlarge",
+ "weight": "bold"
+ }
+ },
+ {
+ "id": "desc-text",
+ "type": "Text",
+ "props": {
+ "text": "Rainy and overcast in Seattle.",
+ "color": "secondary"
+ }
+ },
+ {
+ "id": "forecast-list",
+ "type": "List",
+ "props": {
+ "items": ["Mon: 52°F", "Tue: 54°F", "Wed: 50°F"]
+ }
+ }
+ ]
+ }
+ }
+]
diff --git a/tools/composer/src/lib/transcoder.ts b/tools/composer/src/lib/transcoder.ts
new file mode 100644
index 000000000..4549d9b3d
--- /dev/null
+++ b/tools/composer/src/lib/transcoder.ts
@@ -0,0 +1,86 @@
+/**
+ * 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.
+ */
+export function transpileToV0_8(msg: any): any {
+ // v0.9 -> v0.8 conversions
+ if (msg.createSurface) {
+ return {
+ beginRendering: {
+ surfaceId: msg.createSurface.surfaceId,
+ root: msg.createSurface.root || "root",
+ styles: msg.createSurface.styles || {}
+ }
+ };
+ }
+ if (msg.updateComponents) {
+ // Convert v0.9 type/props format to v0.8 component format
+ const components = (msg.updateComponents.components || []).map((comp: any) => {
+ if (comp.component) {
+ // Already v0.8 format
+ return comp;
+ }
+ if (comp.type) {
+ // v0.9 format: convert type/props to v0.8 component map
+ const props = comp.props || {};
+ const v08Props: Record = {};
+
+ 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 };
+ } 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 };
+ } else if (key === 'url' && typeof value === 'string') {
+ v08Props.url = { stringValue: value };
+ } else if (key === 'label' && typeof value === 'string') {
+ v08Props.label = { stringValue: value };
+ } else if (key === 'child' && typeof value === 'string') {
+ // Single child ref
+ v08Props.child = value;
+ } else {
+ v08Props[key] = value;
+ }
+ }
+
+ return {
+ id: comp.id,
+ component: { [comp.type]: v08Props }
+ };
+ }
+ return comp;
+ });
+
+ return {
+ surfaceUpdate: {
+ surfaceId: msg.updateComponents.surfaceId,
+ components
+ }
+ };
+ }
+ if (msg.updateDataModel) {
+ return {
+ dataModelUpdate: {
+ surfaceId: msg.updateDataModel.surfaceId,
+ path: msg.updateDataModel.path || '/',
+ contents: msg.updateDataModel.contents
+ }
+ };
+ }
+ if (msg.deleteSurface) {
+ return {
+ deleteSurface: {
+ surfaceId: msg.deleteSurface.surfaceId
+ }
+ };
+ }
+
+ // v0.8 messages pass through as-is
+ return msg;
+}
diff --git a/tools/composer/tsconfig.json b/tools/composer/tsconfig.json
index a51af992e..d3b639425 100644
--- a/tools/composer/tsconfig.json
+++ b/tools/composer/tsconfig.json
@@ -6,7 +6,11 @@
"esModuleInterop": true,
"incremental": true,
"isolatedModules": true,
- "lib": ["es2022", "DOM", "DOM.Iterable"],
+ "lib": [
+ "es2022",
+ "DOM",
+ "DOM.Iterable"
+ ],
"moduleDetection": "force",
"moduleResolution": "Bundler",
"noUncheckedIndexedAccess": true,
@@ -24,7 +28,9 @@
"jsx": "react-jsx",
"noEmit": true,
"paths": {
- "@/*": ["./src/*"]
+ "@/*": [
+ "./src/*"
+ ]
}
},
"include": [
@@ -33,7 +39,10 @@
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
- "**/*.mts"
+ "**/*.mts",
+ ".next/dev/dev/types/**/*.ts"
],
- "exclude": ["node_modules"]
+ "exclude": [
+ "node_modules"
+ ]
}
diff --git a/tools/composer/wrangler.jsonc b/tools/composer/wrangler.jsonc
new file mode 100644
index 000000000..b8c4a017e
--- /dev/null
+++ b/tools/composer/wrangler.jsonc
@@ -0,0 +1,27 @@
+{
+ "$schema": "node_modules/wrangler/config-schema.json",
+ "main": ".open-next/worker.js",
+ "name": "widget-builder",
+ "compatibility_date": "2026-03-13",
+ "compatibility_flags": [
+ "nodejs_compat",
+ "global_fetch_strictly_public"
+ ],
+ "assets": {
+ "directory": ".open-next/assets",
+ "binding": "ASSETS"
+ },
+ "services": [
+ {
+ // Self-reference service binding, the service name must match the worker name
+ // see https://opennext.js.org/cloudflare/caching
+ "binding": "WORKER_SELF_REFERENCE",
+ "service": "widget-builder"
+ }
+ ],
+ "images": {
+ // Enable image optimization
+ // see https://opennext.js.org/cloudflare/howtos/image
+ "binding": "IMAGES"
+ }
+}
\ No newline at end of file