v6: Add theme / density / font-size controls to settings dialog

.changeset/settings-dialog-presets.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/react': minor
+'graphiql': major
+---
+
+Add `SettingsDialog` component with theme, density, and font-size segmented controls backed by `useGraphiQLSettings`. Density and font-size presets fill in concrete token values for `[data-density]` and `[data-font-size]` blocks in `tokens.css`. Monaco editor font size follows the active font-size preset.
+
+**Breaking:** `GraphiQLInterfaceProps` no longer accepts `forcedTheme` or `showPersistHeadersSettings`. Both props were previously deprecated no-ops; remove them from any call sites.

packages/graphiql-react/src/components/index.ts

@@ -39,3 +39,5 @@ export { ActivityRail } from './activity-rail';
 export type { ActivityRailProps } from './activity-rail';
 export { ResponseHeader } from './response-header';
 export type { ResponseHeaderProps } from './response-header';
+export { SettingsDialog } from './settings-dialog';
+export type { SettingsDialogProps } from './settings-dialog';

packages/graphiql-react/src/components/settings-dialog/index.css

@@ -0,0 +1,49 @@
+.graphiql-settings-dialog {
+  min-width: 360px;
+}
+
+.graphiql-settings-dialog-header {
+  align-items: center;
+  border-bottom: 1px solid oklch(var(--border-default));
+  display: flex;
+  justify-content: space-between;
+  padding: var(--px-12) var(--px-4) var(--px-12) var(--px-16);
+}
+
+.graphiql-settings-dialog-title {
+  color: oklch(var(--fg-strong));
+  font-family: var(--font-family);
+  font-size: var(--font-size-body);
+  font-weight: 600;
+  margin: 0;
+}
+
+.graphiql-settings-dialog-body {
+  display: flex;
+  flex-direction: column;
+  padding: var(--px-4) 0;
+}
+
+.graphiql-settings-section {
+  align-items: center;
+  border-bottom: 1px solid oklch(var(--border-muted));
+  display: flex;
+  gap: var(--px-16);
+  justify-content: space-between;
+  padding: var(--px-12) var(--px-16);
+}
+
+.graphiql-settings-section:last-child {
+  border-bottom: none;
+}
+
+.graphiql-settings-section-title {
+  color: oklch(var(--fg-default));
+  flex-shrink: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-small);
+  font-weight: 500;
+  letter-spacing: var(--letter-spacing-ui);
+  margin: 0;
+  min-width: 72px;
+}

packages/graphiql-react/src/components/settings-dialog/index.tsx

@@ -0,0 +1,115 @@
+'use no memo';
+
+import type { FC } from 'react';
+import { Dialog } from '../dialog';
+import { SegmentedControl } from '../segmented-control';
+import {
+  useGraphiQLSettings,
+  type Theme,
+  type Density,
+  type FontSize,
+} from '../../hooks/use-graphiql-settings';
+import { useMonaco } from '../../stores';
+import { useEffect } from 'react';
+import './index.css';
+
+const FONT_SIZE_PX: Record<FontSize, number> = {
+  compact: 12,
+  default: 13,
+  large: 14,
+  xl: 16,
+};
+
+const THEME_OPTIONS: { value: Theme; label: string }[] = [
+  { value: 'auto', label: 'Auto' },
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+];
+
+const DENSITY_OPTIONS: { value: Density; label: string }[] = [
+  { value: 'compact', label: 'Compact' },
+  { value: 'comfortable', label: 'Comfortable' },
+  { value: 'spacious', label: 'Spacious' },
+];
+
+const FONT_SIZE_OPTIONS: { value: FontSize; label: string }[] = [
+  { value: 'compact', label: 'Compact' },
+  { value: 'default', label: 'Default' },
+  { value: 'large', label: 'Large' },
+  { value: 'xl', label: 'Extra Large' },
+];
+
+export interface SettingsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Settings dialog with controls for theme, density, and font size.
+ * Reads and writes settings via `useGraphiQLSettings`. Monaco editor
+ * font size is updated to match the active font-size preset.
+ */
+export const SettingsDialog: FC<SettingsDialogProps> = ({
+  open,
+  onOpenChange,
+}) => {
+  const { theme, setTheme, density, setDensity, fontSize, setFontSize } =
+    useGraphiQLSettings();
+  const monaco = useMonaco(state => state.monaco);
+
+  // Keep Monaco editor font size in sync with the active preset.
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+    const px = FONT_SIZE_PX[fontSize];
+    monaco.editor.getEditors().forEach(editor => {
+      editor.updateOptions({ fontSize: px });
+    });
+  }, [fontSize, monaco]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <div className="graphiql-settings-dialog">
+        <div className="graphiql-settings-dialog-header">
+          <Dialog.Title className="graphiql-settings-dialog-title">
+            Settings
+          </Dialog.Title>
+          <Dialog.Close />
+        </div>
+
+        <div className="graphiql-settings-dialog-body">
+          <section className="graphiql-settings-section">
+            <h3 className="graphiql-settings-section-title">Theme</h3>
+            <SegmentedControl
+              value={theme}
+              onChange={setTheme}
+              ariaLabel="Theme"
+              options={THEME_OPTIONS}
+            />
+          </section>
+
+          <section className="graphiql-settings-section">
+            <h3 className="graphiql-settings-section-title">Density</h3>
+            <SegmentedControl
+              value={density}
+              onChange={setDensity}
+              ariaLabel="Density"
+              options={DENSITY_OPTIONS}
+            />
+          </section>
+
+          <section className="graphiql-settings-section">
+            <h3 className="graphiql-settings-section-title">Font size</h3>
+            <SegmentedControl
+              value={fontSize}
+              onChange={setFontSize}
+              ariaLabel="Font size"
+              options={FONT_SIZE_OPTIONS}
+            />
+          </section>
+        </div>
+      </div>
+    </Dialog>
+  );
+};

packages/graphiql-react/src/components/settings-dialog/settings-dialog.stories.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button';
+import { SettingsDialog } from './index';
+
+const meta: Meta<typeof SettingsDialog> = {
+  title: 'Components/SettingsDialog',
+  component: SettingsDialog,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SettingsDialog>;
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Settings</Button>
+        <SettingsDialog open={open} onOpenChange={setOpen} />
+      </>
+    );
+  },
+};
+
+export const AlwaysOpen: Story = {
+  render: function AlwaysOpenStory() {
+    return <SettingsDialog open onOpenChange={() => {}} />;
+  },
+};