GraphiQL v6

.changeset/activity-rail.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/react': minor
+'graphiql': major
+---
+
+Replace the left-side plugin sidebar with `ActivityRail`. Plugins render as a flat list in registration order with a 2px blue left border on the active plugin. Settings gear at the bottom opens the settings dialog.
+
+The previous `graphiql-sidebar` DOM structure and CSS class names are removed. Custom CSS overrides targeting `.graphiql-sidebar` or its children will need updating. Only CSS variable names are part of the public API.

.changeset/doc-explorer-redesign.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-doc-explorer': minor
+---
+
+Redesign the Schema Explorer panel: eyebrow header with filter and search icon buttons, dedicated breadcrumb row with color-coded depth segments, inline search row with keycap hint, type card with TYPE badge and implements list, and a mono field list with type colors and active-row accent border.

.changeset/history-method-pill.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/plugin-history': patch
+'@graphiql/toolkit': patch
+---
+
+Show a `MethodPill` (`QRY`/`MUT`/`SUB`) on each History row in place of the green status dot. `QueryStoreItem` gains an optional `operation` field, populated at write time from the parsed query. The Clear button no longer flashes green on success.

.changeset/keycap-hint-os-detection.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+`KeycapHint` now takes semantic modifier names via the new `MODIFIER` constant. `MODIFIER.Meta` renders as `⌘` on macOS and `Ctrl` elsewhere; `Ctrl`/`Alt`/`Shift` render as Mac glyphs (`⌃`/`⌥`/`⇧`) on macOS and as plain text on other platforms. `Enter` renders as `⏎` on every platform.

.changeset/keycap-hint.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a `KeycapHint` primitive for displaying inline keyboard shortcuts (e.g. `⌘K`, `⌘⏎`). Used in the new top bar; available for general consumer use.

.changeset/method-pill.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a `MethodPill` primitive: a small colored pill labeling an operation as QRY (query), MUT (mutation), or SUB (subscription).

.changeset/monaco-theme-v6.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Replace the Monaco editor theme with v6-aligned token colors. Both `graphiql-DARK` and `graphiql-LIGHT` now cover all GraphQL token types (keywords, type names, field identifiers, variables, annotations, strings, numbers, comments) using the v6 design's accent palette. UI chrome colors (suggest widget, hover widget, quick input) are updated to match.

.changeset/oklch-tokens.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Introduce the v6 OKLCH design-token system with both dark and light theme palettes. Tokens (`--bg-canvas`, `--fg-default`, `--accent-blue`, etc.) are stored as OKLCH triplets so opacity can be combined at the call site. Themes are keyed off `data-theme` (`dark` is the default; `light` activates explicitly or via `prefers-color-scheme: light` when no override is set). Existing v5 variables are unchanged; component styles continue to use them until they are migrated.

.changeset/panel-header.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a `PanelHeader` primitive for side panels. Renders a title, optional subtitle, and optional action-icon row.

.changeset/pre.json

@@ -0,0 +1,29 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "example-graphiql-vite": "0.0.0",
+    "example-graphiql-vite-react-router": "1.0.0",
+    "example-graphiql-webpack": "0.0.0",
+    "example-monaco-graphql-nextjs": "0.0.0",
+    "example-monaco-graphql-react-vite": "0.0.0",
+    "example-monaco-graphql-webpack": "0.0.0",
+    "cm6-graphql": "0.2.1",
+    "codemirror-graphql": "2.2.4",
+    "graphiql": "5.2.2",
+    "@graphiql/plugin-code-exporter": "5.1.1",
+    "@graphiql/plugin-doc-explorer": "0.4.1",
+    "@graphiql/plugin-explorer": "5.1.1",
+    "@graphiql/plugin-history": "0.4.1",
+    "@graphiql/react": "0.37.3",
+    "@graphiql/toolkit": "0.11.3",
+    "graphql-language-service": "5.5.0",
+    "graphql-language-service-cli": "3.5.0",
+    "graphql-language-service-server": "2.14.8",
+    "monaco-graphql": "1.7.3",
+    "vscode-graphql": "0.13.2",
+    "vscode-graphql-execution": "0.3.2",
+    "vscode-graphql-syntax": "1.3.8"
+  },
+  "changesets": []
+}

.changeset/response-pane-header.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a response pane header showing status, elapsed time, response size, a JSON / Tree / Table view toggle, and a copy button. The selected view is persisted in storage and restored on reload. Tree and Table views render a placeholder until their implementations land.

.changeset/response-tree-view.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add `ResponseTreeView` component for the response pane's Tree view. Renders GraphQL response JSON as a collapsible tree with type-colored values. Top-level nodes expand by default; deeper levels are collapsed. Selecting "Tree" in the response pane view toggle now shows the tree instead of a placeholder.

.changeset/restyle-button-iconbutton.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Restyle `Button` and `ToolbarButton` to the v6 OKLCH design tokens. Adds a `primary` variant to `Button` for the Run-button style. Storybook stories added for each variant. Props and behavior unchanged.

.changeset/restyle-dialog.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Restyle `Dialog` to the v6 design: `--bg-elevated` surface, refined border, larger radius. Behavior and API unchanged.

.changeset/restyle-doc-explorer.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+---
+
+Restyle to the v6 design. Uses the new `PanelHeader` chrome and OKLCH design tokens. Type names render in `--accent-orange`, field and enum names in `--accent-green-light`, argument names in `--accent-purple`.

.changeset/restyle-dropdown-menu.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Restyle `DropdownMenu` to the v6 design. Behavior and API unchanged.

.changeset/restyle-editortabs.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Restyle the editor tabs to the v6 design. Tabs now show a dirty-state dot when unsaved changes are present and a hover-only close affordance per tab. Adds a `lastSavedQuery` field to the tab store; the dirty state is computed from the diff against that snapshot. Adds a `saveQuery` action (keybind `Ctrl-S` / `Cmd-S`) that updates the snapshot. Adds prettify, copy, and save buttons to the right side of the tab strip.

.changeset/restyle-history.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-history': patch
+---
+
+Restyle to the v6 design. New row layout with status dot, mono name label, and inline variables snippet. Uses `PanelHeader` for the panel chrome.

.changeset/restyle-spinner.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Restyle `Spinner` to the v6 design. Default stroke uses the muted foreground token.

.changeset/restyle-tabs.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Restyle `Tabs` primitive to the v6 design. Active state uses a top accent border bleeding into the strip's bottom border.

.changeset/restyle-tooltip.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Restyle `Tooltip` to the v6 design: `--bg-elevated` surface, simplified border and shadow.

.changeset/segmented-control-radio.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Rewrite `SegmentedControl` on top of native radio inputs. Public props are unchanged. Keyboard navigation (arrow keys, Home / End) and screen-reader semantics now come from the browser; the group is a single tab stop instead of one per option.

.changeset/segmented-control.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a `SegmentedControl` primitive for selecting one option from a small set inline. Used by the new top-bar response view toggle and several settings controls.

.changeset/side-panel.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add `SidePanel` component that hosts the active plugin's content next to the activity rail. Default width 340px, resizable.

.changeset/status-bar.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a `StatusBar` layout component: a 24px-tall footer at the bottom of the app showing connection status, schema type count, active plugin count, cursor position, and document metadata (encoding, indent, language label).

.changeset/theme-data-attribute.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+`setTheme` now mirrors the chosen theme onto `document.documentElement` as a `data-theme` attribute. The v6 OKLCH token cascade in `tokens.css` is gated on `[data-theme='light']` / `[data-theme='dark']` selectors and was previously never matched, so v6 components fell back to the OS `prefers-color-scheme` regardless of the GraphiQL theme toggle. The existing `body.graphiql-light` / `body.graphiql-dark` classes are preserved for backwards compatibility with custom CSS.

.changeset/topbar-component.md

@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+'graphiql': patch
+---
+
+Add a new `TopBar` layout component with brand, endpoint URL display, command palette button, and primary Run button. Endpoint method/URL are placeholders until the transport API lands. `TopBar` is now mounted at the top of the GraphiQL layout.

.changeset/transport-api.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/toolkit': minor
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+Add a `Transport` API alongside the existing `Fetcher`. `createTransport({...})` performs the GraphQL request and returns a `TransportResponse` carrying the real HTTP wire metadata (status, headers, timing, size) for queries, mutations, subscriptions, and incremental delivery. `<GraphiQL>` accepts a new `transport` prop, mutually exclusive with `fetcher` at the type level, that lets the response pane surface those values directly from the underlying `Response`. Subscriptions require an explicit `subscriptionClient` (any client whose `.subscribe(payload, sink)` matches the `graphql-ws` `Client` shape, including `graphql-sse`'s `createClient()`); the toolkit no longer constructs one. The CDN bundle exposes `GraphiQL.createTransport` and `GraphiQL.createWsClient` so script-tag consumers can adopt without a bundler.
+
+`createGraphiQLFetcher`, the `Fetcher` type and its companions, and the `<GraphiQL fetcher={...}>` prop are deprecated but continue to work unchanged. Existing code keeps compiling. Consumers on the deprecated path see a one-time dismissible banner in the response pane pointing at `docs/migration/graphiql-6.0.0.md` rather than fabricated status/timing/size values.

.changeset/use-graphiql-settings.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add a `useGraphiQLSettings()` hook for managing theme / density / font-size preferences with `localStorage` persistence. Settings apply automatically to the GraphiQL container via `data-*` attributes.

.changeset/v6-alpha-line.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+Initial v6 alpha. Refs graphql/graphiql#4219.

.github/workflows/pr.yml

@@ -76,6 +76,7 @@ jobs:
         with:
           key: build-${{ github.sha }}
           path: ${{ env.BUILD-CACHE-LIST }}
+      - run: npx playwright install --with-deps chromium
       - run: yarn test
 
   lint:

.github/workflows/release.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
       - release/*
+      - graphiql-6
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.gitignore

@@ -53,3 +53,5 @@ packages/graphiql/typedoc/
 packages/graphiql/webpack/
 
 .react-router/
+
+storybook-static/

docs/migration/graphiql-6.0.0.md

@@ -0,0 +1,160 @@
+# Upgrading `graphiql` to `6.0.0`
+
+This covers the one notable change in `graphiql@6`: a new `Transport` API that replaces `Fetcher`/`createGraphiQLFetcher`. The rest of the surface carries over. Open an issue if something is missing here and we'll add it.
+
+## Overview
+
+`@graphiql/toolkit` adds `createTransport`, which takes the same options as `createGraphiQLFetcher` and produces a `Transport`. Unlike `Fetcher`, a `Transport`'s response carries the real HTTP wire data: status code, headers, body, timing, and request/response sizes. `<GraphiQL>` accepts a new `transport` prop alongside the existing `fetcher` prop; the two are mutually exclusive at the type level. The old API still works.
+
+## `createGraphiQLFetcher` → `createTransport`
+
+The HTTP options object carries over. Subscriptions are different: `createTransport` does not build a subscription client for you. You construct your own `graphql-ws` (or `graphql-sse`) client and pass it as `subscriptionClient`. There is no `subscriptionUrl`, `wsClient`, `legacyClient`, or `wsConnectionParams` option.
+
+**Before:**
+
+```ts
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+
+const fetcher = createGraphiQLFetcher({
+  url: 'https://my.endpoint/graphql',
+  subscriptionUrl: 'wss://my.endpoint/graphql',
+});
+```
+
+**After (WebSocket subscriptions):**
+
+```ts
+import { createClient } from 'graphql-ws';
+import { createTransport } from '@graphiql/toolkit';
+
+const transport = createTransport({
+  url: 'https://my.endpoint/graphql',
+  subscriptionClient: createClient({ url: 'wss://my.endpoint/graphql' }),
+});
+```
+
+**After (SSE subscriptions):**
+
+`graphql-sse`'s `createClient()` is signature-compatible with `graphql-ws`, so the same option drives either protocol:
+
+```ts
+import { createClient } from 'graphql-sse';
+import { createTransport } from '@graphiql/toolkit';
+
+const transport = createTransport({
+  url: 'https://my.endpoint/graphql',
+  subscriptionClient: createClient({
+    url: 'https://my.endpoint/graphql/stream',
+  }),
+});
+```
+
+If you only run queries and mutations, leave `subscriptionClient` off. A subscription dispatched without it throws with a pointer back to this page.
+
+## `<GraphiQL fetcher={...}>` → `<GraphiQL transport={...}>`
+
+**Before:**
+
+```tsx
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+
+const fetcher = createGraphiQLFetcher({ url: 'https://my.endpoint/graphql' });
+
+function App() {
+  return <GraphiQL fetcher={fetcher} />;
+}
+```
+
+**After:**
+
+```tsx
+import { createTransport } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+
+const transport = createTransport({ url: 'https://my.endpoint/graphql' });
+
+function App() {
+  return <GraphiQL transport={transport} />;
+}
+```
+
+Passing both props is a type error. Remove `fetcher` when you add `transport`.
+
+## What you get
+
+With a `Transport`, the response pane header shows the real HTTP status code, total round-trip time, and the request and response byte sizes, read directly off the `Response`. Response headers are accessible through the response detail panel.
+
+With a `fetcher`, none of that is observable. The `Fetcher` contract is `(params) => ExecutionResult`, which discards the HTTP envelope before GraphiQL sees it. The response pane shows a small dismissible notice pointing here instead of fabricated values.
+
+## Custom fetchers (FAQ)
+
+If you hand-rolled a `Fetcher` rather than using `createGraphiQLFetcher`, migrate by implementing the `Transport` interface directly. A `Transport` is an object with a `send(request)` method. For queries and mutations it returns a `Promise<TransportResponse>`; for subscriptions and incremental delivery it returns an `AsyncIterable<TransportResponse>`, one entry per event or chunk.
+
+**Before (custom fetcher):**
+
+```ts
+import type { Fetcher } from '@graphiql/toolkit';
+
+const fetcher: Fetcher = async params => {
+  const res = await fetch('/graphql', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(params),
+  });
+  return res.json();
+};
+```
+
+**After (custom transport):**
+
+```ts
+import type { Transport } from '@graphiql/toolkit';
+
+const transport: Transport = {
+  async send(request) {
+    const startMs = performance.now();
+    const requestBody = JSON.stringify({
+      query: request.query,
+      operationName: request.operationName,
+      variables: request.variables,
+    });
+    const response = await fetch('/graphql', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', ...request.headers },
+      body: requestBody,
+    });
+    const body = await response.json();
+    const headers: Record<string, string> = {};
+    response.headers.forEach((value, key) => {
+      headers[key] = value;
+    });
+    return {
+      ok: !body.errors?.length,
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+      body,
+      timing: { totalMs: performance.now() - startMs },
+      size: {
+        request: new TextEncoder().encode(requestBody).length,
+        response: new TextEncoder().encode(JSON.stringify(body)).length,
+      },
+    };
+  },
+};
+```
+
+Read `status`, `statusText`, and `headers` off the real `Response`. Don't hard-code them; the response pane reads those fields directly.
+
+## What's deprecated, not removed
+
+The following are deprecated in `graphiql@6`. They continue to work and might be removed in a future major version.
+
+| Deprecated                                       | Replacement       |
+| ------------------------------------------------ | ----------------- |
+| `createGraphiQLFetcher` from `@graphiql/toolkit` | `createTransport` |
+| `fetcher` prop on `<GraphiQL>`                   | `transport` prop  |
+| `Fetcher` type from `@graphiql/toolkit`          | `Transport`       |
+
+Existing code keeps compiling and running today. Migrate when you want the response pane to show real wire data, or before a future major version drops the deprecated path.