diff --git a/e2e/drivers/svelte.ts b/e2e/drivers/svelte.ts
index 7cc8c18..e1549f2 100644
--- a/e2e/drivers/svelte.ts
+++ b/e2e/drivers/svelte.ts
@@ -13,7 +13,7 @@ import type {
 } from './types';
 
 // Every slider's `data-testid` equals its `SliderName` directly (see
-// ConfigurationTab.svelte/ExportTab.svelte) - unlike DashDriver, no lookup
+// the Preview/Ground/Slices panels and ExportDialog.svelte) - unlike DashDriver, no lookup
 // table of distinct DOM ids is needed.
 
 /**
@@ -24,11 +24,10 @@ import type {
  * returns `true`.
  */
 /** The workflow step whose Inspector panel is each former main tab. */
-const STEP_FOR_TAB: Record<Exclude<MainTab, 'Configuration'>, string> = {
+const STEP_FOR_TAB: Record<Exclude<MainTab, 'Configuration' | 'Export'>, string> = {
   Mode: 'depth',
   Segmentation: 'slices',
   Inpainting: 'inpaint',
-  Export: 'export',
 };
 
 /** The workflow step whose Inspector panel holds each slider. */
@@ -59,19 +58,49 @@ export class SvelteDriver implements UiDriver {
   }
 
   /**
-   * The redesigned UI has no workflow tabs: each former tab is a workflow
-   * step's Inspector panel, and Configuration is the Settings panel.
+   * The redesigned UI has no workflow tabs: Mode, Segmentation and
+   * Inpainting are workflow steps' Inspector panels, while Export and
+   * Configuration are the Export and Settings dialogs.
    */
   async openTab(tab: MainTab): Promise<void> {
-    const inspector = this.page.getByTestId('inspector');
     if (tab === 'Configuration') {
-      if ((await inspector.getAttribute('data-panel')) !== 'Configuration') {
-        await this.page.getByTestId('open-settings').click();
-      }
+      await this.openDialog('settings');
+    } else if (tab === 'Export') {
+      await this.openDialog('export');
     } else {
+      await this.closeDialogs();
       await this.page.getByTestId(`step-${STEP_FOR_TAB[tab]}`).click();
+      await expect(this.page.getByTestId('inspector')).toHaveAttribute('data-panel', tab);
     }
-    await expect(inspector).toHaveAttribute('data-panel', tab);
+  }
+
+  private openDialogs(): Locator {
+    return this.page.locator('dialog[open]');
+  }
+
+  /** Closes an open dialog (Esc), so the workspace behind it takes clicks again. */
+  private async closeDialogs(): Promise<void> {
+    if ((await this.openDialogs().count()) === 0) return;
+    await this.page.keyboard.press('Escape');
+    await expect(this.openDialogs()).toHaveCount(0);
+  }
+
+  private async openDialog(name: 'export' | 'settings'): Promise<void> {
+    const dialog = this.page.getByTestId(`${name}-dialog`);
+    if (await dialog.isVisible()) return;
+    await this.closeDialogs();
+    await this.page.getByTestId(name === 'export' ? 'step-export' : 'open-settings').click();
+    await expect(dialog).toBeVisible();
+  }
+
+  /** Opens the Export dialog on the pane (3D scene or Animation) holding `testId`. */
+  private async revealInExport(testId: string): Promise<void> {
+    await this.openDialog('export');
+    const control = this.page.getByTestId(testId);
+    if (await control.isVisible()) return;
+    const tab = ['number-of-frames', 'animation-export'].includes(testId) ? 'animation' : 'gltf';
+    await this.page.getByTestId(`export-tab-${tab}`).click();
+    await expect(control).toBeVisible();
   }
 
   // Observable elements
@@ -103,6 +132,7 @@ export class SvelteDriver implements UiDriver {
 
   /** Picks a canvas tool (Pan, Segment, Brush, Horizon) unless it is already active. */
   private async ensureTool(tool: 'pan' | 'segment' | 'brush' | 'horizon'): Promise<void> {
+    await this.closeDialogs();
     const button = this.page.getByTestId(`tool-${tool}`);
     if ((await button.getAttribute('aria-pressed')) !== 'true') {
       await button.click();
@@ -112,6 +142,7 @@ export class SvelteDriver implements UiDriver {
 
   /** Shows a canvas view (Input, Depth, Slice, Composite, Parallax 2D, 3D). */
   private async ensureView(view: 'input' | 'depth' | 'slice' | 'composite' | 'parallax' | '3d'): Promise<void> {
+    await this.closeDialogs();
     const tab = this.page.getByTestId(`view-${view}`);
     if ((await tab.getAttribute('aria-selected')) !== 'true') {
       await tab.click();
@@ -121,6 +152,7 @@ export class SvelteDriver implements UiDriver {
 
   /** Split by depth is a collapsible section of the Slices panel. */
   private async openSplitByDepth(): Promise<void> {
+    await this.closeDialogs();
     const toggle = this.page.getByTestId('split-toggle');
     if (!(await toggle.isVisible())) await this.openTab('Segmentation');
     if ((await toggle.getAttribute('aria-expanded')) !== 'true') await toggle.click();
@@ -129,6 +161,7 @@ export class SvelteDriver implements UiDriver {
 
   /** Per-slice actions live in the Inspector's header for the selected slice. */
   private async ensureSelected(index: number): Promise<void> {
+    await this.closeDialogs();
     const row = this.sliceRow(index);
     if ((await row.getAttribute('aria-selected')) !== 'true') {
       await row.getByTestId('slice-thumbnail').click();
@@ -213,8 +246,10 @@ export class SvelteDriver implements UiDriver {
   }
 
   private async activeMainTab(): Promise<MainTab | null> {
+    if (await this.page.getByTestId('settings-dialog').isVisible()) return 'Configuration';
+    if (await this.page.getByTestId('export-dialog').isVisible()) return 'Export';
     const panel = await this.page.getByTestId('inspector').getAttribute('data-panel');
-    const known: MainTab[] = ['Mode', 'Segmentation', 'Inpainting', 'Export', 'Configuration'];
+    const known: MainTab[] = ['Mode', 'Segmentation', 'Inpainting'];
     return (known.find((tab) => tab === panel) as MainTab | undefined) ?? null;
   }
 
@@ -233,6 +268,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async clickImagePixel(x: number, y: number, modifiers: Modifier[] = []): Promise<void> {
+    await this.closeDialogs();
     // Same position computation as DashDriver.clickImagePixel: the main
     // image renders at `width: 100%; height: auto` (see
     // InputImagePanel.svelte), so this scale is the exact inverse of the
@@ -259,6 +295,7 @@ export class SvelteDriver implements UiDriver {
    * same gesture Dash's own JS-03 `handleWheel` responds to.
    */
   async zoomIn(): Promise<void> {
+    await this.closeDialogs();
     const box = await this.page.getByTestId('input-image-panel').boundingBox();
     if (!box) throw new Error('Input image panel has no bounding box');
     await this.page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
@@ -271,6 +308,7 @@ export class SvelteDriver implements UiDriver {
    * always pans regardless of the active tab (see viewport.svelte.ts).
    */
   async panBy(dx: number, dy: number): Promise<void> {
+    await this.closeDialogs();
     const box = await this.page.getByTestId('input-image-panel').boundingBox();
     if (!box) throw new Error('Input image panel has no bounding box');
     const startX = box.x + box.width / 2;
@@ -282,10 +320,12 @@ export class SvelteDriver implements UiDriver {
   }
 
   async resetZoom(): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('zoom-reset').click();
   }
 
   async selectSlice(projectId: string, index: number): Promise<Locator> {
+    await this.closeDialogs();
     const image = this.sliceImage(index);
     await expect(image).toBeVisible();
     await image.click();
@@ -295,6 +335,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async toggleMultiPoint(): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('multi-point').click();
   }
 
@@ -303,6 +344,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async commitMultiPoint(): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('multi-commit').click();
     await expect(this.log()).toContainText(/Committed points/);
   }
@@ -334,6 +376,7 @@ export class SvelteDriver implements UiDriver {
    * `pointermove`/`pointerup` events the canvas actually listens for.
    */
   async drawMaskStroke(): Promise<void> {
+    await this.closeDialogs();
     await this.ensureTool('brush');
     const canvas = this.page.getByTestId('mask-canvas');
     await expect(canvas).toBeVisible();
@@ -372,6 +415,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async fillPrompts(positive: string, negative: string): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('positive-prompt').fill(positive);
     await this.page.getByTestId('negative-prompt').fill(negative);
   }
@@ -382,23 +426,28 @@ export class SvelteDriver implements UiDriver {
   }
 
   async generateInpainting(): Promise<void> {
+    await this.closeDialogs();
     // Deliberately does not wait for candidates: scenarios assert counts themselves.
     await this.page.getByTestId('generate-inpainting').click();
   }
 
   async fillInpainting(): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('fill-inpainting').click();
   }
 
   async enhance(): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('enhance-inpainting').click();
   }
 
   async erase(): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('erase-inpainting').click();
   }
 
   async selectCandidate(index: number): Promise<void> {
+    await this.closeDialogs();
     const candidate = this.candidateImages().nth(index);
     await candidate.click();
     await expect(candidate).toHaveAttribute('aria-selected', 'true');
@@ -406,6 +455,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async applyCandidate(): Promise<void> {
+    await this.closeDialogs();
     await this.page.getByTestId('apply-inpainting').click();
   }
 
@@ -436,35 +486,43 @@ export class SvelteDriver implements UiDriver {
   }
 
   async createSlice(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('create-slice'));
   }
 
   async deleteSlice(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('delete-slice'));
   }
 
   async addMaskToSlice(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('add-mask-to-slice'));
   }
 
   async removeMaskFromSlice(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('remove-mask-from-slice'));
   }
 
   async copySlice(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('copy-slice'));
   }
 
   async pasteSlice(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('paste-slice'));
   }
 
   async balanceSlices(): Promise<void> {
+    await this.closeDialogs();
     await this.openSplitByDepth();
     await this.page.getByTestId('balance-slices').click();
   }
 
   async setSliceDepth(index: number, depth: number): Promise<void> {
+    await this.closeDialogs();
     const display = this.sliceRow(index).getByTestId('slice-depth-display');
     await expect(display).toBeVisible();
     await display.click();
@@ -485,6 +543,7 @@ export class SvelteDriver implements UiDriver {
     index: number,
     file: { name: string; mimeType: string; buffer: Buffer },
   ): Promise<void> {
+    await this.closeDialogs();
     await this.ensureSelected(index);
     const before = await this.log().innerText();
     const input = this.page.getByTestId('slice-upload-input');
@@ -493,14 +552,17 @@ export class SvelteDriver implements UiDriver {
   }
 
   async invertMask(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('invert-mask'));
   }
 
   async featherMask(): Promise<void> {
+    await this.closeDialogs();
     await this.clickAndWaitForLogChange(this.page.getByTestId('feather-mask'));
   }
 
   async toggleCheckerboard(): Promise<void> {
+    await this.closeDialogs();
     const button = this.page.getByTestId('toggle-checkerboard');
     const wasSelected = (await button.getAttribute('aria-pressed')) === 'true';
     await button.click();
@@ -515,6 +577,11 @@ export class SvelteDriver implements UiDriver {
 
   /** Shows the step panel that holds `testId`, unless it is already visible. */
   private async revealStep(step: string, testId: string): Promise<void> {
+    if (step === 'export') {
+      await this.revealInExport(testId);
+      return;
+    }
+    await this.closeDialogs();
     if (await this.page.getByTestId(testId).isVisible()) return;
     await this.page.getByTestId(`step-${step}`).click();
     await expect(this.page.getByTestId(testId)).toBeVisible();
@@ -560,6 +627,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async toggleGroundPlane(): Promise<void> {
+    await this.closeDialogs();
     const toggle = this.page.getByTestId('ground-toggle');
     const before = await toggle.getAttribute('aria-pressed');
     await toggle.click();
@@ -604,6 +672,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async navigateCamera(direction: CameraDirection): Promise<void> {
+    await this.closeDialogs();
     // The camera pad is in the Parallax 2D view (entering it renders the
     // reference view once; wait for that before moving on).
     if ((await this.page.getByTestId('view-parallax').getAttribute('aria-selected')) !== 'true') {
@@ -634,10 +703,12 @@ export class SvelteDriver implements UiDriver {
   }
 
   async selectInpaintingModel(label: string): Promise<void> {
+    await this.openDialog('settings');
     await this.page.getByTestId('inpainting-model').selectOption({ label });
   }
 
   async setExternalServer(address: string): Promise<void> {
+    await this.openDialog('settings');
     const input = this.page.getByTestId('external-server-address');
     await input.fill(address);
     // Commits on blur (ConfigurationTab.svelte's `onchange`), same as
@@ -646,6 +717,7 @@ export class SvelteDriver implements UiDriver {
   }
 
   async testExternalConnection(): Promise<void> {
+    await this.openDialog('settings');
     await this.page.getByTestId('external-test-connection').click();
   }
 
@@ -661,12 +733,14 @@ export class SvelteDriver implements UiDriver {
   }
 
   async setApiKey(key: string): Promise<void> {
+    await this.openDialog('settings');
     const input = this.page.getByTestId('api-key');
     await input.fill(key);
     await input.press('Tab');
   }
 
   async validateApiKey(): Promise<void> {
+    await this.openDialog('settings');
     await this.page.getByTestId('validate-api-key').click();
   }
 
@@ -677,6 +751,7 @@ export class SvelteDriver implements UiDriver {
   // Project lifecycle
 
   async saveState(): Promise<void> {
+    await this.openDialog('settings');
     await this.clickAndWaitForLogChange(this.page.getByTestId('save-state'));
   }
 
@@ -698,16 +773,19 @@ export class SvelteDriver implements UiDriver {
   // Export
 
   async exportGltf(): Promise<Download> {
+    await this.revealInExport('gltf-export');
     const downloadPromise = this.page.waitForEvent('download');
     await this.page.getByTestId('gltf-export').click();
     return downloadPromise;
   }
 
   async exportAnimation(): Promise<void> {
+    await this.revealInExport('animation-export');
     await this.page.getByTestId('animation-export').click();
   }
 
   async setDofEnabled(enabled: boolean): Promise<void> {
+    await this.revealInExport('toggle-dof');
     const checkbox = this.page.getByTestId('toggle-dof');
     if ((await checkbox.isChecked()) !== enabled) {
       await checkbox.click();
@@ -716,10 +794,12 @@ export class SvelteDriver implements UiDriver {
   }
 
   async upscaleTextures(): Promise<void> {
+    await this.revealInExport('upscale-textures');
     await this.clickAndWaitForLogChange(this.page.getByTestId('upscale-textures'));
   }
 
   async downloadSlice(index: number): Promise<Download> {
+    await this.closeDialogs();
     await this.ensureSelected(index);
     const downloadPromise = this.page.waitForEvent('download');
     await this.page.getByTestId('slice-download').click();
diff --git a/frontend/src/lib/components/config/ConfigurationTab.svelte b/frontend/src/lib/components/config/ConfigurationTab.svelte
deleted file mode 100644
index fae1a7f..0000000
--- a/frontend/src/lib/components/config/ConfigurationTab.svelte
+++ /dev/null
@@ -1,336 +0,0 @@
-<script lang="ts">
-  /**
-   * The Configuration tab: number-of-slices/mask padding/blur (already
-   * existed), plus the inpainting-model provider panels (Automatic1111/
-   * ComfyUI server address + Test Connection + workflow upload; StabilityAI/
-   * fal.ai API key + Validate), and Save/Load State - see components.py's
-   * `make_configuration_div`/`make_inpainting_container_callbacks` and
-   * `docs/svelte-migration/reference/dash-1440-configuration.png` for the
-   * Dash layout this mirrors.
-   */
-  import { projectStore } from '../../state/project.svelte';
-  import { uiStore } from '../../state/ui.svelte';
-  import { isBusy } from '../../state/busy.svelte';
-  import * as workflow from '../../workflow';
-  import HelpTooltip from '../shared/HelpTooltip.svelte';
-  import { CONFIGURATION_HELP_TEXTS } from '../../helpTexts';
-
-  // Same options/values/default as components.py's DROPDOWN_INPAINT_MODEL.
-  const inpaintModelOptions: Array<{ value: string; label: string }> = [
-    { value: 'kandinsky-community/kandinsky-2-2-decoder-inpaint', label: 'Kandinsky' },
-    { value: 'runwayml/stable-diffusion-v1-5', label: 'SD 1.5' },
-    { value: 'diffusers/stable-diffusion-xl-1.0-inpainting-0.1', label: 'SD XL 1.0' },
-    { value: 'stabilityai/stable-diffusion-3-medium-diffusers', label: 'StableDiffusion3' },
-    { value: 'black-forest-labs/FLUX.1-Fill-dev', label: 'FLUX.1 Fill Dev' },
-    { value: 'automatic1111', label: 'Automatic1111' },
-    { value: 'comfyui', label: 'ComfyUI' },
-    { value: 'stabilityai', label: 'StabilityAI' },
-    { value: 'falai-foocus', label: 'Fal.ai Foocus' },
-    { value: 'falai-flux-general', label: 'Fal.ai Flux General' },
-    { value: 'falai-sd', label: 'Fal.ai SD' },
-    { value: 'falai-sdxl', label: 'Fal.ai SDXL' },
-  ];
-
-  const currentModel = $derived(projectStore.view?.inpainting.model ?? inpaintModelOptions[2].value);
-  // CMP-10/CMP-13: which provider panel(s) are visible for the current model.
-  const showServerPanel = $derived(currentModel === 'automatic1111' || currentModel === 'comfyui');
-  const showWorkflowUpload = $derived(currentModel === 'comfyui');
-  const showApiKeyPanel = $derived(currentModel === 'stabilityai' || currentModel.startsWith('falai-'));
-  // CMP-09: no mask-blur support for stabilityai.
-  const blurDisabled = $derived(isBusy() || currentModel === 'stabilityai');
-
-  function onInpaintModelChange(event: Event): void {
-    const value = (event.currentTarget as HTMLSelectElement).value;
-    void workflow.updateInpaintingSettings({ model: value });
-  }
-
-  function onPaddingChange(event: Event): void {
-    const value = Number((event.currentTarget as HTMLInputElement).value);
-    void workflow.updateInpaintingSettings({ padding: value });
-  }
-
-  function onBlurChange(event: Event): void {
-    const value = Number((event.currentTarget as HTMLInputElement).value);
-    void workflow.updateInpaintingSettings({ blur: value });
-  }
-
-  let restoreInput: HTMLInputElement | undefined;
-
-  function onRestoreChange(event: Event): void {
-    const target = event.currentTarget as HTMLInputElement;
-    const file = target.files?.[0];
-    target.value = '';
-    if (file) void workflow.restoreProject(file);
-  }
-
-  function onSaveState(): void {
-    void workflow.saveProject();
-  }
-
-  // -- Automatic1111 / ComfyUI server address + Test Connection (CMP-11/12).
-  // `externalServer` always comes back from the server (not a credential),
-  // so - like Mask Padding/Blur above - the field reads straight from the
-  // project view; no local draft needed.
-
-  function onServerAddressChange(event: Event): void {
-    const value = (event.currentTarget as HTMLInputElement).value;
-    uiStore.setExternalConnectionStatus('none');
-    void workflow.updateInpaintingSettings({ externalServer: value });
-  }
-
-  function onTestConnection(): void {
-    const view = projectStore.view;
-    if (!view) return;
-    void workflow.probeExternalServer(view.inpainting.model, view.inpainting.externalServer);
-  }
-
-  function onWorkflowChange(event: Event): void {
-    const target = event.currentTarget as HTMLInputElement;
-    const file = target.files?.[0];
-    target.value = '';
-    if (file) void workflow.uploadInpaintingWorkflow(file);
-  }
-
-  // -- StabilityAI / fal.ai API key + Validate (CMP-14/15). Write-only: never
-  // pre-filled from the server (see `InpaintingView`, which never carries
-  // `apiKey`), so this is a purely local draft, unlike the server field above.
-
-  let apiKeyDraft = $state('');
-
-  function onApiKeyChange(): void {
-    uiStore.setApiKeyStatus('none');
-    void workflow.updateInpaintingSettings({ apiKey: apiKeyDraft });
-  }
-
-  function onValidateApiKey(): void {
-    const view = projectStore.view;
-    if (!view) return;
-    void workflow.probeApiKey(view.inpainting.model, apiKeyDraft);
-  }
-</script>
-
-<div class="configuration-tab" data-testid="tab-configuration">
-  <div class="tab-header">
-    <HelpTooltip label="Configuration" texts={CONFIGURATION_HELP_TEXTS} />
-  </div>
-  <div class="field">
-    <label class="field-label" for="inpainting-model">Inpainting Model</label>
-    <select
-      id="inpainting-model"
-      class="select"
-      data-testid="inpainting-model"
-      value={currentModel}
-      disabled={isBusy()}
-      onchange={onInpaintModelChange}
-    >
-      {#each inpaintModelOptions as option (option.value)}
-        <option value={option.value}>{option.label}</option>
-      {/each}
-    </select>
-  </div>
-
-  {#if showServerPanel}
-    <div class="field" data-testid="external-server-panel">
-      <label class="field-label" for="external-server-address">A1111/ComfyUI Server Address</label>
-      <div class="row">
-        <input
-          id="external-server-address"
-          type="text"
-          class="text-input"
-          data-testid="external-server-address"
-          data-status={uiStore.externalConnectionStatus}
-          class:status-success={uiStore.externalConnectionStatus === 'success'}
-          class:status-failure={uiStore.externalConnectionStatus === 'failure'}
-          value={projectStore.view?.inpainting.externalServer ?? 'localhost:7860'}
-          disabled={isBusy()}
-          onchange={onServerAddressChange}
-        />
-        <button
-          type="button"
-          class="btn"
-          data-testid="external-test-connection"
-          disabled={isBusy() || !projectStore.view}
-          onclick={onTestConnection}
-        >
-          Test Connection
-        </button>
-      </div>
-
-      {#if showWorkflowUpload}
-        <div class="field" data-testid="comfyui-workflow-panel">
-          <label class="field-label" for="comfyui-workflow-input">ComfyUI Workflow</label>
-          <label class="btn upload-btn" for="comfyui-workflow-input">
-            Drag and Drop or Upload
-            <input
-              id="comfyui-workflow-input"
-              type="file"
-              accept="application/json"
-              class="sr-only"
-              data-testid="comfyui-workflow-input"
-              onchange={onWorkflowChange}
-            />
-          </label>
-          {#if projectStore.view?.inpainting.hasWorkflow}
-            <span class="hint" data-testid="comfyui-workflow-status">Workflow uploaded</span>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  {/if}
-
-  {#if showApiKeyPanel}
-    <div class="field" data-testid="api-key-panel">
-      <label class="field-label" for="api-key">API Key (StabilityAI / Fal.ai)</label>
-      <div class="row">
-        <input
-          id="api-key"
-          type="password"
-          class="text-input"
-          data-testid="api-key"
-          data-status={uiStore.apiKeyStatus}
-          class:status-success={uiStore.apiKeyStatus === 'success'}
-          class:status-failure={uiStore.apiKeyStatus === 'failure'}
-          bind:value={apiKeyDraft}
-          disabled={isBusy()}
-          onchange={onApiKeyChange}
-        />
-        <button
-          type="button"
-          class="btn"
-          data-testid="validate-api-key"
-          disabled={isBusy() || !projectStore.view}
-          onclick={onValidateApiKey}
-        >
-          Test API Key
-        </button>
-      </div>
-    </div>
-  {/if}
-
-  <div class="field">
-    <label class="field-label" for="mask-padding">Mask Padding</label>
-    <input
-      id="mask-padding"
-      type="range"
-      min="0"
-      max="200"
-      step="10"
-      data-testid="mask-padding"
-      value={projectStore.view?.inpainting.padding ?? 50}
-      disabled={isBusy()}
-      onchange={onPaddingChange}
-    />
-    <span class="slider-value">{projectStore.view?.inpainting.padding ?? 50}</span>
-  </div>
-
-  <div class="field">
-    <label class="field-label" for="mask-blur">Mask Blur</label>
-    <input
-      id="mask-blur"
-      type="range"
-      min="0"
-      max="200"
-      step="10"
-      data-testid="mask-blur"
-      value={projectStore.view?.inpainting.blur ?? 50}
-      disabled={blurDisabled}
-      onchange={onBlurChange}
-    />
-    <span class="slider-value">{projectStore.view?.inpainting.blur ?? 50}</span>
-  </div>
-
-  <div class="field">
-    <span class="field-label">Export/Import State</span>
-    <div class="state-actions">
-      <label class="btn" for="restore-state-input">
-        Load State
-        <input
-          bind:this={restoreInput}
-          id="restore-state-input"
-          type="file"
-          accept="application/json"
-          class="sr-only"
-          data-testid="restore-state-input"
-          onchange={onRestoreChange}
-        />
-      </label>
-      <button
-        type="button"
-        class="btn"
-        data-testid="save-state"
-        disabled={isBusy() || !projectStore.view}
-        onclick={onSaveState}
-      >
-        Save State
-      </button>
-    </div>
-  </div>
-</div>
-
-<style>
-  .tab-header {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: var(--space-2);
-  }
-
-  .field {
-    margin-bottom: var(--space-4);
-  }
-
-  .slider-value {
-    font-size: 0.75rem;
-    color: var(--color-text-muted);
-  }
-
-
-
-  input[type='range'] {
-    width: 100%;
-  }
-
-  .row {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-  }
-
-  .text-input {
-    flex: 1;
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    padding: var(--space-1) var(--space-2);
-  }
-
-  .text-input.status-success {
-    border-color: var(--color-success);
-    background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
-  }
-
-  .text-input.status-failure {
-    border-color: var(--color-danger-strong);
-    background-color: color-mix(in srgb, var(--color-danger-strong) 15%, transparent);
-  }
-
-  .upload-btn {
-    display: inline-block;
-    cursor: pointer;
-  }
-
-  .hint {
-    font-size: 0.75rem;
-    color: var(--color-text-muted);
-    margin-left: var(--space-2);
-  }
-
-  .state-actions {
-    display: flex;
-    gap: var(--space-4);
-  }
-
-  .state-actions .btn {
-    cursor: pointer;
-  }
-</style>
diff --git a/frontend/src/lib/components/config/ConfigurationTab.test.ts b/frontend/src/lib/components/config/ConfigurationTab.test.ts
deleted file mode 100644
index ee83db2..0000000
--- a/frontend/src/lib/components/config/ConfigurationTab.test.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
-import ConfigurationTab from './ConfigurationTab.svelte';
-import { projectStore } from '../../state/project.svelte';
-import { jobStore } from '../../state/jobs.svelte';
-import { logStore } from '../../state/logs.svelte';
-import { uiStore } from '../../state/ui.svelte';
-import type { ProjectView } from '../../api/types';
-
-function jsonResponse(status: number, body: unknown): Response {
-  return new Response(JSON.stringify(body), {
-    status,
-    headers: { 'Content-Type': 'application/json' },
-  });
-}
-
-function makeView(overrides: Partial<ProjectView> = {}): ProjectView {
-  return {
-    id: 'appstate-test',
-    revision: 1,
-    image: { width: 320, height: 240 },
-    assets: { input: { url: '/input' }, depth: { url: '/depth' } },
-    depthModel: 'dinov2',
-    numSlices: 3,
-    thresholds: [0, 85, 170, 255],
-    slices: [],
-    selectedSlice: null,
-    segmentation: { multiPointMode: false, queuedPoints: [], hasMask: false },
-    inpainting: {
-      model: 'automatic1111',
-      strength: 0.8,
-      guidanceScale: 7.5,
-      padding: 50,
-      blur: 50,
-      externalServer: 'localhost:7860',
-      hasWorkflow: false,
-      candidates: null,
-      selectedCandidate: null,
-    },
-    busy: null,
-    settings: {
-      darkMode: false,
-      camera: { distance: 100, focalLength: 100, maxDistance: 200 },
-      meshDisplacement: 0,
-      depthModel: 'dinov2',
-    },
-    exports: { gltf: null, upscaled: false },
-    ...overrides,
-  };
-}
-
-describe('ConfigurationTab', () => {
-  beforeEach(() => {
-    projectStore.reset();
-    jobStore.end();
-    logStore.reset();
-    uiStore.reset();
-  });
-
-  afterEach(() => {
-    vi.unstubAllGlobals();
-  });
-
-  it('shows the Automatic1111/ComfyUI server panel (and its workflow upload) only for those models', () => {
-    projectStore.applyView(makeView({ inpainting: { ...makeView().inpainting, model: 'automatic1111' } }));
-    render(ConfigurationTab);
-    expect(screen.getByTestId('external-server-panel')).toBeInTheDocument();
-    expect(screen.queryByTestId('comfyui-workflow-panel')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('api-key-panel')).not.toBeInTheDocument();
-  });
-
-  it('shows the ComfyUI workflow upload only for comfyui, and the API key panel only for stabilityai/fal.ai', () => {
-    projectStore.applyView(makeView({ inpainting: { ...makeView().inpainting, model: 'comfyui' } }));
-    const { unmount } = render(ConfigurationTab);
-    expect(screen.getByTestId('external-server-panel')).toBeInTheDocument();
-    expect(screen.getByTestId('comfyui-workflow-panel')).toBeInTheDocument();
-    unmount();
-
-    projectStore.applyView(makeView({ revision: 2, inpainting: { ...makeView().inpainting, model: 'stabilityai' } }));
-    render(ConfigurationTab);
-    expect(screen.queryByTestId('external-server-panel')).not.toBeInTheDocument();
-    expect(screen.getByTestId('api-key-panel')).toBeInTheDocument();
-  });
-
-  it('Test Connection highlights success and resets to none when the server address is edited again', async () => {
-    const projectId = 'appstate-test';
-    projectStore.applyView(makeView());
-
-    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
-      const url = String(input);
-      const method = init?.method ?? 'GET';
-      if (url === '/api/v1/config/probe-server' && method === 'POST') {
-        expect(JSON.parse(init!.body as string)).toEqual({ model: 'automatic1111', serverAddress: 'localhost:7860' });
-        return jsonResponse(200, { ok: true, message: 'Connection to automatic1111 successful: []' });
-      }
-      if (url === `/api/v1/projects/${projectId}/inpainting/settings` && method === 'PUT') {
-        return jsonResponse(200, { ...makeView({ revision: 2 }), changed: true });
-      }
-      if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) {
-        return jsonResponse(200, { entries: [], next: 0 });
-      }
-      throw new Error(`Unexpected fetch: ${method} ${url}`);
-    });
-    vi.stubGlobal('fetch', fetchMock);
-
-    render(ConfigurationTab);
-    expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'none');
-
-    await fireEvent.click(screen.getByTestId('external-test-connection'));
-    await waitFor(() => expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'success'));
-
-    await fireEvent.change(screen.getByTestId('external-server-address'), { target: { value: 'localhost:9999' } });
-    await waitFor(() => expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'none'));
-  });
-
-  it('Test Connection highlights failure when the probe fails', async () => {
-    projectStore.applyView(makeView());
-    const fetchMock = vi.fn(async (input: RequestInfo | URL): Promise<Response> => {
-      const url = String(input);
-      if (url === '/api/v1/config/probe-server') {
-        return jsonResponse(200, { ok: false, message: 'Connection to automatic1111 failed' });
-      }
-      throw new Error(`Unexpected fetch: ${url}`);
-    });
-    vi.stubGlobal('fetch', fetchMock);
-
-    render(ConfigurationTab);
-    await fireEvent.click(screen.getByTestId('external-test-connection'));
-    await waitFor(() => expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'failure'));
-  });
-
-  it('the API key field never displays a previously-saved key back', () => {
-    projectStore.applyView(makeView({ inpainting: { ...makeView().inpainting, model: 'stabilityai' } }));
-    render(ConfigurationTab);
-    expect(screen.getByTestId('api-key')).toHaveValue('');
-  });
-
-  it('Save State calls POST /save and does not trigger any browser download', async () => {
-    const projectId = 'appstate-test';
-    projectStore.applyView(makeView());
-    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
-      const url = String(input);
-      const method = init?.method ?? 'GET';
-      if (url === `/api/v1/projects/${projectId}/save` && method === 'POST') {
-        return jsonResponse(200, makeView({ revision: 2 }));
-      }
-      if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) {
-        return jsonResponse(200, { entries: [{ seq: 1, level: 'info', message: `Saved state to ${projectId}` }], next: 1 });
-      }
-      throw new Error(`Unexpected fetch: ${method} ${url}`);
-    });
-    vi.stubGlobal('fetch', fetchMock);
-
-    render(ConfigurationTab);
-    await fireEvent.click(screen.getByTestId('save-state'));
-
-    await waitFor(() =>
-      expect(fetchMock).toHaveBeenCalledWith(`/api/v1/projects/${projectId}/save`, expect.objectContaining({ method: 'POST' })),
-    );
-  });
-});
diff --git a/frontend/src/lib/components/dialogs/ExportDialog.svelte b/frontend/src/lib/components/dialogs/ExportDialog.svelte
new file mode 100644
index 0000000..6c853fb
--- /dev/null
+++ b/frontend/src/lib/components/dialogs/ExportDialog.svelte
@@ -0,0 +1,351 @@
+<script lang="ts">
+  /**
+   * The Export dialog (docs/redesign/HANDOFF.md §3), opened by the Export
+   * step, the header's Export button or Ctrl+E: the 3D scene (camera
+   * mirrored from Preview, mesh displacement, depth of field, the ground,
+   * texture upscaling, Create / Download glTF) and the animation.
+   */
+  import { projectStore } from '../../state/project.svelte';
+  import { jobStore } from '../../state/jobs.svelte';
+  import { isBusy } from '../../state/busy.svelte';
+  import * as workflow from '../../workflow';
+  import { triggerDownload } from '../../download';
+  import { cameraDraftStore } from '../../state/cameraDraft.svelte';
+  import { uiStore } from '../../state/ui.svelte';
+  import CameraSlider from '../shared/CameraSlider.svelte';
+  import Dialog from '../shared/Dialog.svelte';
+  import Box from '@lucide/svelte/icons/box';
+  import Clapperboard from '@lucide/svelte/icons/clapperboard';
+  import Check from '@lucide/svelte/icons/check';
+
+  type ExportKind = 'gltf' | 'animation';
+  let kind = $state<ExportKind>('gltf');
+
+  const view = $derived(projectStore.view);
+  const ground = $derived(view?.slices.find((s) => s.isGround) ?? null);
+  const gltfReady = $derived(!!view?.exports.gltf);
+
+  $effect(() => cameraDraftStore.sync(view?.settings));
+
+  // -- Depth of Field checkbox: purely a parameter of the next export
+  // request, not a persisted setting (components.py's CHECKLIST_DOF has no
+  // "remember" callback of its own).
+  let dofEnabled = $state(false);
+
+  // -- Create glTF Scene (WEB-32): renders into the 3D viewer tab (see
+  // Model3DViewer.svelte), same as Dash's own
+  // `gltf_create` updating the `#model-viewer` iframe - it does not, by
+  // itself, switch the active viewer tab either.
+  const creatingGltf = $derived(jobStore.active === 'export-gltf');
+
+  function createGltfScene(): void {
+    if (!view || isBusy()) return;
+    void workflow.startGltfExport(dofEnabled);
+  }
+
+  // -- Export glTF Scene (WEB-28): same job as Create, but triggers a real
+  // browser download of the resulting `.gltf` file once it lands - an
+  // `<a download>` click (not `window.open`), per the migration task.
+  async function exportGltfScene(): Promise<void> {
+    if (!view || isBusy()) return;
+    await workflow.startGltfExport(dofEnabled);
+    const url = projectStore.view?.exports.gltf?.url;
+    if (url) triggerDownload(url, 'scene.gltf');
+  }
+
+  // -- Upscale Textures (WEB-27).
+  const upscaling = $derived(jobStore.active === 'upscale');
+
+  function upscaleTextures(): void {
+    if (!view || isBusy()) return;
+    void workflow.startUpscaleExport();
+  }
+
+  // -- Export Animation + Number of Frames (WEB-35): job only, no download
+  // (see PARITY.md "Known quirks" - `ANIMATION_OUTPUT` exists in Dash but no
+  // `dcc.Download` ever fires). The frame count itself is not a persisted
+  // setting (components.py's SLIDER_NUM_FRAMES has no "remember" callback).
+  let numFrames = $state(100);
+  const seconds = $derived((numFrames / 30).toFixed(1));
+  const animating = $derived(jobStore.active === 'animation');
+
+  function exportAnimation(): void {
+    if (!view || isBusy() || numFrames <= 0) return;
+    void workflow.startAnimationExport(numFrames);
+  }
+
+  function viewIn3d(): void {
+    uiStore.setView('3d');
+    uiStore.closeDialog();
+  }
+
+</script>
+
+<Dialog name="export" title="Export" testId="export-dialog" width={680}>
+  <div class="body">
+    <div class="kinds" role="tablist" aria-orientation="vertical" aria-label="Export type">
+      <button
+        type="button"
+        role="tab"
+        class="kind"
+        aria-selected={kind === 'gltf'}
+        data-testid="export-tab-gltf"
+        onclick={() => (kind = 'gltf')}
+      >
+        <Box size={16} strokeWidth={1.6} />
+        <span><b>3D scene</b><br /><span class="faint">glTF for Blender, Unreal</span></span>
+      </button>
+      <button
+        type="button"
+        role="tab"
+        class="kind"
+        aria-selected={kind === 'animation'}
+        data-testid="export-tab-animation"
+        onclick={() => (kind = 'animation')}
+      >
+        <Clapperboard size={16} strokeWidth={1.6} />
+        <span><b>Animation</b><br /><span class="faint">Parallax camera move</span></span>
+      </button>
+    </div>
+
+    <div class="pane" role="tabpanel" data-testid="tab-export" hidden={kind !== 'gltf'}>
+      <CameraSlider field="distance" label="Camera dist." testId="export-camera-distance" min={0} max={500} disabled={!view} />
+      <CameraSlider field="maxDistance" label="Max dist." testId="export-max-distance" min={0} max={1000} disabled={!view} />
+      <CameraSlider field="focalLength" label="Focal len." testId="export-focal-length" min={1} max={500} disabled={!view} />
+      <CameraSlider field="displacement" label="Displace" testId="displacement" min={0} max={150} step={5} disabled={!view} />
+      <label class="checkbox-row">
+        <input
+          type="checkbox"
+          data-testid="toggle-dof"
+          checked={dofEnabled}
+          onchange={(event) => (dofEnabled = (event.currentTarget as HTMLInputElement).checked)}
+        />
+        Support depth-of-field effect
+      </label>
+      <div class="summary" data-testid="export-ground-summary">
+        <span class="grow">
+          {#if ground}
+            Ground plane: <span class="mono">image_slice_{ground.index}</span> · distance
+            <span class="mono">{Math.round(view?.settings.camera.groundNear ?? 0)}</span>
+          {:else}
+            No ground plane
+          {/if}
+        </span>
+        <button type="button" class="btn btn-ghost btn-sm" data-testid="export-edit-ground" onclick={() => uiStore.setStep('ground')}>
+          Edit
+        </button>
+      </div>
+      <div class="row">
+        <button
+          type="button"
+          class="btn"
+          data-testid="upscale-textures"
+          title="Upscale slice textures so you can zoom in further"
+          disabled={isBusy() || !view}
+          onclick={upscaleTextures}
+        >
+          Upscale textures
+        </button>
+        {#if view?.exports.upscaled}<span class="faint">Textures upscaled</span>{/if}
+      </div>
+      <span class="spacer"></span>
+      <div class="progress-bar" data-testid="export-progress" class:idle={!(creatingGltf || upscaling)}>
+        <div
+          class="progress-bar-fill"
+          style={`width: ${(creatingGltf || upscaling) ? Math.round(jobStore.progress * 100) : 0}%`}
+        ></div>
+      </div>
+      <div class="row end">
+        {#if gltfReady}
+          <span class="ready grow"><Check size={16} strokeWidth={1.6} /> Scene ready</span>
+          <button type="button" class="btn" data-testid="export-view-3d" onclick={viewIn3d}>View in 3D</button>
+        {/if}
+        <button
+          type="button"
+          class="btn"
+          data-testid="gltf-create"
+          title="Build the scene without downloading it"
+          disabled={isBusy() || !view}
+          onclick={createGltfScene}
+        >
+          Create scene
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          data-testid="gltf-export"
+          title="Build the scene and download scene.gltf"
+          disabled={isBusy() || !view}
+          onclick={() => void exportGltfScene()}
+        >
+          Download glTF
+        </button>
+      </div>
+    </div>
+
+    <div class="pane" role="tabpanel" hidden={kind !== 'animation'}>
+      <div class="g3">
+        <label class="muted" for="number-of-frames">Frames</label>
+        <input
+          id="number-of-frames"
+          type="range"
+          min="0"
+          max="300"
+          step="1"
+          data-testid="number-of-frames"
+          value={numFrames}
+          disabled={isBusy() || !view}
+          oninput={(event) => (numFrames = Number((event.currentTarget as HTMLInputElement).value))}
+        />
+        <span class="mono value">{numFrames}</span>
+      </div>
+      <p class="faint">
+        Renders a camera move across the scene with the current camera settings. At 30 fps, {numFrames} frames is
+        about {seconds} s.
+      </p>
+      <span class="spacer"></span>
+      <div class="progress-bar" data-testid="animation-progress" class:idle={!animating}>
+        <div class="progress-bar-fill" style={`width: ${animating ? Math.round(jobStore.progress * 100) : 0}%`}></div>
+      </div>
+      <div class="row end">
+        <button
+          type="button"
+          class="btn btn-primary"
+          data-testid="animation-export"
+          disabled={isBusy() || !view || numFrames <= 0}
+          onclick={exportAnimation}
+        >
+          Render animation
+        </button>
+      </div>
+    </div>
+  </div>
+</Dialog>
+
+<style>
+  .body {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 380px;
+    min-width: 0;
+  }
+
+  .kinds {
+    width: 190px;
+    flex-shrink: 0;
+    border-right: 1px solid var(--color-border);
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .kind {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-text);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .kind:hover {
+    background: var(--color-surface-hover);
+  }
+
+  .kind[aria-selected='true'] {
+    background: var(--color-selection-soft);
+    box-shadow: inset 0 0 0 1px var(--color-selection);
+  }
+
+  .kind b {
+    font-weight: 600;
+  }
+
+  .pane {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .pane[hidden] {
+    display: none;
+  }
+
+  .faint {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: var(--text-small);
+  }
+
+  .muted {
+    color: var(--color-text-secondary);
+  }
+
+  .checkbox-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--color-text-secondary);
+  }
+
+  .summary {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 8px 10px;
+    border-radius: var(--radius-md);
+    background: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-secondary);
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .end {
+    justify-content: flex-end;
+  }
+
+  .grow {
+    flex: 1 1 auto;
+  }
+
+  .spacer {
+    flex: 1 1 auto;
+  }
+
+  .ready {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--color-success);
+  }
+
+  .g3 {
+    display: grid;
+    grid-template-columns: 96px minmax(0, 1fr) 44px;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .value {
+    text-align: right;
+    font-size: 12px;
+  }
+
+  .progress-bar.idle {
+    visibility: hidden;
+  }
+</style>
diff --git a/frontend/src/lib/components/export/ExportTab.test.ts b/frontend/src/lib/components/dialogs/ExportDialog.test.ts
similarity index 53%
rename from frontend/src/lib/components/export/ExportTab.test.ts
rename to frontend/src/lib/components/dialogs/ExportDialog.test.ts
index d5781e9..4557a97 100644
--- a/frontend/src/lib/components/export/ExportTab.test.ts
+++ b/frontend/src/lib/components/dialogs/ExportDialog.test.ts
@@ -4,12 +4,29 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 vi.mock('../../download', () => ({ triggerDownload: vi.fn() }));
 import { triggerDownload } from '../../download';
 
-import ExportTab from './ExportTab.svelte';
+import ExportTab from './ExportDialog.svelte';
 import { projectStore } from '../../state/project.svelte';
 import { jobStore } from '../../state/jobs.svelte';
 import { logStore } from '../../state/logs.svelte';
 import { cameraDraftStore } from '../../state/cameraDraft.svelte';
-import type { ProjectView } from '../../api/types';
+import { uiStore } from '../../state/ui.svelte';
+import type { ProjectView, SliceView } from '../../api/types';
+
+function makeSlice(index: number, overrides: Partial<SliceView> = {}): SliceView {
+  return {
+    index,
+    depth: index * 50,
+    version: 1,
+    canUndo: false,
+    canRedo: false,
+    positivePrompt: '',
+    negativePrompt: '',
+    isGround: false,
+    image: { url: `/api/v1/projects/appstate-test/assets/slice-${index}` },
+    thumbnail: { url: `/api/v1/projects/appstate-test/assets/slice-${index}-thumb` },
+    ...overrides,
+  } as SliceView;
+}
 
 function jsonResponse(status: number, body: unknown): Response {
   return new Response(JSON.stringify(body), {
@@ -59,12 +76,148 @@ describe('ExportTab', () => {
     jobStore.end();
     logStore.reset();
     cameraDraftStore.reset();
+    uiStore.reset();
     vi.mocked(triggerDownload).mockClear();
   });
 
   afterEach(() => {
     vi.unstubAllGlobals();
     cameraDraftStore.reset();
+    uiStore.reset();
+  });
+
+  describe('tab switching', () => {
+    it('starts on the 3D scene tab, with the animation pane hidden', () => {
+      projectStore.applyView(makeView());
+      render(ExportTab);
+
+      expect(screen.getByTestId('export-tab-gltf')).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByTestId('export-tab-animation')).toHaveAttribute('aria-selected', 'false');
+      expect(screen.getByTestId('tab-export')).not.toHaveAttribute('hidden');
+      expect(screen.getByTestId('animation-export').closest('[role="tabpanel"]')).toHaveAttribute('hidden');
+    });
+
+    it('switches panes when the Animation tab is clicked, and back', async () => {
+      projectStore.applyView(makeView());
+      render(ExportTab);
+
+      await fireEvent.click(screen.getByTestId('export-tab-animation'));
+      expect(screen.getByTestId('export-tab-animation')).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByTestId('export-tab-gltf')).toHaveAttribute('aria-selected', 'false');
+      expect(screen.getByTestId('tab-export')).toHaveAttribute('hidden');
+      expect(screen.getByTestId('animation-export').closest('[role="tabpanel"]')).not.toHaveAttribute('hidden');
+
+      await fireEvent.click(screen.getByTestId('export-tab-gltf'));
+      expect(screen.getByTestId('tab-export')).not.toHaveAttribute('hidden');
+      expect(screen.getByTestId('animation-export').closest('[role="tabpanel"]')).toHaveAttribute('hidden');
+    });
+  });
+
+  describe('mirrored camera sliders', () => {
+    it('reads distance, max distance and focal length straight from the shared camera draft', () => {
+      projectStore.applyView(makeView());
+      render(ExportTab);
+
+      expect(screen.getByTestId('export-camera-distance')).toHaveValue('125');
+      expect(screen.getByTestId('export-max-distance')).toHaveValue('140');
+      expect(screen.getByTestId('export-focal-length')).toHaveValue('475');
+    });
+
+    it('committing the camera distance here sends all camera fields, same as the Preview panel', async () => {
+      const projectId = 'appstate-test';
+      projectStore.applyView(makeView());
+
+      const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+        const url = String(input);
+        const method = init?.method ?? 'GET';
+        if (url === `/api/v1/projects/${projectId}/settings` && method === 'PUT') {
+          return jsonResponse(200, { ...makeView({ revision: 2 }), changed: true });
+        }
+        if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) {
+          return jsonResponse(200, { entries: [], next: 0 });
+        }
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      });
+      vi.stubGlobal('fetch', fetchMock);
+
+      render(ExportTab);
+      const distance = screen.getByTestId('export-camera-distance');
+      await fireEvent.input(distance, { target: { value: '77' } });
+      await fireEvent.change(distance);
+
+      await waitFor(() =>
+        expect(fetchMock).toHaveBeenCalledWith(
+          `/api/v1/projects/${projectId}/settings`,
+          expect.objectContaining({ method: 'PUT' }),
+        ),
+      );
+      const call = fetchMock.mock.calls.find(([reqUrl]) => String(reqUrl) === `/api/v1/projects/${projectId}/settings`);
+      expect(JSON.parse(call![1]!.body as string)).toEqual({
+        camera: { distance: 77, maxDistance: 140, focalLength: 475, groundNear: 0 },
+        meshDisplacement: 15,
+      });
+      // The draft is shared, so the slider itself now reflects the commit.
+      expect(cameraDraftStore.draft.distance).toBe(77);
+    });
+  });
+
+  describe('ground summary', () => {
+    it('shows "No ground plane" without a ground slice', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0)] }));
+      render(ExportTab);
+      expect(screen.getByTestId('export-ground-summary')).toHaveTextContent('No ground plane');
+    });
+
+    it('names the ground slice and its distance once one is set', () => {
+      projectStore.applyView(
+        makeView({
+          slices: [makeSlice(0), makeSlice(1, { isGround: true })],
+          settings: {
+            darkMode: false,
+            camera: { distance: 125, focalLength: 475, maxDistance: 140, groundNear: 42 },
+            meshDisplacement: 15,
+            depthModel: 'dinov2',
+          },
+        }),
+      );
+      render(ExportTab);
+      const summary = screen.getByTestId('export-ground-summary');
+      expect(summary).toHaveTextContent('image_slice_1');
+      expect(summary).toHaveTextContent('42');
+    });
+
+    it('Edit moves to the Ground step and closes the dialog', async () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0), makeSlice(1, { isGround: true })] }));
+      uiStore.setStep('slices');
+      uiStore.openDialog('export');
+      render(ExportTab);
+
+      await fireEvent.click(screen.getByTestId('export-edit-ground'));
+
+      expect(uiStore.step).toBe('ground');
+      expect(uiStore.dialog).toBeNull();
+    });
+  });
+
+  describe('View in 3D', () => {
+    it('is absent until the scene has been exported', () => {
+      projectStore.applyView(makeView());
+      render(ExportTab);
+      expect(screen.queryByTestId('export-view-3d')).not.toBeInTheDocument();
+    });
+
+    it('sets the view to 3D and closes the dialog once the scene is ready', async () => {
+      projectStore.applyView(
+        makeView({ exports: { gltf: { url: '/api/v1/projects/appstate-test/export/gltf?v=1' }, upscaled: false } }),
+      );
+      uiStore.openDialog('export');
+      render(ExportTab);
+
+      await fireEvent.click(screen.getByTestId('export-view-3d'));
+
+      expect(uiStore.view).toBe('3d');
+      expect(uiStore.dialog).toBeNull();
+    });
   });
 
   it('reads the displacement slider straight from the persisted settings', () => {
diff --git a/frontend/src/lib/components/dialogs/SettingsDialog.svelte b/frontend/src/lib/components/dialogs/SettingsDialog.svelte
new file mode 100644
index 0000000..004dda9
--- /dev/null
+++ b/frontend/src/lib/components/dialogs/SettingsDialog.svelte
@@ -0,0 +1,529 @@
+<script lang="ts">
+  /**
+   * The Settings dialog (docs/redesign/HANDOFF.md §3): one scrolling column
+   * of sections - Inpainting (model, A1111/ComfyUI server + Test, ComfyUI
+   * workflow, API key + Test), Depth, Masks, Slicing, Project (load/save
+   * state) and Appearance - with a nav that jumps between them.
+   */
+  import { projectStore } from '../../state/project.svelte';
+  import { uiStore, type SettingsSection } from '../../state/ui.svelte';
+  import { isBusy } from '../../state/busy.svelte';
+  import * as workflow from '../../workflow';
+  import Dialog from '../shared/Dialog.svelte';
+
+  const SECTIONS: { id: SettingsSection; label: string }[] = [
+    { id: 'inpainting', label: 'Inpainting' },
+    { id: 'depth', label: 'Depth' },
+    { id: 'masks', label: 'Masks' },
+    { id: 'slicing', label: 'Slicing' },
+    { id: 'project', label: 'Project' },
+    { id: 'appearance', label: 'Appearance' },
+  ];
+  const sectionEls: Partial<Record<SettingsSection, HTMLElement>> = {};
+
+  function showSection(id: SettingsSection): void {
+    uiStore.setSettingsSection(id);
+    sectionEls[id]?.scrollIntoView?.({ block: 'start' });
+  }
+
+  // Opening at a section (e.g. "Model settings" from Inpaint) jumps to it.
+  $effect(() => {
+    if (uiStore.dialog !== 'settings') return;
+    const id = uiStore.settingsSection;
+    queueMicrotask(() => sectionEls[id]?.scrollIntoView?.({ block: 'start' }));
+  });
+
+  // Same labels/values as ModeTab.svelte's depth model select.
+  const depthOptions: Array<{ value: string; label: string }> = [
+    { value: 'midas', label: 'MiDaS' },
+    { value: 'dinov2', label: 'DINOv2' },
+  ];
+
+  function onDepthModelChange(event: Event): void {
+    const value = (event.currentTarget as HTMLSelectElement).value;
+    uiStore.setDepthModel(value);
+    if (projectStore.view) void workflow.updateSettings({ depthModel: value });
+  }
+
+  function onNumSlicesChange(event: Event): void {
+    const value = Number((event.currentTarget as HTMLInputElement).value);
+    uiStore.setPendingNumSlices(value);
+    if (projectStore.view) void workflow.updateSliceCount(value);
+  }
+
+  function setTheme(theme: 'dark' | 'light'): void {
+    if (uiStore.theme !== theme) void workflow.toggleDarkMode();
+  }
+
+  // Same options/values/default as components.py's DROPDOWN_INPAINT_MODEL.
+  const inpaintModelOptions: Array<{ value: string; label: string }> = [
+    { value: 'kandinsky-community/kandinsky-2-2-decoder-inpaint', label: 'Kandinsky' },
+    { value: 'runwayml/stable-diffusion-v1-5', label: 'SD 1.5' },
+    { value: 'diffusers/stable-diffusion-xl-1.0-inpainting-0.1', label: 'SD XL 1.0' },
+    { value: 'stabilityai/stable-diffusion-3-medium-diffusers', label: 'StableDiffusion3' },
+    { value: 'black-forest-labs/FLUX.1-Fill-dev', label: 'FLUX.1 Fill Dev' },
+    { value: 'automatic1111', label: 'Automatic1111' },
+    { value: 'comfyui', label: 'ComfyUI' },
+    { value: 'stabilityai', label: 'StabilityAI' },
+    { value: 'falai-foocus', label: 'Fal.ai Foocus' },
+    { value: 'falai-flux-general', label: 'Fal.ai Flux General' },
+    { value: 'falai-sd', label: 'Fal.ai SD' },
+    { value: 'falai-sdxl', label: 'Fal.ai SDXL' },
+  ];
+
+  const currentModel = $derived(projectStore.view?.inpainting.model ?? inpaintModelOptions[2].value);
+  // CMP-10/CMP-13: which provider panel(s) are visible for the current model.
+  const showServerPanel = $derived(currentModel === 'automatic1111' || currentModel === 'comfyui');
+  const showWorkflowUpload = $derived(currentModel === 'comfyui');
+  const showApiKeyPanel = $derived(currentModel === 'stabilityai' || currentModel.startsWith('falai-'));
+  // CMP-09: no mask-blur support for stabilityai.
+  const blurDisabled = $derived(isBusy() || currentModel === 'stabilityai');
+
+  function onInpaintModelChange(event: Event): void {
+    const value = (event.currentTarget as HTMLSelectElement).value;
+    void workflow.updateInpaintingSettings({ model: value });
+  }
+
+  function onPaddingChange(event: Event): void {
+    const value = Number((event.currentTarget as HTMLInputElement).value);
+    void workflow.updateInpaintingSettings({ padding: value });
+  }
+
+  function onBlurChange(event: Event): void {
+    const value = Number((event.currentTarget as HTMLInputElement).value);
+    void workflow.updateInpaintingSettings({ blur: value });
+  }
+
+  let restoreInput: HTMLInputElement | undefined;
+
+  // A project loaded from here replaces the one behind the dialog, so the
+  // dialog closes once it has loaded.
+  async function onRestoreChange(event: Event): Promise<void> {
+    const target = event.currentTarget as HTMLInputElement;
+    const file = target.files?.[0];
+    target.value = '';
+    if (!file) return;
+    const before = projectStore.view;
+    await workflow.restoreProject(file);
+    if (projectStore.view && projectStore.view !== before && uiStore.dialog === 'settings') uiStore.closeDialog();
+  }
+
+  function onSaveState(): void {
+    void workflow.saveProject();
+  }
+
+  // -- Automatic1111 / ComfyUI server address + Test Connection (CMP-11/12).
+  // `externalServer` always comes back from the server (not a credential),
+  // so - like Mask Padding/Blur above - the field reads straight from the
+  // project view; no local draft needed.
+
+  function onServerAddressChange(event: Event): void {
+    const value = (event.currentTarget as HTMLInputElement).value;
+    uiStore.setExternalConnectionStatus('none');
+    void workflow.updateInpaintingSettings({ externalServer: value });
+  }
+
+  function onTestConnection(): void {
+    const view = projectStore.view;
+    if (!view) return;
+    void workflow.probeExternalServer(view.inpainting.model, view.inpainting.externalServer);
+  }
+
+  function onWorkflowChange(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement;
+    const file = target.files?.[0];
+    target.value = '';
+    if (file) void workflow.uploadInpaintingWorkflow(file);
+  }
+
+  // -- StabilityAI / fal.ai API key + Validate (CMP-14/15). Write-only: never
+  // pre-filled from the server (see `InpaintingView`, which never carries
+  // `apiKey`), so this is a purely local draft, unlike the server field above.
+
+  let apiKeyDraft = $state('');
+
+  function onApiKeyChange(): void {
+    uiStore.setApiKeyStatus('none');
+    void workflow.updateInpaintingSettings({ apiKey: apiKeyDraft });
+  }
+
+  function onValidateApiKey(): void {
+    const view = projectStore.view;
+    if (!view) return;
+    void workflow.probeApiKey(view.inpainting.model, apiKeyDraft);
+  }
+</script>
+
+<Dialog name="settings" title="Settings" testId="settings-dialog" width={720} height={600}>
+  <div class="body" data-testid="tab-configuration">
+    <nav class="nav" aria-label="Settings sections">
+      {#each SECTIONS as section (section.id)}
+        <button
+          type="button"
+          class="nav-link"
+          aria-current={uiStore.settingsSection === section.id ? 'true' : undefined}
+          data-testid={`settings-nav-${section.id}`}
+          onclick={() => showSection(section.id)}
+        >
+          {section.label}
+        </button>
+      {/each}
+    </nav>
+    <div class="sections">
+      <section bind:this={sectionEls.inpainting} data-testid="settings-inpainting">
+        <h3 class="label">Inpainting</h3>
+        <label class="muted" for="inpainting-model">Model</label>
+        <select
+          id="inpainting-model"
+          class="select"
+          data-testid="inpainting-model"
+          value={currentModel}
+          disabled={isBusy()}
+          onchange={onInpaintModelChange}
+        >
+          {#each inpaintModelOptions as option (option.value)}
+            <option value={option.value}>{option.label}</option>
+          {/each}
+        </select>
+
+        {#if showServerPanel}
+          <div class="group" data-testid="external-server-panel">
+            <label class="muted" for="external-server-address">A1111 / ComfyUI server address</label>
+            <div class="row">
+              <input
+                id="external-server-address"
+                type="text"
+                class="text-input mono"
+                data-testid="external-server-address"
+                data-status={uiStore.externalConnectionStatus}
+                class:status-success={uiStore.externalConnectionStatus === 'success'}
+                class:status-failure={uiStore.externalConnectionStatus === 'failure'}
+                value={projectStore.view?.inpainting.externalServer ?? 'localhost:7860'}
+                disabled={isBusy()}
+                onchange={onServerAddressChange}
+              />
+              <button
+                type="button"
+                class="btn"
+                data-testid="external-test-connection"
+                disabled={isBusy() || !projectStore.view}
+                onclick={onTestConnection}
+              >
+                Test connection
+              </button>
+            </div>
+
+            {#if showWorkflowUpload}
+              <div class="group" data-testid="comfyui-workflow-panel">
+                <span class="muted">ComfyUI workflow</span>
+                <label class="btn upload-btn" for="comfyui-workflow-input">
+                  {projectStore.view?.inpainting.hasWorkflow ? 'Replace workflow…' : 'Upload workflow (JSON)…'}
+                  <input
+                    id="comfyui-workflow-input"
+                    type="file"
+                    accept="application/json"
+                    class="sr-only"
+                    data-testid="comfyui-workflow-input"
+                    onchange={onWorkflowChange}
+                  />
+                </label>
+                {#if projectStore.view?.inpainting.hasWorkflow}
+                  <span class="faint" data-testid="comfyui-workflow-status">Workflow uploaded</span>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/if}
+
+        {#if showApiKeyPanel}
+          <div class="group" data-testid="api-key-panel">
+            <label class="muted" for="api-key">API key (StabilityAI / Fal.ai)</label>
+            <div class="row">
+              <input
+                id="api-key"
+                type="password"
+                class="text-input mono"
+                data-testid="api-key"
+                data-status={uiStore.apiKeyStatus}
+                class:status-success={uiStore.apiKeyStatus === 'success'}
+                class:status-failure={uiStore.apiKeyStatus === 'failure'}
+                bind:value={apiKeyDraft}
+                disabled={isBusy()}
+                onchange={onApiKeyChange}
+              />
+              <button
+                type="button"
+                class="btn"
+                data-testid="validate-api-key"
+                disabled={isBusy() || !projectStore.view}
+                onclick={onValidateApiKey}
+              >
+                Test API key
+              </button>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <section bind:this={sectionEls.depth} data-testid="settings-depth">
+        <h3 class="label">Depth</h3>
+        <label class="muted" for="settings-depth-model">Depth model</label>
+        <select
+          id="settings-depth-model"
+          class="select"
+          data-testid="settings-depth-model"
+          value={uiStore.depthModel}
+          disabled={isBusy()}
+          onchange={onDepthModelChange}
+        >
+          {#each depthOptions as option (option.value)}
+            <option value={option.value}>{option.label}</option>
+          {/each}
+        </select>
+      </section>
+
+      <section bind:this={sectionEls.masks} data-testid="settings-masks">
+        <h3 class="label">Masks</h3>
+        <div class="g3">
+          <label class="muted" for="mask-padding">Padding</label>
+          <input
+            id="mask-padding"
+            type="range"
+            min="0"
+            max="200"
+            step="10"
+            data-testid="mask-padding"
+            value={projectStore.view?.inpainting.padding ?? 50}
+            disabled={isBusy()}
+            onchange={onPaddingChange}
+          />
+          <span class="mono value">{projectStore.view?.inpainting.padding ?? 50}</span>
+          <label class="muted" for="mask-blur">Blur</label>
+          <input
+            id="mask-blur"
+            type="range"
+            min="0"
+            max="200"
+            step="10"
+            data-testid="mask-blur"
+            value={projectStore.view?.inpainting.blur ?? 50}
+            disabled={blurDisabled}
+            onchange={onBlurChange}
+          />
+          <span class="mono value">{projectStore.view?.inpainting.blur ?? 50}</span>
+        </div>
+      </section>
+
+      <section bind:this={sectionEls.slicing} data-testid="settings-slicing">
+        <h3 class="label">Slicing</h3>
+        <div class="g3">
+          <label class="muted" for="settings-num-slices">Slices</label>
+          <input
+            id="settings-num-slices"
+            type="range"
+            min="2"
+            max="10"
+            step="1"
+            data-testid="settings-num-slices"
+            value={uiStore.pendingNumSlices}
+            disabled={isBusy()}
+            onchange={onNumSlicesChange}
+          />
+          <span class="mono value">{uiStore.pendingNumSlices}</span>
+        </div>
+        <p class="faint">How many depth bands Slices › Split by depth makes.</p>
+      </section>
+
+      <section bind:this={sectionEls.project} data-testid="settings-project">
+        <h3 class="label">Project</h3>
+        <div class="row">
+          <label class="btn upload-btn" for="restore-state-input">
+            Load state…
+            <input
+              bind:this={restoreInput}
+              id="restore-state-input"
+              type="file"
+              accept="application/json"
+              class="sr-only"
+              data-testid="restore-state-input"
+              onchange={(event) => void onRestoreChange(event)}
+            />
+          </label>
+          <button
+            type="button"
+            class="btn"
+            data-testid="save-state"
+            disabled={isBusy() || !projectStore.view}
+            onclick={onSaveState}
+          >
+            Save state
+          </button>
+        </div>
+      </section>
+
+      <section bind:this={sectionEls.appearance} data-testid="settings-appearance">
+        <h3 class="label">Appearance</h3>
+        <div class="seg" role="radiogroup" aria-label="Theme">
+          <button
+            type="button"
+            role="radio"
+            aria-checked={uiStore.theme === 'dark'}
+            data-testid="settings-theme-dark"
+            onclick={() => setTheme('dark')}
+          >
+            Dark
+          </button>
+          <button
+            type="button"
+            role="radio"
+            aria-checked={uiStore.theme === 'light'}
+            data-testid="settings-theme-light"
+            onclick={() => setTheme('light')}
+          >
+            Light
+          </button>
+        </div>
+      </section>
+    </div>
+  </div>
+</Dialog>
+
+<style>
+  .body {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  .nav {
+    width: 170px;
+    flex-shrink: 0;
+    border-right: 1px solid var(--color-border);
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .nav-link {
+    height: var(--control-h);
+    padding: 0 10px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-text-secondary);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .nav-link:hover {
+    background: var(--color-surface-hover);
+    color: var(--color-text);
+  }
+
+  .nav-link[aria-current='true'] {
+    background: var(--color-surface-hover);
+    color: var(--color-text);
+  }
+
+  .sections {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-y: auto;
+    padding: 4px 18px 18px;
+  }
+
+  section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-top: 16px;
+  }
+
+  .label {
+    margin: 0;
+  }
+
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .muted {
+    color: var(--color-text-secondary);
+  }
+
+  .faint {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: var(--text-small);
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .row .text-input {
+    flex: 1 1 auto;
+  }
+
+  .g3 {
+    display: grid;
+    grid-template-columns: 80px minmax(0, 1fr) 44px;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .value {
+    text-align: right;
+    font-size: 12px;
+  }
+
+  .text-input.status-success {
+    border-color: var(--color-success);
+    background-color: color-mix(in srgb, var(--color-success) 15%, transparent);
+  }
+
+  .text-input.status-failure {
+    border-color: var(--color-danger-strong);
+    background-color: color-mix(in srgb, var(--color-danger-strong) 15%, transparent);
+  }
+
+  .upload-btn {
+    cursor: pointer;
+    align-self: flex-start;
+  }
+
+  .seg {
+    display: inline-flex;
+    align-self: flex-start;
+    background: var(--color-surface-raised);
+    border-radius: 7px;
+    padding: 2px;
+    gap: 2px;
+    border: 1px solid var(--color-border);
+  }
+
+  .seg button {
+    min-width: 72px;
+    height: var(--control-h-sm);
+    border: none;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--color-text-secondary);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  .seg button[aria-checked='true'] {
+    background: var(--color-surface-hover);
+    color: var(--color-text);
+    box-shadow: 0 0 0 1px var(--color-border-strong);
+  }
+</style>
diff --git a/frontend/src/lib/components/dialogs/SettingsDialog.test.ts b/frontend/src/lib/components/dialogs/SettingsDialog.test.ts
new file mode 100644
index 0000000..0853146
--- /dev/null
+++ b/frontend/src/lib/components/dialogs/SettingsDialog.test.ts
@@ -0,0 +1,366 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import ConfigurationTab from './SettingsDialog.svelte';
+import { projectStore } from '../../state/project.svelte';
+import { jobStore } from '../../state/jobs.svelte';
+import { logStore } from '../../state/logs.svelte';
+import { uiStore } from '../../state/ui.svelte';
+import type { ProjectView } from '../../api/types';
+
+function jsonResponse(status: number, body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+function makeView(overrides: Partial<ProjectView> = {}): ProjectView {
+  return {
+    id: 'appstate-test',
+    revision: 1,
+    image: { width: 320, height: 240 },
+    assets: { input: { url: '/input' }, depth: { url: '/depth' } },
+    depthModel: 'dinov2',
+    numSlices: 3,
+    thresholds: [0, 85, 170, 255],
+    slices: [],
+    selectedSlice: null,
+    segmentation: { multiPointMode: false, queuedPoints: [], hasMask: false },
+    inpainting: {
+      model: 'automatic1111',
+      strength: 0.8,
+      guidanceScale: 7.5,
+      padding: 50,
+      blur: 50,
+      externalServer: 'localhost:7860',
+      hasWorkflow: false,
+      candidates: null,
+      selectedCandidate: null,
+    },
+    busy: null,
+    settings: {
+      darkMode: false,
+      camera: { distance: 100, focalLength: 100, maxDistance: 200 },
+      meshDisplacement: 0,
+      depthModel: 'dinov2',
+    },
+    exports: { gltf: null, upscaled: false },
+    ...overrides,
+  };
+}
+
+describe('ConfigurationTab', () => {
+  beforeEach(() => {
+    projectStore.reset();
+    jobStore.end();
+    logStore.reset();
+    uiStore.reset();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it('shows the Automatic1111/ComfyUI server panel (and its workflow upload) only for those models', () => {
+    projectStore.applyView(makeView({ inpainting: { ...makeView().inpainting, model: 'automatic1111' } }));
+    render(ConfigurationTab);
+    expect(screen.getByTestId('external-server-panel')).toBeInTheDocument();
+    expect(screen.queryByTestId('comfyui-workflow-panel')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('api-key-panel')).not.toBeInTheDocument();
+  });
+
+  it('shows the ComfyUI workflow upload only for comfyui, and the API key panel only for stabilityai/fal.ai', () => {
+    projectStore.applyView(makeView({ inpainting: { ...makeView().inpainting, model: 'comfyui' } }));
+    const { unmount } = render(ConfigurationTab);
+    expect(screen.getByTestId('external-server-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('comfyui-workflow-panel')).toBeInTheDocument();
+    unmount();
+
+    projectStore.applyView(makeView({ revision: 2, inpainting: { ...makeView().inpainting, model: 'stabilityai' } }));
+    render(ConfigurationTab);
+    expect(screen.queryByTestId('external-server-panel')).not.toBeInTheDocument();
+    expect(screen.getByTestId('api-key-panel')).toBeInTheDocument();
+  });
+
+  it('Test Connection highlights success and resets to none when the server address is edited again', async () => {
+    const projectId = 'appstate-test';
+    projectStore.applyView(makeView());
+
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      const url = String(input);
+      const method = init?.method ?? 'GET';
+      if (url === '/api/v1/config/probe-server' && method === 'POST') {
+        expect(JSON.parse(init!.body as string)).toEqual({ model: 'automatic1111', serverAddress: 'localhost:7860' });
+        return jsonResponse(200, { ok: true, message: 'Connection to automatic1111 successful: []' });
+      }
+      if (url === `/api/v1/projects/${projectId}/inpainting/settings` && method === 'PUT') {
+        return jsonResponse(200, { ...makeView({ revision: 2 }), changed: true });
+      }
+      if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) {
+        return jsonResponse(200, { entries: [], next: 0 });
+      }
+      throw new Error(`Unexpected fetch: ${method} ${url}`);
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(ConfigurationTab);
+    expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'none');
+
+    await fireEvent.click(screen.getByTestId('external-test-connection'));
+    await waitFor(() => expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'success'));
+
+    await fireEvent.change(screen.getByTestId('external-server-address'), { target: { value: 'localhost:9999' } });
+    await waitFor(() => expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'none'));
+  });
+
+  it('Test Connection highlights failure when the probe fails', async () => {
+    projectStore.applyView(makeView());
+    const fetchMock = vi.fn(async (input: RequestInfo | URL): Promise<Response> => {
+      const url = String(input);
+      if (url === '/api/v1/config/probe-server') {
+        return jsonResponse(200, { ok: false, message: 'Connection to automatic1111 failed' });
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(ConfigurationTab);
+    await fireEvent.click(screen.getByTestId('external-test-connection'));
+    await waitFor(() => expect(screen.getByTestId('external-server-address')).toHaveAttribute('data-status', 'failure'));
+  });
+
+  it('the API key field never displays a previously-saved key back', () => {
+    projectStore.applyView(makeView({ inpainting: { ...makeView().inpainting, model: 'stabilityai' } }));
+    render(ConfigurationTab);
+    expect(screen.getByTestId('api-key')).toHaveValue('');
+  });
+
+  describe('nav', () => {
+    it('starts on the Inpainting section, marked current', () => {
+      render(ConfigurationTab);
+      expect(screen.getByTestId('settings-nav-inpainting')).toHaveAttribute('aria-current', 'true');
+      expect(screen.getByTestId('settings-nav-depth')).not.toHaveAttribute('aria-current');
+      expect(uiStore.settingsSection).toBe('inpainting');
+    });
+
+    it('clicking a nav link sets uiStore.settingsSection and moves aria-current', async () => {
+      render(ConfigurationTab);
+
+      await fireEvent.click(screen.getByTestId('settings-nav-appearance'));
+
+      expect(uiStore.settingsSection).toBe('appearance');
+      expect(screen.getByTestId('settings-nav-appearance')).toHaveAttribute('aria-current', 'true');
+      expect(screen.getByTestId('settings-nav-inpainting')).not.toHaveAttribute('aria-current');
+    });
+
+    it('opening at a section (openSettings) is reflected in the nav', () => {
+      uiStore.openSettings('slicing');
+      render(ConfigurationTab);
+      expect(screen.getByTestId('settings-nav-slicing')).toHaveAttribute('aria-current', 'true');
+    });
+  });
+
+  describe('depth model', () => {
+    it('reads uiStore.depthModel', () => {
+      render(ConfigurationTab);
+      expect(screen.getByTestId('settings-depth-model')).toHaveValue('dinov2');
+    });
+
+    it('without a project, only updates uiStore.depthModel', async () => {
+      const fetchMock = vi.fn();
+      vi.stubGlobal('fetch', fetchMock);
+      render(ConfigurationTab);
+
+      await fireEvent.change(screen.getByTestId('settings-depth-model'), { target: { value: 'midas' } });
+
+      expect(uiStore.depthModel).toBe('midas');
+      expect(fetchMock).not.toHaveBeenCalled();
+    });
+
+    it('with a project, also PUTs the new depth model to /settings', async () => {
+      const projectId = 'appstate-test';
+      projectStore.applyView(makeView());
+      const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+        const url = String(input);
+        const method = init?.method ?? 'GET';
+        if (url === `/api/v1/projects/${projectId}/settings` && method === 'PUT') {
+          expect(JSON.parse(init!.body as string)).toEqual({ depthModel: 'midas' });
+          return jsonResponse(200, { ...makeView({ revision: 2 }), changed: true });
+        }
+        if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) return jsonResponse(200, { entries: [], next: 0 });
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      });
+      vi.stubGlobal('fetch', fetchMock);
+
+      render(ConfigurationTab);
+      await fireEvent.change(screen.getByTestId('settings-depth-model'), { target: { value: 'midas' } });
+
+      await waitFor(() =>
+        expect(fetchMock).toHaveBeenCalledWith(
+          `/api/v1/projects/${projectId}/settings`,
+          expect.objectContaining({ method: 'PUT' }),
+        ),
+      );
+      expect(uiStore.depthModel).toBe('midas');
+    });
+  });
+
+  describe('num slices', () => {
+    it('reads uiStore.pendingNumSlices', () => {
+      render(ConfigurationTab);
+      expect(screen.getByTestId('settings-num-slices')).toHaveValue('3');
+    });
+
+    it('without a project, only updates uiStore.pendingNumSlices', async () => {
+      const fetchMock = vi.fn();
+      vi.stubGlobal('fetch', fetchMock);
+      render(ConfigurationTab);
+
+      await fireEvent.change(screen.getByTestId('settings-num-slices'), { target: { value: '6' } });
+
+      expect(uiStore.pendingNumSlices).toBe(6);
+      expect(fetchMock).not.toHaveBeenCalled();
+    });
+
+    it('with a project, also PUTs the new count to /slice-count', async () => {
+      const projectId = 'appstate-test';
+      projectStore.applyView(makeView());
+      const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+        const url = String(input);
+        const method = init?.method ?? 'GET';
+        if (url === `/api/v1/projects/${projectId}/slice-count` && method === 'PUT') {
+          expect(JSON.parse(init!.body as string)).toEqual({ numSlices: 6 });
+          return jsonResponse(200, { ...makeView({ revision: 2 }), changed: true });
+        }
+        if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) return jsonResponse(200, { entries: [], next: 0 });
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      });
+      vi.stubGlobal('fetch', fetchMock);
+
+      render(ConfigurationTab);
+      await fireEvent.change(screen.getByTestId('settings-num-slices'), { target: { value: '6' } });
+
+      await waitFor(() =>
+        expect(fetchMock).toHaveBeenCalledWith(
+          `/api/v1/projects/${projectId}/slice-count`,
+          expect.objectContaining({ method: 'PUT' }),
+        ),
+      );
+    });
+  });
+
+  describe('theme radios', () => {
+    it('reflects uiStore.theme with aria-checked', () => {
+      render(ConfigurationTab);
+      expect(screen.getByTestId('settings-theme-dark')).toHaveAttribute('aria-checked', 'true');
+      expect(screen.getByTestId('settings-theme-light')).toHaveAttribute('aria-checked', 'false');
+    });
+
+    it('clicking the already-active theme is a no-op (no toggle, no fetch)', async () => {
+      const fetchMock = vi.fn();
+      vi.stubGlobal('fetch', fetchMock);
+      render(ConfigurationTab);
+
+      await fireEvent.click(screen.getByTestId('settings-theme-dark'));
+
+      expect(uiStore.theme).toBe('dark');
+      expect(fetchMock).not.toHaveBeenCalled();
+    });
+
+    it('clicking the other theme flips uiStore.theme, and persists it with a project', async () => {
+      const projectId = 'appstate-test';
+      projectStore.applyView(makeView());
+      const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+        const url = String(input);
+        const method = init?.method ?? 'GET';
+        if (url === `/api/v1/projects/${projectId}/settings` && method === 'PUT') {
+          expect(JSON.parse(init!.body as string)).toEqual({ darkMode: false });
+          return jsonResponse(200, { ...makeView({ revision: 2 }), changed: true });
+        }
+        if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) return jsonResponse(200, { entries: [], next: 0 });
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      });
+      vi.stubGlobal('fetch', fetchMock);
+
+      render(ConfigurationTab);
+      await fireEvent.click(screen.getByTestId('settings-theme-light'));
+
+      expect(uiStore.theme).toBe('light');
+      await waitFor(() =>
+        expect(fetchMock).toHaveBeenCalledWith(
+          `/api/v1/projects/${projectId}/settings`,
+          expect.objectContaining({ method: 'PUT' }),
+        ),
+      );
+    });
+  });
+
+  describe('restore state', () => {
+    it('closes the dialog once a different project has loaded', async () => {
+      projectStore.applyView(makeView());
+      uiStore.openDialog('settings');
+      const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+        const url = String(input);
+        const method = init?.method ?? 'GET';
+        if (url === '/api/v1/projects/restore' && method === 'POST') {
+          return jsonResponse(200, makeView({ id: 'appstate-restored', revision: 1 }));
+        }
+        if (url.startsWith('/api/v1/projects/appstate-restored/logs')) return jsonResponse(200, { entries: [], next: 0 });
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      });
+      vi.stubGlobal('fetch', fetchMock);
+
+      render(ConfigurationTab);
+      const file = new File(['{}'], 'appstate.json', { type: 'application/json' });
+      await fireEvent.change(screen.getByTestId('restore-state-input'), { target: { files: [file] } });
+
+      await waitFor(() => expect(uiStore.dialog).toBeNull());
+      expect(projectStore.view?.id).toBe('appstate-restored');
+    });
+
+    it('leaves the dialog open if the restore fails', async () => {
+      projectStore.applyView(makeView());
+      uiStore.openDialog('settings');
+      const fetchMock = vi.fn(async (input: RequestInfo | URL): Promise<Response> => {
+        const url = String(input);
+        if (url === '/api/v1/projects/restore') {
+          return jsonResponse(400, { error: { code: 'bad_request', message: 'not a valid state file' } });
+        }
+        if (url.startsWith('/api/v1/projects/appstate-test/logs')) return jsonResponse(200, { entries: [], next: 0 });
+        throw new Error(`Unexpected fetch: ${url}`);
+      });
+      vi.stubGlobal('fetch', fetchMock);
+
+      render(ConfigurationTab);
+      const file = new File(['{}'], 'appstate.json', { type: 'application/json' });
+      await fireEvent.change(screen.getByTestId('restore-state-input'), { target: { files: [file] } });
+
+      await waitFor(() => expect(fetchMock).toHaveBeenCalled());
+      expect(uiStore.dialog).toBe('settings');
+    });
+  });
+
+  it('Save State calls POST /save and does not trigger any browser download', async () => {
+    const projectId = 'appstate-test';
+    projectStore.applyView(makeView());
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+      const url = String(input);
+      const method = init?.method ?? 'GET';
+      if (url === `/api/v1/projects/${projectId}/save` && method === 'POST') {
+        return jsonResponse(200, makeView({ revision: 2 }));
+      }
+      if (url.startsWith(`/api/v1/projects/${projectId}/logs`)) {
+        return jsonResponse(200, { entries: [{ seq: 1, level: 'info', message: `Saved state to ${projectId}` }], next: 1 });
+      }
+      throw new Error(`Unexpected fetch: ${method} ${url}`);
+    });
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(ConfigurationTab);
+    await fireEvent.click(screen.getByTestId('save-state'));
+
+    await waitFor(() =>
+      expect(fetchMock).toHaveBeenCalledWith(`/api/v1/projects/${projectId}/save`, expect.objectContaining({ method: 'POST' })),
+    );
+  });
+});
diff --git a/frontend/src/lib/components/dialogs/ShortcutsDialog.svelte b/frontend/src/lib/components/dialogs/ShortcutsDialog.svelte
new file mode 100644
index 0000000..1306c09
--- /dev/null
+++ b/frontend/src/lib/components/dialogs/ShortcutsDialog.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  /** The keyboard shortcuts (docs/redesign/HANDOFF.md §6), opened with `?`. */
+  import Dialog from '../shared/Dialog.svelte';
+  import { SHORTCUTS } from '../../shortcuts';
+</script>
+
+<Dialog name="shortcuts" title="Keyboard shortcuts" testId="shortcuts-dialog" width={640}>
+  <dl class="grid">
+    {#each SHORTCUTS as { keys, action } (keys)}
+      <div class="item">
+        <dt class="muted">{action}</dt>
+        <dd><span class="kbd">{keys}</span></dd>
+      </div>
+    {/each}
+  </dl>
+</Dialog>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0 28px;
+    margin: 0;
+    padding: 12px 18px 18px;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: 5px 0;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  dd {
+    white-space: nowrap;
+  }
+
+  .muted {
+    color: var(--color-text-secondary);
+  }
+</style>
diff --git a/frontend/src/lib/components/dialogs/ShortcutsDialog.test.ts b/frontend/src/lib/components/dialogs/ShortcutsDialog.test.ts
new file mode 100644
index 0000000..ae62d75
--- /dev/null
+++ b/frontend/src/lib/components/dialogs/ShortcutsDialog.test.ts
@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { flushSync } from 'svelte';
+import ShortcutsDialog from './ShortcutsDialog.svelte';
+import { uiStore } from '../../state/ui.svelte';
+import { SHORTCUTS } from '../../shortcuts';
+
+describe('ShortcutsDialog', () => {
+  beforeEach(() => {
+    uiStore.reset();
+  });
+
+  it('stays closed until uiStore.dialog is "shortcuts"', () => {
+    render(ShortcutsDialog);
+    expect(screen.getByTestId('shortcuts-dialog')).not.toHaveAttribute('open');
+  });
+
+  it('opens once uiStore.dialog is "shortcuts"', () => {
+    render(ShortcutsDialog);
+    uiStore.openDialog('shortcuts');
+    flushSync();
+    expect(screen.getByTestId('shortcuts-dialog')).toHaveAttribute('open');
+  });
+
+  it('lists every shortcut from shortcuts.ts, keys and action both', () => {
+    uiStore.openDialog('shortcuts');
+    render(ShortcutsDialog);
+
+    expect(SHORTCUTS.length).toBeGreaterThan(0);
+    // Some `keys` strings (e.g. "[  ]") use double spaces for alignment,
+    // which testing-library's default whitespace normalizer collapses, so
+    // compare against the dialog's own normalized text content instead of
+    // an exact getByText match.
+    const text = screen.getByTestId('shortcuts-dialog').textContent!.replace(/\s+/g, ' ');
+    for (const { keys, action } of SHORTCUTS) {
+      expect(text).toContain(action);
+      expect(text).toContain(keys.replace(/\s+/g, ' '));
+    }
+  });
+});
diff --git a/frontend/src/lib/components/export/ExportTab.svelte b/frontend/src/lib/components/export/ExportTab.svelte
deleted file mode 100644
index 1dd70a1..0000000
--- a/frontend/src/lib/components/export/ExportTab.svelte
+++ /dev/null
@@ -1,225 +0,0 @@
-<script lang="ts">
-  /**
-   * The Export step's Inspector panel: the glTF scene (with mesh
-   * displacement and depth of field), texture upscaling, and the parallax
-   * animation. The camera itself is set in the Preview panel.
-   */
-  import { projectStore } from '../../state/project.svelte';
-  import { jobStore } from '../../state/jobs.svelte';
-  import { isBusy } from '../../state/busy.svelte';
-  import * as workflow from '../../workflow';
-  import { triggerDownload } from '../../download';
-  import { cameraDraftStore } from '../../state/cameraDraft.svelte';
-  import CameraSlider from '../shared/CameraSlider.svelte';
-
-  const view = $derived(projectStore.view);
-
-  $effect(() => cameraDraftStore.sync(view?.settings));
-
-  // -- Depth of Field checkbox: purely a parameter of the next export
-  // request, not a persisted setting (components.py's CHECKLIST_DOF has no
-  // "remember" callback of its own).
-  let dofEnabled = $state(false);
-
-  // -- Create glTF Scene (WEB-32): renders into the 3D viewer tab (see
-  // Model3DViewer.svelte), same as Dash's own
-  // `gltf_create` updating the `#model-viewer` iframe - it does not, by
-  // itself, switch the active viewer tab either.
-  const creatingGltf = $derived(jobStore.active === 'export-gltf');
-
-  function createGltfScene(): void {
-    if (!view || isBusy()) return;
-    void workflow.startGltfExport(dofEnabled);
-  }
-
-  // -- Export glTF Scene (WEB-28): same job as Create, but triggers a real
-  // browser download of the resulting `.gltf` file once it lands - an
-  // `<a download>` click (not `window.open`), per the migration task.
-  async function exportGltfScene(): Promise<void> {
-    if (!view || isBusy()) return;
-    await workflow.startGltfExport(dofEnabled);
-    const url = projectStore.view?.exports.gltf?.url;
-    if (url) triggerDownload(url, 'scene.gltf');
-  }
-
-  // -- Upscale Textures (WEB-27).
-  const upscaling = $derived(jobStore.active === 'upscale');
-
-  function upscaleTextures(): void {
-    if (!view || isBusy()) return;
-    void workflow.startUpscaleExport();
-  }
-
-  // -- Export Animation + Number of Frames (WEB-35): job only, no download
-  // (see PARITY.md "Known quirks" - `ANIMATION_OUTPUT` exists in Dash but no
-  // `dcc.Download` ever fires). The frame count itself is not a persisted
-  // setting (components.py's SLIDER_NUM_FRAMES has no "remember" callback).
-  let numFrames = $state(100);
-  const animating = $derived(jobStore.active === 'animation');
-
-  function exportAnimation(): void {
-    if (!view || isBusy() || numFrames <= 0) return;
-    void workflow.startAnimationExport(numFrames);
-  }
-
-</script>
-
-<div class="export-panel" data-testid="tab-export">
-  <section class="sec">
-    <h3 class="label accent">glTF scene</h3>
-    <p class="faint">Cards at their depths, for Blender, Unity or a web viewer.</p>
-    <CameraSlider
-      field="displacement"
-      label="Displacement"
-      testId="displacement"
-      min={0}
-      max={150}
-      step={5}
-      disabled={!view}
-    />
-    <label class="checkbox-row">
-      <input
-        type="checkbox"
-        data-testid="toggle-dof"
-        checked={dofEnabled}
-        onchange={(event) => (dofEnabled = (event.currentTarget as HTMLInputElement).checked)}
-      />
-      Support depth of field
-    </label>
-    <div class="row">
-      <button
-        type="button"
-        class="btn grow"
-        data-testid="gltf-create"
-        title="Build the scene and show it in the 3D view"
-        disabled={isBusy() || !view}
-        onclick={createGltfScene}
-      >
-        Create scene
-      </button>
-      <button
-        type="button"
-        class="btn btn-primary grow"
-        data-testid="gltf-export"
-        title="Build the scene and download scene.gltf"
-        disabled={isBusy() || !view}
-        onclick={() => void exportGltfScene()}
-      >
-        Download glTF
-      </button>
-    </div>
-    <button
-      type="button"
-      class="btn"
-      data-testid="upscale-textures"
-      title="Upscale every slice texture before exporting"
-      disabled={isBusy() || !view}
-      onclick={upscaleTextures}
-    >
-      Upscale textures
-    </button>
-    <div class="progress-bar" data-testid="export-progress" class:idle={!(creatingGltf || upscaling)}>
-      <div
-        class="progress-bar-fill"
-        style={`width: ${(creatingGltf || upscaling) ? Math.round(jobStore.progress * 100) : 0}%`}
-      ></div>
-    </div>
-  </section>
-
-  <section class="sec">
-    <h3 class="label">Animation</h3>
-    <div class="g3">
-      <label class="muted" for="number-of-frames">Frames</label>
-      <input
-        id="number-of-frames"
-        type="range"
-        min="0"
-        max="300"
-        step="1"
-        data-testid="number-of-frames"
-        value={numFrames}
-        disabled={isBusy() || !view}
-        oninput={(event) => (numFrames = Number((event.currentTarget as HTMLInputElement).value))}
-      />
-      <span class="mono value">{numFrames}</span>
-    </div>
-    <button
-      type="button"
-      class="btn"
-      data-testid="animation-export"
-      disabled={isBusy() || !view || numFrames <= 0}
-      onclick={exportAnimation}
-    >
-      Export animation
-    </button>
-    <div class="progress-bar" data-testid="animation-progress" class:idle={!animating}>
-      <div class="progress-bar-fill" style={`width: ${animating ? Math.round(jobStore.progress * 100) : 0}%`}></div>
-    </div>
-  </section>
-</div>
-
-<style>
-  .export-panel {
-    display: flex;
-    flex-direction: column;
-    margin: calc(-1 * var(--space-3)) -14px;
-  }
-
-  .sec {
-    padding: var(--space-3) 14px;
-    border-bottom: 1px solid var(--color-border);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .label {
-    margin: 0;
-  }
-
-  .accent {
-    color: var(--color-primary-soft-text);
-  }
-
-  .faint {
-    margin: 0;
-    color: var(--color-text-muted);
-    font-size: var(--text-small);
-  }
-
-  .muted {
-    color: var(--color-text-secondary);
-  }
-
-  .checkbox-row {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    color: var(--color-text-secondary);
-  }
-
-  .row {
-    display: flex;
-    gap: var(--space-2);
-  }
-
-  .grow {
-    flex: 1 1 0;
-  }
-
-  .g3 {
-    display: grid;
-    grid-template-columns: 96px minmax(0, 1fr) 44px;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .value {
-    text-align: right;
-    font-size: 12px;
-  }
-
-  .progress-bar.idle {
-    visibility: hidden;
-  }
-</style>
diff --git a/frontend/src/lib/components/inpainting/InpaintPanel.svelte b/frontend/src/lib/components/inpainting/InpaintPanel.svelte
index 42277dd..da3c84a 100644
--- a/frontend/src/lib/components/inpainting/InpaintPanel.svelte
+++ b/frontend/src/lib/components/inpainting/InpaintPanel.svelte
@@ -12,6 +12,7 @@
   import { canvasSaveStore } from '../../state/canvas.svelte';
   import { uiStore } from '../../state/ui.svelte';
   import * as workflow from '../../workflow';
+  import { registerInpaintActions } from '../../shortcuts';
 
   const view = $derived(projectStore.view);
   const selectedSlice = $derived(view?.selectedSlice ?? null);
@@ -135,13 +136,24 @@
     if (!canApply) return;
     void workflow.applyInpaintingCandidate();
   }
+
+  // Ctrl+Enter, 1 2 3 and A (lib/shortcuts.ts).
+  $effect(() =>
+    registerInpaintActions({
+      generate,
+      pick: (index) => {
+        if (index < (candidates?.images.length ?? 0)) selectCandidate(index);
+      },
+      apply,
+    }),
+  );
 </script>
 
 <div class="inpaint-panel" data-testid="tab-inpainting">
   <section class="sec">
     <div class="sec-title">
       <h3 class="label accent">Inpaint</h3>
-      <button type="button" class="btn btn-ghost btn-sm link" onclick={() => uiStore.setMainTab('Configuration')}>
+      <button type="button" class="btn btn-ghost btn-sm link" onclick={() => uiStore.openSettings('inpainting')}>
         Model settings
       </button>
     </div>
@@ -245,6 +257,7 @@
       class="btn"
       class:btn-primary={!hasCandidates}
       data-testid="generate-inpainting"
+      title="Generate three candidates (Ctrl+Enter)"
       disabled={!canGenerate}
       onclick={generate}
     >
@@ -293,6 +306,7 @@
       class="btn"
       class:btn-primary={hasCandidates}
       data-testid="apply-inpainting"
+      title="Apply the picked candidate to the slice (A)"
       disabled={!canApply}
       onclick={apply}
     >
diff --git a/frontend/src/lib/components/shared/Dialog.svelte b/frontend/src/lib/components/shared/Dialog.svelte
new file mode 100644
index 0000000..b6ae583
--- /dev/null
+++ b/frontend/src/lib/components/shared/Dialog.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  /**
+   * A modal dialog (docs/redesign/HANDOFF.md §3) on the native `<dialog>`:
+   * open while `uiStore.dialog` names it, closed by Esc, the × button or a
+   * click on the backdrop. It stays mounted while closed, so its controls
+   * (and their values) always exist in the page.
+   */
+  import type { Snippet } from 'svelte';
+  import X from '@lucide/svelte/icons/x';
+  import { uiStore, type DialogName } from '../../state/ui.svelte';
+
+  let {
+    name,
+    title,
+    testId,
+    width = 640,
+    height,
+    children,
+  }: {
+    name: DialogName;
+    title: string;
+    testId: string;
+    width?: number;
+    height?: number;
+    children: Snippet;
+  } = $props();
+
+  let dialog: HTMLDialogElement | undefined = $state();
+  const open = $derived(uiStore.dialog === name);
+  const titleId = $derived(`${testId}-title`);
+
+  $effect(() => {
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      // jsdom has no showModal.
+      if (typeof dialog.showModal === 'function') dialog.showModal();
+      else dialog.setAttribute('open', '');
+    } else if (!open && dialog.open) {
+      if (typeof dialog.close === 'function') dialog.close();
+      else dialog.removeAttribute('open');
+    }
+  });
+
+  // Esc (the native `cancel` -> `close`) and form-less closes land here.
+  function onClose(): void {
+    if (uiStore.dialog === name) uiStore.closeDialog();
+  }
+
+  // A click on the ::backdrop targets the dialog element itself.
+  function onClick(event: MouseEvent): void {
+    if (event.target === dialog) uiStore.closeDialog();
+  }
+</script>
+
+<dialog
+  bind:this={dialog}
+  class="dialog"
+  data-testid={testId}
+  aria-labelledby={titleId}
+  style:width={`min(${width}px, calc(100vw - 32px))`}
+  style:height={height ? `min(${height}px, calc(100dvh - 32px))` : undefined}
+  onclose={onClose}
+  onclick={onClick}
+>
+  <div class="frame">
+    <div class="head">
+      <h2 id={titleId}>{title}</h2>
+      <button
+        type="button"
+        class="btn btn-ghost btn-icon"
+        aria-label={`Close ${title.toLowerCase()}`}
+        data-testid={`${testId}-close`}
+        onclick={() => uiStore.closeDialog()}
+      >
+        <X size={16} strokeWidth={1.6} />
+      </button>
+    </div>
+    <div class="content">
+      {@render children()}
+    </div>
+  </div>
+</dialog>
+
+<style>
+  .dialog {
+    /* The app's reset zeroes margins; a modal dialog centers with auto ones. */
+    margin: auto;
+    padding: 0;
+    max-height: calc(100dvh - 32px);
+    background: var(--color-float);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-float);
+    overflow: hidden;
+  }
+
+  .dialog::backdrop {
+    background: var(--color-scrim);
+  }
+
+  .frame {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-height: calc(100dvh - 34px);
+  }
+
+  .head {
+    display: flex;
+    align-items: center;
+    padding: 12px 12px 12px 16px;
+    border-bottom: 1px solid var(--color-border);
+    flex-shrink: 0;
+  }
+
+  h2 {
+    margin: 0;
+    flex: 1 1 auto;
+    font-size: var(--text-title);
+    font-weight: 600;
+  }
+
+  .content {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+  }
+</style>
diff --git a/frontend/src/lib/components/shared/Dialog.test.ts b/frontend/src/lib/components/shared/Dialog.test.ts
new file mode 100644
index 0000000..cc9124e
--- /dev/null
+++ b/frontend/src/lib/components/shared/Dialog.test.ts
@@ -0,0 +1,134 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet, flushSync } from 'svelte';
+import Dialog from './Dialog.svelte';
+import { uiStore } from '../../state/ui.svelte';
+
+function childrenSnippet(text = 'dialog body') {
+  return createRawSnippet(() => ({
+    render: () => `<p data-testid="dialog-body">${text}</p>`,
+  }));
+}
+
+describe('Dialog', () => {
+  beforeEach(() => {
+    uiStore.reset();
+  });
+
+  it('stays in the DOM (without the open attribute) while closed', () => {
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    expect(screen.getByTestId('export-dialog')).not.toHaveAttribute('open');
+    // Content stays mounted even while closed.
+    expect(screen.getByTestId('dialog-body')).toBeInTheDocument();
+  });
+
+  it('opens (gains the open attribute) once uiStore.dialog names it', () => {
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    uiStore.openDialog('export');
+    flushSync();
+    expect(screen.getByTestId('export-dialog')).toHaveAttribute('open');
+  });
+
+  it('does not open for a different dialog name', () => {
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    uiStore.openDialog('settings');
+    flushSync();
+    expect(screen.getByTestId('export-dialog')).not.toHaveAttribute('open');
+  });
+
+  it('closes (loses the open attribute) once uiStore.dialog is cleared', () => {
+    uiStore.openDialog('export');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    expect(screen.getByTestId('export-dialog')).toHaveAttribute('open');
+
+    uiStore.closeDialog();
+    flushSync();
+    expect(screen.getByTestId('export-dialog')).not.toHaveAttribute('open');
+  });
+
+  it('renders the title and links it via aria-labelledby', () => {
+    uiStore.openDialog('export');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    const dialog = screen.getByTestId('export-dialog');
+    const titleId = dialog.getAttribute('aria-labelledby');
+    expect(titleId).toBe('export-dialog-title');
+    expect(document.getElementById(titleId!)).toHaveTextContent('Export');
+  });
+
+  it('the close button calls uiStore.closeDialog()', async () => {
+    uiStore.openDialog('export');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    expect(uiStore.dialog).toBe('export');
+
+    await fireEvent.click(screen.getByTestId('export-dialog-close'));
+    expect(uiStore.dialog).toBeNull();
+  });
+
+  it('a click on the dialog element itself (the backdrop) calls uiStore.closeDialog()', async () => {
+    uiStore.openDialog('export');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    const dialog = screen.getByTestId('export-dialog');
+
+    await fireEvent.click(dialog);
+    expect(uiStore.dialog).toBeNull();
+  });
+
+  it('a click inside the dialog content does not close it', async () => {
+    uiStore.openDialog('export');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+
+    await fireEvent.click(screen.getByTestId('dialog-body'));
+    expect(uiStore.dialog).toBe('export');
+  });
+
+  it('the native close event calls uiStore.closeDialog() (e.g. Esc)', () => {
+    uiStore.openDialog('export');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    const dialog = screen.getByTestId('export-dialog');
+
+    dialog.dispatchEvent(new Event('close'));
+    expect(uiStore.dialog).toBeNull();
+  });
+
+  it('a stray close event for a dialog that is not the open one leaves the store alone', () => {
+    uiStore.openDialog('settings');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', children: childrenSnippet() },
+    });
+    const dialog = screen.getByTestId('export-dialog');
+
+    dialog.dispatchEvent(new Event('close'));
+    expect(uiStore.dialog).toBe('settings');
+  });
+
+  it('applies a numeric width/height as inline style', () => {
+    uiStore.openDialog('export');
+    render(Dialog, {
+      props: { name: 'export', title: 'Export', testId: 'export-dialog', width: 500, height: 300, children: childrenSnippet() },
+    });
+    const dialog = screen.getByTestId('export-dialog');
+    // jsdom normalizes calc() text, so just check the pieces that matter.
+    expect(dialog.style.width).toContain('500px');
+    expect(dialog.style.width).toContain('100vw');
+    expect(dialog.style.height).toContain('300px');
+    expect(dialog.style.height).toContain('100dvh');
+  });
+});
diff --git a/frontend/src/lib/components/shared/HelpTooltip.svelte b/frontend/src/lib/components/shared/HelpTooltip.svelte
deleted file mode 100644
index 677928b..0000000
--- a/frontend/src/lib/components/shared/HelpTooltip.svelte
+++ /dev/null
@@ -1,128 +0,0 @@
-<script lang="ts">
-  /**
-   * An accessible "?" help affordance carrying Dash's own contextual help
-   * texts (utility.js's `setupHelper`/JS-06 `helpTexts` object, wired by
-   * `suppress_contextmenu`/CLI-02). Dash shows these as a randomized tooltip
-   * that pops up near the cursor after 3s of mouse idle time over the input
-   * image container -- a timer-driven popup with no `role`, no
-   * `aria-describedby`, and no keyboard equivalent at all (a mouse-only
-   * user has no way to trigger it on demand, and a keyboard-only user
-   * cannot reach it at all).
-   *
-   * This is a deliberate, documented redesign rather than a literal port:
-   * a focusable `button` shows/hides a `role="tooltip"` panel listing every
-   * text Dash would have randomly picked from for the given context,
-   * `aria-describedby`-linked to the button, openable by click, Enter or
-   * Space, and dismissible with Escape or a click outside -- so the same
-   * information Dash only reveals after an idle timer is available
-   * on-demand to mouse, keyboard and screen-reader users alike (see
-   * PARITY.md's "Remaining gaps"/JS-06 row).
-   */
-  let { label, texts }: { label: string; texts: string[] } = $props();
-
-  let open = $state(false);
-  let buttonEl: HTMLButtonElement | undefined;
-  const tooltipId = $derived(`help-tooltip-${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`);
-
-  function toggle(): void {
-    open = !open;
-  }
-
-  function close(): void {
-    open = false;
-  }
-
-  function onKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      close();
-      buttonEl?.focus();
-    }
-  }
-
-  function onWindowClick(event: MouseEvent): void {
-    if (!open) return;
-    const target = event.target as Node;
-    if (buttonEl && !buttonEl.parentElement?.contains(target)) close();
-  }
-</script>
-
-<svelte:window onclick={onWindowClick} />
-
-<span class="help-tooltip">
-  <button
-    bind:this={buttonEl}
-    type="button"
-    class="help-button"
-    aria-label={`Help: ${label}`}
-    aria-describedby={open ? tooltipId : undefined}
-    aria-expanded={open}
-    data-testid="help-button"
-    onclick={toggle}
-    onkeydown={onKeydown}
-  >
-    ?
-  </button>
-  {#if open}
-    <div class="help-panel" role="tooltip" id={tooltipId} data-testid="help-panel">
-      <ul>
-        {#each texts as text (text)}
-          <li>{text}</li>
-        {/each}
-      </ul>
-    </div>
-  {/if}
-</span>
-
-<style>
-  .help-tooltip {
-    position: relative;
-    display: inline-block;
-  }
-
-  .help-button {
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: 50%;
-    border: 1px solid var(--color-border);
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    font: inherit;
-    font-weight: 700;
-    line-height: 1;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .help-button:hover,
-  .help-button:focus-visible {
-    background-color: var(--color-accent);
-    color: var(--color-accent-text);
-  }
-
-  .help-panel {
-    position: absolute;
-    top: calc(100% + var(--space-1));
-    right: 0;
-    z-index: 30;
-    width: 16rem;
-    max-width: 70vw;
-    background-color: var(--color-bg);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    padding: var(--space-2);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    font-size: 0.8125rem;
-  }
-
-  .help-panel ul {
-    margin: 0;
-    padding-left: 1.1rem;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-1);
-  }
-</style>
diff --git a/frontend/src/lib/components/shared/HelpTooltip.test.ts b/frontend/src/lib/components/shared/HelpTooltip.test.ts
deleted file mode 100644
index 3e5ce6e..0000000
--- a/frontend/src/lib/components/shared/HelpTooltip.test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import HelpTooltip from './HelpTooltip.svelte';
-
-const TEXTS = ['First help text', 'Second help text'];
-
-describe('HelpTooltip', () => {
-  it('starts closed, with no tooltip panel in the DOM', () => {
-    render(HelpTooltip, { label: 'Segmentation', texts: TEXTS });
-    expect(screen.queryByTestId('help-panel')).toBeNull();
-    expect(screen.getByTestId('help-button')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('opens the panel on click and links it via aria-describedby', async () => {
-    render(HelpTooltip, { label: 'Segmentation', texts: TEXTS });
-    const button = screen.getByTestId('help-button');
-
-    await fireEvent.click(button);
-
-    const panel = screen.getByTestId('help-panel');
-    expect(panel).toBeInTheDocument();
-    expect(button).toHaveAttribute('aria-expanded', 'true');
-    expect(button.getAttribute('aria-describedby')).toBe(panel.id);
-    expect(panel).toHaveTextContent('First help text');
-    expect(panel).toHaveTextContent('Second help text');
-  });
-
-  it('has an accessible name that includes the context label', () => {
-    render(HelpTooltip, { label: 'Inpainting', texts: TEXTS });
-    expect(screen.getByRole('button', { name: 'Help: Inpainting' })).toBeInTheDocument();
-  });
-
-  it('closes again on a second click (toggle)', async () => {
-    render(HelpTooltip, { label: 'Segmentation', texts: TEXTS });
-    const button = screen.getByTestId('help-button');
-
-    await fireEvent.click(button);
-    expect(screen.getByTestId('help-panel')).toBeInTheDocument();
-
-    await fireEvent.click(button);
-    expect(screen.queryByTestId('help-panel')).toBeNull();
-  });
-
-  it('closes on Escape and returns focus to the button', async () => {
-    render(HelpTooltip, { label: 'Segmentation', texts: TEXTS });
-    const button = screen.getByTestId('help-button') as HTMLButtonElement;
-
-    await fireEvent.click(button);
-    expect(screen.getByTestId('help-panel')).toBeInTheDocument();
-
-    await fireEvent.keyDown(button, { key: 'Escape' });
-
-    expect(screen.queryByTestId('help-panel')).toBeNull();
-    expect(document.activeElement).toBe(button);
-  });
-
-  it('closes when a click happens outside the tooltip', async () => {
-    render(HelpTooltip, { label: 'Segmentation', texts: TEXTS });
-    const button = screen.getByTestId('help-button');
-    await fireEvent.click(button);
-    expect(screen.getByTestId('help-panel')).toBeInTheDocument();
-
-    await fireEvent.click(document.body);
-
-    expect(screen.queryByTestId('help-panel')).toBeNull();
-  });
-});
diff --git a/frontend/src/lib/components/shell/AppHeader.svelte b/frontend/src/lib/components/shell/AppHeader.svelte
index a12784a..e9e8319 100644
--- a/frontend/src/lib/components/shell/AppHeader.svelte
+++ b/frontend/src/lib/components/shell/AppHeader.svelte
@@ -77,13 +77,11 @@
     <button
       type="button"
       class="btn btn-ghost btn-icon"
-      class:btn-selected={uiStore.mainTab === 'Configuration'}
       data-testid="open-settings"
       aria-label="Settings"
-      aria-pressed={uiStore.mainTab === 'Configuration'}
-      title="Settings"
-      onclick={() =>
-        uiStore.mainTab === 'Configuration' ? uiStore.setStep(uiStore.step) : uiStore.setMainTab('Configuration')}
+      aria-haspopup="dialog"
+      title="Settings (Ctrl+,)"
+      onclick={() => uiStore.openSettings()}
     >
       <Settings size={16} strokeWidth={1.6} />
     </button>
@@ -91,8 +89,10 @@
       type="button"
       class="btn btn-primary export"
       data-testid="open-export"
+      aria-haspopup="dialog"
+      title="Export (Ctrl+E)"
       disabled={!hasSlices}
-      onclick={() => uiStore.setStep('export')}
+      onclick={() => uiStore.openDialog('export')}
     >
       <Download size={16} strokeWidth={1.6} />
       Export…
diff --git a/frontend/src/lib/components/shell/AppShell.svelte b/frontend/src/lib/components/shell/AppShell.svelte
index c2f5883..529814a 100644
--- a/frontend/src/lib/components/shell/AppShell.svelte
+++ b/frontend/src/lib/components/shell/AppShell.svelte
@@ -11,9 +11,33 @@
   import StatusBar from './StatusBar.svelte';
   import CanvasArea from '../canvas/CanvasArea.svelte';
   import LayerPanel from '../layers/LayerPanel.svelte';
+  import ExportDialog from '../dialogs/ExportDialog.svelte';
+  import SettingsDialog from '../dialogs/SettingsDialog.svelte';
+  import ShortcutsDialog from '../dialogs/ShortcutsDialog.svelte';
+  import { handleShortcut } from '../../shortcuts';
+
+  // Keyboard shortcuts are handled on the app root, which takes focus when
+  // anything non-focusable inside it is clicked (tabindex -1), so keys reach
+  // it without a window-wide listener.
+  let root: HTMLDivElement | undefined = $state();
+  $effect(() => {
+    if (root && (document.activeElement === document.body || !document.activeElement)) root.focus({ preventScroll: true });
+  });
+
+  function onKeydown(event: KeyboardEvent): void {
+    if (handleShortcut(event)) event.preventDefault();
+  }
 </script>
 
-<div id="app-container" class="app-shell" class:app-busy={jobStore.active !== null}>
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_static_element_interactions -->
+<div
+  id="app-container"
+  class="app-shell"
+  class:app-busy={jobStore.active !== null}
+  tabindex="-1"
+  bind:this={root}
+  onkeydown={onKeydown}
+>
   <AppHeader />
   <main class="app-main">
     <LayerPanel />
@@ -22,6 +46,9 @@
   </main>
   <LogDrawer />
   <StatusBar />
+  <ExportDialog />
+  <SettingsDialog />
+  <ShortcutsDialog />
 </div>
 
 <style>
@@ -37,6 +64,10 @@
     color: var(--color-text);
   }
 
+  .app-shell:focus {
+    outline: none;
+  }
+
   .app-busy {
     cursor: progress;
   }
diff --git a/frontend/src/lib/components/shell/Inspector.svelte b/frontend/src/lib/components/shell/Inspector.svelte
index 956c879..27e8268 100644
--- a/frontend/src/lib/components/shell/Inspector.svelte
+++ b/frontend/src/lib/components/shell/Inspector.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   /**
-   * The right-hand column: the panel for the current workflow step (or
-   * Settings). All panels stay mounted and only the active one is shown:
+   * The right-hand column: the panel for the current workflow step. All panels stay mounted and only the active one is shown:
    * e2e scenarios read slider values without first switching to them.
    */
   import { uiStore, WORKFLOW_STEPS, type MainTab } from '../../state/ui.svelte';
@@ -10,15 +9,9 @@
   import InpaintPanel from '../inpainting/InpaintPanel.svelte';
   import GroundPanel from '../ground/GroundPanel.svelte';
   import PreviewPanel from '../preview/PreviewPanel.svelte';
-  import ExportTab from '../export/ExportTab.svelte';
-  import ConfigurationTab from '../config/ConfigurationTab.svelte';
   import SelectedSliceHeader from '../layers/SelectedSliceHeader.svelte';
 
-  const title = $derived(
-    uiStore.mainTab === 'Configuration'
-      ? 'Settings'
-      : (WORKFLOW_STEPS.find(({ step }) => step === uiStore.step)?.label ?? ''),
-  );
+  const title = $derived(WORKFLOW_STEPS.find(({ step }) => step === uiStore.step)?.label ?? '');
 
   const hidden = (tab: MainTab) => uiStore.mainTab !== tab;
 </script>
@@ -28,14 +21,12 @@
     <h2 class="label">{title}</h2>
   </div>
   <div class="inspector-body">
-    {#if uiStore.mainTab !== 'Configuration'}<SelectedSliceHeader />{/if}
+    <SelectedSliceHeader />
     <div class="section" class:hidden={hidden('Mode')}><ModeTab /></div>
     <div class="section" class:hidden={hidden('Segmentation')}><SegmentPanel /></div>
     <div class="section" class:hidden={hidden('Inpainting')}><InpaintPanel /></div>
     <div class="section" class:hidden={hidden('Ground')}><GroundPanel /></div>
     <div class="section" class:hidden={hidden('Preview')}><PreviewPanel /></div>
-    <div class="section" class:hidden={hidden('Export')}><ExportTab /></div>
-    <div class="section" class:hidden={hidden('Configuration')}><ConfigurationTab /></div>
   </div>
 </aside>
 
diff --git a/frontend/src/lib/components/shell/Shell.test.ts b/frontend/src/lib/components/shell/Shell.test.ts
index f0f7e7e..4f4e363 100644
--- a/frontend/src/lib/components/shell/Shell.test.ts
+++ b/frontend/src/lib/components/shell/Shell.test.ts
@@ -108,7 +108,6 @@ describe('app shell', () => {
       ['step-inpaint', 'Inpainting'],
       ['step-ground', 'Ground'],
       ['step-preview', 'Preview'],
-      ['step-export', 'Export'],
     ])('%s shows the %s panel', async (testId, panel) => {
       render(AppShell);
       await fireEvent.click(screen.getByTestId(testId));
@@ -116,6 +115,17 @@ describe('app shell', () => {
       expect(screen.getByTestId('inspector')).toHaveAttribute('data-panel', panel);
     });
 
+    it('step-export opens the Export dialog and leaves the current step and panel alone', async () => {
+      render(AppShell);
+      await fireEvent.click(screen.getByTestId('step-slices'));
+      await fireEvent.click(screen.getByTestId('step-export'));
+      expect(screen.getByTestId('step-slices')).toHaveAttribute('aria-current', 'step');
+      expect(screen.getByTestId('step-export')).not.toHaveAttribute('aria-current', 'step');
+      expect(screen.getByTestId('inspector')).toHaveAttribute('data-panel', 'Segmentation');
+      expect(uiStore.dialog).toBe('export');
+      expect(screen.getByTestId('export-dialog')).toHaveAttribute('open');
+    });
+
     it('visiting Preview counts as done once another step is current', async () => {
       render(AppShell);
       await fireEvent.click(screen.getByTestId('step-preview'));
@@ -131,18 +141,23 @@ describe('app shell', () => {
       expect(screen.getByTestId('project-name')).toHaveTextContent('appstate-shell');
     });
 
-    it('Settings toggles the Settings panel and back to the current step', async () => {
+    it('Settings opens over the current step, and the close button returns to the workspace', async () => {
       render(AppShell);
       await fireEvent.click(screen.getByTestId('step-inpaint'));
       await fireEvent.click(screen.getByTestId('open-settings'));
-      expect(screen.getByTestId('inspector')).toHaveAttribute('data-panel', 'Configuration');
-      expect(screen.getByTestId('open-settings')).toHaveAttribute('aria-pressed', 'true');
 
-      await fireEvent.click(screen.getByTestId('open-settings'));
+      expect(uiStore.dialog).toBe('settings');
+      expect(screen.getByTestId('settings-dialog')).toHaveAttribute('open');
+      // The Inspector behind the dialog is untouched.
       expect(screen.getByTestId('inspector')).toHaveAttribute('data-panel', 'Inpainting');
+      expect(screen.getByTestId('step-inpaint')).toHaveAttribute('aria-current', 'step');
+
+      await fireEvent.click(screen.getByTestId('settings-dialog-close'));
+      expect(uiStore.dialog).toBeNull();
+      expect(screen.getByTestId('settings-dialog')).not.toHaveAttribute('open');
     });
 
-    it('Export is disabled until there are slices, then opens the Export step', async () => {
+    it('Export is disabled until there are slices, then opens the Export dialog', async () => {
       projectStore.applyView(makeView());
       const { unmount } = render(AppShell);
       expect(screen.getByTestId('open-export')).toBeDisabled();
@@ -151,7 +166,8 @@ describe('app shell', () => {
       projectStore.applyView(makeView({ slices: [slice(0)] }));
       render(AppShell);
       await fireEvent.click(screen.getByTestId('open-export'));
-      expect(screen.getByTestId('step-export')).toHaveAttribute('aria-current', 'step');
+      expect(uiStore.dialog).toBe('export');
+      expect(screen.getByTestId('export-dialog')).toHaveAttribute('open');
     });
 
     it('undo and redo act on the selected slice and follow its history', async () => {
diff --git a/frontend/src/lib/components/upload/InputImagePanel.svelte b/frontend/src/lib/components/upload/InputImagePanel.svelte
index 1067dbd..112097c 100644
--- a/frontend/src/lib/components/upload/InputImagePanel.svelte
+++ b/frontend/src/lib/components/upload/InputImagePanel.svelte
@@ -304,7 +304,7 @@
           <div class="layer placeholder" data-testid="view-slice-empty">Select a layer to see it on its own.</div>
         {/if}
       {:else if uiStore.view === 'composite'}
-        <div class="layer" data-testid="view-composite">
+        <div class="layer" data-testid="view-composite-layers">
           {#each compositeLayers as slice (slice.index)}
             <img class="layer" alt="" src={slice.image.url} draggable="false" />
           {/each}
@@ -326,7 +326,7 @@
       <button type="button" class="btn btn-primary" data-testid="choose-image" disabled={isBusy()} onclick={pickFile}>
         Choose image…
       </button>
-      <button type="button" class="btn btn-ghost btn-sm" data-testid="empty-load-project" onclick={() => uiStore.setMainTab('Configuration')}>
+      <button type="button" class="btn btn-ghost btn-sm" data-testid="empty-load-project" onclick={() => uiStore.openSettings('project')}>
         or load a saved project…
       </button>
     </div>
diff --git a/frontend/src/lib/helpTexts.ts b/frontend/src/lib/helpTexts.ts
deleted file mode 100644
index 3310a8c..0000000
--- a/frontend/src/lib/helpTexts.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Dash's own contextual help texts, copied from
- * `parallax_maker/assets/scripts/utility.js`'s `setupHelper`/`helpTexts`
- * (JS-06). Dash picks one at random per idle-timeout popup; HelpTooltip.svelte
- * shows the whole list at once instead (see its own doc comment for why).
- * One typo is fixed ("panting" -> "painting").
- */
-
-export const SEGMENTATION_HELP_TEXTS: string[] = [
-  'Click on the element in the image to create a mask for it',
-  'Control-click to remove the element from the mask',
-  'Shift-click to add the element to the mask',
-];
-
-export const INPAINTING_HELP_TEXTS: string[] = [
-  'Drag Alt + Right-click to adjust brush size',
-  'Use the mouse wheel to zoom in and out of the image',
-  'You can clean up the image by painting over the areas you want to remove and ' +
-    'pressing the erase button to remove them',
-];
-
-export const EXPORT_HELP_TEXTS: string[] = [
-  'Click on the export button to download a glTF scene for Blender',
-  'Using mesh displacement will give the scene more 3D depth. Try it out!',
-  'Upscaling the textures will allow you to zoom in more on the scene.',
-];
-
-export const CONFIGURATION_HELP_TEXTS: string[] = [
-  'State is saved automatically in a new folder in the directory you are running ' +
-    'Parallax Maker in. Eventually, save state will give you a zip file.',
-  'You can restore your state by clicking the load button and ' +
-    'navigating to the directory on your local machine where the tool is running.',
-];
diff --git a/frontend/src/lib/shortcuts.test.ts b/frontend/src/lib/shortcuts.test.ts
new file mode 100644
index 0000000..1bcf1d8
--- /dev/null
+++ b/frontend/src/lib/shortcuts.test.ts
@@ -0,0 +1,535 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('./workflow', () => ({
+  undoSlice: vi.fn(),
+  redoSlice: vi.fn(),
+  addMaskToSlice: vi.fn(),
+  removeMaskFromSlice: vi.fn(),
+  createSlice: vi.fn(),
+  selectSlice: vi.fn(),
+}));
+
+import * as workflow from './workflow';
+import { handleShortcut, registerInpaintActions, SHORTCUTS } from './shortcuts';
+import { uiStore } from './state/ui.svelte';
+import { projectStore } from './state/project.svelte';
+import { maskToolsStore } from './state/maskTools.svelte';
+import { jobStore } from './state/jobs.svelte';
+import type { ProjectView, SliceView } from './api/types';
+
+function makeSlice(index: number, depth: number, overrides: Partial<SliceView> = {}): SliceView {
+  return {
+    index,
+    depth,
+    version: 1,
+    canUndo: false,
+    canRedo: false,
+    positivePrompt: '',
+    negativePrompt: '',
+    image: { url: `/slice-${index}` },
+    thumbnail: { url: `/thumb-${index}` },
+    ...overrides,
+  } as SliceView;
+}
+
+function makeView(overrides: Partial<ProjectView> = {}): ProjectView {
+  return {
+    id: 'appstate-test',
+    revision: 1,
+    image: { width: 320, height: 240 },
+    assets: { input: { url: '/input' }, depth: { url: '/depth' } },
+    depthModel: 'dinov2',
+    numSlices: 3,
+    thresholds: [],
+    slices: [],
+    selectedSlice: null,
+    segmentation: { multiPointMode: false, queuedPoints: [], hasMask: false },
+    inpainting: {
+      model: 'diffusers/stable-diffusion-xl-1.0-inpainting-0.1',
+      strength: 0.8,
+      guidanceScale: 7.5,
+      padding: 50,
+      blur: 50,
+      externalServer: 'localhost:7860',
+      hasWorkflow: false,
+      candidates: null,
+      selectedCandidate: null,
+    },
+    busy: null,
+    settings: {
+      darkMode: true,
+      camera: { distance: 100, focalLength: 100, maxDistance: 200 },
+      meshDisplacement: 0,
+      depthModel: 'dinov2',
+    },
+    exports: { gltf: null, upscaled: false },
+    ...overrides,
+  } as ProjectView;
+}
+
+/**
+ * Dispatches a real `keydown` on `target` (so `event.target` is set the way
+ * the browser would set it) and runs it through `handleShortcut`, returning
+ * what that call returned.
+ */
+function fire(target: EventTarget, init: KeyboardEventInit): boolean {
+  const event = new KeyboardEvent('keydown', { bubbles: true, cancelable: true, ...init });
+  let handled = false;
+  const listener = (e: Event) => {
+    handled = handleShortcut(e as KeyboardEvent);
+  };
+  target.addEventListener('keydown', listener);
+  target.dispatchEvent(event);
+  target.removeEventListener('keydown', listener);
+  return handled;
+}
+
+describe('shortcuts', () => {
+  let textInput: HTMLInputElement;
+  let textarea: HTMLTextAreaElement;
+  let select: HTMLSelectElement;
+  let checkbox: HTMLInputElement;
+  let button: HTMLButtonElement;
+
+  beforeEach(() => {
+    uiStore.reset();
+    projectStore.reset();
+    jobStore.end();
+    maskToolsStore.reset();
+    vi.clearAllMocks();
+
+    textInput = document.createElement('input');
+    textInput.type = 'text';
+    textarea = document.createElement('textarea');
+    select = document.createElement('select');
+    checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    button = document.createElement('button');
+    document.body.append(textInput, textarea, select, checkbox, button);
+  });
+
+  afterEach(() => {
+    textInput.remove();
+    textarea.remove();
+    select.remove();
+    checkbox.remove();
+    button.remove();
+  });
+
+  describe('text-field exclusion', () => {
+    it('ignores a plain shortcut key typed into a text input', () => {
+      projectStore.applyView(makeView());
+      const handled = fire(textInput, { key: 's' });
+      expect(handled).toBe(false);
+      expect(uiStore.tool).toBe('pan');
+    });
+
+    it('ignores a plain shortcut key typed into a textarea', () => {
+      projectStore.applyView(makeView());
+      const handled = fire(textarea, { key: 's' });
+      expect(handled).toBe(false);
+      expect(uiStore.tool).toBe('pan');
+    });
+
+    it('ignores a plain shortcut key focused on a select', () => {
+      projectStore.applyView(makeView());
+      const handled = fire(select, { key: 's' });
+      expect(handled).toBe(false);
+    });
+
+    it('does NOT treat a checkbox/radio/button-like input as a text field', () => {
+      projectStore.applyView(makeView());
+      const handled = fire(checkbox, { key: 's' });
+      expect(handled).toBe(true);
+      expect(uiStore.tool).toBe('segment');
+    });
+
+    it('blocks Ctrl+E while typing in a text field', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)] }));
+      const handled = fire(textInput, { key: 'e', ctrlKey: true });
+      expect(handled).toBe(false);
+      expect(uiStore.dialog).toBeNull();
+    });
+  });
+
+  describe('Ctrl+Enter generates candidates', () => {
+    it('works even from a text field, only on the inpaint step with actions registered', () => {
+      projectStore.applyView(makeView());
+      uiStore.setStep('inpaint');
+      const generate = vi.fn();
+      const unregister = registerInpaintActions({ generate, pick: vi.fn(), apply: vi.fn() });
+
+      const handled = fire(textInput, { key: 'Enter', ctrlKey: true });
+
+      expect(handled).toBe(true);
+      expect(generate).toHaveBeenCalledOnce();
+      unregister();
+    });
+
+    it('does nothing off the inpaint step', () => {
+      projectStore.applyView(makeView());
+      uiStore.setStep('slices');
+      const generate = vi.fn();
+      const unregister = registerInpaintActions({ generate, pick: vi.fn(), apply: vi.fn() });
+
+      const handled = fire(document.body, { key: 'Enter', ctrlKey: true });
+
+      expect(handled).toBe(false);
+      expect(generate).not.toHaveBeenCalled();
+      unregister();
+    });
+
+    it('does nothing without registered actions', () => {
+      projectStore.applyView(makeView());
+      uiStore.setStep('inpaint');
+      const handled = fire(document.body, { key: 'Enter', ctrlKey: true });
+      expect(handled).toBe(false);
+    });
+
+    it('does nothing while a dialog is open', () => {
+      projectStore.applyView(makeView());
+      uiStore.setStep('inpaint');
+      const generate = vi.fn();
+      const unregister = registerInpaintActions({ generate, pick: vi.fn(), apply: vi.fn() });
+      uiStore.openDialog('settings');
+
+      const handled = fire(document.body, { key: 'Enter', ctrlKey: true });
+
+      expect(handled).toBe(false);
+      expect(generate).not.toHaveBeenCalled();
+      unregister();
+    });
+
+    it('a later unregister stops the actions from firing', () => {
+      projectStore.applyView(makeView());
+      uiStore.setStep('inpaint');
+      const generate = vi.fn();
+      const unregister = registerInpaintActions({ generate, pick: vi.fn(), apply: vi.fn() });
+      unregister();
+
+      const handled = fire(document.body, { key: 'Enter', ctrlKey: true });
+
+      expect(handled).toBe(false);
+      expect(generate).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Ctrl+E export', () => {
+    it('opens the export dialog only when there are slices', () => {
+      projectStore.applyView(makeView({ slices: [] }));
+      expect(fire(document.body, { key: 'e', ctrlKey: true })).toBe(false);
+      expect(uiStore.dialog).toBeNull();
+
+      projectStore.applyView(makeView({ revision: 2, slices: [makeSlice(0, 0)] }));
+      expect(fire(document.body, { key: 'e', ctrlKey: true })).toBe(true);
+      expect(uiStore.dialog).toBe('export');
+    });
+
+    it('works with metaKey too (Cmd+E)', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)] }));
+      expect(fire(document.body, { key: 'e', metaKey: true })).toBe(true);
+      expect(uiStore.dialog).toBe('export');
+    });
+
+    it('is not blocked by an already-open dialog', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)] }));
+      uiStore.openDialog('shortcuts');
+      expect(fire(document.body, { key: 'e', ctrlKey: true })).toBe(true);
+      expect(uiStore.dialog).toBe('export');
+    });
+
+    it('Ctrl+Alt+E does nothing', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)] }));
+      expect(fire(document.body, { key: 'e', ctrlKey: true, altKey: true })).toBe(false);
+      expect(uiStore.dialog).toBeNull();
+    });
+  });
+
+  describe('Ctrl+, settings', () => {
+    it('opens settings regardless of slices or an already-open dialog', () => {
+      projectStore.applyView(makeView({ slices: [] }));
+      uiStore.openDialog('shortcuts');
+      expect(fire(document.body, { key: ',', ctrlKey: true })).toBe(true);
+      expect(uiStore.dialog).toBe('settings');
+    });
+  });
+
+  describe('Ctrl+Z / Ctrl+Shift+Z undo/redo', () => {
+    it('undoes the selected slice', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0, { canUndo: true })], selectedSlice: 0 }));
+      expect(fire(document.body, { key: 'z', ctrlKey: true })).toBe(true);
+      expect(workflow.undoSlice).toHaveBeenCalledWith(0);
+    });
+
+    it('redoes the selected slice with Shift', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0, { canRedo: true })], selectedSlice: 0 }));
+      expect(fire(document.body, { key: 'z', ctrlKey: true, shiftKey: true })).toBe(true);
+      expect(workflow.redoSlice).toHaveBeenCalledWith(0);
+    });
+
+    it('does nothing (but is still handled) without a selected slice', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)], selectedSlice: null }));
+      expect(fire(document.body, { key: 'z', ctrlKey: true })).toBe(true);
+      expect(workflow.undoSlice).not.toHaveBeenCalled();
+    });
+
+    it('does nothing while busy', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0, { canUndo: true })], selectedSlice: 0 }));
+      jobStore.begin('slice-editing');
+      expect(fire(document.body, { key: 'z', ctrlKey: true })).toBe(true);
+      expect(workflow.undoSlice).not.toHaveBeenCalled();
+    });
+
+    it('does not fire when it cannot undo/redo', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)], selectedSlice: 0 }));
+      fire(document.body, { key: 'z', ctrlKey: true });
+      expect(workflow.undoSlice).not.toHaveBeenCalled();
+      fire(document.body, { key: 'z', ctrlKey: true, shiftKey: true });
+      expect(workflow.redoSlice).not.toHaveBeenCalled();
+    });
+
+    it('is ignored while a dialog is open', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0, { canUndo: true })], selectedSlice: 0 }));
+      uiStore.openDialog('settings');
+      expect(fire(document.body, { key: 'z', ctrlKey: true })).toBe(false);
+      expect(workflow.undoSlice).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('? shortcuts dialog', () => {
+    it('opens the shortcuts dialog', () => {
+      expect(fire(document.body, { key: '?' })).toBe(true);
+      expect(uiStore.dialog).toBe('shortcuts');
+    });
+
+    it('works even while another dialog is open', () => {
+      uiStore.openDialog('settings');
+      expect(fire(document.body, { key: '?' })).toBe(true);
+      expect(uiStore.dialog).toBe('shortcuts');
+    });
+  });
+
+  describe('while a dialog is open, everything else is ignored', () => {
+    it('` does not toggle the log', () => {
+      uiStore.openDialog('settings');
+      expect(fire(document.body, { key: '`' })).toBe(false);
+      expect(uiStore.logOpen).toBe(false);
+    });
+
+    it('a tool key does not switch tools', () => {
+      projectStore.applyView(makeView());
+      uiStore.openDialog('settings');
+      expect(fire(document.body, { key: 's' })).toBe(false);
+      expect(uiStore.tool).toBe('pan');
+    });
+  });
+
+  describe('` toggles the log', () => {
+    it('toggles uiStore.logOpen', () => {
+      expect(uiStore.logOpen).toBe(false);
+      expect(fire(document.body, { key: '`' })).toBe(true);
+      expect(uiStore.logOpen).toBe(true);
+      fire(document.body, { key: '`' });
+      expect(uiStore.logOpen).toBe(false);
+    });
+  });
+
+  describe('Enter / Shift+Enter / Alt+Enter act on the mask', () => {
+    it('plain Enter creates a slice when there is a mask', () => {
+      projectStore.applyView(makeView({ segmentation: { multiPointMode: false, queuedPoints: [], hasMask: true } }));
+      expect(fire(document.body, { key: 'Enter' })).toBe(true);
+      expect(workflow.createSlice).toHaveBeenCalledOnce();
+    });
+
+    it('Shift+Enter adds the selection to the selected slice', () => {
+      projectStore.applyView(makeView({ segmentation: { multiPointMode: false, queuedPoints: [], hasMask: true } }));
+      expect(fire(document.body, { key: 'Enter', shiftKey: true })).toBe(true);
+      expect(workflow.addMaskToSlice).toHaveBeenCalledOnce();
+    });
+
+    it('Alt+Enter removes the selection from the selected slice', () => {
+      projectStore.applyView(makeView({ segmentation: { multiPointMode: false, queuedPoints: [], hasMask: true } }));
+      expect(fire(document.body, { key: 'Enter', altKey: true })).toBe(true);
+      expect(workflow.removeMaskFromSlice).toHaveBeenCalledOnce();
+    });
+
+    it('does nothing without a mask', () => {
+      projectStore.applyView(makeView({ segmentation: { multiPointMode: false, queuedPoints: [], hasMask: false } }));
+      expect(fire(document.body, { key: 'Enter' })).toBe(false);
+      expect(workflow.createSlice).not.toHaveBeenCalled();
+    });
+
+    it('does nothing while busy', () => {
+      projectStore.applyView(makeView({ segmentation: { multiPointMode: false, queuedPoints: [], hasMask: true } }));
+      jobStore.begin('segmentation');
+      expect(fire(document.body, { key: 'Enter' })).toBe(false);
+      expect(workflow.createSlice).not.toHaveBeenCalled();
+    });
+
+    it('lets Enter on a focused button activate the button instead', () => {
+      projectStore.applyView(makeView({ segmentation: { multiPointMode: false, queuedPoints: [], hasMask: true } }));
+      expect(fire(button, { key: 'Enter' })).toBe(false);
+      expect(workflow.createSlice).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('[ and ] step layers', () => {
+    it('steps to the nearest-first neighbour and skips when Alt is held', () => {
+      const rows = [makeSlice(0, 10), makeSlice(1, 200), makeSlice(2, 100)];
+      // Nearest-first order (by depth desc): index 1 (200), index 2 (100), index 0 (10).
+      projectStore.applyView(makeView({ slices: rows, selectedSlice: 1 }));
+
+      expect(fire(document.body, { key: ']' })).toBe(true);
+      expect(workflow.selectSlice).toHaveBeenCalledWith(2);
+
+      expect(fire(document.body, { key: '[', altKey: true })).toBe(false);
+      expect(workflow.selectSlice).toHaveBeenCalledTimes(1);
+    });
+
+    it('is a no-op (but handled) while busy', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0), makeSlice(1, 10)], selectedSlice: 0 }));
+      jobStore.begin('slice-editing');
+      expect(fire(document.body, { key: ']' })).toBe(true);
+      expect(workflow.selectSlice).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Shift+P selects the 3D view', () => {
+    it('only when a 3D view is available (there are slices)', () => {
+      projectStore.applyView(makeView({ slices: [] }));
+      expect(fire(document.body, { key: 'P', shiftKey: true })).toBe(false);
+
+      projectStore.applyView(makeView({ revision: 2, slices: [makeSlice(0, 0)] }));
+      expect(fire(document.body, { key: 'P', shiftKey: true })).toBe(true);
+      expect(uiStore.view).toBe('3d');
+    });
+
+    it('other Shift+ combinations are ignored', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)] }));
+      expect(fire(document.body, { key: 'S', shiftKey: true })).toBe(false);
+    });
+  });
+
+  describe('S/B/G/H tool keys', () => {
+    it('need an input image', () => {
+      projectStore.applyView(makeView({ assets: { input: null, depth: null } }));
+      expect(fire(document.body, { key: 's' })).toBe(false);
+      expect(uiStore.tool).toBe('pan');
+
+      projectStore.applyView(makeView({ revision: 2, assets: { input: { url: '/input' }, depth: null } }));
+      expect(fire(document.body, { key: 'b' })).toBe(true);
+      expect(uiStore.tool).toBe('brush');
+    });
+
+    it('maps g to horizon and h to pan', () => {
+      projectStore.applyView(makeView());
+      uiStore.setTool('brush');
+      expect(fire(document.body, { key: 'g' })).toBe(true);
+      expect(uiStore.tool).toBe('horizon');
+      expect(fire(document.body, { key: 'h' })).toBe(true);
+      expect(uiStore.tool).toBe('pan');
+    });
+  });
+
+  describe('X toggles eraser', () => {
+    it('only while the brush tool is active', () => {
+      projectStore.applyView(makeView());
+      uiStore.setTool('pan');
+      expect(fire(document.body, { key: 'x' })).toBe(false);
+      expect(maskToolsStore.erasing).toBe(false);
+
+      uiStore.setTool('brush');
+      expect(fire(document.body, { key: 'x' })).toBe(true);
+      expect(maskToolsStore.erasing).toBe(true);
+    });
+  });
+
+  describe('I/M/L/C/P view keys', () => {
+    it('I needs the input asset', () => {
+      projectStore.applyView(makeView({ assets: { input: null, depth: null } }));
+      expect(fire(document.body, { key: 'i' })).toBe(false);
+
+      projectStore.applyView(makeView({ revision: 2, assets: { input: { url: '/input' }, depth: null } }));
+      expect(fire(document.body, { key: 'i' })).toBe(true);
+      expect(uiStore.view).toBe('input');
+    });
+
+    it('M needs the depth asset', () => {
+      projectStore.applyView(makeView({ assets: { input: { url: '/input' }, depth: null } }));
+      expect(fire(document.body, { key: 'm' })).toBe(false);
+
+      projectStore.applyView(makeView({ revision: 2, assets: { input: { url: '/input' }, depth: { url: '/depth' } } }));
+      expect(fire(document.body, { key: 'm' })).toBe(true);
+      expect(uiStore.view).toBe('depth');
+    });
+
+    it('L needs a selected slice', () => {
+      projectStore.applyView(makeView({ slices: [makeSlice(0, 0)], selectedSlice: null }));
+      expect(fire(document.body, { key: 'l' })).toBe(false);
+
+      projectStore.applyView(makeView({ revision: 2, slices: [makeSlice(0, 0)], selectedSlice: 0 }));
+      expect(fire(document.body, { key: 'l' })).toBe(true);
+      expect(uiStore.view).toBe('slice');
+    });
+
+    it('C and P need at least one slice', () => {
+      projectStore.applyView(makeView({ slices: [] }));
+      expect(fire(document.body, { key: 'c' })).toBe(false);
+      expect(fire(document.body, { key: 'p' })).toBe(false);
+
+      projectStore.applyView(makeView({ revision: 2, slices: [makeSlice(0, 0)] }));
+      expect(fire(document.body, { key: 'c' })).toBe(true);
+      expect(uiStore.view).toBe('composite');
+      expect(fire(document.body, { key: 'p' })).toBe(true);
+      expect(uiStore.view).toBe('parallax');
+    });
+  });
+
+  describe('1 2 3 A inpaint candidate actions', () => {
+    it('only fire on the inpaint step with registered actions', () => {
+      projectStore.applyView(makeView());
+      const pick = vi.fn();
+      const apply = vi.fn();
+      const unregister = registerInpaintActions({ generate: vi.fn(), pick, apply });
+
+      // Not on the inpaint step yet.
+      expect(fire(document.body, { key: '1' })).toBe(false);
+      expect(pick).not.toHaveBeenCalled();
+
+      uiStore.setStep('inpaint');
+      expect(fire(document.body, { key: '2' })).toBe(true);
+      expect(pick).toHaveBeenCalledWith(1);
+
+      expect(fire(document.body, { key: 'a' })).toBe(true);
+      expect(apply).toHaveBeenCalledOnce();
+
+      unregister();
+      expect(fire(document.body, { key: '3' })).toBe(false);
+    });
+  });
+
+  describe('composing / defaultPrevented', () => {
+    it('ignores events already marked defaultPrevented', () => {
+      projectStore.applyView(makeView());
+      const event = new KeyboardEvent('keydown', { key: 's', cancelable: true });
+      event.preventDefault();
+      expect(handleShortcut(event)).toBe(false);
+    });
+
+    it('ignores IME composition events', () => {
+      projectStore.applyView(makeView());
+      const event = new KeyboardEvent('keydown', { key: 's', isComposing: true });
+      expect(handleShortcut(event)).toBe(false);
+    });
+  });
+
+  describe('SHORTCUTS list', () => {
+    it('has a keys/action entry for every documented shortcut', () => {
+      const actions = SHORTCUTS.map((s) => s.action);
+      expect(actions).toContain('Export');
+      expect(actions).toContain('Settings');
+      expect(actions).toContain('Keyboard shortcuts');
+      expect(SHORTCUTS.every(({ keys, action }) => keys.length > 0 && action.length > 0)).toBe(true);
+    });
+  });
+});
diff --git a/frontend/src/lib/shortcuts.ts b/frontend/src/lib/shortcuts.ts
new file mode 100644
index 0000000..86a4134
--- /dev/null
+++ b/frontend/src/lib/shortcuts.ts
@@ -0,0 +1,208 @@
+/**
+ * Keyboard shortcuts (docs/redesign/HANDOFF.md §6), handled by the app
+ * root's keydown listener (AppShell.svelte). Ignored while typing in a text
+ * field, except Ctrl+Enter (generate) in the prompt fields. The Inpaint
+ * panel registers generate / pick / apply, since it owns the prompt drafts.
+ *
+ * Delete stays with the focused layer list (LayerPanel.svelte), so a stray
+ * key press elsewhere never deletes a slice.
+ */
+import { uiStore, type CanvasTool, type CanvasView } from './state/ui.svelte';
+import { projectStore } from './state/project.svelte';
+import { maskToolsStore } from './state/maskTools.svelte';
+import { isBusy } from './state/busy.svelte';
+import * as workflow from './workflow';
+
+type InpaintActions = {
+  generate: () => void;
+  pick: (candidate: number) => void;
+  apply: () => void;
+};
+
+let inpaintActions: InpaintActions | null = null;
+
+/** Lets the Inpaint panel handle Ctrl+Enter, 1 2 3 and A; returns an unregister. */
+export function registerInpaintActions(actions: InpaintActions): () => void {
+  inpaintActions = actions;
+  return () => {
+    if (inpaintActions === actions) inpaintActions = null;
+  };
+}
+
+/** Shortcuts as the Shortcuts dialog lists them. */
+export const SHORTCUTS: { keys: string; action: string }[] = [
+  { keys: 'S', action: 'Segment tool' },
+  { keys: 'B', action: 'Inpaint brush' },
+  { keys: 'X', action: 'Toggle brush / eraser' },
+  { keys: 'G', action: 'Horizon tool' },
+  { keys: 'H', action: 'Pan tool' },
+  { keys: 'Enter', action: 'New slice from selection' },
+  { keys: 'Shift+Enter', action: 'Add selection to selected slice' },
+  { keys: 'Alt+Enter', action: 'Remove selection from selected slice' },
+  { keys: '[  ]', action: 'Previous / next layer' },
+  { keys: 'Ctrl+Enter', action: 'Generate candidates' },
+  { keys: '1  2  3', action: 'Pick candidate' },
+  { keys: 'A', action: 'Apply picked candidate' },
+  { keys: 'I  M  L  C', action: 'Views: Input, Depth, Slice, Composite' },
+  { keys: 'P  Shift+P', action: 'Views: Parallax 2D, 3D' },
+  { keys: 'Ctrl+Z', action: 'Undo slice change' },
+  { keys: 'Ctrl+Shift+Z', action: 'Redo slice change' },
+  { keys: 'Delete', action: 'Delete selected slice (layer list)' },
+  { keys: 'Ctrl+E', action: 'Export' },
+  { keys: 'Ctrl+,', action: 'Settings' },
+  { keys: '`', action: 'Log' },
+  { keys: '?', action: 'Keyboard shortcuts' },
+  { keys: 'Esc', action: 'Close dialog' },
+];
+
+const TOOL_KEYS: Record<string, CanvasTool> = { s: 'segment', b: 'brush', g: 'horizon', h: 'pan' };
+const VIEW_KEYS: Record<string, CanvasView> = { i: 'input', m: 'depth', l: 'slice', c: 'composite', p: 'parallax' };
+
+function isTextField(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+    return true;
+  }
+  if (target instanceof HTMLInputElement) {
+    return !['range', 'checkbox', 'radio', 'button', 'submit', 'reset', 'file', 'color'].includes(target.type);
+  }
+  return false;
+}
+
+function viewAvailable(next: CanvasView): boolean {
+  const view = projectStore.view;
+  if (!view) return false;
+  const hasSlices = view.slices.length > 0;
+  switch (next) {
+    case 'input':
+      return !!view.assets.input;
+    case 'depth':
+      return !!view.assets.depth;
+    case 'slice':
+      return view.selectedSlice != null;
+    default:
+      return hasSlices;
+  }
+}
+
+/** Selects the neighbouring layer in the layer list's order (nearest first). */
+function stepLayer(direction: -1 | 1): void {
+  const view = projectStore.view;
+  if (!view || view.slices.length === 0) return;
+  const rows = [...view.slices].sort((a, b) => b.depth - a.depth || b.index - a.index);
+  const at = rows.findIndex((slice) => slice.index === view.selectedSlice);
+  const next = at < 0 ? (direction > 0 ? 0 : rows.length - 1) : at + direction;
+  if (next < 0 || next >= rows.length) return;
+  void workflow.selectSlice(rows[next].index);
+}
+
+/** Handles one keydown; returns whether it was a shortcut. */
+export function handleShortcut(event: KeyboardEvent): boolean {
+  if (event.defaultPrevented || event.isComposing) return false;
+  const key = event.key;
+  const lower = key.toLowerCase();
+  const mod = event.ctrlKey || event.metaKey;
+  const view = projectStore.view;
+  const selected = view?.slices.find((slice) => slice.index === view.selectedSlice) ?? null;
+
+  // Ctrl+Enter generates, even from the prompt fields.
+  if (mod && key === 'Enter') {
+    if (uiStore.step !== 'inpaint' || !inpaintActions || uiStore.dialog) return false;
+    inpaintActions.generate();
+    return true;
+  }
+
+  if (isTextField(event.target)) return false;
+
+  if (mod && !event.altKey) {
+    if (lower === 'e') {
+      if (!view?.slices.length) return false;
+      uiStore.openDialog('export');
+      return true;
+    }
+    if (key === ',') {
+      uiStore.openSettings();
+      return true;
+    }
+    if (lower === 'z' && !uiStore.dialog) {
+      if (!selected || isBusy()) return true;
+      if (event.shiftKey) {
+        if (selected.canRedo) void workflow.redoSlice(selected.index);
+      } else if (selected.canUndo) {
+        void workflow.undoSlice(selected.index);
+      }
+      return true;
+    }
+    return false;
+  }
+  if (event.metaKey || event.ctrlKey) return false;
+
+  if (key === '?') {
+    uiStore.openDialog('shortcuts');
+    return true;
+  }
+  // Everything else acts on the workspace behind any dialog.
+  if (uiStore.dialog) return false;
+
+  if (key === '`') {
+    uiStore.toggleLog();
+    return true;
+  }
+
+  if (key === 'Enter') {
+    // Enter on a focused control activates that control instead.
+    if (event.target instanceof HTMLElement && event.target.closest('button, a, [role="button"], [role="tab"]')) {
+      return false;
+    }
+    if (!view?.segmentation.hasMask || isBusy()) return false;
+    if (event.shiftKey) void workflow.addMaskToSlice();
+    else if (event.altKey) void workflow.removeMaskFromSlice();
+    else void workflow.createSlice();
+    return true;
+  }
+
+  if (event.altKey) return false;
+
+  if (key === '[' || key === ']') {
+    if (isBusy()) return true;
+    stepLayer(key === '[' ? -1 : 1);
+    return true;
+  }
+
+  if (event.shiftKey) {
+    if (lower === 'p' && viewAvailable('3d')) {
+      uiStore.setView('3d');
+      return true;
+    }
+    return false;
+  }
+
+  if (lower in TOOL_KEYS) {
+    if (!view?.assets.input) return false;
+    uiStore.setTool(TOOL_KEYS[lower]);
+    return true;
+  }
+  if (lower === 'x') {
+    if (uiStore.tool !== 'brush') return false;
+    maskToolsStore.toggleErasing();
+    return true;
+  }
+  if (lower in VIEW_KEYS) {
+    const next = VIEW_KEYS[lower];
+    if (!viewAvailable(next)) return false;
+    uiStore.setView(next);
+    return true;
+  }
+
+  if (uiStore.step === 'inpaint' && inpaintActions) {
+    if (key === '1' || key === '2' || key === '3') {
+      inpaintActions.pick(Number(key) - 1);
+      return true;
+    }
+    if (lower === 'a') {
+      inpaintActions.apply();
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/frontend/src/lib/state/ui.svelte.test.ts b/frontend/src/lib/state/ui.svelte.test.ts
index 76d784f..ea74c09 100644
--- a/frontend/src/lib/state/ui.svelte.test.ts
+++ b/frontend/src/lib/state/ui.svelte.test.ts
@@ -58,15 +58,18 @@ describe('uiStore', () => {
       expect(uiStore.previewed).toBe(true);
     });
 
-    it('export has no default view/tool of its own: it keeps whatever was active', () => {
+    it('export opens the Export dialog and leaves the step, panel, view and tool untouched', () => {
       uiStore.setStep('slices');
       expect(uiStore.view).toBe('input');
       expect(uiStore.tool).toBe('segment');
 
       uiStore.setStep('export');
-      expect(uiStore.step).toBe('export');
-      expect(uiStore.mainTab).toBe('Export');
-      // View/tool are untouched by a step with no STEP_DEFAULTS entry.
+      expect(uiStore.dialog).toBe('export');
+      // step/mainTab/view/tool are untouched: Export has no panel or
+      // STEP_DEFAULTS entry of its own, it just opens the dialog over
+      // whatever step you were on.
+      expect(uiStore.step).toBe('slices');
+      expect(uiStore.mainTab).toBe('Segmentation');
       expect(uiStore.view).toBe('input');
       expect(uiStore.tool).toBe('segment');
     });
@@ -144,6 +147,49 @@ describe('uiStore', () => {
     });
   });
 
+  describe('dialogs', () => {
+    it('openDialog/closeDialog set and clear the open dialog', () => {
+      expect(uiStore.dialog).toBeNull();
+      uiStore.openDialog('shortcuts');
+      expect(uiStore.dialog).toBe('shortcuts');
+      uiStore.closeDialog();
+      expect(uiStore.dialog).toBeNull();
+    });
+
+    it('openSettings defaults to the current settingsSection and opens the settings dialog', () => {
+      expect(uiStore.settingsSection).toBe('inpainting');
+      uiStore.openSettings();
+      expect(uiStore.dialog).toBe('settings');
+      expect(uiStore.settingsSection).toBe('inpainting');
+    });
+
+    it('openSettings(section) jumps to that section', () => {
+      uiStore.openSettings('appearance');
+      expect(uiStore.dialog).toBe('settings');
+      expect(uiStore.settingsSection).toBe('appearance');
+    });
+
+    it('setSettingsSection changes the section without touching the dialog', () => {
+      uiStore.setSettingsSection('depth');
+      expect(uiStore.settingsSection).toBe('depth');
+      expect(uiStore.dialog).toBeNull();
+    });
+
+    it('setStep("export") opens the export dialog over whatever step is current', () => {
+      uiStore.setStep('inpaint');
+      uiStore.setStep('export');
+      expect(uiStore.dialog).toBe('export');
+      expect(uiStore.step).toBe('inpaint');
+    });
+
+    it('any other setStep closes an open dialog', () => {
+      uiStore.openDialog('settings');
+      uiStore.setStep('depth');
+      expect(uiStore.dialog).toBeNull();
+      expect(uiStore.step).toBe('depth');
+    });
+  });
+
   describe('reset', () => {
     it('restores every default, including progress flags', () => {
       uiStore.setStep('preview'); // marks previewed
@@ -151,6 +197,8 @@ describe('uiStore', () => {
       uiStore.markExported();
       uiStore.setSegmentationMode('depth');
       uiStore.setTheme('light');
+      uiStore.openDialog('settings');
+      uiStore.setSettingsSection('appearance');
 
       uiStore.reset();
 
@@ -163,6 +211,8 @@ describe('uiStore', () => {
       expect(uiStore.exported).toBe(false);
       expect(uiStore.renderedMainUrl).toBeNull();
       expect(uiStore.theme).toBe('dark');
+      expect(uiStore.dialog).toBeNull();
+      expect(uiStore.settingsSection).toBe('inpainting');
     });
   });
 
@@ -173,6 +223,7 @@ describe('uiStore', () => {
       uiStore.markPreviewed();
       uiStore.markExported();
       uiStore.setRenderedMainUrl('/api/v1/projects/old/assets/main?v=1');
+      uiStore.openDialog('export');
 
       uiStore.resetSession();
 
@@ -184,6 +235,7 @@ describe('uiStore', () => {
       expect(uiStore.inpainted).toBe(false);
       expect(uiStore.previewed).toBe(false);
       expect(uiStore.exported).toBe(false);
+      expect(uiStore.dialog).toBeNull();
     });
   });
 });
diff --git a/frontend/src/lib/state/ui.svelte.ts b/frontend/src/lib/state/ui.svelte.ts
index fe8a755..2bdc68d 100644
--- a/frontend/src/lib/state/ui.svelte.ts
+++ b/frontend/src/lib/state/ui.svelte.ts
@@ -9,8 +9,12 @@
 export type CanvasView = 'input' | 'depth' | 'slice' | 'composite' | 'parallax' | '3d';
 /** The active canvas tool (HANDOFF.md §5). */
 export type CanvasTool = 'pan' | 'segment' | 'brush' | 'horizon';
-/** The Inspector panel shown: one per workflow step (depth and image share one), or Settings. */
-export type MainTab = 'Mode' | 'Segmentation' | 'Inpainting' | 'Ground' | 'Preview' | 'Export' | 'Configuration';
+/** The Inspector panel shown: one per workflow step (image and depth share one). */
+export type MainTab = 'Mode' | 'Segmentation' | 'Inpainting' | 'Ground' | 'Preview';
+/** The modal dialogs (HANDOFF.md §3). */
+export type DialogName = 'export' | 'settings' | 'shortcuts';
+/** The Settings dialog's sections, in nav order. */
+export type SettingsSection = 'inpainting' | 'depth' | 'masks' | 'slicing' | 'project' | 'appearance';
 /** The workflow stepper's steps (docs/redesign/HANDOFF.md §4). */
 export type WorkflowStep = 'image' | 'depth' | 'slices' | 'inpaint' | 'ground' | 'preview' | 'export';
 export type SegmentationMode = 'depth' | 'segment';
@@ -18,7 +22,7 @@ export type Theme = 'light' | 'dark';
 /** Highlight state of a configuration probe (Test Connection / Validate API Key). */
 export type ProbeStatus = 'success' | 'failure' | 'none';
 
-export const MAIN_TABS: MainTab[] = ['Mode', 'Segmentation', 'Inpainting', 'Ground', 'Preview', 'Export', 'Configuration'];
+export const MAIN_TABS: MainTab[] = ['Mode', 'Segmentation', 'Inpainting', 'Ground', 'Preview'];
 
 export const WORKFLOW_STEPS: { step: WorkflowStep; label: string }[] = [
   { step: 'image', label: 'Image' },
@@ -64,7 +68,10 @@ const TOOL_VIEWS: Record<CanvasTool, CanvasView[]> = {
   horizon: ['composite', 'input', 'depth'],
 };
 
-/** Which Inspector panel each step shows. */
+/**
+ * Which Inspector panel each step shows. Export has no panel of its own: the
+ * step opens the Export dialog over the step you were on.
+ */
 const STEP_PANELS: Record<WorkflowStep, MainTab> = {
   image: 'Mode',
   depth: 'Mode',
@@ -72,7 +79,7 @@ const STEP_PANELS: Record<WorkflowStep, MainTab> = {
   inpaint: 'Inpainting',
   ground: 'Ground',
   preview: 'Preview',
-  export: 'Export',
+  export: 'Preview',
 };
 
 /** Matches components.py's DROPDOWN_DEPTH_MODEL default. */
@@ -90,6 +97,8 @@ function createUiStore() {
   let step = $state<WorkflowStep>('image');
   let theme = $state<Theme>('dark');
   let logOpen = $state(false);
+  let dialog = $state<DialogName | null>(null);
+  let settingsSection = $state<SettingsSection>('inpainting');
   // Progress the stepper can't read from ProjectView (HANDOFF.md §4 "done"
   // rules): tracked for this browser session only.
   let inpainted = $state(false);
@@ -160,8 +169,16 @@ function createUiStore() {
     get step(): WorkflowStep {
       return step;
     },
-    /** Moves to a workflow step: its Inspector panel, default view and tool. */
+    /**
+     * Moves to a workflow step: its Inspector panel, default view and tool.
+     * Export instead opens the Export dialog and leaves the step alone.
+     */
     setStep(next: WorkflowStep): void {
+      if (next === 'export') {
+        dialog = 'export';
+        return;
+      }
+      dialog = null;
       moveToStep(next);
       const defaults = STEP_DEFAULTS[next];
       if (defaults) {
@@ -170,6 +187,28 @@ function createUiStore() {
       }
     },
 
+    /** The open modal dialog, if any. */
+    get dialog(): DialogName | null {
+      return dialog;
+    },
+    openDialog(name: DialogName): void {
+      dialog = name;
+    },
+    closeDialog(): void {
+      dialog = null;
+    },
+    get settingsSection(): SettingsSection {
+      return settingsSection;
+    },
+    /** Opens Settings at a section. */
+    openSettings(section: SettingsSection = settingsSection): void {
+      settingsSection = section;
+      dialog = 'settings';
+    },
+    setSettingsSection(section: SettingsSection): void {
+      settingsSection = section;
+    },
+
     get logOpen(): boolean {
       return logOpen;
     },
@@ -190,6 +229,7 @@ function createUiStore() {
       exported = false;
       step = 'image';
       mainTab = STEP_PANELS.image;
+      dialog = null;
       view = 'input';
       tool = 'pan';
       renderedMainUrl = null;
@@ -275,6 +315,8 @@ function createUiStore() {
       step = 'image';
       theme = 'dark';
       logOpen = false;
+      dialog = null;
+      settingsSection = 'inpainting';
       inpainted = false;
       previewed = false;
       exported = false;