## Description The [`ai_api_explorer`](https://git.drupalcode.org/project/ai/-/tree/1.x/modules/ai_api_explorer) sub-module ships 19 explorer plugins. Each one has grown on its own, with float-based columns (on a phone they squeeze to about 80 px each), ad-hoc form construction and inconsistent styling. The unified design is now done. It is a public design canvas covering the hub and every explorer, in light and dark, desktop and phone: **Design: https://claude.ai/artifact/3BNzywVcnMjRCgo5jCQ6GM** This issue builds the **shared layout, CSS and components** from that canvas, so every per-explorer issue can start as soon as it lands. It does not change any explorer's behaviour. Feature work that several explorers share (run history, code examples, input pickers, players) has its own issue; see the meta issue in Related issues. ## Tasks * [ ] Page shell: header with breadcrumb, title, one-line description and page actions (for example Copy PHP, Export JSON). * [ ] Workspace layout: a "Set up" panel (input and settings) and a "Results" panel, built with CSS grid. On narrow screens it becomes two tabs ("Set up" / "Results · n"); the Chat explorer adds a left drawer for chats and a right panel that turns into a bottom sheet. * [ ] Responsive by container queries, not viewport media queries, so the layout also works in narrow admin themes and off-canvas. Touch targets at least 44 px on phones. * [ ] Components: segmented control, pick-chips (single and multi), removable chips, status pills (ok / error / running), score bars, cards for runs with a header row (badge, time, actions), collapsible code panel with copy, settings tabs, empty state, inline error card with retry, progress with cancel, dialog that becomes a bottom sheet on phones, toast for copy and download. * [ ] Theming: CSS custom properties that map to Gin's variables when Gin is the admin theme and to Claro's otherwise. Dark mode follows Gin's dark mode setting and `prefers-color-scheme`. * [ ] Accessibility: real buttons and labels, visible focus, `aria-pressed` / `aria-selected` / `aria-expanded` where the design toggles, text contrast 4.5:1 in both themes. * [ ] Twig templates for the shell and the shared parts (`ai-api-explorer-page`, `ai-api-explorer-run`, `ai-api-explorer-code`), plus small JS behaviours for tabs, drawer, bottom sheet and copy. * [ ] Replace `AiApiExplorerPluginBase::getFormTemplate()` with helpers that build the new regions, and keep the old method working until every explorer has moved. * [ ] A style guide page in the `ai_test` module that shows every component in light and dark, for review and visual regression tests. ## Acceptance criteria * The style guide page shows every component from the canvas, in Gin and Claro, light and dark, desktop and phone width. * Existing explorers look and work as before; nothing is migrated in this issue. * A per-explorer issue can be done without making further design decisions or adding its own layout CSS. ## Related issues Meta issue and per-explorer issues: see links. Each per-explorer issue is blocked by this one. AI-Generated: Yes (Used Claude Code to update this issue from the design canvas and an audit of `modules/ai_api_explorer` on 1.x.)