+ {([
+ { id: 'events' as LeftTab, icon: Activity, label: 'Events' },
+ { id: 'data' as LeftTab, icon: Database, label: 'Data' },
+ { id: 'config' as LeftTab, icon: Settings, label: 'Config' },
+ ]).map(tab => (
+ setLeftTab(tab.id)}
+ >
+
+ ))}
+
+
+ {/* Playback */}
+
+
+
+
+ {playbackState === 'playing' ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
{progress}
+
+
seek(parseInt(e.target.value, 10))}
+ className="absolute inset-0 w-full opacity-0 cursor-pointer z-10"
+ />
+
+
0 ? (progress / totalChunks) * 100 : 0}%` }}
+ />
+
+
0 ? (progress / totalChunks) * 100 : 0}% - 5px)` }}
+ />
+
+
{totalChunks}
+
+
setSpeed(speed === 1 ? 2 : speed === 2 ? 4 : speed === 4 ? 0.5 : 1)}
+ >
+ {speed}x
+
+
+
+ {/* Status */}
+
+ {playbackState === 'playing' && (
+
+
+ )}
+ {formatBytes(bytesReceived)}
+
+
+
+
+ {/* Left Pane */}
+
+
+
+
+ {leftTab === 'events' ? (
+
+
+
+ {visibleEvents.length === 0 && (
+
Press play to see events...
+ )}
+ {visibleEvents.map((evt, i) => (
+
seek(evt.chunkIndex + 1)}
+ className={`p-3 rounded-lg border cursor-pointer transition-all hover:scale-[1.01] ${
+ evt.type === 'surface' ? 'border-blue-500/30 bg-blue-500/5' :
+ evt.type === 'components' ? 'border-emerald-500/30 bg-emerald-500/5' :
+ evt.type === 'data' ? 'border-amber-500/30 bg-amber-500/5' :
+ evt.type === 'action' ? 'border-purple-500/30 bg-purple-500/5' :
+ 'border-red-500/30 bg-red-500/5'
+ }`}
+ >
+
+
+ {evt.type === 'action' ? '↑' : '↓'} {evt.type}
+
+
+
{evt.summary}
+
+ ))}
+
+
+
+ ) : leftTab === 'data' ? (
+ /* DATA TAB — real JSONL chunks as they arrive over the wire */
+
+
+
+ {receivedChunks.length === 0 && (
+
Press play to stream JSONL chunks...
+ )}
+ {receivedChunks.map((chunk, i) => (
+
seek(chunk.index + 1)}
+ className={`rounded-lg border overflow-hidden cursor-pointer transition-all ${
+ chunk.index === progress - 1
+ ? chunk.isClient
+ ? 'border-purple-500/50 ring-1 ring-purple-500/20 scale-[1.01]'
+ : 'border-primary/50 ring-1 ring-primary/20 scale-[1.01]'
+ : chunk.isClient
+ ? 'border-purple-500/20 hover:border-purple-500/40'
+ : 'border-border/50 hover:border-primary/30'
+ }`}
+ >
+ {/* Chunk header */}
+
+
+
+ #{chunk.index + 1}
+
+
+ {chunk.isClient ? '↑ CLIENT' : '↓ SERVER'}
+
+
+
{formatBytes(chunk.bytes)}
+
+ {/* Wire content — single JSONL line */}
+
+ {chunk.wire}
+
+
+ ))}
+ {/* Streaming cursor */}
+ {playbackState === 'playing' && progress < totalChunks && (
+
+ Waiting for next chunk...
+
+ )}
+
+
+
+ ) : (
+ /* CONFIG TAB */
+
+
+
+
+
+
+
+ handleScenarioChange(e.target.value as ScenarioId)}
+ className="w-full text-sm p-2 pl-3 pr-8 border border-border/50 rounded-lg bg-background appearance-none shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 cursor-pointer"
+ >
+ {Object.keys(scenarios).map(id => {id} )}
+
+
+
+ {totalChunks} chunks • {formatBytes(totalBytes)}
+
+
+
+
+
+
+ setRenderer(e.target.value as RendererType)}
+ className="w-full text-sm p-2 pl-3 pr-8 border border-border/50 rounded-lg bg-background appearance-none shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/20 cursor-pointer"
+ >
+ {RENDERERS.map(r => {r} )}
+
+
+
+
+
+
+
+
+ A2A (Server Sent Events)
+ AG UI (Stream)
+ WebSocket
+ REST Polling
+
+
+
Simulated in-memory playback.
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
{selectedScenario}
+
+
+ {activeMessages.length > 0 ? (
+
+
console.log('Theater Action:', action)}
+ />
+
+ ) : (
+
+
+
+
+
{'
+
Press play to start streaming
+
+
+ )}
+
+
+
+
+
+
+
+ {/* Mobile Nav */}
+
+ {([
+ { view: 'left' as const, tab: 'events' as LeftTab, icon: Activity, label: 'Events' },
+ { view: 'renderer' as const, tab: null, icon: LayoutTemplate, label: 'Render' },
+ { view: 'left' as const, tab: 'data' as LeftTab, icon: Database, label: 'Data' },
+ { view: 'left' as const, tab: 'config' as LeftTab, icon: Settings, label: 'Config' },
+ ]).map(item => (
+ { setMobileView(item.view); if (item.tab) setLeftTab(item.tab); }}
+ >
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/tools/composer/src/app/theater/patch_v2.js b/tools/composer/src/app/theater/patch_v2.js
new file mode 100644
index 000000000..2059e9f9d
--- /dev/null
+++ b/tools/composer/src/app/theater/patch_v2.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs = require('fs');
+const file = 'page.tsx';
+let content = fs.readFileSync(file, 'utf8');
+
+const target = ` messages: (scenarios[selectedScenario] as any) || [],
+ autoPlay: false,
+ baseIntervalMs: 1000
+ });`;
+
+const replacement = ` messages: (scenarios[selectedScenario] as any) || [],
+ autoPlay: false,
+ baseIntervalMs: 1000
+ });
+
+ useEffect(() => {
+ const params = new URLSearchParams(window.location.search);
+ const step = params.get('step');
+ if (step) {
+ seek(parseInt(step, 10));
+ }
+ }, []);`;
+
+content = content.replace(target, replacement);
+fs.writeFileSync(file, content);
+console.log("Patched page.tsx with basic ?step=N support.");
diff --git a/tools/composer/src/app/widget/[id]/ClientWidgetPage.tsx b/tools/composer/src/app/widget/[id]/ClientWidgetPage.tsx
new file mode 100644
index 000000000..405fbb52f
--- /dev/null
+++ b/tools/composer/src/app/widget/[id]/ClientWidgetPage.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use client';
+
+import { WidgetEditor } from '@/components/editor/widget-editor';
+import { useWidgets } from '@/contexts/widgets-context';
+
+export function ClientWidgetPage({ id }: { id: string }) {
+ const { loading, getWidget } = useWidgets();
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ const widget = getWidget(id);
+
+ if (!widget) {
+ return (
+
+ );
+ }
+
+ return
;
+}
diff --git a/tools/composer/src/app/widget/[id]/page.tsx b/tools/composer/src/app/widget/[id]/page.tsx
index ec54c84d1..6b6ac93b4 100644
--- a/tools/composer/src/app/widget/[id]/page.tsx
+++ b/tools/composer/src/app/widget/[id]/page.tsx
@@ -1,50 +1,10 @@
+
/**
* Copyright 2026 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
*/
+import { ClientWidgetPage } from './ClientWidgetPage';
-'use client';
-
-import { use } from 'react';
-import { WidgetEditor } from '@/components/editor/widget-editor';
-import { useWidgets } from '@/contexts/widgets-context';
-
-interface WidgetPageProps {
- params: Promise<{ id: string }>;
-}
-
-export default function WidgetPage({ params }: WidgetPageProps) {
- const { id } = use(params);
- const { loading, getWidget } = useWidgets();
-
- if (loading) {
- return (
-
- );
- }
-
- const widget = getWidget(id);
-
- if (!widget) {
- return (
-
- );
- }
-
- return
;
+export default async function WidgetPage({ params }: { params: Promise<{ id: string }> }) {
+ const { id } = await params;
+ return
;
}
diff --git a/tools/composer/src/components/editor/data-panel.test.tsx b/tools/composer/src/components/editor/data-panel.test.tsx
index 0a842473a..8b92d2b93 100644
--- a/tools/composer/src/components/editor/data-panel.test.tsx
+++ b/tools/composer/src/components/editor/data-panel.test.tsx
@@ -96,8 +96,13 @@ describe('DataPanel', () => {
const xIcons = screen.getAllByTestId('x-icon');
// State 1 doesn't have X, State 2 does. So there should be only 1 X icon.
expect(xIcons.length).toBe(1);
- const deleteButton = xIcons[0].closest('button')!;
- fireEvent.click(deleteButton);
+ const firstXIcon = xIcons[0];
+ if (firstXIcon) {
+ const deleteButton = firstXIcon.closest('button');
+ if (deleteButton) {
+ fireEvent.click(deleteButton);
+ }
+ }
expect(mockProps.onDeleteState).toHaveBeenCalledWith(1);
});
});
diff --git a/tools/composer/src/components/editor/widget-editor.tsx b/tools/composer/src/components/editor/widget-editor.tsx
index 388e83a3a..3a52f13ee 100644
--- a/tools/composer/src/components/editor/widget-editor.tsx
+++ b/tools/composer/src/components/editor/widget-editor.tsx
@@ -262,14 +262,6 @@ export function WidgetEditor({ widget }: WidgetEditorProps) {
(
Powered by 🪁 CopilotKit
diff --git a/tools/composer/src/components/layout/app-shell.tsx b/tools/composer/src/components/layout/app-shell.tsx
index f50708c9d..92922ce77 100644
--- a/tools/composer/src/components/layout/app-shell.tsx
+++ b/tools/composer/src/components/layout/app-shell.tsx
@@ -29,7 +29,7 @@ export function AppShell({ children }: AppShellProps) {
- {/* Background blur circles - Glassy effect from dojo */}
+ {/* Background blur circles - Glassy effect from theater */}
{/* Ellipse 1351 - Orange glow top right */}
;
+}
+
+export interface A2UISurfaceState {
+ root: string;
+ components: ComponentInstance[];
+ data: Record
;
+}
+
+/**
+ * Transform a stream of A2UI messages (v0.8 or v0.9) into
+ * the props format that A2UIViewer expects.
+ */
+export function useA2UISurface(messages: any[]): A2UISurfaceState {
+ return useMemo(() => {
+ let root = "root";
+ const componentsMap = new Map();
+ let data: Record = {};
+
+ for (const msg of messages) {
+ if (!msg) continue;
+
+ // Transpile v0.9 -> v0.8 (v0.8 passes through unchanged)
+ const v0_8msg = transpileToV0_8(msg);
+
+ // Handle beginRendering (v0.8)
+ if (v0_8msg.beginRendering) {
+ root = v0_8msg.beginRendering.root || "root";
+ }
+
+ // Handle surfaceUpdate (v0.8) — components already in { id, component: { Type: props } } format
+ if (v0_8msg.surfaceUpdate) {
+ const newComponents = v0_8msg.surfaceUpdate.components || [];
+ for (const comp of newComponents) {
+ if (comp.id && comp.component) {
+ componentsMap.set(comp.id, {
+ id: comp.id,
+ component: comp.component
+ });
+ }
+ }
+ }
+
+ // Handle dataModelUpdate (v0.8)
+ if (v0_8msg.dataModelUpdate) {
+ const contents = v0_8msg.dataModelUpdate.contents;
+ if (contents) {
+ // contents can be an array of ValueMap objects or a plain object
+ if (Array.isArray(contents)) {
+ for (const item of contents) {
+ if (item.key !== undefined) {
+ // ValueMap format: { key, valueString?, valueNumber?, valueBoolean?, valueMap? }
+ data[item.key] = extractValueMapValue(item);
+ } else {
+ // Plain object
+ data = { ...data, ...item };
+ }
+ }
+ } else if (typeof contents === 'object') {
+ data = { ...data, ...contents };
+ }
+ }
+ }
+ }
+
+ return {
+ root,
+ components: Array.from(componentsMap.values()),
+ data,
+ };
+ }, [messages]);
+}
+
+/**
+ * Extract a JavaScript value from a ValueMap entry.
+ */
+function extractValueMapValue(item: any): any {
+ if (item.valueString !== undefined) return item.valueString;
+ if (item.valueNumber !== undefined) return item.valueNumber;
+ if (item.valueBoolean !== undefined) return item.valueBoolean;
+ if (item.valueMap !== undefined) {
+ // Recursive: array of ValueMap -> object
+ const obj: Record = {};
+ for (const child of item.valueMap) {
+ obj[child.key] = extractValueMapValue(child);
+ }
+ return obj;
+ }
+ return null;
+}
diff --git a/tools/composer/src/components/theater/useJsonlPlayer.ts b/tools/composer/src/components/theater/useJsonlPlayer.ts
new file mode 100644
index 000000000..c7ddec049
--- /dev/null
+++ b/tools/composer/src/components/theater/useJsonlPlayer.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+export type PlaybackState = 'playing' | 'paused' | 'stopped';
+
+export interface UseJsonlPlayerOptions {
+ messages: T[];
+ autoPlay?: boolean;
+ baseIntervalMs?: number;
+ initialProgress?: number;
+}
+
+export function useJsonlPlayer({
+ messages,
+ autoPlay = false,
+ baseIntervalMs = 500,
+ initialProgress = 0,
+}: UseJsonlPlayerOptions) {
+ const [playbackState, setPlaybackState] = useState(
+ autoPlay ? 'playing' : 'stopped'
+ );
+ // progress represents the *number of messages* currently active (0 to totalMessages)
+ const [progress, setProgress] = useState(Math.min(initialProgress, messages.length));
+ const [speed, setSpeed] = useState(1);
+ const timerRef = useRef | null>(null);
+
+ const totalMessages = messages.length;
+
+ // Reset progress when messages change
+ useEffect(() => {
+ setProgress(Math.min(initialProgress, messages.length));
+ }, [messages, initialProgress]);
+
+ const play = useCallback(() => {
+ if (progress >= totalMessages) {
+ setProgress(0); // Loop or restart
+ }
+ setPlaybackState('playing');
+ }, [progress, totalMessages]);
+
+ const pause = useCallback(() => {
+ setPlaybackState('paused');
+ }, []);
+
+ const stop = useCallback(() => {
+ setPlaybackState('stopped');
+ setProgress(0);
+ }, []);
+
+ const seek = useCallback((index: number) => {
+ if (index >= 0 && index <= totalMessages) {
+ setProgress(index);
+ }
+ }, [totalMessages]);
+
+ useEffect(() => {
+ if (playbackState === 'playing') {
+ const ms = baseIntervalMs / speed;
+ timerRef.current = setInterval(() => {
+ setProgress((prev) => {
+ if (prev >= totalMessages) {
+ setPlaybackState('paused');
+ return prev;
+ }
+ return prev + 1;
+ });
+ }, ms);
+ } else if (timerRef.current) {
+ clearInterval(timerRef.current);
+ }
+
+ return () => {
+ if (timerRef.current) clearInterval(timerRef.current);
+ };
+ }, [playbackState, speed, totalMessages, baseIntervalMs]);
+
+ const activeMessages = messages.slice(0, progress);
+
+ return {
+ playbackState,
+ progress,
+ speed,
+ totalMessages,
+ activeMessages,
+ play,
+ pause,
+ stop,
+ seek,
+ setSpeed,
+ };
+}
diff --git a/tools/composer/src/components/theater/useStreamingPlayer.ts b/tools/composer/src/components/theater/useStreamingPlayer.ts
new file mode 100644
index 000000000..b48fb8e9c
--- /dev/null
+++ b/tools/composer/src/components/theater/useStreamingPlayer.ts
@@ -0,0 +1,180 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+
+export type PlaybackState = 'playing' | 'paused' | 'stopped';
+
+export interface StreamChunk {
+ /** Index in the scenario message array */
+ index: number;
+ /** The raw JSONL line (compact JSON, as it goes over the wire) */
+ wire: string;
+ /** The parsed message object */
+ message: any;
+ /** Whether this is a client event (↑) or server event (↓) */
+ isClient: boolean;
+ /** Byte size of the wire representation */
+ bytes: number;
+}
+
+export interface LifecycleEvent {
+ /** Which chunk triggered this */
+ chunkIndex: number;
+ /** Human-readable description */
+ summary: string;
+ /** Event category */
+ type: 'surface' | 'components' | 'data' | 'action' | 'delete';
+}
+
+/** Convert scenario messages into stream chunks (real JSONL lines) */
+function toStreamChunks(messages: any[]): StreamChunk[] {
+ return messages.map((msg, i) => {
+ const wire = JSON.stringify(msg);
+ return {
+ index: i,
+ wire,
+ message: msg,
+ isClient: !!msg.action || !!msg.clientEvent,
+ bytes: new TextEncoder().encode(wire).length,
+ };
+ });
+}
+
+/** Generate lifecycle events from messages */
+function toLifecycleEvents(messages: any[]): LifecycleEvent[] {
+ const events: LifecycleEvent[] = [];
+ for (let i = 0; i < messages.length; i++) {
+ const msg = messages[i];
+ if (msg.beginRendering) {
+ events.push({ chunkIndex: i, summary: `Surface "${msg.beginRendering.surfaceId || 'default'}" created`, type: 'surface' });
+ }
+ if (msg.createSurface) {
+ events.push({ chunkIndex: i, summary: `Surface "${msg.createSurface.surfaceId}" created`, type: 'surface' });
+ }
+ if (msg.surfaceUpdate) {
+ const count = msg.surfaceUpdate.components?.length || 0;
+ const types = msg.surfaceUpdate.components
+ ?.map((c: any) => c.component ? Object.keys(c.component)[0] : c.type || '?')
+ .filter((v: string, j: number, a: string[]) => a.indexOf(v) === j);
+ events.push({ chunkIndex: i, summary: `${count} components registered: ${types?.join(', ')}`, type: 'components' });
+ }
+ if (msg.updateComponents) {
+ const count = msg.updateComponents.components?.length || 0;
+ events.push({ chunkIndex: i, summary: `${count} components updated`, type: 'components' });
+ }
+ if (msg.dataModelUpdate) {
+ const keys = msg.dataModelUpdate.contents?.map((c: any) => c.key).filter(Boolean) || [];
+ events.push({ chunkIndex: i, summary: `Data model: ${keys.join(', ')}`, type: 'data' });
+ }
+ if (msg.updateDataModel) {
+ const keys = msg.updateDataModel.contents?.map((c: any) => c.key).filter(Boolean) || [];
+ events.push({ chunkIndex: i, summary: `Data model: ${keys.join(', ')}`, type: 'data' });
+ }
+ if (msg.clientEvent || msg.action) {
+ const name = msg.clientEvent?.name || msg.action?.name || 'action';
+ events.push({ chunkIndex: i, summary: `User action: ${name}`, type: 'action' });
+ }
+ if (msg.deleteSurface) {
+ events.push({ chunkIndex: i, summary: `Surface "${msg.deleteSurface.surfaceId}" deleted`, type: 'delete' });
+ }
+ }
+ return events;
+}
+
+export function useStreamingPlayer(messages: any[], baseIntervalMs = 800) {
+ const chunks = useMemo(() => toStreamChunks(messages), [messages]);
+ const lifecycleEvents = useMemo(() => toLifecycleEvents(messages), [messages]);
+
+ const [playbackState, setPlaybackState] = useState('stopped');
+ const [progress, setProgress] = useState(0); // 0 to chunks.length
+ const [speed, setSpeed] = useState(1);
+ const timerRef = useRef | null>(null);
+
+ const totalChunks = chunks.length;
+
+ useEffect(() => {
+ setProgress(0);
+ setPlaybackState('stopped');
+ }, [messages]);
+
+ const play = useCallback(() => {
+ if (progress >= totalChunks) setProgress(0);
+ setPlaybackState('playing');
+ }, [progress, totalChunks]);
+
+ const pause = useCallback(() => setPlaybackState('paused'), []);
+
+ const stop = useCallback(() => {
+ setPlaybackState('stopped');
+ setProgress(0);
+ }, []);
+
+ const seek = useCallback((index: number) => {
+ setProgress(Math.max(0, Math.min(index, totalChunks)));
+ }, [totalChunks]);
+
+ // Playback timer — one chunk per tick
+ useEffect(() => {
+ if (playbackState === 'playing') {
+ const ms = baseIntervalMs / speed;
+ timerRef.current = setInterval(() => {
+ setProgress(prev => {
+ if (prev >= totalChunks) {
+ setPlaybackState('paused');
+ return prev;
+ }
+ return prev + 1;
+ });
+ }, ms);
+ } else if (timerRef.current) {
+ clearInterval(timerRef.current);
+ }
+ return () => { if (timerRef.current) clearInterval(timerRef.current); };
+ }, [playbackState, speed, totalChunks, baseIntervalMs]);
+
+ // Chunks received so far
+ const receivedChunks = chunks.slice(0, progress);
+
+ // Messages for the renderer (fully received)
+ const activeMessages = messages.slice(0, progress);
+
+ // Visible lifecycle events
+ const visibleEvents = lifecycleEvents.filter(e => e.chunkIndex < progress);
+
+ // Total bytes received
+ const bytesReceived = receivedChunks.reduce((sum, c) => sum + c.bytes, 0);
+ const totalBytes = chunks.reduce((sum, c) => sum + c.bytes, 0);
+
+ return {
+ playbackState,
+ progress,
+ totalChunks,
+ speed,
+ chunks,
+ receivedChunks,
+ activeMessages,
+ visibleEvents,
+ lifecycleEvents,
+ bytesReceived,
+ totalBytes,
+ play,
+ pause,
+ stop,
+ seek,
+ setSpeed,
+ };
+}
diff --git a/tools/composer/src/data/theater/booking-form.json b/tools/composer/src/data/theater/booking-form.json
new file mode 100644
index 000000000..23d4f8779
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/component-gallery-stream.json b/tools/composer/src/data/theater/component-gallery-stream.json
new file mode 100644
index 000000000..bdf63ab9c
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/contact-card.json b/tools/composer/src/data/theater/contact-card.json
new file mode 100644
index 000000000..384b2626c
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/contact-lookup.json b/tools/composer/src/data/theater/contact-lookup.json
new file mode 100644
index 000000000..117ca2c57
--- /dev/null
+++ b/tools/composer/src/data/theater/contact-lookup.json
@@ -0,0 +1,12501 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "contact-card",
+ "root": "main_card"
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "loading_main_column"
+ }
+ }
+ },
+ {
+ "id": "loading_main_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_profile_image",
+ "loading_description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_profile_image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_description_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_profile_image",
+ "loading_description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "loading_profile_image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_description_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "loading_description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "profile_image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ },
+ "usageHint": "avatar",
+ "fit": "cover"
+ }
+ }
+ },
+ {
+ "id": "loading_description_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_user_heading"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "profile_image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ },
+ "usageHint": "avatar",
+ "fit": "cover"
+ }
+ }
+ },
+ {
+ "id": "loading_user_heading",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_user_heading",
+ "loading_description_text_1",
+ "loading_description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "profile_image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ },
+ "usageHint": "avatar",
+ "fit": "cover"
+ }
+ }
+ },
+ {
+ "id": "loading_user_heading",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_description_text_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_description_text_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "loading_description_text_1",
+ "loading_description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_description_text_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_description_text_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "loading_description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_description_text_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "loading_info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_rows_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_info_row_1",
+ "loading_info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_info_row_1",
+ "loading_info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_calendar_icon",
+ "loading_calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "loading_info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_calendar_icon",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_calendar_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "calendar_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "calendarToday"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "loading_calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "loading_info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_calendar_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "calendar_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "calendarToday"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_calendar_primary_text",
+ "loading_calendar_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "loading_info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_calendar_primary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_calendar_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "calendar_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "calendarToday"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/calendar"
+ }
+ }
+ }
+ },
+ {
+ "id": "calendar_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "calendar_primary_text",
+ "loading_calendar_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "loading_info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_calendar_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "loading_info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_location_icon",
+ "loading_location_text_column"
+ ]
+ },
+ "distribution": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_location_icon",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_location_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_location_icon",
+ "loading_location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_location_icon",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_location_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "loading_location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "location_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "locationOn"
+ }
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_location_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "location_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "locationOn"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_location_primary_text",
+ "loading_location_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_location_primary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_location_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "location_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "locationOn"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/location"
+ }
+ }
+ }
+ },
+ {
+ "id": "location_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "location_primary_text",
+ "loading_location_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_location_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "loading_info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_mail_icon",
+ "loading_mail_text_column"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "info_rows_column",
+ "weight": 1,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "info_row_1",
+ "info_row_2",
+ "info_row_3",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_mail_icon",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_mail_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_mail_icon",
+ "loading_mail_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",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_mail_icon",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_mail_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "loading_mail_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",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "mail_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "mail"
+ }
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_mail_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_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",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "mail_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "mail"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_mail_primary_text",
+ "loading_mail_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_mail_primary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_mail_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_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",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "mail_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "mail"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/email"
+ }
+ }
+ }
+ },
+ {
+ "id": "mail_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "mail_primary_text",
+ "loading_mail_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_mail_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_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",
+ "loading_info_row_4"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_call_icon",
+ "loading_call_text_column"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_call_icon",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_call_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_call_icon",
+ "loading_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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_call_icon",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_call_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "call_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "call"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_4",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "call_icon",
+ "loading_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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_call_text_column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "call_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "call"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_call_primary_text",
+ "loading_call_secondary_text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_call_primary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_call_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "call_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "call"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_call_primary_text",
+ "loading_call_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_call_primary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_call_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "call_icon",
+ "component": {
+ "Icon": {
+ "name": {
+ "literalString": "call"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_primary_text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "path": "/mobile"
+ }
+ }
+ }
+ },
+ {
+ "id": "call_text_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "call_primary_text",
+ "loading_call_secondary_text"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_call_secondary_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "loading_action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_button_1",
+ "loading_"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_button_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_button_1",
+ "loading_button_2"
+ ]
+ },
+ "distribution": "center",
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_button_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_button_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "loading_button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "loading_button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_button_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_button_1_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "loading_button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_button_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2",
+ "component": {
+ "Button": {
+ "child": "loading_button_2_text",
+ "primary": false,
+ "action": {
+ "name": "send_message"
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_button_2_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2",
+ "component": {
+ "Button": {
+ "child": "button_2_text",
+ "primary": false,
+ "action": {
+ "name": "send_message"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Message"
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "loading_link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2",
+ "component": {
+ "Button": {
+ "child": "button_2_text",
+ "primary": false,
+ "action": {
+ "name": "send_message"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Message"
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_link_text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_link_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2",
+ "component": {
+ "Button": {
+ "child": "button_2_text",
+ "primary": false,
+ "action": {
+ "name": "send_message"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Message"
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "link_text_wrapper",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_link_text"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "loading_div",
+ "info_rows_column",
+ "action_buttons_row",
+ "link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "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": "loading_link_text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_div",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "contact-card",
+ "components": [
+ {
+ "id": "action_buttons_row",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "button_1",
+ "button_2"
+ ]
+ },
+ "distribution": "center",
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "button_1",
+ "component": {
+ "Button": {
+ "child": "button_1_text",
+ "primary": true,
+ "action": {
+ "name": "follow_contact"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_1_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Follow"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2",
+ "component": {
+ "Button": {
+ "child": "button_2_text",
+ "primary": false,
+ "action": {
+ "name": "send_message"
+ }
+ }
+ }
+ },
+ {
+ "id": "button_2_text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Message"
+ }
+ }
+ }
+ },
+ {
+ "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": "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": "description_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "user_heading",
+ "description_text_1",
+ "description_text_2"
+ ]
+ },
+ "alignment": "center"
+ }
+ }
+ },
+ {
+ "id": "description_text_1",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "description_text_2",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/team"
+ }
+ }
+ }
+ },
+ {
+ "id": "div",
+ "component": {
+ "Divider": {}
+ }
+ },
+ {
+ "id": "info_row_1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "calendar_icon",
+ "calendar_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "location_icon",
+ "location_text_column"
+ ]
+ },
+ "distribution": "start",
+ "alignment": "start"
+ }
+ }
+ },
+ {
+ "id": "info_row_3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "mail_icon",
+ "mail_text_column"
+ ]
+ },
+ "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": "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": "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": "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": "main_card",
+ "component": {
+ "Card": {
+ "child": "main_column"
+ }
+ }
+ },
+ {
+ "id": "main_column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "profile_image",
+ "description_column",
+ "div",
+ "info_rows_column",
+ "action_buttons_row",
+ "link_text_wrapper"
+ ]
+ },
+ "alignment": "stretch"
+ }
+ }
+ },
+ {
+ "id": "profile_image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ },
+ "usageHint": "avatar",
+ "fit": "cover"
+ }
+ }
+ },
+ {
+ "id": "user_heading",
+ "weight": 1,
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/name"
+ },
+ "usageHint": "h2"
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "contact-card",
+ "contents": [
+ {
+ "key": "name",
+ "valueString": "Alex Jordan"
+ },
+ {
+ "key": "title",
+ "valueString": "Product Marketing Manager"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "contact-card",
+ "contents": [
+ {
+ "key": "name",
+ "valueString": "Alex Jordan"
+ },
+ {
+ "key": "title",
+ "valueString": "Product Marketing Manager"
+ },
+ {
+ "key": "team",
+ "valueString": "Team Macally"
+ },
+ {
+ "key": "location",
+ "valueString": "New York"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "contact-card",
+ "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-108"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "contact-card",
+ "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"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "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": "/images/contact_lookup/profile1.png"
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/theater/flight-status.json b/tools/composer/src/data/theater/flight-status.json
new file mode 100644
index 000000000..d504442e8
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/floor-plan.json b/tools/composer/src/data/theater/floor-plan.json
new file mode 100644
index 000000000..70fbb3219
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/index.ts b/tools/composer/src/data/theater/index.ts
new file mode 100644
index 000000000..fed946ccb
--- /dev/null
+++ b/tools/composer/src/data/theater/index.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Curated v0.8 scenarios — verified working, distinct, showcase-worthy
+import restaurantBooking from './restaurant-booking.json';
+import restaurantConfirmation from './restaurant-confirmation.json';
+import restaurantFinder from './restaurant-finder.json';
+import contactCard from './contact-card.json';
+import contactLookup from './contact-lookup.json';
+import floorPlan from './floor-plan.json';
+
+export const scenarios = {
+ 'restaurant-finder': restaurantFinder,
+ 'restaurant-booking': restaurantBooking,
+ 'restaurant-confirmation': restaurantConfirmation,
+ 'contact-lookup': contactLookup,
+ // 'contact-card': contactCard,
+ // 'floor-plan': floorPlan,
+};
+
+export type ScenarioId = keyof typeof scenarios;
diff --git a/tools/composer/src/data/theater/kitchen-sink.json b/tools/composer/src/data/theater/kitchen-sink.json
new file mode 100644
index 000000000..8e11a824c
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/northstar-tour.json b/tools/composer/src/data/theater/northstar-tour.json
new file mode 100644
index 000000000..1f3a1e2a4
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/org-chart.json b/tools/composer/src/data/theater/org-chart.json
new file mode 100644
index 000000000..bc3c7f5fe
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/restaurant-booking.json b/tools/composer/src/data/theater/restaurant-booking.json
new file mode 100644
index 000000000..6d5f4b1bb
--- /dev/null
+++ b/tools/composer/src/data/theater/restaurant-booking.json
@@ -0,0 +1,1509 @@
+[
+ {
+ "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": [
+ "loading_booking-title",
+ "loading_restaurant-image",
+ "loading_restaurant-address",
+ "loading_party-size-field"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_booking-title",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_restaurant-image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_restaurant-address",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_party-size-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_booking-title",
+ "loading_restaurant-image",
+ "loading_restaurant-address",
+ "loading_party-size-field",
+ "loading_datetime-field",
+ "loading_dietary-field",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_booking-title",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_restaurant-image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_restaurant-address",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_party-size-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_datetime-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_dietary-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "loading_restaurant-image",
+ "loading_restaurant-address",
+ "loading_party-size-field",
+ "loading_datetime-field",
+ "loading_dietary-field",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_restaurant-image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_restaurant-address",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_party-size-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_datetime-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_dietary-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "restaurant-image",
+ "loading_restaurant-address",
+ "loading_party-size-field",
+ "loading_datetime-field",
+ "loading_dietary-field",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_restaurant-address",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_party-size-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_datetime-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_dietary-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "restaurant-image",
+ "restaurant-address",
+ "loading_party-size-field",
+ "loading_datetime-field",
+ "loading_dietary-field",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_party-size-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_datetime-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_dietary-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "restaurant-image",
+ "restaurant-address",
+ "party-size-field",
+ "loading_datetime-field",
+ "loading_dietary-field",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_datetime-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_dietary-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "restaurant-image",
+ "restaurant-address",
+ "party-size-field",
+ "loading_datetime-field",
+ "loading_dietary-field",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "textFieldType": "number"
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_datetime-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_dietary-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "booking-form",
+ "components": [
+ {
+ "id": "booking-form-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "booking-title",
+ "restaurant-image",
+ "restaurant-address",
+ "party-size-field",
+ "datetime-field",
+ "loading_dietary-field",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "enableDate": true,
+ "enableTime": true,
+ "value": {
+ "path": "/reservationTime"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "textFieldType": "number"
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_dietary-field",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "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",
+ "loading_submit-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "booking-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "enableDate": true,
+ "enableTime": true,
+ "value": {
+ "path": "/reservationTime"
+ }
+ }
+ }
+ },
+ {
+ "id": "dietary-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Dietary Requirements"
+ },
+ "text": {
+ "path": "/dietary"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "textFieldType": "number"
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "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": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "enableDate": true,
+ "enableTime": true,
+ "value": {
+ "path": "/reservationTime"
+ }
+ }
+ }
+ },
+ {
+ "id": "dietary-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Dietary Requirements"
+ },
+ "text": {
+ "path": "/dietary"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "textFieldType": "number"
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "submit-button",
+ "component": {
+ "Button": {
+ "child": "loading_submit-reservation-text",
+ "action": {
+ "name": "submit_booking",
+ "context": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-reservation-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "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": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "enableDate": true,
+ "enableTime": true,
+ "value": {
+ "path": "/reservationTime"
+ }
+ }
+ }
+ },
+ {
+ "id": "dietary-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Dietary Requirements"
+ },
+ "text": {
+ "path": "/dietary"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "textFieldType": "number"
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "submit-button",
+ "component": {
+ "Button": {
+ "child": "loading_submit-reservation-text",
+ "action": {
+ "name": "submit_booking",
+ "context": [
+ {
+ "key": "restaurantName",
+ "value": {
+ "path": "/restaurantName"
+ }
+ },
+ {
+ "key": "partySize",
+ "value": {
+ "path": "/partySize"
+ }
+ },
+ {
+ "key": "reservationTime",
+ "value": {
+ "path": "/reservationTime"
+ }
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_submit-reservation-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "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": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "enableDate": true,
+ "enableTime": true,
+ "value": {
+ "path": "/reservationTime"
+ }
+ }
+ }
+ },
+ {
+ "id": "dietary-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Dietary Requirements"
+ },
+ "text": {
+ "path": "/dietary"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "textFieldType": "number"
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "submit-button",
+ "component": {
+ "Button": {
+ "child": "loading_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": "loading_submit-reservation-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "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": "datetime-field",
+ "component": {
+ "DateTimeInput": {
+ "enableDate": true,
+ "enableTime": true,
+ "value": {
+ "path": "/reservationTime"
+ }
+ }
+ }
+ },
+ {
+ "id": "dietary-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Dietary Requirements"
+ },
+ "text": {
+ "path": "/dietary"
+ }
+ }
+ }
+ },
+ {
+ "id": "party-size-field",
+ "component": {
+ "TextField": {
+ "label": {
+ "literalString": "Party Size"
+ },
+ "text": {
+ "path": "/partySize"
+ },
+ "textFieldType": "number"
+ }
+ }
+ },
+ {
+ "id": "restaurant-address",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/address"
+ }
+ }
+ }
+ },
+ {
+ "id": "restaurant-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "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",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Book a Table at Xi'an Famous Foods"
+ },
+ {
+ "key": "address",
+ "valueString": "81 St Marks Pl, New York, NY 1"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "booking-form",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Book a Table at Xi'an Famous Foods"
+ },
+ {
+ "key": "address",
+ "valueString": "81 St Marks Pl, New York, NY 10003"
+ },
+ {
+ "key": "restaurantName",
+ "valueString": "Xi'an Famous Foods"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "booking-form",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Book a Table at Xi'an Famous Foods"
+ },
+ {
+ "key": "address",
+ "valueString": "81 St Marks Pl, New York, NY 10003"
+ },
+ {
+ "key": "restaurantName",
+ "valueString": "Xi'an Famous Foods"
+ },
+ {
+ "key": "partySize",
+ "valueString": "2"
+ },
+ {
+ "key": "reservationTime",
+ "valueString": ""
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "booking-form",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Book a Table at Xi'an Famous Foods"
+ },
+ {
+ "key": "address",
+ "valueString": "81 St Marks Pl, New York, NY 10003"
+ },
+ {
+ "key": "restaurantName",
+ "valueString": "Xi'an Famous Foods"
+ },
+ {
+ "key": "partySize",
+ "valueString": "2"
+ },
+ {
+ "key": "reservationTime",
+ "valueString": ""
+ },
+ {
+ "key": "dietary",
+ "valueString": ""
+ },
+ {
+ "key": "imageUrl",
+ "valueString": "/images/restaurant_finder/shrimpchowmein.jpeg"
+ }
+ ],
+ "path": "/"
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/theater/restaurant-confirmation.json b/tools/composer/src/data/theater/restaurant-confirmation.json
new file mode 100644
index 000000000..0225e1e4f
--- /dev/null
+++ b/tools/composer/src/data/theater/restaurant-confirmation.json
@@ -0,0 +1,1130 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "confirmation",
+ "root": "confirmation-card",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "loading_confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "loading_confirmation-column",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_confirm-title",
+ "loading_confirm-image",
+ "loading_divider1",
+ "loading_confirm-details",
+ "loading_divider2",
+ "loading_confirm-dietary",
+ "loading_divider3",
+ "loading_confirm"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-title",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-details",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-dietary",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_confirm-title",
+ "loading_confirm-image",
+ "loading_divider1",
+ "loading_confirm-details",
+ "loading_divider2",
+ "loading_confirm-dietary",
+ "loading_divider3",
+ "loading_confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-title",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-details",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-dietary",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "loading_confirm-image",
+ "loading_divider1",
+ "loading_confirm-details",
+ "loading_divider2",
+ "loading_confirm-dietary",
+ "loading_divider3",
+ "loading_confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-details",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-dietary",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirm-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "confirm-image",
+ "loading_divider1",
+ "loading_confirm-details",
+ "loading_divider2",
+ "loading_confirm-dietary",
+ "loading_divider3",
+ "loading_confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-details",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-dietary",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirm-details",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/bookingDetails"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "confirm-image",
+ "loading_divider1",
+ "confirm-details",
+ "loading_divider2",
+ "loading_confirm-dietary",
+ "loading_divider3",
+ "loading_confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-dietary",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirm-details",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/bookingDetails"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-dietary",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/dietaryRequirements"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "confirm-image",
+ "loading_divider1",
+ "confirm-details",
+ "loading_divider2",
+ "confirm-dietary",
+ "loading_divider3",
+ "loading_confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_confirm-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirm-details",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/bookingDetails"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-dietary",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/dietaryRequirements"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "literalString": "We look forward to seeing"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "confirm-image",
+ "loading_divider1",
+ "confirm-details",
+ "loading_divider2",
+ "confirm-dietary",
+ "loading_divider3",
+ "confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirm-details",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/bookingDetails"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-dietary",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/dietaryRequirements"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "literalString": "We look forward to seeing you!"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "confirm-image",
+ "loading_divider1",
+ "confirm-details",
+ "loading_divider2",
+ "confirm-dietary",
+ "loading_divider3",
+ "confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider1",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider2",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_divider3",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "confirmation",
+ "components": [
+ {
+ "id": "confirm-details",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/bookingDetails"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-dietary",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/dietaryRequirements"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-image",
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-text",
+ "component": {
+ "Text": {
+ "usageHint": "h5",
+ "text": {
+ "literalString": "We look forward to seeing you!"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirm-title",
+ "component": {
+ "Text": {
+ "usageHint": "h2",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "confirmation-card",
+ "component": {
+ "Card": {
+ "child": "confirmation-column"
+ }
+ }
+ },
+ {
+ "id": "confirmation-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "confirm-title",
+ "confirm-image",
+ "divider1",
+ "confirm-details",
+ "divider2",
+ "confirm-dietary",
+ "divider3",
+ "confirm-text"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "divider1",
+ "component": {
+ "Divider": {}
+ }
+ },
+ {
+ "id": "divider2",
+ "component": {
+ "Divider": {}
+ }
+ },
+ {
+ "id": "divider3",
+ "component": {
+ "Divider": {}
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "confirmation",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Booking at Xi'an Famous Foods"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "confirmation",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Booking at Xi'an Famous Foods"
+ },
+ {
+ "key": "bookingDetails",
+ "valueString": "4 people at 7:00 PM"
+ },
+ {
+ "key": "dietaryRequirements",
+ "valueString": "Dietary Requirements: none"
+ }
+ ],
+ "path": "/"
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/theater/restaurant-finder.json b/tools/composer/src/data/theater/restaurant-finder.json
new file mode 100644
index 000000000..ce06161fd
--- /dev/null
+++ b/tools/composer/src/data/theater/restaurant-finder.json
@@ -0,0 +1,3880 @@
+[
+ {
+ "beginRendering": {
+ "surfaceId": "default",
+ "root": "root-column",
+ "styles": {
+ "primaryColor": "#FF0000",
+ "font": "Roboto"
+ }
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_title-heading",
+ "loading_item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_title-heading",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_item-list",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "loading_item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_item-list",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "loading_item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_item-card-template",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "loading_card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "loading_template-image",
+ "loading_card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-image",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_card-details",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "loading_card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_card-details",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_template-name",
+ "loading_template-rating",
+ "loading_template-detail",
+ "loading_template-link",
+ "loading_template-book"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-name",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-rating",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-detail",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-link",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-book",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "loading_template-name",
+ "loading_template-rating",
+ "loading_template-detail",
+ "loading_template-link",
+ "loading_template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-name",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-rating",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-detail",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-link",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-book-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "loading_template-rating",
+ "loading_template-detail",
+ "loading_template-link",
+ "loading_template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-rating",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-detail",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-link",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-book-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-rating",
+ "loading_template-detail",
+ "loading_template-link",
+ "loading_template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-detail",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-link",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-book-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-rating",
+ "template-detail",
+ "loading_template-link",
+ "loading_template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-detail",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-link",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-book-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-rating",
+ "template-detail",
+ "template-link",
+ "loading_template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-detail",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-link",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/infoLink"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_template-book-button",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-rating",
+ "template-detail",
+ "template-link",
+ "template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "template-book-button",
+ "component": {
+ "Button": {
+ "child": "loading_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": "template-detail",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-link",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/infoLink"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ },
+ {
+ "id": "loading_book-now-text",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": []
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "surfaceUpdate": {
+ "surfaceId": "default",
+ "components": [
+ {
+ "id": "book-now-text",
+ "component": {
+ "Text": {
+ "text": {
+ "literalString": "Book Now"
+ }
+ }
+ }
+ },
+ {
+ "id": "card-details",
+ "weight": 2,
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "template-name",
+ "template-rating",
+ "template-detail",
+ "template-link",
+ "template-book-button"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "card-layout",
+ "component": {
+ "Row": {
+ "children": {
+ "explicitList": [
+ "template-image",
+ "card-details"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "id": "item-card-template",
+ "component": {
+ "Card": {
+ "child": "card-layout"
+ }
+ }
+ },
+ {
+ "id": "item-list",
+ "component": {
+ "List": {
+ "direction": "vertical",
+ "children": {
+ "template": {
+ "componentId": "item-card-template",
+ "dataBinding": "/items"
+ }
+ }
+ }
+ }
+ },
+ {
+ "id": "root-column",
+ "component": {
+ "Column": {
+ "children": {
+ "explicitList": [
+ "title-heading",
+ "item-list"
+ ]
+ }
+ }
+ }
+ },
+ {
+ "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": "template-detail",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/detail"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-image",
+ "weight": 1,
+ "component": {
+ "Image": {
+ "url": {
+ "path": "/imageUrl"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-link",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/infoLink"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-name",
+ "component": {
+ "Text": {
+ "usageHint": "h3",
+ "text": {
+ "path": "/name"
+ }
+ }
+ }
+ },
+ {
+ "id": "template-rating",
+ "component": {
+ "Text": {
+ "text": {
+ "path": "/rating"
+ }
+ }
+ }
+ },
+ {
+ "id": "title-heading",
+ "component": {
+ "Text": {
+ "usageHint": "h1",
+ "text": {
+ "path": "/title"
+ }
+ }
+ }
+ }
+ ]
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Szechuan Restaurants"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "contents": [
+ {
+ "key": "title",
+ "valueString": "Szechuan Restaurants in New York"
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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."
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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/)"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/shrimpchowmein.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "81 St Marks Pl, New York, NY 10003"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/shrimpchowmein.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "81 St Marks Pl, New York, NY 10003"
+ }
+ ]
+ },
+ {
+ "key": "item2",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Han Dynasty"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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 S"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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/)"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/mapotofu.jpeg"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/mapotofu.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "90 3rd Ave, New York, NY 10003"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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."
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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/)"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/beefbroccoli.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "529 Hudson St, New York, NY 10014"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/beefbroccoli.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "529 Hudson St, New York, NY 10014"
+ }
+ ]
+ },
+ {
+ "key": "item4",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Mott"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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/)"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/springrolls.jpeg"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/springrolls.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "111 W 57th St, New York, NY 10019"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/springrolls.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "111 W 57th St, New York, NY 10019"
+ }
+ ]
+ },
+ {
+ "key": "item5",
+ "valueMap": [
+ {
+ "key": "name",
+ "valueString": "Hwa Yuan Szechuan"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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."
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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/)"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "dataModelUpdate": {
+ "surfaceId": "default",
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/kungpao.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "40 E Broadway, New York, NY 1"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "path": "/"
+ }
+ },
+ {
+ "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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/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": "/images/restaurant_finder/kungpao.jpeg"
+ },
+ {
+ "key": "address",
+ "valueString": "40 E Broadway, New York, NY 10002"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ }
+]
\ No newline at end of file
diff --git a/tools/composer/src/data/theater/restaurant-grid.json b/tools/composer/src/data/theater/restaurant-grid.json
new file mode 100644
index 000000000..25cae4845
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/rizzcharts-chart.json b/tools/composer/src/data/theater/rizzcharts-chart.json
new file mode 100644
index 000000000..c7e105461
--- /dev/null
+++ b/tools/composer/src/data/theater/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/theater/weather-widget.json b/tools/composer/src/data/theater/weather-widget.json
new file mode 100644
index 000000000..868fe7400
--- /dev/null
+++ b/tools/composer/src/data/theater/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..449e521a3
--- /dev/null
+++ b/tools/composer/src/lib/transcoder.ts
@@ -0,0 +1,102 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * 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"
+ ]
}