## Description Apply the shared layout and components from #3586402 to the **Text-To-Image Generation Explorer** (`modules/ai_api_explorer/src/Plugin/AiApiExplorer/TextToImageGenerator.php`) and build its redesign. **Design:** [design canvas](https://claude.ai/artifact/3BNzywVcnMjRCgo5jCQ6GM), page "Text to image" (light and dark, desktop and phone). This issue is blocked by #3586402. This explorer must also switch to the **AI Provider Configuration form element** (`ai_provider_configuration`, [docs](https://project.pages.drupalcode.org/ai/1.3.x/developers/ai_provider_configuration_element/#ai-provider-configuration-form-element)) in place of `AiProviderFormHelper::generateAiProvidersForm()`, as the Decision explorer already does. ### What the design adds * Prompt and settings on the left, results on the right, instead of one long form. * Size as shape tiles; sizes the selected model cannot make are disabled; **Auto** where the API supports it. * Every run kept with its prompt, settings, timing and PHP (#3586772). * Progress while generating, with **Cancel**. * Errors stay in Results next to the run that failed, with a one-click retry. * Preview: click an image to open it full size with its prompt and settings; download in its real format (#3586776). **Save to media library**, disabled with the reason when Media is off. * **Use as source** opens the image in Image to image (#3586778). * Phone: prompt and a one-line settings summary up top, full settings in a bottom sheet, results in a two-column grid, preview full screen. ### Bugs to fix while here Checked on 1.x (`c3b8595d7`); paths relative to `modules/ai_api_explorer/src/Plugin/AiApiExplorer/` unless shown. * Every image is saved with a `.png` name (`TextToImageGenerator.php:185`) and as `image.png` in media (`:196`), also when the output is JPEG or WebP. * Code example calls `$response->getRaw()` (`:312`): `TextToImageOutput` only has `getRawOutput()`, and `$response` is undefined in the snippet. * Sizes come from the provider's definitions: `ai_provider_openai` offers 1792×1024 and 1024×1792 for every model and no `auto`, so gpt-image-1 fails with "Invalid size". Per-model sizes need a follow-up in the provider. ## Tasks * [ ] Replace the provider/model selection with the `ai_provider_configuration` element. * [ ] Rebuild the form on the shell, regions and components from #3586402; remove local styling. * [ ] Build each point under "What the design adds". * [ ] Store each run with run history (#3586772) and render Results from stored runs. * [ ] Generate the code example per run with the shared builder (#3586773). * [ ] Use the shared input picker (#3586778) for file input. * [ ] Use the shared player / image viewers (#3586776) for results. * [ ] States: running, error kept next to its run with Retry, empty before the first run. * [ ] Fix the bugs listed above. * [ ] Keyboard and screen reader check: labels, focus order, pressed and selected states. * [ ] Tests: build and submit the form against the `ai_test` provider where it supports the operation, and cover each fixed bug. ## Acceptance criteria * The explorer matches the canvas page "Text to image" in Gin and Claro, light and dark, desktop and phone width. * Provider and model selection use the `ai_provider_configuration` element. * Runs survive a reload when run history is on, and the explorer works as before when it is off. * The bugs above are fixed and covered by tests. * No ad-hoc styling remains in this plugin. ## Related issues * Blocked by #3586402 (shared layout, CSS and components). * Uses #3586772 (run history), #3586773 (code examples), #3586776 (audio player and image viewers), #3586778 (input picker). AI-Generated: Yes (Used Claude Code to update this issue from the design canvas and a check of `TextToImageGenerator.php` on 1.x.)