@cloudcrane/app-spec 0.0.0-stage → 0.1.0

package/vendor/a2ui/v0_9_1/catalogs/basic/examples/30_live-invitation-builder.json

@@ -0,0 +1,205 @@
+{
+  "name": "Live Invitation Builder",
+  "description": "Demonstrates reactive two-way binding where editor inputs update a live preview in real-time.",
+  "messages": [
+    {
+      "version": "v0.9",
+      "createSurface": {
+        "surfaceId": "gallery-invitation-builder",
+        "catalogId": "https://a2ui.org/specification/v0_9/catalogs/basic/catalog.json",
+        "sendDataModel": true
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateComponents": {
+        "surfaceId": "gallery-invitation-builder",
+        "components": [
+          {
+            "id": "root",
+            "component": "Column",
+            "children": ["header", "main-content"],
+            "align": "stretch"
+          },
+          {
+            "id": "header",
+            "component": "Text",
+            "text": "# Invitation Builder",
+            "variant": "h1"
+          },
+          {
+            "id": "main-content",
+            "component": "Row",
+            "children": ["editor-col", "preview-col"],
+            "align": "start"
+          },
+          {
+            "id": "editor-col",
+            "component": "Column",
+            "children": [
+              "editor-title",
+              "event-name-input",
+              "guest-input",
+              "date-input",
+              "location-picker"
+            ],
+            "weight": 1,
+            "align": "stretch"
+          },
+          {
+            "id": "editor-title",
+            "component": "Text",
+            "text": "Customize your invitation",
+            "variant": "h3"
+          },
+          {
+            "id": "event-name-input",
+            "component": "TextField",
+            "label": "Event Name",
+            "value": {
+              "path": "/event/name"
+            }
+          },
+          {
+            "id": "guest-input",
+            "component": "TextField",
+            "label": "Guest of Honor",
+            "value": {
+              "path": "/event/guest"
+            }
+          },
+          {
+            "id": "date-input",
+            "component": "DateTimeInput",
+            "label": "Event Date & Time",
+            "value": {
+              "path": "/event/date"
+            },
+            "enableDate": true,
+            "enableTime": true
+          },
+          {
+            "id": "location-picker",
+            "component": "ChoicePicker",
+            "label": "Location",
+            "options": [
+              {"label": "Grand Ballroom", "value": "ballroom"},
+              {"label": "Sunset Terrace", "value": "terrace"},
+              {"label": "Garden Pavillion", "value": "garden"}
+            ],
+            "value": {
+              "path": "/event/location"
+            },
+            "variant": "mutuallyExclusive",
+            "displayStyle": "chips"
+          },
+          {
+            "id": "preview-col",
+            "component": "Column",
+            "children": ["preview-title", "invitation-card"],
+            "weight": 1,
+            "align": "center"
+          },
+          {
+            "id": "preview-title",
+            "component": "Text",
+            "text": "Live Preview",
+            "variant": "caption"
+          },
+          {
+            "id": "invitation-card",
+            "component": "Card",
+            "child": "invitation-content"
+          },
+          {
+            "id": "invitation-content",
+            "component": "Column",
+            "children": [
+              "invite-image",
+              "invite-event-name",
+              "invite-guest-row",
+              "invite-date-text",
+              "invite-location-text"
+            ],
+            "align": "center"
+          },
+          {
+            "id": "invite-image",
+            "component": "Image",
+            "url": "https://images.unsplash.com/photo-1511795409834-ef04bbd61622?w=400&h=200&fit=crop",
+            "variant": "mediumFeature"
+          },
+          {
+            "id": "invite-event-name",
+            "component": "Text",
+            "text": {
+              "path": "/event/name"
+            },
+            "variant": "h2"
+          },
+          {
+            "id": "invite-guest-row",
+            "component": "Row",
+            "children": ["invite-for-text", "invite-guest-name"],
+            "align": "center"
+          },
+          {
+            "id": "invite-for-text",
+            "component": "Text",
+            "text": "Celebrating",
+            "variant": "body"
+          },
+          {
+            "id": "invite-guest-name",
+            "component": "Text",
+            "text": {
+              "path": "/event/guest"
+            },
+            "variant": "h3"
+          },
+          {
+            "id": "invite-date-text",
+            "component": "Text",
+            "text": {
+              "call": "formatDate",
+              "args": {
+                "value": {
+                  "path": "/event/date"
+                },
+                "format": "EEEE, MMMM d, yyyy 'at' h:mm a"
+              },
+              "returnType": "string"
+            },
+            "variant": "body"
+          },
+          {
+            "id": "invite-location-text",
+            "component": "Text",
+            "text": {
+              "call": "formatString",
+              "args": {
+                "value": "Location: ${/event/location/0}"
+              },
+              "returnType": "string"
+            },
+            "variant": "caption"
+          }
+        ]
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateDataModel": {
+        "surfaceId": "gallery-invitation-builder",
+        "value": {
+          "event": {
+            "name": "Summer Gala",
+            "guest": "Alex Johnson",
+            "date": "2025-07-15T19:00:00Z",
+            "location": ["terrace"]
+          }
+        }
+      }
+    }
+  ]
+}

package/vendor/a2ui/v0_9_1/catalogs/basic/examples/31_incremental-dashboard.json

@@ -0,0 +1,128 @@
+{
+  "name": "Incremental Dashboard",
+  "description": "Demonstrates structural evolution of a UI where loading placeholders are incrementally replaced by actual components.",
+  "messages": [
+    {
+      "version": "v0.9",
+      "createSurface": {
+        "surfaceId": "gallery-incremental-dashboard",
+        "catalogId": "https://a2ui.org/specification/v0_9/catalogs/basic/catalog.json"
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateComponents": {
+        "surfaceId": "gallery-incremental-dashboard",
+        "components": [
+          {
+            "id": "root",
+            "component": "Column",
+            "children": ["header", "content-grid"],
+            "align": "stretch"
+          },
+          {
+            "id": "header",
+            "component": "Text",
+            "text": "System Dashboard",
+            "variant": "h2"
+          },
+          {
+            "id": "content-grid",
+            "component": "Row",
+            "children": ["left-panel", "right-panel"]
+          },
+          {
+            "id": "left-panel",
+            "component": "Column",
+            "children": ["panel-a-loading"],
+            "weight": 1
+          },
+          {
+            "id": "right-panel",
+            "component": "Column",
+            "children": ["panel-b-loading"],
+            "weight": 1
+          },
+          {
+            "id": "panel-a-loading",
+            "component": "Text",
+            "text": "Loading analytics...",
+            "variant": "caption"
+          },
+          {
+            "id": "panel-b-loading",
+            "component": "Text",
+            "text": "Loading logs...",
+            "variant": "caption"
+          }
+        ]
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateComponents": {
+        "surfaceId": "gallery-incremental-dashboard",
+        "components": [
+          {
+            "id": "left-panel",
+            "component": "Column",
+            "children": ["analytics-card"],
+            "weight": 1
+          },
+          {
+            "id": "analytics-card",
+            "component": "Card",
+            "child": "analytics-text"
+          },
+          {
+            "id": "analytics-text",
+            "component": "Text",
+            "text": "Analytics are ready.",
+            "variant": "body"
+          }
+        ]
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateComponents": {
+        "surfaceId": "gallery-incremental-dashboard",
+        "components": [
+          {
+            "id": "right-panel",
+            "component": "Column",
+            "children": ["logs-list"],
+            "weight": 1
+          },
+          {
+            "id": "logs-list",
+            "component": "List",
+            "children": {
+              "path": "/logs",
+              "componentId": "log-template"
+            }
+          },
+          {
+            "id": "log-template",
+            "component": "Text",
+            "text": {"path": "message"},
+            "variant": "caption"
+          }
+        ]
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateDataModel": {
+        "surfaceId": "gallery-incremental-dashboard",
+        "value": {
+          "logs": [
+            {"message": "System boot complete."},
+            {"message": "All services healthy."},
+            {"message": "Waiting for user input."}
+          ]
+        }
+      }
+    }
+  ]
+}

package/vendor/a2ui/v0_9_1/catalogs/basic/examples/32_advanced-form-validator.json

@@ -0,0 +1,166 @@
+{
+  "name": "Advanced Form Validator",
+  "description": "Demonstrates complex validation logic and deeply nested formatting functions.",
+  "messages": [
+    {
+      "version": "v0.9",
+      "createSurface": {
+        "surfaceId": "gallery-advanced-validator",
+        "catalogId": "https://a2ui.org/specification/v0_9/catalogs/basic/catalog.json",
+        "sendDataModel": true
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateComponents": {
+        "surfaceId": "gallery-advanced-validator",
+        "components": [
+          {
+            "id": "root",
+            "component": "Card",
+            "child": "main-column"
+          },
+          {
+            "id": "main-column",
+            "component": "Column",
+            "children": [
+              "welcome-text",
+              "email-field",
+              "phone-field",
+              "zip-field",
+              "terms-checkbox",
+              "submit-btn"
+            ],
+            "align": "stretch"
+          },
+          {
+            "id": "welcome-text",
+            "component": "Text",
+            "text": {
+              "call": "formatString",
+              "args": {
+                "value": "Hello! Today is ${formatDate(value: ${/now}, format: 'EEEE, MMMM d')}."
+              },
+              "returnType": "string"
+            },
+            "variant": "h3"
+          },
+          {
+            "id": "email-field",
+            "component": "TextField",
+            "label": "Email Address",
+            "value": {"path": "/formData/email"},
+            "checks": [
+              {
+                "condition": {
+                  "call": "email",
+                  "args": {"value": {"path": "/formData/email"}}
+                },
+                "message": "Invalid email format"
+              }
+            ]
+          },
+          {
+            "id": "phone-field",
+            "component": "TextField",
+            "label": "Phone Number",
+            "value": {"path": "/formData/phone"},
+            "checks": [
+              {
+                "condition": {
+                  "call": "regex",
+                  "args": {
+                    "value": {"path": "/formData/phone"},
+                    "pattern": "^\\+?[0-9]{10,15}$"
+                  }
+                },
+                "message": "Invalid phone format"
+              }
+            ]
+          },
+          {
+            "id": "zip-field",
+            "component": "TextField",
+            "label": "Zip Code",
+            "value": {"path": "/formData/zip"},
+            "checks": [
+              {
+                "condition": {
+                  "call": "regex",
+                  "args": {"value": {"path": "/formData/zip"}, "pattern": "^[0-9]{5}$"}
+                },
+                "message": "Must be exactly 5 digits"
+              }
+            ]
+          },
+          {
+            "id": "terms-checkbox",
+            "component": "CheckBox",
+            "label": "I agree to the terms and conditions",
+            "value": {"path": "/formData/agree"}
+          },
+          {
+            "id": "submit-btn-text",
+            "component": "Text",
+            "text": "Submit Registration"
+          },
+          {
+            "id": "submit-btn",
+            "component": "Button",
+            "child": "submit-btn-text",
+            "checks": [
+              {
+                "condition": {
+                  "call": "and",
+                  "args": {
+                    "values": [
+                      {"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/zip"}}}
+                    ]
+                  }
+                },
+                "message": "You must agree to terms AND provide either Email or Phone, plus a Zip code."
+              }
+            ],
+            "action": {
+              "event": {
+                "name": "register",
+                "context": {"data": {"path": "/formData"}}
+              }
+            }
+          }
+        ]
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateDataModel": {
+        "surfaceId": "gallery-advanced-validator",
+        "value": {
+          "now": "2025-12-15T12:00:00Z",
+          "formData": {
+            "email": "",
+            "phone": "",
+            "zip": "",
+            "agree": false
+          }
+        }
+      }
+    }
+  ]
+}

package/vendor/a2ui/v0_9_1/catalogs/basic/examples/33_financial-data-grid.json

@@ -0,0 +1,171 @@
+{
+  "name": "Financial Data Grid",
+  "description": "Demonstrates complex layout weighting and alignment using Rows and Columns with templates.",
+  "messages": [
+    {
+      "version": "v0.9",
+      "createSurface": {
+        "surfaceId": "gallery-financial-grid",
+        "catalogId": "https://a2ui.org/specification/v0_9/catalogs/basic/catalog.json",
+        "sendDataModel": true
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateComponents": {
+        "surfaceId": "gallery-financial-grid",
+        "components": [
+          {
+            "id": "root",
+            "component": "Card",
+            "child": "main-column"
+          },
+          {
+            "id": "main-column",
+            "component": "Column",
+            "children": ["header-row", "grid-list"],
+            "align": "stretch"
+          },
+          {
+            "id": "header-row",
+            "component": "Row",
+            "children": ["col-asset", "col-price", "col-change", "col-market-cap"],
+            "align": "center"
+          },
+          {
+            "id": "col-asset",
+            "component": "Text",
+            "text": "Asset",
+            "variant": "caption",
+            "weight": 2
+          },
+          {
+            "id": "col-price",
+            "component": "Text",
+            "text": "Price",
+            "variant": "caption",
+            "weight": 1
+          },
+          {
+            "id": "col-change",
+            "component": "Text",
+            "text": "24h Change",
+            "variant": "caption",
+            "weight": 1
+          },
+          {
+            "id": "col-market-cap",
+            "component": "Text",
+            "text": "Market Cap",
+            "variant": "caption",
+            "weight": 1.5
+          },
+          {
+            "id": "grid-list",
+            "component": "List",
+            "children": {
+              "path": "/assets",
+              "componentId": "row-template"
+            }
+          },
+          {
+            "id": "row-template",
+            "component": "Row",
+            "children": ["asset-info", "asset-price", "asset-change", "asset-market-cap"],
+            "align": "center"
+          },
+          {
+            "id": "asset-info",
+            "component": "Row",
+            "children": ["asset-icon", "asset-name-col"],
+            "weight": 2,
+            "align": "center"
+          },
+          {
+            "id": "asset-icon",
+            "component": "Icon",
+            "name": "payment"
+          },
+          {
+            "id": "asset-name-col",
+            "component": "Column",
+            "children": ["asset-name", "asset-symbol"]
+          },
+          {
+            "id": "asset-name",
+            "component": "Text",
+            "text": {"path": "name"},
+            "variant": "body"
+          },
+          {
+            "id": "asset-symbol",
+            "component": "Text",
+            "text": {"path": "symbol"},
+            "variant": "caption"
+          },
+          {
+            "id": "asset-price",
+            "component": "Text",
+            "text": {
+              "call": "formatCurrency",
+              "args": {"value": {"path": "price"}, "currency": "USD"},
+              "returnType": "string"
+            },
+            "weight": 1
+          },
+          {
+            "id": "asset-change",
+            "component": "Text",
+            "text": {
+              "call": "formatString",
+              "args": {"value": "${change}%"},
+              "returnType": "string"
+            },
+            "weight": 1
+          },
+          {
+            "id": "asset-market-cap",
+            "component": "Text",
+            "text": {
+              "call": "formatCurrency",
+              "args": {"value": {"path": "marketCap"}, "currency": "USD"},
+              "returnType": "string"
+            },
+            "weight": 1.5
+          }
+        ]
+      }
+    },
+    {
+      "version": "v0.9",
+      "updateDataModel": {
+        "surfaceId": "gallery-financial-grid",
+        "value": {
+          "assets": [
+            {
+              "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
+            }
+          ]
+        }
+      }
+    }
+  ]
+}