fix(editor): stabilize image workflows and editing controls

2026-10-31 10:12:21 +01:00 · 2026-10-30 08:46:10 +00:00
parent 8b8fc62449
commit e79c81fbb8
45 changed files with 1928 additions and 267 deletions
@@ -41,6 +41,7 @@
 * }} deps
 */
 import { state } from './state.js';
+import { imageResultGeometry } from './image-result-geometry.js';
 import { beginAIOperation, decodeAIImage } from './ai-operation.js';

 export function wireInpaintButtons({
@@ -184,17 +185,30 @@ export function wireInpaintButtons({
        if (!state.editorOpen) return; // user closed mid-decode
        try {
          saveState('Inpaint result');
-          // OpenAI returns at one of its allowed sizes (1024²,
-          // 1024×1536, 1536×1024) which often differs from our
-          // canvas. Scale to canvas size with smoothing so the
-          // inpaint blends in regardless of source dims.
+          // Whole-image edits keep the provider's native frame; only masked
+          // edits need registration with the source document's coordinates.
          const shortPrompt = (prompt || '').trim().replace(/\s+/g, ' ').slice(0, 40);
          const layerName = shortPrompt ? `Inpaint: ${shortPrompt}` : 'Inpaint Result';
-          const resultLayer = createLayer(layerName, state.imgWidth, state.imgHeight);
+          const fullFrame = data.full_frame === true;
+          const geometry = imageResultGeometry(resultImg.naturalWidth, resultImg.naturalHeight, state.imgWidth, state.imgHeight);
+          const resultLayer = createLayer(layerName,
+            fullFrame ? geometry.width : state.imgWidth,
+            fullFrame ? geometry.height : state.imgHeight);
          resultLayer.ctx.imageSmoothingEnabled = true;
          resultLayer.ctx.imageSmoothingQuality = 'high';
-          resultLayer.ctx.drawImage(resultImg, 0, 0, state.imgWidth, state.imgHeight);
+          if (fullFrame) {
+            resultLayer.ctx.drawImage(resultImg, geometry.drawX, geometry.drawY, geometry.drawWidth, geometry.drawHeight);
+            state.layerOffsets.set(resultLayer.id, {
+              x: geometry.offsetX,
+              y: geometry.offsetY,
+            });
+          } else {
+            const scale = Math.min(state.imgWidth / resultImg.naturalWidth, state.imgHeight / resultImg.naturalHeight);
+            const width = resultImg.naturalWidth * scale, height = resultImg.naturalHeight * scale;
+            resultLayer.ctx.drawImage(resultImg, (state.imgWidth - width) / 2, (state.imgHeight - height) / 2, width, height);
+          }
          // Snapshot the AI result + hard mask used for this run.
+          if (!fullFrame) {
          const aiSnap = document.createElement('canvas');
          aiSnap.width = state.imgWidth; aiSnap.height = state.imgHeight;
          aiSnap.getContext('2d').drawImage(resultLayer.canvas, 0, 0);
@@ -205,6 +219,7 @@ export function wireInpaintButtons({
          resultLayer.inpaintSource = { ai: aiSnap, mask: maskSnap, base: baseSnap, padPx };
          // Apply initial alpha = hard mask (no feather, no edge shift).
          applyInpaintFeather(resultLayer, 0, 0);
+          }
          state.layers.push(resultLayer);
          state.activeLayerId = resultLayer.id;
          state.lastInpaintLayerId = resultLayer.id;
@@ -220,6 +235,10 @@ export function wireInpaintButtons({
          }
          composite();
          renderLayerPanel();
+          if (fullFrame) {
+            if (uiModule) uiModule.showToast('Image edit complete', 4500);
+            return;
+          }
          // Reveal post-generation Feather + Edge Stroke sliders.
          // Cap Edge Stroke at ±padPx so the slider can't ask for
          // more AI buffer than we generated.
@@ -54,16 +54,16 @@ export function resolveQuickEditModel() {
      label: ((opt && opt.textContent) || '').trim(),
    };
  }
-  const inp = document.getElementById('ge-ai-inpaint');
-  const opt = resolveInpaintModel(inp);
-  if (!opt) return { endpoint: '', model: '', label: '' };
-  const raw = opt.value || '';
-  const idx = raw.indexOf('::');
-  return {
-    endpoint: idx < 0 ? raw : raw.slice(0, idx),
-    model: idx < 0 ? '' : raw.slice(idx + 2),
-    label: ((opt.textContent || '').trim().replace(/^Auto\s*\((.*)\)$/, '$1')),
-  };
+  const generation = document.getElementById('ge-ai-model');
+  if (generation?.value && generation.value !== '__serve_cookbook__') {
+    const index = generation.value.indexOf('::');
+    const model = index < 0 ? '' : generation.value.slice(index + 2);
+    if (model && modelCaps(model, '', '').inpaint) {
+      return { endpoint: generation.value.slice(0, index), model,
+        label: generation.options[generation.selectedIndex]?.textContent?.trim() || model };
+    }
+  }
+  return { endpoint: '', model: '', label: 'Auto (saved settings)' };
 }

 // Resolve the Quick Edit AGENT (planner) model — the vision-language model
@@ -140,25 +140,7 @@ export function modelCaps(modelId, endpointName, endpointType) {
  return { gen: false, inpaint: false };
 }

-// Global listeners resolve live controls instead of retaining editor instances.
-function syncCommandModel(value) {
-  const select = document.getElementById('ge-ai-command-model');
-  if (!select || !select._modelsReady) return;
-  if (value && ![...select.options].some(o => !o.disabled && o.value === value && value !== '__serve_cookbook__')) {
-    if (localStorage.getItem('ge-ai-command-model') === value) localStorage.removeItem('ge-ai-command-model');
-    value = '';
-  }
-  if (select.value !== value) {
-    select.value = value;
-    if (select.value !== value) select.value = '';
-    updateFooterEditModel();
-  }
-}
-window.addEventListener('ge-ai-command-model-change', e => syncCommandModel(e.detail?.value || ''));
-window.addEventListener('storage', e => {
-  if (e.key === 'ge-ai-command-model') syncCommandModel(e.newValue || '');
-});
-window.addEventListener('ge:model-endpoints-updated', e => {
+globalThis.window?.addEventListener('ge:model-endpoints-updated', e => {
  document.getElementById('ge-ai-command-model')?._refreshAIModels?.(e.detail?.baseUrl || '');
 });

@@ -256,9 +238,9 @@ export function wireAIModelSelectors({ container, apiBase = '', openCookbookForI
      const data = await res.json();
      if (listeners.signal.aborted || !root.isConnected) return;
      const modelsList = data.models || [];
-      if (aiGenSelect) aiGenSelect.innerHTML = '<option value="">None</option>';
+      if (aiGenSelect) aiGenSelect.innerHTML = '<option value="">Auto-detect</option>';
      if (aiInpaintSelect) aiInpaintSelect.innerHTML = '<option value="">Auto</option>';
-      if (aiCommandSelect) aiCommandSelect.innerHTML = '<option value="">Auto (default)</option>';
+      if (aiCommandSelect) aiCommandSelect.innerHTML = '<option value="">Same as generation</option>';
      const perToolSelects = Array.from(document.querySelectorAll('select.ge-tool-model'));
      for (const ts of perToolSelects) ts.innerHTML = '<option value="">Auto</option>';
      let firstGen = null;
@@ -346,45 +328,11 @@ export function wireAIModelSelectors({ container, apiBase = '', openCookbookForI
      // Sentinel changes are handled by the component's delegated listener.
      if (aiCommandSelect) {
        aiCommandSelect._modelsReady = true;
-        try {
-          const rawSaved = localStorage.getItem('ge-ai-command-model') || '';
-          let saved = rawSaved;
-          if (saved.startsWith('http://') || saved.startsWith('https://') || saved.includes('://') || saved.startsWith('::')) {
-            const modelPart = saved.includes('::') ? saved.split('::').pop() : '';
-            const matching = loaded.filter(l => l.model === modelPart);
-            if (matching.length === 1) {
-              saved = matching[0].value;
-            } else {
-              saved = '';
-            }
-            try {
-              if (saved) localStorage.setItem('ge-ai-command-model', saved);
-              else localStorage.removeItem('ge-ai-command-model');
-            } catch {}
-          }
-          if (saved && [...aiCommandSelect.options].some(o => o.value === saved)) {
-            aiCommandSelect.value = saved;
-          } else {
-            aiCommandSelect.value = '';
-          }
-          if (aiCommandSelect.value !== rawSaved) {
-            if (aiCommandSelect.value) localStorage.setItem('ge-ai-command-model', aiCommandSelect.value);
-            else localStorage.removeItem('ge-ai-command-model');
-            window.dispatchEvent(new CustomEvent('ge-ai-command-model-change', { detail: { value: aiCommandSelect.value } }));
-          }
-        } catch {}
-
        if (aiCommandSelect._commandWired !== listeners) {
          aiCommandSelect._commandWired = listeners;
          listen(aiCommandSelect, 'change', () => {
            if (aiCommandSelect.value === '__serve_cookbook__') return;
-            const val = aiCommandSelect.value || '';
-            try {
-              if (val) localStorage.setItem('ge-ai-command-model', aiCommandSelect.value);
-              else localStorage.removeItem('ge-ai-command-model');
-            } catch {}
            updateFooterEditModel();
-            window.dispatchEvent(new CustomEvent('ge-ai-command-model-change', { detail: { value: val } }));
          });
        }
      }
@@ -409,6 +357,7 @@ export function wireAIModelSelectors({ container, apiBase = '', openCookbookForI
        });
      }
      _aiModelsStatus = { ready: true, models: loaded, error: null, at: Date.now() };
+      container.dispatchEvent(new Event('ge-image-models-ready'));
      try { window.dispatchEvent(new CustomEvent('ge:ai-models-status')); } catch {}
    } catch (e) {
      if (listeners.signal.aborted || !root.isConnected) return;
@@ -2,11 +2,10 @@
 * Background Remove (rembg) + Sharpen wiring + the live edge-cleanup
 * tuner that runs on the most-recent rembg cutout.
 *
- *   rembg-run button: flatten + POST to /api/image/remove-bg with an
+ *   rembg-run button: active layer + POST to /api/image/remove-bg with an
 *     optional hint_mask if the user has a wand/lasso selection
- *     active. After the new layer lands, hides every previously-
- *     visible layer so the cutout reads cleanly, and binds the
- *     live-tuner to the new layer.
+ *     active. Updates only that layer and binds its live edge tuner;
+ *     other layers and their visibility remain unchanged.
 *
 *   Live edge-cleanup tuner: snapshots the pristine cutout the
 *     moment it lands; subsequent feather/grow slider tweaks
@@ -65,37 +64,13 @@ export function wireRembgAndSharpen({
    // NB: edge_feather / edge_grow are applied CLIENT-side so the
    // sliders can re-tune the cutout without re-running the model.
    const btn = document.getElementById('ge-rembg-run');
-    const before = state.layers.length;
-    // Snapshot which layers were visible BEFORE the run so we know
-    // which to hide after a successful cutout.
-    const prevVisible = state.layers.filter(l => l.visible).map(l => l.id);
-    await applyImageTool('/api/image/remove-bg', payload, 'BG Removed', btn);
-    // applyImageTool resolves after the returned image is decoded and the
-    // new layer is inserted. Keep a short poll for defensive compatibility
-    // with alternate runners that may still commit on the next frame.
-    let frames = 0;
-    while (state.layers.length <= before && frames < 60) {
-      await new Promise(r => requestAnimationFrame(r));
-      frames++;
-    }
-    if (state.layers.length > before) {
-      const newLayer = state.layers[state.layers.length - 1];
-      bindRembgLiveTuner(newLayer);
-      // Auto-hide underlying layers so the user sees just the
-      // cutout — the eye toggles back on if they re-enable manually.
-      for (const layer of state.layers) {
-        if (prevVisible.includes(layer.id) && layer.id !== newLayer.id) {
-          layer.visible = false;
-        }
-      }
-      composite();
-      renderLayerPanel();
-    }
+    const editedLayer = await applyImageTool('/api/image/remove-bg', payload, 'BG Removed', btn);
    // Reset sliders so the new cutout starts clean.
    const f = document.getElementById('ge-rembg-feather');
    const g = document.getElementById('ge-rembg-grow');
    if (f) { f.value = 0; document.getElementById('ge-rembg-feather-label').textContent = '0px'; syncRembgFeather(0); }
    if (g) { g.value = 0; document.getElementById('ge-rembg-grow-label').textContent = '0px'; syncRembgGrow(0); }
+    if (editedLayer) bindRembgLiveTuner(editedLayer);
  });

  // ── Live edge-cleanup tuner ──
@@ -5,6 +5,9 @@
 * "Double-check AI edits" toggle. Opened from the Quick Edit gear button and
 * from the editor setup checklist; keeps the Quick Edit box itself uncluttered.
 */
+import { readImagePreferences, saveImagePreferences } from '../settings/imagePreferences.js';
+import { updateFooterEditModel } from './ai-models.js';
+
 export function createAiSettings({ container }) {
  const el = document.createElement('div');
  el.className = 'ge-ai-settings';
@@ -19,11 +22,14 @@ export function createAiSettings({ container }) {
        <button type="button" class="ge-ai-settings-close" data-ai-settings-close aria-label="Close">×</button>
      </div>
      <div class="ge-ai-settings-body">
+        <label class="ge-ai-settings-label" for="ge-ai-model">Image generation model</label>
+        <select class="ge-ai-command-model" id="ge-ai-model" title="Image generation model" aria-label="Image generation model"></select>
        <label class="ge-ai-settings-label" for="ge-ai-command-model">Image edit model</label>
        <select class="ge-ai-command-model" id="ge-ai-command-model" title="Image edit model" aria-label="Image edit model"></select>
        <label class="ge-ai-settings-label" for="ge-ai-command-agent-model">AI agent (vision) model</label>
        <select class="ge-ai-command-model" id="ge-ai-command-agent-model" title="Quick Edit agent model" aria-label="Quick Edit agent model"></select>
        <p class="ge-ai-settings-note">Recommended, not required — the vision agent plans edits and can double-check results.</p>
+        <p class="ge-ai-settings-note" id="ge-ai-settings-save-status" role="status"></p>
        <label class="ge-ai-settings-label" for="ge-look-strength">Look strength</label>
        <div class="ge-ai-settings-strength">
          <input type="range" id="ge-look-strength" min="0.5" max="2" step="0.1" value="1.4" aria-label="Look grade strength" />
@@ -41,6 +47,7 @@ export function createAiSettings({ container }) {

  function open(focusId) {
    el.hidden = false;
+    syncModels();
    if (focusId) {
      const target = document.getElementById(focusId);
      if (target) {
@@ -56,10 +63,59 @@ export function createAiSettings({ container }) {
      close();
    }
  });
-  const onKey = (e) => { if (e.key === 'Escape' && !el.hidden) close(); };
-  document.addEventListener('keydown', onKey);
+  const onKey = (e) => {
+    if (e.key !== 'Escape' || el.hidden) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    close();
+  };
+  window.addEventListener('keydown', onKey, true);

  container.appendChild(el);
+  const status = el.querySelector('#ge-ai-settings-save-status');
+  const modelFields = [['ge-ai-model', 'image_model'], ['ge-ai-command-model', 'image_edit_model']];
+  function applyModels(settings) {
+    for (const [id, key] of modelFields) {
+      if (!(key in settings)) continue;
+      const select = el.querySelector(`#${id}`);
+      const model = settings[key] || '';
+      let option = [...select.options].find(option => {
+        const value = option.value;
+        return model ? value.slice(value.indexOf('::') + 2) === model : value === '';
+      });
+      if (!option && model && select.options.length) {
+        option = document.createElement('option');
+        option.value = `::${model}`;
+        option.textContent = `${model} (unavailable)`;
+        option.disabled = true;
+        select.append(option);
+      }
+      if (option) select.value = option.value;
+    }
+    updateFooterEditModel();
+  }
+  async function syncModels() {
+    try { applyModels(await readImagePreferences()); }
+    catch (error) { status.textContent = error.message; }
+  }
+  for (const [id, key] of modelFields) {
+    el.querySelector(`#${id}`).addEventListener('change', async (event) => {
+      const raw = event.target.value;
+      if (raw === '__serve_cookbook__') return;
+      const model = raw.includes('::') ? raw.slice(raw.indexOf('::') + 2) : '';
+      try {
+        status.textContent = 'Saving…';
+        await saveImagePreferences({ [key]: model });
+        status.textContent = 'Saved';
+      } catch (error) {
+        await syncModels();
+        status.textContent = error.message;
+      }
+    });
+  }
+  const onPreferencesChanged = event => applyModels(event.detail);
+  window.addEventListener('image-preferences-changed', onPreferencesChanged);
+  container.addEventListener('ge-image-models-ready', syncModels);

  const strengthInput = el.querySelector('#ge-look-strength');
  const strengthVal = el.querySelector('#ge-look-strength-val');
@@ -77,7 +133,9 @@ export function createAiSettings({ container }) {
  }

  function destroy() {
-    document.removeEventListener('keydown', onKey);
+    window.removeEventListener('keydown', onKey, true);
+    window.removeEventListener('image-preferences-changed', onPreferencesChanged);
+    container.removeEventListener('ge-image-models-ready', syncModels);
    el.remove();
  }

@@ -76,7 +76,12 @@ export function createApplyImageTool({
        if (sel.endpoint) extraPayload._endpoint = sel.endpoint;
        if (sel.model && !extraPayload._model) extraPayload._model = sel.model;
      }
-      const flatCanvas = flatten();
+      const removeBackground = endpoint === '/api/image/remove-bg';
+      const targetLayer = removeBackground ? state.layers.find(layer => layer.id === state.activeLayerId) : null;
+      if (removeBackground && (!targetLayer?.canvas || targetLayer.kind === 'adjustment' || targetLayer.locks?.pixels)) {
+        throw new Error('Select an unlocked image layer first');
+      }
+      const flatCanvas = removeBackground ? targetLayer.canvas : flatten();
      const imageB64 = flatCanvas.toDataURL('image/png').split(',')[1];
      const body = { image: imageB64, ...extraPayload };
      const res = await fetch(endpoint, {
@@ -96,6 +101,23 @@ export function createApplyImageTool({
      const img = await decodeAIImage(data.image, operation.signal);
      operation.signal.throwIfAborted();
      if (!state.editorOpen) return; // user closed mid-decode (v2 review HIGH-4)
+      if (removeBackground) {
+        if (!state.layers.includes(targetLayer)) return;
+        saveState('Remove background');
+        // The returned pixels replace the editable source, not just its preview.
+        targetLayer.kind = 'raster';
+        targetLayer.placed = null;
+        targetLayer.text = null;
+        targetLayer.shape = null;
+        targetLayer.ctx.clearRect(0, 0, targetLayer.canvas.width, targetLayer.canvas.height);
+        targetLayer.ctx.drawImage(img, 0, 0, targetLayer.canvas.width, targetLayer.canvas.height);
+        targetLayer._adjCacheKey = null;
+        targetLayer._adjFinalKey = null;
+        composite();
+        renderLayerPanel();
+        uiModule?.showToast('Background removed');
+        return targetLayer;
+      }
      {
        saveState();
        const layer = createLayer(layerName, state.imgWidth, state.imgHeight);
@@ -55,6 +55,11 @@ export function controlsHTML({ color, brushSize, wandTolerance, bucketTolerance
        <label>Color</label>
        <input type="color" class="ge-color-picker" value="${color}" />
      </div>
+      <div class="ge-control-row ge-eraser-row" id="ge-brush-softness-row">
+        <span class="ge-eraser-preview" id="ge-brush-preview-softness" aria-hidden="true"></span>
+        <label>Softness <span id="ge-brush-softness-label">100%</span></label>
+        <input type="range" id="ge-brush-softness" min="0" max="1200" value="100" title="Brush edge softness and feathered falloff" />
+      </div>
      <div class="ge-control-row ge-brush-size-row">
        <label><span class="ge-size-label">${brushSize}px</span></label>
      <input type="range" class="ge-size-slider" min="0" max="1000" value="${brushSliderValue}" />
@@ -94,11 +99,6 @@ export function controlsHTML({ color, brushSize, wandTolerance, bucketTolerance
                <label>Flow <span id="ge-brush-flow-label">100%</span></label>
                <input type="range" id="ge-brush-flow" min="5" max="100" value="100" />
              </div>
-              <div class="ge-control-row ge-eraser-row" id="ge-brush-softness-row">
-                <span class="ge-eraser-preview" id="ge-brush-preview-softness" aria-hidden="true"></span>
-                <label>Softness <span id="ge-brush-softness-label">100%</span></label>
-                <input type="range" id="ge-brush-softness" min="0" max="300" value="100" title="Soft brush edge — blurs the stroke's alpha for a feathered fade at the perimeter." />
-              </div>
            </div>
            <div class="ge-brush-stroke-group" data-stroke-tool="eraser">
              <div class="ge-section-title">Eraser</div>
@@ -78,6 +78,7 @@ export function wireCanvasEvents({ canvasArea, beginDraw, continueDraw, endDraw,
  const UI_CHROME_SELECTOR = '.ge-topbar, .ge-toolbar, .ge-controls, .ge-right-panel, '
    + '.ge-dock, .ge-options-bar, .ge-canvas-toolbar, button, input, select, textarea';
  const isUiChrome = e => !!e.target?.closest?.(UI_CHROME_SELECTOR);
+  const canStartOutside = () => ['marquee', 'lasso', 'crop'].includes(state.tool);
  // Only in-progress selection/crop drags are affected by the chrome
  // guard. A committed cropRect/selection is a resting state — clicking
  // its Apply button must not be treated as "strayed onto chrome".
@@ -143,15 +144,16 @@ export function wireCanvasEvents({ canvasArea, beginDraw, continueDraw, endDraw,
  };
  state.mainCanvas.addEventListener('pointerup', endPen);
  state.mainCanvas.addEventListener('pointercancel', endPen);
-  // Lasso and Crop can start OUTSIDE the canvas — fallback mousedown on the
+  // Selection and Crop can start OUTSIDE the canvas — fallback mousedown on the
  // surrounding canvas-area so the user can begin a path/rect in the empty
  // space around the image. Other tools stay canvas-only.
  canvasArea.addEventListener('mousedown', (e) => {
-    if (state.tool !== 'lasso' && state.tool !== 'crop') return;
+    if (!canStartOutside() || Date.now() < suppressMouseUntil) return;
+    if (e.button !== 0 || isDirectPanIntent(state.tool, state.spacePanActive, e.button)) return;
    if (e.target === state.mainCanvas) return; // already handled
    // Ignore presses on editor chrome inside the area (the crop Apply panel,
    // popups, buttons) so clicking Apply does not start a fresh crop.
-    if (e.target.closest?.('button, input, select, textarea, .ge-crop-apply, .ge-adj-popup, .ge-transform-popup, .ge-fx-popup, .ge-inpaint-popup, .ge-controls, .ge-right-panel, .ge-fx-menu')) return;
+    if (isUiChrome(e) || e.target.closest?.('.ge-crop-apply, .ge-adj-popup, .ge-transform-popup, .ge-fx-popup, .ge-inpaint-popup, .ge-fx-menu')) return;
    beginDraw(e);
  });
  state.mainCanvas.addEventListener('mouseenter', (e) => {
@@ -305,6 +307,7 @@ export function wireCanvasEvents({ canvasArea, beginDraw, continueDraw, endDraw,
  let panning = false;
  let pid = null;
  let transformPointerId = null;
+  let outsideDrawPointerId = null;
  let startX = 0, startY = 0;
  let startPanX = 0, startPanY = 0;
  const getOffset = () => ({ x: state.panX || 0, y: state.panY || 0 });
@@ -315,10 +318,23 @@ export function wireCanvasEvents({ canvasArea, beginDraw, continueDraw, endDraw,
  };
  canvasArea.addEventListener('pointerdown', (e) => {
    const directPan = isDirectPanIntent(state.tool, state.spacePanActive, e.button);
-    // With the crop (or lasso) tool, an empty-area press draws a rect/path
+    // With a selection or crop tool, an empty-area press draws a rect/path
    // rather than panning — so the crop can be pulled out past the image.
    // Space-held / middle-mouse (directPan) still pans.
-    if ((state.tool === 'lasso' || state.tool === 'crop') && !directPan) return;
+    if (canStartOutside() && !directPan) {
+      if (e.target === state.mainCanvas || isUiChrome(e) ||
+          e.target.closest?.('.ge-crop-apply, .ge-adj-popup, .ge-transform-popup, .ge-fx-popup, .ge-inpaint-popup, .ge-fx-menu')) return;
+      // Mouse starts through mousedown; pen/touch need their own captured path.
+      if (e.pointerType === 'pen' || e.pointerType === 'touch') {
+        if (outsideDrawPointerId !== null || e.button !== 0) return;
+        outsideDrawPointerId = e.pointerId;
+        suppressMouseUntil = Date.now() + 500;
+        try { canvasArea.setPointerCapture(e.pointerId); } catch {}
+        beginDraw(e);
+        e.preventDefault();
+      }
+      return;
+    }
    if (e.target.closest('button, input, .ge-adj-popup, .ge-transform-popup, .ge-fx-popup, .ge-inpaint-popup, .ge-controls, .ge-right-panel, .ge-fx-menu')) return;
    const onImage = e.target === state.mainCanvas || e.target === state.transformOverlay;
    if (onImage && !directPan) return;
@@ -357,6 +373,12 @@ export function wireCanvasEvents({ canvasArea, beginDraw, continueDraw, endDraw,
    e.preventDefault();
  });
  canvasArea.addEventListener('pointermove', (e) => {
+    if (outsideDrawPointerId !== null && e.pointerId === outsideDrawPointerId) {
+      suppressMouseUntil = Date.now() + 500;
+      if (!isUiChrome(e)) continueDraw(e);
+      e.preventDefault();
+      return;
+    }
    if (transformPointerId !== null && e.pointerId === transformPointerId) {
      continueDraw(e);
      return;
@@ -370,6 +392,14 @@ export function wireCanvasEvents({ canvasArea, beginDraw, continueDraw, endDraw,
    applyOffset(next.x, next.y);
  });
  const endPan = (e) => {
+    if (outsideDrawPointerId !== null && (!e || e.pointerId === outsideDrawPointerId)) {
+      const capturedId = outsideDrawPointerId;
+      outsideDrawPointerId = null;
+      suppressMouseUntil = Date.now() + 500;
+      if (e?.type === 'pointercancel') cancelDraw?.();
+      else if (e) endDraw(e);
+      try { canvasArea.releasePointerCapture(capturedId); } catch {}
+    }
    if (transformPointerId !== null && (!e || e.pointerId === transformPointerId)) {
      const capturedId = transformPointerId;
      transformPointerId = null;
@@ -21,6 +21,7 @@ export const EDITOR_AGENT_VERSION = '1.0';
 export const DEFAULT_AGENT_ENDPOINT = '/api/editor/agent';

 import { formatCropRect, isGenericIntent } from './nl-edit.js';
+import { waitForImagePreferences } from '../settings/imagePreferences.js';

 export function createEditorAgent({
  control,
@@ -28,6 +29,7 @@ export function createEditorAgent({
  fetchImpl = null,
  getSession = null,
  getModel = null,
+  getGenerationModel = null,
  getAgentModel = null,
  onStep = null,
 } = {}) {
@@ -145,6 +147,7 @@ export function createEditorAgent({
    activeStep = report;
    executed = [];
    running = true;
+    await waitForImagePreferences();

    // Honest before-image (captured before any client pre-step) for the
    // imperceptible-edit check, then the history mark scoping the undo group.
@@ -194,6 +197,8 @@ export function createEditorAgent({
        signal: signal || undefined,
        body: JSON.stringify({
          prompt, session, editor_session: session, state, screenshot,
+          _use_image_settings: true,
+          generation_model: getGenerationModel ? getGenerationModel() : '',
          model: (modelInfo && modelInfo.model) || '',
          endpoint: (modelInfo && modelInfo.endpoint) || '',
          model_label: (modelInfo && modelInfo.label) || '',
@@ -132,7 +132,7 @@ function renderEffects(source, effects, masks) {
    const contribution = maskedContribution(next, masks[index]);
    const blended = copyCanvas(current);
    const blendCtx = blended.getContext('2d');
-    if (effect.type === 'drop-shadow') blendCtx.globalCompositeOperation = 'destination-over';
+    if (effect.type === 'drop-shadow' && !effect.params.inside) blendCtx.globalCompositeOperation = 'destination-over';
    blendCtx.globalAlpha = effect.opacity;
    blendCtx.drawImage(contribution, 0, 0);
    blendCtx.globalAlpha = 1;
@@ -81,6 +81,7 @@ export function normalizeEffect(effect) {
    params.blendMode = typeof params.blendMode === 'string' ? params.blendMode : defaults.blendMode;
  }
  if (type === 'drop-shadow') {
+    params.inside = params.inside === true || params.inside === 1;
    params.color = /^#[0-9a-f]{6}$/i.test(params.color) ? params.color : defaults.color;
    for (const key of ['opacity', 'blur', 'x', 'y']) params[key] = Number(params[key]) || 0;
    params.opacity = Math.max(0, Math.min(1, params.opacity));
@@ -291,7 +292,7 @@ export function renderEffects(source, effects = [], shouldContinue = () => true)
      : next;
    const blended = copyCanvas(current);
    const blendCtx = blended.getContext('2d');
-    if (effect.type === 'drop-shadow') blendCtx.globalCompositeOperation = 'destination-over';
+    if (effect.type === 'drop-shadow' && !effect.params.inside) blendCtx.globalCompositeOperation = 'destination-over';
    blendCtx.globalAlpha = effect.opacity;
    blendCtx.drawImage(contribution, 0, 0);
    blendCtx.globalAlpha = 1;
@@ -0,0 +1,71 @@
+import { decodeAIImage } from './ai-operation.js';
+import { waitForImagePreferences } from '../settings/imagePreferences.js';
+
+export function createImageGenerationAction({
+  getDocument, placeResult, getSignal = () => null, onProgress = () => {},
+  formatError = info => info.detail || 'Image generation failed',
+  fetchImpl = (...args) => fetch(...args), timeoutMs = 330000,
+}) {
+  return async function generateImage(params = {}) {
+    const document = getDocument();
+    if (!document.key) throw new Error('Open a document before generating an image');
+    const controller = new AbortController();
+    const parentSignal = getSignal();
+    const cancel = () => controller.abort();
+    if (parentSignal?.aborted) cancel();
+    parentSignal?.addEventListener('abort', cancel, { once: true });
+    let timedOut = false;
+    const deadline = setTimeout(() => { timedOut = true; controller.abort(); }, timeoutMs);
+    const started = Date.now();
+    const progress = setInterval(() => onProgress(Math.floor((Date.now() - started) / 1000)), 1000);
+    // A selection can change while the provider works; preserve this request's mask.
+    let mask = null;
+    try {
+      if (params.masked && document.mask) {
+        mask = globalThis.document.createElement('canvas');
+        mask.width = document.mask.width; mask.height = document.mask.height;
+        mask.getContext('2d').drawImage(document.mask, 0, 0);
+      }
+      await waitForImagePreferences();
+      controller.signal.throwIfAborted();
+      let response;
+      try { response = await fetchImpl(window.geGenerateImageEndpoint || '/api/image/generate', {
+        method: 'POST', credentials: 'same-origin', signal: controller.signal,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ _use_image_settings: true, prompt: params.prompt || '',
+          width: Math.max(1, Math.round(Number(params.width) || document.width)),
+          height: Math.max(1, Math.round(Number(params.height) || document.height)) }),
+      }); } catch (error) {
+        if (controller.signal.aborted) throw error;
+        throw new Error(formatError({ network: true, detail: error.message }));
+      }
+      let data;
+      try { data = await response.json(); }
+      catch { throw new Error(response.ok ? 'Image server returned an invalid response' : `Image server failed (${response.status})`); }
+      if (!response.ok || data.error) throw new Error(formatError({ status: response.status,
+        detail: data.detail || data.error || `Image server failed (${response.status})` }));
+      const image = data.image || data.images?.[0];
+      if (!image) throw new Error('Image generation returned no image');
+      const decoded = await decodeAIImage(image, controller.signal);
+      controller.signal.throwIfAborted();
+      const current = getDocument();
+      if (current.key !== document.key || current.width !== document.width || current.height !== document.height) {
+        throw new Error('The document changed during generation. The result was not placed in another document.');
+      }
+      const canvas = globalThis.document.createElement('canvas');
+      canvas.width = decoded.naturalWidth; canvas.height = decoded.naturalHeight;
+      const context = canvas.getContext('2d');
+      context.imageSmoothingEnabled = true;
+      context.imageSmoothingQuality = 'high';
+      context.drawImage(decoded, 0, 0);
+      return placeResult(canvas, 'Generated', mask);
+    } catch (error) {
+      if (timedOut) throw new Error('Image generation timed out. Try again or choose a faster image model.');
+      throw error;
+    } finally {
+      clearTimeout(deadline);
+      clearInterval(progress);
+      parentSignal?.removeEventListener('abort', cancel);
+    }
+  };
+}
@@ -0,0 +1,11 @@
+export function imageResultGeometry(width, height, canvasWidth, canvasHeight) {
+  const matchingRatio = Math.abs(width * canvasHeight - height * canvasWidth) <= Math.max(canvasWidth, canvasHeight);
+  if (matchingRatio) {
+    const scale = Math.max(canvasWidth / width, canvasHeight / height);
+    const drawWidth = width * scale, drawHeight = height * scale;
+    return { width: canvasWidth, height: canvasHeight, offsetX: 0, offsetY: 0,
+      drawX: (canvasWidth - drawWidth) / 2, drawY: (canvasHeight - drawHeight) / 2, drawWidth, drawHeight };
+  }
+  return { width, height, offsetX: Math.round((canvasWidth - width) / 2), offsetY: Math.round((canvasHeight - height) / 2),
+    drawX: 0, drawY: 0, drawWidth: width, drawHeight: height };
+}
@@ -67,7 +67,7 @@ export function wireKeyboardShortcuts(deps) {
    toolbar, toolKeyMap,
    composite, saveState, undo, redo,
    toggleShortcuts, confirmTransform, cancelTransform, startTransform, nudgeTransform,
-    resizeCustomPrompt, addEmptyLayer, brushSizeSync,
+    resizeCustomPrompt, addEmptyLayer, brushSizeSync, openLayerAdjustment,
    invertSelection,
    wandDeleteSelection, wandCopyToNewLayer, copyPixelsToClipboard,
    lassoDeleteSelection, lassoCopyToLayer,
@@ -181,6 +181,12 @@ export function wireKeyboardShortcuts(deps) {
        return;
      }
      // Save shortcuts — match the hints shown in the Save dropdown.
+      if (e.shiftKey && !e.altKey && e.code === 'KeyU') {
+        e.preventDefault();
+        e.stopPropagation();
+        openLayerAdjustment?.('hue-saturation');
+        return;
+      }
      if ((e.key === 's' || e.key === 'S') && !e.altKey) {
        e.preventDefault();
        document.getElementById(e.shiftKey ? 'ge-export-gallery' : 'ge-save')?.click();
@@ -221,11 +227,12 @@ export function wireKeyboardShortcuts(deps) {
        addEmptyLayer();
        return;
      }
-      // Ctrl+Alt+L — Levels adjustment. The Image menu owns the row and its
-      // dialog, so click it instead of duplicating the adjustment here.
+      // Ctrl+Alt+L edits the current layer, leaving Levels controls open.
      if (e.altKey && e.code === 'KeyL') {
-        const row = document.querySelector('[data-image-action="adj-levels"]');
-        if (row) { e.preventDefault(); e.stopPropagation(); row.click(); return; }
+        e.preventDefault();
+        e.stopPropagation();
+        openLayerAdjustment?.('levels');
+        return;
      }
      // Ctrl/Cmd+J duplicates the active layer through the layer panel's
      // existing implementation, which preserves masks and effects.
@@ -2233,6 +2233,7 @@ export function createLayerPanelRenderer(deps) {
    if (dragSortModule) {
      dragSortModule.enable('ge-layers-list', '.ge-layer-item', {
        instanceKey: 'ge-layers',
+        excludeSelector: '.ge-adj-sub-item',
        threshold: 4,
        ignoreSelector: 'button, input, select, textarea, a, [contenteditable="true"], .ge-adj-sub-item',
        onReorder: (orderedItems) => {
@@ -2258,6 +2259,9 @@ export function createLayerPanelRenderer(deps) {
            state.layers = newLayers;
            normalizeLayerClipping(state);
            composite();
+            // Effects, adjustments and masks are sibling rows, not children
+            // of the dragged row. Rebuild them under their reordered owner.
+            render();
          }
        },
      });
@@ -6,7 +6,7 @@ const size = () => number('size', 'Size', 8, 0, 100);
 const angle = () => number('angle', 'Angle', 120, -180, 180, 'deg');
 export const LAYER_STYLES = {
  'bevel-emboss': { label: 'Bevel & Emboss', controls: [size(), angle(), number('depth', 'Depth', 100, 0, 300, '%'), color('highlight', 'Highlight', '#ffffff'), color('color', 'Shadow', '#000000'), opacity()] },
-  'inner-shadow': { label: 'Inner Shadow', controls: [color('color', 'Color', '#000000'), opacity(), size(), angle(), number('distance', 'Distance', 6, 0, 100)] },
+  'inner-shadow': { label: 'Inner Shadow', controls: [color('color', 'Color', '#000000'), opacity(), size(), angle(), number('distance', 'Distance', 6, 0, 300)] },
  'inner-glow': { label: 'Inner Glow', controls: [color('color', 'Color', '#ffffff'), opacity(), size()] },
  satin: { label: 'Satin', controls: [color('color', 'Color', '#000000'), opacity(), size(), angle(), number('distance', 'Distance', 12, 0, 100)] },
  'gradient-overlay': { label: 'Gradient Overlay', controls: [color('color', 'Start', '#e06c75'), color('endColor', 'End', '#ffffff'), opacity(), angle(), number('scale', 'Scale', 100, 10, 300, '%')] },
@@ -32,6 +32,13 @@ function surface(width, height) {
 }

 export function renderDropShadow(source, params) {
+  if (params.inside) {
+    return renderLayerStyle(source, 'inner-shadow', {
+      color: params.color, opacity: params.opacity * 100, size: params.blur / 2,
+      distance: Math.hypot(params.x, params.y),
+      angle: Math.atan2(-params.y, params.x) * 180 / Math.PI,
+    });
+  }
  // Tint alpha first so RGB content cannot leak into the shadow. Draw only
  // this silhouette; compositing the source again thickens translucent edges.
  const silhouette = surface(source.width, source.height);
@@ -0,0 +1,13 @@
+export function finishQuickEditJob(job, result) {
+  if (job.cancelled || result?.cancelled) {
+    job.cancelled = true;
+    job.status = 'cancelled';
+    job.detail = 'Cancelled';
+  } else if (job.status === 'error' || result?.ok === false) {
+    job.status = 'error';
+    job.detail = result?.error || result?.message || (job.detail !== 'Working…' && job.detail) || 'Edit failed';
+  } else {
+    job.status = 'done';
+    job.detail = result?.message || 'Done';
+  }
+}
@@ -14,19 +14,26 @@ function toolSettings(tool) {

 let _lastColor = null;
 let _lastTransparentColor = null;
-function transparentColor(color) {
-  if (color === _lastColor && _lastTransparentColor) return _lastTransparentColor;
-  _lastColor = color;
+function transparentColor(color, alpha = 0) {
+  const key = `${color}|${alpha}`;
+  if (key === _lastColor && _lastTransparentColor) return _lastTransparentColor;
+  _lastColor = key;
+  _lastTransparentColor = colorWithAlpha(color, alpha);
+  return _lastTransparentColor;
+}
+
+function colorWithAlpha(color, alpha) {
  if (color.startsWith('#')) {
    const raw = color.slice(1);
    const expanded = raw.length === 3 ? raw.split('').map(char => char + char).join('') : raw;
    const rgb = [0, 2, 4].map(index => parseInt(expanded.slice(index, index + 2), 16));
-    _lastTransparentColor = `rgba(${rgb.join(',')},0)`;
-    return _lastTransparentColor;
+    return `rgba(${rgb.join(',')},${alpha})`;
  }
  const match = color.match(/rgba?\(([^)]+)\)/);
-  _lastTransparentColor = match ? `rgba(${match[1].split(',').slice(0, 3).join(',')},0)` : 'rgba(0,0,0,0)';
-  return _lastTransparentColor;
+  if (!match) return `rgba(0,0,0,${alpha})`;
+  const components = match[1].split(',');
+  const originalAlpha = components.length > 3 ? Number(components[3]) : 1;
+  return `rgba(${components.slice(0, 3).join(',')},${alpha * originalAlpha})`;
 }

 function circleStamp(ctx, x, y, radius, softness, color, alpha, operation) {
@@ -38,8 +45,19 @@ function circleStamp(ctx, x, y, radius, softness, color, alpha, operation) {
    ctx.fillStyle = color;
  } else {
    const gradient = ctx.createRadialGradient(x, y, radius * hard, x, y, radius);
-    gradient.addColorStop(0, color);
-    gradient.addColorStop(1, transparentColor(color));
+    if (softness > 1) {
+      // Above the old maximum, remove the firm core with a progressively
+      // gentler alpha profile while keeping the selected brush diameter.
+      ctx.fillStyle = color;
+      const normalized = ctx.fillStyle;
+      for (let step = 0; step <= 16; step++) {
+        const t = step / 16;
+        gradient.addColorStop(t, transparentColor(normalized, (1 - t) ** softness));
+      }
+    } else {
+      gradient.addColorStop(0, color);
+      gradient.addColorStop(1, transparentColor(color));
+    }
    ctx.fillStyle = gradient;
  }
  ctx.beginPath();
@@ -274,6 +292,10 @@ export function createStrokePipeline({ activeLayer, getActiveMaskLayer, composit
    if (!PAINT_TOOLS.has(tool)) return;
    const layer = activeLayer();
    if (!layer) return;
+    // Pixel writes invalidate adjusted previews even when adjustment settings
+    // themselves have not changed (otherwise retouch strokes appear late).
+    layer._adjFinalKey = null;
+    layer._adjCacheKey = null;
    if (tool === 'clone') return cloneStamp(sample, layer);
    if (tool === 'heal') {
      // A healing stroke without a picked source uses the convenient local
@@ -294,7 +316,7 @@ export function createStrokePipeline({ activeLayer, getActiveMaskLayer, composit
    let operation = 'source-over';
    let color = state.color;
    let alpha = opacity * flow;
-    let softness = Math.max(0, Math.min(1, settings.softness / 300));
+    let softness = Math.max(0, Math.min(4, settings.softness / 300));
    if (tool === 'eraser') { operation = 'destination-out'; color = 'rgba(0,0,0,1)'; }
    else if (tool === 'inpaint') {
      operation = state.inpaintEraseStroke ? 'destination-out' : 'source-over';
@@ -57,8 +57,11 @@ function wireToolSliders(prefix, fields) {
    // softness rises (the CSS already sets the radial gradient — we
    // just tween the inner solid radius to communicate the falloff).
    if (softPrev) {
-      const innerStop = Math.max(0, 60 - state[fields.softness] * 0.55);
-      softPrev.style.background = `radial-gradient(circle, var(--fg) 0%, var(--fg) ${innerStop}%, transparent 90%)`;
+      const amount = state[fields.softness];
+      const innerStop = Math.max(0, 60 - amount * 0.55);
+      softPrev.style.background = amount > 300
+        ? `radial-gradient(circle, var(--fg), color-mix(in srgb, var(--fg) ${Math.round(100 * 0.5 ** (amount / 300))}%, transparent) 50%, transparent 100%)`
+        : `radial-gradient(circle, var(--fg) 0%, var(--fg) ${innerStop}%, transparent 90%)`;
    }
  });
 }
@@ -20,6 +20,23 @@ export function wireSubmenuToggles(menu) {
      menu.classList.remove('ge-flyout-open');
    }
  });
+  function positionPanel(parent) {
+    const panel = parent.nextElementSibling;
+    if (!panel?.classList.contains('ge-submenu')) return;
+    const row = parent.getBoundingClientRect();
+    const origin = (panel.offsetParent || menu).getBoundingClientRect();
+    const top = Math.max(8, Math.min(row.top, window.innerHeight - panel.offsetHeight - 8));
+    const left = row.right + panel.offsetWidth > window.innerWidth - 8
+      ? Math.max(8, row.left - panel.offsetWidth) : row.right - 2;
+    panel.style.top = `${top - origin.top + (panel.offsetParent?.scrollTop || 0)}px`;
+    panel.style.left = `${left - origin.left + (panel.offsetParent?.scrollLeft || 0)}px`;
+  }
+  for (const eventName of ['pointerover', 'focusin']) {
+    menu.addEventListener(eventName, (event) => {
+      const parent = event.target.closest('.ge-menu-parent');
+      if (parent) positionPanel(parent);
+    });
+  }
  menu.addEventListener('click', (e) => {
    const parent = e.target.closest('.ge-menu-parent');
    if (!parent) return;
@@ -34,10 +51,7 @@ export function wireSubmenuToggles(menu) {
    parent.setAttribute('aria-expanded', String(willOpen));
    if (willOpen) {
      // Align the flyout with the clicked row rather than the menu top.
-      const panel = parent.nextElementSibling;
-      if (panel && panel.classList.contains('ge-submenu')) {
-        panel.style.top = parent.offsetTop + 'px';
-      }
+      positionPanel(parent);
    }
  });
 }
@@ -37,6 +37,7 @@
 * }} deps
 */
 import { state } from './state.js';
+import { topPortalZ } from '../toolWindowZOrder.js';
 import { isLayerPixelLocked, isLayerTransparencyLocked } from './layer-groups.js';

 const TOPBAR_MENU_IDS = ['ge-file-menu', 'ge-edit-menu', 'ge-view-menu', 'ge-image-menu', 'ge-layer-menu', 'ge-type-menu', 'ge-selection-menu', 'ge-filter-menu', 'ge-window-menu', 'ge-help-menu', 'ge-resize-menu', 'ge-save-menu'];
@@ -101,6 +102,7 @@ export function wireTopbar(deps) {
      };
      const positionSaveMenu = () => {
        const r = saveBtn.getBoundingClientRect();
+        saveMenu.style.zIndex = String(topPortalZ());
        saveMenu.style.top = `${r.bottom + 2}px`;
        saveMenu.style.right = `${Math.max(8, window.innerWidth - r.right)}px`;
        saveMenu.style.left = 'auto';
@@ -1321,7 +1321,12 @@ function _renderEditorLanding() {
    // openEditor() now returns a Promise — it's async because the size
    // prompt is a styled modal. Await it before checking whether the
    // editor actually opened (the user may have cancelled).
-    await openEditor(null, null, null, 'New canvas');
+    try {
+      await openEditor(null, null, null, 'New canvas');
+    } catch (error) {
+      // openEditor reports the initialization error and tears down its shell.
+      console.error('[gallery] New canvas failed', error);
+    }
    if (!document.querySelector('#gallery-editor-container .gallery-editor')) {
      _renderEditorLanding();
    }
@@ -277,8 +277,11 @@ import { alphaBounds as _maskAlphaBounds, featherMaskCanvas as _featherMaskCanva
 import { analyzeAutoTone as _analyzeAutoTone, applyAutoTone as _applyAutoTone, boxBlurRGB as _boxBlurRGB, skinMaskFromData as _skinMaskFromData, frequencySeparationSmooth as _frequencySeparationSmooth, blemishRemoval as _blemishRemoval, teethWhitening as _teethWhitening, featureExclusionMask as _featureExclusionMask, dilateAlpha as _dilateAlpha, subtractMask as _subtractMask, guidedClarity as _guidedClarity } from './editor/retouch.js';
 import { wireClipboardAndDrop } from './editor/clipboard-and-drop.js';
 import { wireAIModelSelectors, resolveInpaintModel, resolveQuickEditModel, resolveQuickEditAgentModel } from './editor/ai-models.js';
-import { createPreflight } from './editor/preflight.js';
 import { createAiSettings } from './editor/ai-settings.js';
+import { waitForImagePreferences } from './settings/imagePreferences.js';
+import { createImageGenerationAction } from './editor/image-generation.js';
+import { finishQuickEditJob } from './editor/quick-edit-job.js';
+import { imageResultGeometry } from './editor/image-result-geometry.js';
 import { lookRecipeSteps } from './editor/look-recipes.js';
 import { wireInpaintButtons } from './editor/ai-inpaint.js?v=20260708match1';
 import { wireAIToolsMisc } from './editor/ai-tools-misc.js';
@@ -356,7 +359,6 @@ function _computeTransformSnap(frame, center) {
 const _INPAINT_DEFAULT_BRUSH = 100;
 let _samAbortController = null;
 let _precisionGuides = null;
-let _preflight = null;
 let _aiSettings = null;
 let _selectionAnimationFrame = null;
 let _selectionAnimationLast = 0;
@@ -394,6 +396,12 @@ if (!window.__galleryEditEscHardGuardInstalled) {
    }
    if (e.target?.closest?.('#styled-confirm-overlay')) return;
    if (e.key === 'Escape') {
+      const aiSettings = document.querySelector('.ge-ai-settings:not([hidden])');
+      if (aiSettings) {
+        e.preventDefault(); e.stopImmediatePropagation();
+        aiSettings.querySelector('[data-ai-settings-close]')?.click();
+        return;
+      }
      // Floating dialogs/popups that live outside the editor modal must close on
      // Escape reliably (their document-capture handlers can miss when focus is
      // outside them). Close the top-most one and stop here.
@@ -838,6 +846,7 @@ function _setCanvasAiBusy(busy) {
 }

 let _aiProgressTimer = null;
+let _aiProgressEpoch = 0;
 function _setAiProgress(frac, label) {
  const wrap = document.getElementById('ge-ai-command-progress');
  if (!wrap) return;
@@ -857,12 +866,17 @@ function _startAiProgress(requestId) {
  const endpointId = arguments[1] || '';
  _stopAiProgress();
  if (!requestId) return;
+  const epoch = _aiProgressEpoch;
+  let pending = false;
  const tick = async () => {
+    if (pending || epoch !== _aiProgressEpoch) return;
+    pending = true;
    try {
      const epQuery = endpointId ? `&endpoint_id=${encodeURIComponent(endpointId)}` : '';
      const r = await fetch(`/api/image/edit-progress?request_id=${encodeURIComponent(requestId)}` + epQuery, { credentials: 'same-origin' });
      if (!r.ok) return;
      const p = await r.json();
+      if (epoch !== _aiProgressEpoch) return;
      const st = p.stage || '';
      if (st === 'done' || st === 'error') { _setAiProgress(1, st === 'done' ? 'Done' : 'Failed'); return; }
      const frac = typeof p.progress === 'number' ? p.progress : 0;
@@ -871,12 +885,13 @@ function _startAiProgress(requestId) {
      const verb = st === 'editing' ? 'Generating' : (st ? st[0].toUpperCase() + st.slice(1) : 'Working');
      _setAiProgress(frac, `${verb}…${stepTxt}${eta}`);
      _setAiCommandStatus(`${verb}…${stepTxt}${eta}`, 'running');
-    } catch (_) {}
+    } catch (_) {} finally { pending = false; }
  };
  _aiProgressTimer = setInterval(tick, 1000);
  tick();
 }
 function _stopAiProgress() {
+  _aiProgressEpoch++;
  if (_aiProgressTimer) { clearInterval(_aiProgressTimer); _aiProgressTimer = null; }
  _setAiProgress(null);
 }
@@ -1074,6 +1089,7 @@ const _QUICK_EDIT_TOOL_SUGGESTIONS = Object.entries(_TOOLS).map(([id, t]) => ({
  kind: 'Tool',
  icon: t.icon || '',
  toolId: id,
+  runPrompt: id === 'rembg' ? 'remove background' : null,
  aliases: [id],
 }));
 const _QUICK_EDIT_CATALOG = [..._QUICK_EDIT_TOOL_SUGGESTIONS, ..._AI_COMMAND_SUGGESTIONS];
@@ -1281,8 +1297,13 @@ function _wireAiCommandBox() {
    if (item.toolId) {
      _clickToolButton(item.toolId);
      _setAiCommandStatus(`${item.label} tool`, 'done');
+      if (item.runPrompt) {
+        input.value = item.runPrompt;
+        syncClearButton();
+      }
      hideSuggestions();
      input.focus();
+      if (run && item.runPrompt) form.requestSubmit();
      return true;
    }
    input.value = item.insert;
@@ -1471,6 +1492,24 @@ function _wireAiCommandBox() {
  // model (window.geEditorAI) just like the server would route it.
  const _executeQuickEditLocal = async (prompt) => {
    const p = prompt.toLowerCase();
+    // Background-removal intent (shared with the routing guard so the regex
+    // can never drift between the two call sites).
+    if (_looksBackgroundRemoval(p)) {
+      await _runQuickControlOp('ai.removeBackground', {});
+      // Chain a tone step when the prompt also asks for one
+      // ("remove the background and make it brighter", "...and warm it up").
+      if (/\b(bright(?:er|en)?|lighten|exposure|well[-\s]*lit)\b/.test(p)) {
+        await _runQuickControlOp('adjustments.apply', { type: 'brightness-contrast', params: { brightness: 16, contrast: 4 } });
+      } else if (/\b(dark(?:er|en)?|dimmer)\b/.test(p)) {
+        await _runQuickControlOp('adjustments.apply', { type: 'brightness-contrast', params: { brightness: -14, contrast: 4 } });
+      } else if (/\b(warm(?:er)?)\b/.test(p)) {
+        await _runQuickControlOp('adjustments.apply', { type: 'white-balance', params: { temperature: 18 } });
+      } else if (/\b(cool(?:er)?)\b/.test(p)) {
+        await _runQuickControlOp('adjustments.apply', { type: 'white-balance', params: { temperature: -18 } });
+      }
+      _setAiCommandStatus('Background removal finished.', 'done');
+      return;
+    }
    // A targeted recolour ("make only the red car blue", "recolour the rock to
    // teal") needs the model to repaint a specific object — never fake it with a
    // global colour tweak from the deterministic fast path.
@@ -1933,24 +1972,6 @@ function _wireAiCommandBox() {
          return;
        }
      }
-      // Background-removal intent (shared with the routing guard so the regex
-      // can never drift between the two call sites).
-      if (_looksBackgroundRemoval(p)) {
-        await _runQuickControlOp('ai.removeBackground', {});
-        // Chain a tone step when the prompt also asks for one
-        // ("remove the background and make it brighter", "...and warm it up").
-        if (/\b(bright(?:er|en)?|lighten|exposure|well[-\s]*lit)\b/.test(p)) {
-          await _runQuickControlOp('adjustments.apply', { type: 'brightness-contrast', params: { brightness: 16, contrast: 4 } });
-        } else if (/\b(dark(?:er|en)?|dimmer)\b/.test(p)) {
-          await _runQuickControlOp('adjustments.apply', { type: 'brightness-contrast', params: { brightness: -14, contrast: 4 } });
-        } else if (/\b(warm(?:er)?)\b/.test(p)) {
-          await _runQuickControlOp('adjustments.apply', { type: 'white-balance', params: { temperature: 18 } });
-        } else if (/\b(cool(?:er)?)\b/.test(p)) {
-          await _runQuickControlOp('adjustments.apply', { type: 'white-balance', params: { temperature: -18 } });
-        }
-        _setAiCommandStatus('Background removal finished.', 'done');
-        return;
-      }
      if (!/\b(text|title|caption|font|heading|subtitle)\b/.test(p)
        && /\b(upscale|higher\s*res|increase\s*resolution|bigger|2x|4x)\b/.test(p)) {
        // Use the real upscale op (Real-ESRGAN, basic-upscale fallback). The
@@ -2814,8 +2835,8 @@ function _wireAiCommandBox() {
    if (_looksBackgroundRemoval(prompt)) {
      _setAiCommandStatus('Removing the background…', 'running');
      try {
-        const done = await _executeQuickEditLocal(prompt);
-        if (done !== false) return { ok: true };
+        await _executeQuickEditLocal(prompt);
+        return { ok: true };
      } catch (err) {
        if (signal && signal.aborted) { _setAiCommandStatus('', ''); return { ok: false, cancelled: true }; }
        const msg = err && err.message ? err.message : String(err);
@@ -2841,6 +2862,7 @@ function _wireAiCommandBox() {
        _setAiCommandStatus('Generated an image.', 'done');
        return { ok: true, image: res };
      } catch (err) {
+        if (signal?.aborted) return { ok: false, cancelled: true };
        const msg = err && err.message ? err.message : String(err);
        _setAiCommandStatus(_isGenOfflineMsg(msg) ? msg : `Could not generate an image: ${msg}`, 'error');
        return { ok: false, error: msg };
@@ -3083,19 +3105,22 @@ function _wireAiCommandBox() {
        job.controller = controller;
        renderJobStack();
        _quickEditActiveJob = job;
+        let result;
        try {
-          await executeQuickEdit(job.prompt, { forceAi: !!job.forceAi, signal: controller ? controller.signal : null });
+          result = await executeQuickEdit(job.prompt, { forceAi: !!job.forceAi, signal: controller ? controller.signal : null });
        } catch (err) {
          if (!job.cancelled) {
            job.status = 'error';
            job.detail = err?.message || 'AI edit failed';
          }
        } finally {
+          _stopAiProgress();
+          finishQuickEditJob(job, result);
+          _setAiCommandStatus(job.cancelled ? '' : job.detail, job.cancelled ? '' : job.status);
          if (_quickEditActiveJob === job) _quickEditActiveJob = null;
          job.onChange = null;
          job.controller = null;
          if (job.cancelled) continue;
-          if (job.status === 'running') job.status = 'done';
          renderJobStack();
          setTimeout(() => dismissJob(job), job.status === 'error' ? 3200 : 1600);
        }
@@ -5307,6 +5332,9 @@ function _restoreState(snap) {
 }

 function undo() {
+  // End sampling before restoring pixels; pointer-up must not replay the
+  // unfinished stroke into the restored layer without a new history entry.
+  if (state.drawing) _strokeTool.tryEnd();
  if (state.undoStack.length === 0) return;
  const target = state.undoStack.pop();
  const cur = _snapshotState();
@@ -6522,6 +6550,11 @@ const _nudgeTransform      = _transformSession.nudgeTransform;
 const _confirmTransform    = _transformSession.confirmTransform;
 const _cancelTransform     = _transformSession.cancelTransform;
 window.__galleryEditorHandleEscape = () => {
+  const aiSettings = document.querySelector('.ge-ai-settings:not([hidden])');
+  if (aiSettings) {
+    aiSettings.querySelector('[data-ai-settings-close]')?.click();
+    return true;
+  }
  const sizePrompt = document.getElementById('ge-canvas-size-overlay');
  if (sizePrompt && getComputedStyle(sizePrompt).display !== 'none') {
    sizePrompt._cancelCanvasSize?.();
@@ -8051,6 +8084,7 @@ async function _canMutateLayerPixels(layer, action = 'editing pixels') {
    return false;
  }
  if (!['placed', 'text', 'shape'].includes(layer.kind)) return true;
+  if (action === 'cutting pixels') return _rasterizeLayerNow(layer);
  return _confirmRasterizeLayer(layer);
 }

@@ -8249,10 +8283,13 @@ function _filterSliderPrompt(title, params, onPreview, onCancel) {
      // standard slim red-thumb styling instead of the bare browser
      // default. Value chip on the same line as the label.
      const isColor = p.type === 'color';
+      const isSelect = p.type === 'select';
      rows += `
        <div class="ge-filter-row ge-eraser-row">
-          <label>${p.label}${isColor ? '' : ` <span class="ge-filter-row-value" data-val-for="${p.key}">${p.value}${p.suffix || ''}</span>`}</label>
-          ${isColor
+          <label>${p.label}${isColor || isSelect ? '' : ` <span class="ge-filter-row-value" data-val-for="${p.key}">${p.value}${p.suffix || ''}</span>`}</label>
+          ${isSelect
+            ? `<select data-key="${p.key}" class="ge-ctl-select" aria-label="${p.label}">${p.options.map(option => `<option value="${option.value}"${String(option.value) === String(p.value) ? ' selected' : ''}>${option.label}</option>`).join('')}</select>`
+            : isColor
            ? `<input type="color" data-key="${p.key}" value="${p.value}" aria-label="${p.label}" />`
            : `<input type="range" data-key="${p.key}" min="${p.min}" max="${p.max}" step="${p.step || 1}" value="${p.value}" />`}
        </div>
@@ -8273,7 +8310,7 @@ function _filterSliderPrompt(title, params, onPreview, onCancel) {
    for (const p of params) values[p.key] = p.value;
    // Initial preview render.
    try { onPreview(values); } catch {}
-    overlay.querySelectorAll('input[data-key]').forEach(inp => {
+    overlay.querySelectorAll('input[data-key], select[data-key]').forEach(inp => {
      inp.addEventListener('input', (e) => {
        if (!isCurrent()) { cleanup(null); return; }
        const k = e.target.dataset.key;
@@ -8304,7 +8341,7 @@ function _filterSliderPrompt(title, params, onPreview, onCancel) {
        e.preventDefault();
        cleanup(e.target?.dataset.action === 'cancel' ? null : values);
      } else if (e.key === 'Tab') {
-        const fields = [...overlay.querySelectorAll('input, button')];
+        const fields = [...overlay.querySelectorAll('input, select, button')];
        const index = fields.indexOf(document.activeElement);
        e.preventDefault();
        fields[(index + (e.shiftKey ? -1 : 1) + fields.length) % fields.length]?.focus();
@@ -8316,7 +8353,7 @@ function _filterSliderPrompt(title, params, onPreview, onCancel) {
      if (!overlay.isConnected || !isCurrent()) cleanup(null);
    });
    observer.observe(state.container, { childList: true, subtree: true });
-    overlay.querySelector('input, button')?.focus({ preventScroll: true });
+    overlay.querySelector('input, select, button')?.focus({ preventScroll: true });
    overlay.querySelector('[data-action="apply"]').addEventListener('click', () => cleanup(values));
    overlay.querySelector('[data-action="cancel"]').addEventListener('click', () => cleanup(null));
    // Click outside the modal (on the dim backdrop) = cancel.
@@ -8482,6 +8519,7 @@ function _shadowOffsets(values = {}) {
  return {
    x: Math.round(Math.cos(radians) * distance),
    y: Math.round(-Math.sin(radians) * distance),
+    inside: Number(values.inside) === 1,
  };
 }

@@ -8543,6 +8581,7 @@ async function _addRetainedEffect(type, presetName = null) {
      { key: 'color', label: 'Color', type: 'color', value: '#000000' },
      { key: 'opacity', label: 'Opacity', min: 0, max: 100, step: 1, value: 45, suffix: '%' },
      { key: 'blur', label: 'Blur', min: 0, max: 100, step: 1, value: 12, suffix: 'px' },
+      { key: 'inside', label: 'Position', type: 'select', value: 0, options: [{ value: 0, label: 'Outside' }, { value: 1, label: 'Inside' }] },
      { key: 'distance', label: 'Distance', min: 0, max: 200, step: 1, value: _shadowAngleDistance({ x: 4, y: 6 }).distance, suffix: 'px' },
      { key: 'angle', label: 'Direction', min: -180, max: 180, step: 1, value: _shadowAngleDistance({ x: 4, y: 6 }).angle, suffix: '\u00b0' },
    ];
@@ -8756,6 +8795,7 @@ async function _editRetainedEffect(layer, effect) {
        { key: 'color', label: 'Color', type: 'color', value: p.color || '#000000' },
        { key: 'opacity', label: 'Opacity', min: 0, max: 100, step: 1, value: Math.round((Number(p.opacity) || 0) * 100), suffix: '%' },
        { key: 'blur', label: 'Blur', min: 0, max: 100, step: 1, value: Number(p.blur) || 0, suffix: 'px' },
+        { key: 'inside', label: 'Position', type: 'select', value: p.inside ? 1 : 0, options: [{ value: 0, label: 'Outside' }, { value: 1, label: 'Inside' }] },
        { key: 'distance', label: 'Distance', min: 0, max: 200, step: 1, value: _shadowAngleDistance(p).distance, suffix: 'px' },
        { key: 'angle', label: 'Direction', min: -180, max: 180, step: 1, value: _shadowAngleDistance(p).angle, suffix: '\u00b0' },
      ];
@@ -9980,9 +10020,8 @@ function _buildEditor(container) {
      if (colorRow) colorRow.style.display = ['eraser', 'clone', 'heal', 'smudge', 'dodge', 'burn', 'liquify'].includes(toolId) ? 'none' : '';
      const colorLabel = colorRow?.querySelector('label');
      if (colorLabel) colorLabel.textContent = 'Color';
-      // Per-tool stroke modifiers all live in the shared brush "More" menu so
-      // every brush-family tool has the same compact strip as the Brush. Only
-      // the group for the active tool is shown; the rest stay hidden.
+      // Secondary modifiers stay in More; brush softness remains in the main
+      // strip. Only the active tool's secondary group is shown.
      const strokeTool = (toolId === 'brush' || toolId === 'pixel' || toolId === 'dodge' || toolId === 'burn') ? 'brush'
        : toolId === 'eraser' ? 'eraser'
          : (toolId === 'clone' || toolId === 'heal') ? 'clone'
@@ -9992,6 +10031,8 @@ function _buildEditor(container) {
        row.style.display = row.dataset.strokeTool === strokeTool ? '' : 'none';
      });
      const dodgeBurnRow = document.getElementById('ge-dodgeburn-intensity-row');
+      const brushSoftnessRow = document.getElementById('ge-brush-softness-row');
+      if (brushSoftnessRow) brushSoftnessRow.style.display = ['brush', 'dodge', 'burn'].includes(toolId) ? '' : 'none';
      // Intensity sits in the strip next to Size, so it must show for Dodge and
      // Burn only (and never for the other brush-family tools).
      if (dodgeBurnRow) dodgeBurnRow.style.display = (toolId === 'dodge' || toolId === 'burn') ? '' : 'none';
@@ -10444,7 +10485,6 @@ function _buildEditor(container) {
  canvasArea.appendChild(state.transformOverlay);
  canvasArea.appendChild(_buildQuickMaskBar());
  canvasArea.appendChild(_buildAiCommandBox());
-  _preflight = createPreflight({ canvasArea });
  _aiSettings = createAiSettings({ container });
  try { window.geEditorAiSettings = _aiSettings; } catch (_) {}
  // On phones the rulers eat scarce canvas width; default them off.
@@ -10637,19 +10677,10 @@ function _buildEditor(container) {
    const initialStatusTool = document.getElementById('ge-status-tool');
    if (initialStatusTool) initialStatusTool.textContent = _TOOLS[state.tool]?.label || state.tool || '';
  }
-  // Preflight checklist: greet the user on open (unless dismissed) and
-  // expose a footer button to re-open it.
+  // Keep model configuration in the AI settings dialog.
  try {
    const footer = container.querySelector('.ge-editor-footer');
    if (footer) {
-      const setupBtn = document.createElement('button');
-      setupBtn.type = 'button';
-      setupBtn.id = 'ge-setup-btn';
-      setupBtn.className = 'ge-setup-btn';
-      setupBtn.title = 'Editor setup checklist';
-      setupBtn.textContent = 'Setup';
-      setupBtn.addEventListener('click', () => _preflight?.open());
-      footer.appendChild(setupBtn);
      const aiBtn = document.createElement('button');
      aiBtn.type = 'button';
      aiBtn.id = 'ge-ai-settings-btn';
@@ -10659,7 +10690,6 @@ function _buildEditor(container) {
      aiBtn.addEventListener('click', () => _aiSettings?.open());
      footer.appendChild(aiBtn);
    }
-    _preflight?.maybeOpen();
  } catch (_) {}
  try { _initControlKit(container); } catch (_) {}
  let _lastLayoutDesktop = null;
@@ -11779,6 +11809,14 @@ function _buildEditor(container) {
  // Keyboard shortcuts — full implementation in
  // editor/keyboard-shortcuts.js.
  wireKeyboardShortcuts({
+    openLayerAdjustment: (type) => {
+      const layer = activeLayer();
+      if (!layer || !layer.canvas || layer.kind === 'adjustment') {
+        uiModule?.showToast('Select an image layer first');
+        return;
+      }
+      _openAdjPopup(layer, type, document.getElementById('ge-image-menu-btn'));
+    },
    fillSelection: _doFillSelection,
    copyPixelsToClipboard: _copyPixelsToClipboard,
    toolbar, toolKeyMap: _toolKeyMap,
@@ -12143,7 +12181,9 @@ function _buildEditor(container) {
    out.getContext('2d').drawImage(layer.canvas, off.x, off.y);
    return out;
  };
-  const _aiEditCanvas = async (endpoint, payload = {}, { keepNaturalSize = false } = {}) => {
+  const _aiEditCanvas = async (endpoint, payload = {}, { keepNaturalSize = true } = {}) => {
+    await waitForImagePreferences();
+    if (endpoint === '/api/image/inpaint') payload = { ...payload, _use_image_settings: true };
    const flat = _aiEditSourceCanvas();
    const image = flat.toDataURL('image/png').split(',')[1];
    const requestId = 'qe-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
@@ -12154,7 +12194,7 @@ function _buildEditor(container) {
    } else {
      _startAiProgress(requestId);
    }
-    const body = JSON.stringify({ image, request_id: requestId, ...payload });
+    const body = JSON.stringify({ image, width: flat.width, height: flat.height, request_id: requestId, ...payload });
    // The image servers occasionally reject a request transiently (503 while a
    // model swaps, 502/504 gateways, dropped connections). Retry those a couple
    // of times with backoff so a hiccup doesn't silently leave the canvas
@@ -12212,7 +12252,7 @@ function _buildEditor(container) {
        c.height = state.imgHeight;
      }
      c.getContext('2d').drawImage(img, 0, 0, c.width, c.height);
-      return { canvas: c, dataUrl: c.toDataURL('image/png') };
+      return { canvas: c, dataUrl: c.toDataURL('image/png'), fullFrame: data.full_frame === true };
    } finally {
      if (_timer) clearTimeout(_timer);
      if (_aiEditAbort === _ctl) _aiEditAbort = null;
@@ -12221,12 +12261,17 @@ function _buildEditor(container) {
  };
  const _placeResultLayer = (canvas, name, maskCanvas) => {
    _saveState(`AI: ${name}`);
-    const layer = createLayer(name, state.imgWidth, state.imgHeight);
-    layer.ctx.drawImage(canvas, 0, 0);
+    const geometry = imageResultGeometry(canvas.width, canvas.height, state.imgWidth, state.imgHeight);
+    const layer = createLayer(name, geometry.width, geometry.height);
+    const offset = { x: geometry.offsetX, y: geometry.offsetY };
+    state.layerOffsets.set(layer.id, offset);
+    layer.ctx.imageSmoothingEnabled = true;
+    layer.ctx.imageSmoothingQuality = 'high';
+    layer.ctx.drawImage(canvas, geometry.drawX, geometry.drawY, geometry.drawWidth, geometry.drawHeight);
    if (maskCanvas) {
      layer.ctx.save();
      layer.ctx.globalCompositeOperation = 'destination-in';
-      layer.ctx.drawImage(maskCanvas, 0, 0);
+      layer.ctx.drawImage(maskCanvas, -offset.x, -offset.y);
      layer.ctx.restore();
    }
    state.layers.push(layer);
@@ -12236,13 +12281,24 @@ function _buildEditor(container) {
    _renderLayerPanel();
    return layer.id;
  };
+  const _generateImage = createImageGenerationAction({
+    formatError: _generationErrorMessage,
+    getDocument: () => ({
+      key: state.editorOpen ? `${state.editorSessionToken}:${state.documentId}` : null,
+      width: state.imgWidth, height: state.imgHeight, mask: state.wandMask,
+    }),
+    getSignal: () => _quickEditActiveJob?.controller?.signal,
+    onProgress: seconds => _setAiCommandStatus(`Generating an image… ${seconds}s`, 'running'),
+    placeResult: _placeResultLayer,
+  });
  const _aiInpaintSelection = async (prompt) => {
    if (!state.wandMask) throw new Error('make a selection first');
    const layer = activeLayer() || _activeParentLayer();
    if (!layer) throw new Error('no layer');
    const mask = state.wandMask.toDataURL('image/png').split(',')[1];
-    const { canvas } = await _aiEditCanvas('/api/image/inpaint', { mask, prompt: prompt || '', steps: 4 });
-    return _placeResultLayer(canvas, 'Generative fill', state.wandMask);
+    const selection = state.wandMask;
+    const { canvas, fullFrame } = await _aiEditCanvas('/api/image/inpaint', { mask, prompt: prompt || '', steps: 4 });
+    return _placeResultLayer(canvas, 'Generative fill', fullFrame ? null : selection);
  };
  // Replace the background/scene while keeping the subject: the server derives
  // the subject mask, repaints the inverse (new background), harmonises colour
@@ -12535,7 +12591,7 @@ function _buildEditor(container) {
          'layers.delete': { description: 'Delete layers (defaults to selection).', run: (p) => { if (p && (p.id || p.index || p.name)) _controlSelect(_controlFindLayer(p)); _layerPanelRenderer.deleteSelectedLayers?.(); return true; } },
          'layers.setOpacity': { description: 'Set a layer opacity (0-1).', run: (p) => { const l = _controlFindLayer(p) || activeLayer(); if (!l) throw new Error('layer not found'); _saveState(`Change opacity of ${l.name}`); l.opacity = Math.max(0, Math.min(1, Number(p.opacity))); composite(); _renderLayerPanel(); return l.id; } },
          'layers.setBlend': { description: 'Set a layer blend mode.', run: (p) => { const l = _controlFindLayer(p) || activeLayer(); if (!l) throw new Error('layer not found'); _saveState(`Change blend mode of ${l.name}`); l.blendMode = p.blendMode || p.mode || 'source-over'; composite(); _renderLayerPanel(); return l.id; } },
-          'layers.placeImage': { description: 'Place an image (data URL) as a NEW layer, masked to the current selection when one exists; never overwrites the original. Instruction mode (mode:"instruction" or differenceMask:true) keeps untouched areas pixel-identical via a difference map. {dataUrl,name,masked,blend,opacity,x,y,w,h,mode,differenceMask,diffThreshold,diffGrow,diffFeather}.', run: (p) => new Promise((resolve, reject) => { if (!p || !p.dataUrl) { reject(new Error('dataUrl required')); return; } const img = new Image(); img.onload = () => { try { _saveState(`Place ${p.name || 'image'}`); const dw = state.imgWidth, dh = state.imgHeight; const useDiff = (p.differenceMask === true) || String(p.mode || '').toLowerCase() === 'instruction'; const beforeSnap = useDiff ? flatten() : null; const layer = createLayer(p.name || 'Placed image', dw, dh); let tw = Number(p.w), th = Number(p.h); if (!(tw > 0) || !(th > 0)) { if (useDiff) { tw = dw; th = dh; } else { const scale = Math.min(dw / img.naturalWidth, dh / img.naturalHeight); tw = Math.max(1, Math.round(img.naturalWidth * scale)); th = Math.max(1, Math.round(img.naturalHeight * scale)); } } let tx = Number(p.x), ty = Number(p.y); if (!Number.isFinite(tx)) tx = useDiff ? 0 : Math.round((dw - tw) / 2); if (!Number.isFinite(ty)) ty = useDiff ? 0 : Math.round((dh - th) / 2); layer.ctx.imageSmoothingEnabled = true; layer.ctx.imageSmoothingQuality = 'high'; layer.ctx.drawImage(img, tx, ty, tw, th); if (p.masked !== false && state.wandMask) { layer.ctx.save(); layer.ctx.globalCompositeOperation = 'destination-in'; layer.ctx.drawImage(state.wandMask, 0, 0); layer.ctx.restore(); } else if (useDiff && beforeSnap) { const diff = _differenceMaskCanvas(beforeSnap, layer.canvas, { threshold: p.diffThreshold, grow: p.diffGrow, feather: p.diffFeather, edgeExcludePx: 0 }); const explicitEdge = p.edgeExcludePx != null ? Number(p.edgeExcludePx) : null; const sceneReplace = diff.changedFraction > 0.5; const edgeExclude = sceneReplace ? 0 : (explicitEdge != null ? explicitEdge : 3); if (edgeExclude > 0) _clearMaskEdgeBand(diff.mask, edgeExclude); layer.ctx.save(); layer.ctx.globalCompositeOperation = 'destination-in'; layer.ctx.drawImage(diff.mask, 0, 0); layer.ctx.restore(); if (sceneReplace) _edgeFillFromInterior(layer.ctx, dw, dh, 3); } if (p.blend) layer.blendMode = p.blend; if (p.opacity != null) layer.opacity = Math.max(0, Math.min(1, Number(p.opacity))); state.layers.push(layer); state.activeLayerId = layer.id; state.selectedLayerIds = [layer.id]; _renderLayerPanel(); composite(); resolve(layer.id); } catch (e) { reject(e); } }; img.onerror = () => reject(new Error('image load failed')); img.src = p.dataUrl; }) },
+          'layers.placeImage': { description: 'Place an image (data URL) as a NEW layer, masked to the current selection when one exists; never overwrites the original. Instruction mode (mode:"instruction" or differenceMask:true) keeps untouched areas pixel-identical via a difference map. {dataUrl,name,masked,blend,opacity,x,y,w,h,mode,differenceMask,diffThreshold,diffGrow,diffFeather}.', run: (p) => new Promise((resolve, reject) => { if (!p || !p.dataUrl) { reject(new Error('dataUrl required')); return; } const img = new Image(); img.onload = () => { try { _saveState(`Place ${p.name || 'image'}`); const dw = state.imgWidth, dh = state.imgHeight; const useDiff = p.nativeSize !== true && ((p.differenceMask === true) || String(p.mode || '').toLowerCase() === 'instruction'); const beforeSnap = useDiff ? flatten() : null; const nativeSize = p.nativeSize === true && !useDiff; const geometry = imageResultGeometry(img.naturalWidth, img.naturalHeight, dw, dh); const layer = createLayer(p.name || 'Placed image', nativeSize ? geometry.width : dw, nativeSize ? geometry.height : dh); const nativeOffset = { x: geometry.offsetX, y: geometry.offsetY }; if (nativeSize) state.layerOffsets.set(layer.id, nativeOffset); let tw = Number(p.w), th = Number(p.h); if (!(tw > 0) || !(th > 0)) { if (nativeSize) { tw = geometry.drawWidth; th = geometry.drawHeight; } else if (useDiff) { tw = dw; th = dh; } else { const scale = Math.min(dw / img.naturalWidth, dh / img.naturalHeight); tw = Math.max(1, Math.round(img.naturalWidth * scale)); th = Math.max(1, Math.round(img.naturalHeight * scale)); } } let tx = Number(p.x), ty = Number(p.y); if (!Number.isFinite(tx)) tx = nativeSize ? geometry.drawX : useDiff ? 0 : Math.round((dw - tw) / 2); if (!Number.isFinite(ty)) ty = nativeSize ? geometry.drawY : useDiff ? 0 : Math.round((dh - th) / 2); layer.ctx.imageSmoothingEnabled = true; layer.ctx.imageSmoothingQuality = 'high'; layer.ctx.drawImage(img, tx, ty, tw, th); if (p.masked !== false && state.wandMask) { layer.ctx.save(); layer.ctx.globalCompositeOperation = 'destination-in'; layer.ctx.drawImage(state.wandMask, nativeSize ? -nativeOffset.x : 0, nativeSize ? -nativeOffset.y : 0); layer.ctx.restore(); } else if (useDiff && beforeSnap) { const diff = _differenceMaskCanvas(beforeSnap, layer.canvas, { threshold: p.diffThreshold, grow: p.diffGrow, feather: p.diffFeather, edgeExcludePx: 0 }); const explicitEdge = p.edgeExcludePx != null ? Number(p.edgeExcludePx) : null; const sceneReplace = diff.changedFraction > 0.5; const edgeExclude = sceneReplace ? 0 : (explicitEdge != null ? explicitEdge : 3); if (edgeExclude > 0) _clearMaskEdgeBand(diff.mask, edgeExclude); layer.ctx.save(); layer.ctx.globalCompositeOperation = 'destination-in'; layer.ctx.drawImage(diff.mask, 0, 0); layer.ctx.restore(); if (sceneReplace) _edgeFillFromInterior(layer.ctx, dw, dh, 3); } if (p.blend) layer.blendMode = p.blend; if (p.opacity != null) layer.opacity = Math.max(0, Math.min(1, Number(p.opacity))); state.layers.push(layer); state.activeLayerId = layer.id; state.selectedLayerIds = [layer.id]; _renderLayerPanel(); composite(); resolve(layer.id); } catch (e) { reject(e); } }; img.onerror = () => reject(new Error('image load failed')); img.src = p.dataUrl; }) },
          'layers.addMaskFromSelection': { description: 'Add a layer mask from the current selection (reveals the selection). {invert}.', run: (p) => { const parent = _activeParentLayer(); if (!parent) throw new Error('no layer'); _saveState('Add layer mask'); const mask = _ensureActiveMaskLayer(); if (!mask) throw new Error('could not create mask'); const w = mask.canvas.width, h = mask.canvas.height; const mctx = mask.ctx; const off = state.layerOffsets.get(parent.id) || { x: 0, y: 0 }; const ox = -(off.x || 0), oy = -(off.y || 0); mctx.globalCompositeOperation = 'source-over'; mctx.clearRect(0, 0, w, h); if (state.wandMask) { if (p && p.invert) { mctx.fillStyle = '#fff'; mctx.fillRect(0, 0, w, h); mctx.globalCompositeOperation = 'destination-out'; mctx.drawImage(state.wandMask, ox, oy); mctx.globalCompositeOperation = 'source-over'; } else { mctx.drawImage(state.wandMask, ox, oy); } } else { mctx.fillStyle = (p && p.invert) ? '#000' : '#fff'; mctx.fillRect(0, 0, w, h); } composite(); _renderLayerPanel(); return mask.id; } },
          'layers.removeMask': { description: 'Remove the active layer mask (does not affect pixels).', run: () => { const parent = _activeParentLayer(); if (!parent || !parent.masks || !parent.masks.length) throw new Error('no mask'); _saveState('Remove layer mask'); parent.masks = parent.masks.filter((m) => m.id !== parent.activeMaskId); parent.activeMaskId = parent.masks[0]?.id || null; composite(); _renderLayerPanel(); return true; } },
          'layers.applyMask': { description: 'Bake the active layer mask into the layer alpha and remove the mask.', run: () => { const parent = _activeParentLayer(); const mask = _getActiveMaskLayer(); if (!parent || !parent.ctx || !mask) throw new Error('no mask to apply'); _saveState('Apply layer mask'); _bakeMaskIntoLayer(parent.ctx, mask.canvas, 0, 0); parent.masks = parent.masks.filter((m) => m.id !== mask.id); parent.activeMaskId = parent.masks[0]?.id || null; composite(); _renderLayerPanel(); return true; } },
@@ -12551,7 +12607,7 @@ function _buildEditor(container) {
          'ai.removeObject': { description: 'Remove the selected object and fill naturally. {prompt}.', run: (p) => _aiInpaintSelection((p && p.prompt) || 'remove the object, fill the area naturally') },
          'ai.harmonize': { description: 'Harmonize the layer/selection lighting with the rest of the image; result is a NEW layer. {strength}.', run: async (p) => { const { canvas } = await _aiEditCanvas('/api/image/harmonize', { strength: Number(p && p.strength) || 0.4 }); return _placeResultLayer(canvas, 'Harmonized', state.wandMask || null); } },
          'ai.generativeUpscale': { description: 'Upscale the image 2x/4x; result is a NEW layer. Falls back to a high-quality canvas upscale labelled "basic upscale" when no Real-ESRGAN model is served. {scale}.', run: async (p) => { const scale = Number(p && p.scale) === 4 ? 4 : 2; try { const { canvas } = await _aiEditCanvas('/api/image/upscale-local', { scale }); return _placeResultLayer(canvas, `Upscaled ${scale}x`, null); } catch (e) { const src = flatten(); const c = document.createElement('canvas'); c.width = Math.max(1, Math.round(src.width * scale)); c.height = Math.max(1, Math.round(src.height * scale)); const cx = c.getContext('2d'); cx.imageSmoothingEnabled = true; cx.imageSmoothingQuality = 'high'; cx.drawImage(src, 0, 0, c.width, c.height); _saveState('Upscale (basic)'); _resizeCanvasDocument(state, c.width, c.height, { anchorX: 0, anchorY: 0 }); const layerId = _placeResultLayer(c, `Upscaled ${scale}x (basic upscale)`, null); return { layerId, scale, method: 'basic', reason: String(e && e.message || e) }; } } },
-          'ai.generateImage': { description: 'Generate an image from a prompt (current canvas as reference) and place it as a NEW layer. {prompt,width,height}.', run: async (p) => { const endpoint = (typeof window !== 'undefined' && window.geGenerateImageEndpoint) || '/api/image/generate'; const reference = flatten().toDataURL('image/png').split(',')[1]; const _pickedModel = (() => { try { const v = localStorage.getItem('ge-ai-command-model') || ''; return v.includes('::') ? v.split('::').pop() : ''; } catch (_) { return ''; } })(); const body = { prompt: (p && p.prompt) || '', width: Math.max(1, Math.round(Number(p && p.width) || state.imgWidth)), height: Math.max(1, Math.round(Number(p && p.height) || state.imgHeight)), reference, ...(_pickedModel ? { model: _pickedModel } : {}) }; let _gres = null; try { _gres = await fetch(endpoint, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); } catch (_e) { throw new Error(_generationErrorMessage({ network: true, detail: (_e && _e.message) || 'network error' })); } const res = _gres; if (!res.ok) { let _gd = res.statusText; try { const e = await res.json(); _gd = e.detail || e.error || _gd; } catch (_) {} throw new Error(_generationErrorMessage({ status: res.status, detail: _gd })); } const data = await res.json(); if (data.error) throw new Error(_generationErrorMessage({ detail: data.error })); const b64 = data.image || (Array.isArray(data.images) && data.images[0]); if (!b64) throw new Error('No image returned'); try { window.__geGenerationDisabled = 0; } catch (_) {} const img = await _decodeAIImage(b64, _aiSignal); const c = document.createElement('canvas'); c.width = state.imgWidth; c.height = state.imgHeight; c.getContext('2d').drawImage(img, 0, 0, state.imgWidth, state.imgHeight); return _placeResultLayer(c, 'Generated', state.wandMask || null); } },
+          'ai.generateImage': { description: 'Generate an image with the saved generation model and fit it proportionally as a new layer. {prompt,width,height}.', run: (p) => _generateImage(p || {}) },
          'ai.generativeExpand': { description: 'Generatively expand the canvas to width×height; only the new border is inpainted, the original pixels are kept pixel-identical, and the seam is feathered. {width,height,anchor,prompt}.', run: async (p) => { const tw = Math.max(1, Math.round(Number(p && p.width) || state.imgWidth)); const th = Math.max(1, Math.round(Number(p && p.height) || state.imgHeight)); if (tw <= state.imgWidth && th <= state.imgHeight) throw new Error('target must be larger than the current canvas'); const anchor = (p && p.anchor) || 'center'; const anchorX = anchor === 'left' ? 0 : anchor === 'right' ? 1 : 0.5; const anchorY = anchor === 'top' ? 0 : anchor === 'bottom' ? 1 : 0.5; _saveState('Generative expand'); const steps = Math.max(1, Math.round(Number(p && p.steps) || 4)); const sw = state.imgWidth; const sh = state.imgHeight; _resizeCanvasDocument(state, tw, th, { anchorX, anchorY }); const flat = flatten(); const b = _contentBounds(); const mask = document.createElement('canvas'); mask.width = tw; mask.height = th; const mctx = mask.getContext('2d'); mctx.fillStyle = '#ffffff'; mctx.fillRect(0, 0, tw, th); const prefill = document.createElement('canvas'); prefill.width = tw; prefill.height = th; const pctx = prefill.getContext('2d'); pctx.imageSmoothingEnabled = true; pctx.drawImage(flat, 0, 0, tw, th); if (b) { mctx.clearRect(b.x, b.y, b.w, b.h); const bx = b.x, by = b.y, bw = b.w, bh = b.h, rx = bx + bw, by2 = by + bh; if (bx > 0) pctx.drawImage(flat, bx, by, 1, bh, 0, by, bx, bh); if (rx < tw) pctx.drawImage(flat, rx - 1, by, 1, bh, rx, by, tw - rx, bh); if (by > 0) pctx.drawImage(flat, bx, by, bw, 1, bx, 0, bw, by); if (by2 < th) pctx.drawImage(flat, bx, by2 - 1, bw, 1, bx, by2, bw, th - by2); if (bx > 0 && by > 0) pctx.drawImage(flat, bx, by, 1, 1, 0, 0, bx, by); if (rx < tw && by > 0) pctx.drawImage(flat, rx - 1, by, 1, 1, rx, 0, tw - rx, by); if (bx > 0 && by2 < th) pctx.drawImage(flat, bx, by2 - 1, 1, 1, 0, by2, bx, th - by2); if (rx < tw && by2 < th) pctx.drawImage(flat, rx - 1, by2 - 1, 1, 1, rx, by2, tw - rx, th - by2); } else { const tx = Math.round((tw - sw) * anchorX); const ty = Math.round((th - sh) * anchorY); mctx.clearRect(tx, ty, sw, sh); } const image = prefill.toDataURL('image/png').split(',')[1]; const maskB64 = mask.toDataURL('image/png').split(',')[1]; const res = await fetch('/api/image/inpaint', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image, mask: maskB64, prompt: (p && p.prompt) || 'extend the scene seamlessly, continuing the surrounding content and lighting naturally', steps }) }); if (!res.ok) { let err = res.statusText; try { const e = await res.json(); err = e.detail || e.error || err; } catch (_) {} throw new Error(err); } const data = await res.json(); if (data.error) throw new Error(data.error); if (!data.image) throw new Error('No image returned'); const img = await _decodeAIImage(data.image, _aiSignal); const seam = Math.max(12, Math.round(Math.min(tw, th) * 0.02)); let blendMask = _growMaskCanvas(mask, seam, true); blendMask = _featherMaskCanvas((cw, ch) => { const c = document.createElement('canvas'); c.width = cw; c.height = ch; return c; }, blendMask, Math.round(seam * 1.4)); const layer = createLayer('Generative expand', tw, th); layer.ctx.imageSmoothingEnabled = true; layer.ctx.imageSmoothingQuality = 'high'; layer.ctx.drawImage(img, 0, 0, tw, th); if (b) { const edge = _edgeBandAverage(flat, b); if (edge) { layer.ctx.save(); layer.ctx.globalAlpha = 0.14; layer.ctx.fillStyle = `rgb(${edge[0]}, ${edge[1]}, ${edge[2]})`; layer.ctx.fillRect(0, 0, tw, th); layer.ctx.restore(); } } _bakeMaskIntoLayer(layer.ctx, blendMask); state.layers.push(layer); state.activeLayerId = layer.id; state.selectedLayerIds = [layer.id]; composite(); _renderLayerPanel(); return { width: tw, height: th, layerId: layer.id, seam, steps }; } },
          'layers.rename': { description: 'Rename a layer {id|index|name, name|newName}.', run: (p) => { const l = _controlFindLayer(p) || activeLayer(); if (!l) throw new Error('layer not found'); const next = String(p.name || p.newName || '').trim(); if (!next) throw new Error('name required'); _saveState('Rename layer'); l.name = next; _renderLayerPanel(); return l.id; } },
          'layers.setVisibility': { description: 'Show/hide a layer {id|index|name, visible}.', run: (p) => { const l = _controlFindLayer(p) || activeLayer(); if (!l) throw new Error('layer not found'); _saveState('Toggle layer visibility'); l.visible = (p.visible === undefined) ? !l.visible : !!p.visible; composite(); _renderLayerPanel(); return l.visible; } },
@@ -12796,6 +12852,10 @@ function _buildEditor(container) {
        endpoint: window.geEditorAgentEndpoint || '/api/editor/agent',
        getSession: () => agentBridgeSession,
        getModel: () => _getSelectedQuickEditModel(),
+        getGenerationModel: () => {
+          const value = document.getElementById('ge-ai-model')?.value || '';
+          return value.includes('::') ? value.slice(value.indexOf('::') + 2) : '';
+        },
        getAgentModel: () => _getSelectedQuickEditAgentModel(),
      });
    } catch (e) { console.error('[ge-editor] agent init failed', e); }
@@ -13895,6 +13955,12 @@ export function openEditor(imageUrl, imageId, presetSize, displayName, draftId)
        return;
      }
      _finishBlank(size.w, size.h);
+    }).catch(error => {
+      console.error('[openEditor] New project failed:', error);
+      closeEditor({ force: true });
+      window.dispatchEvent(new CustomEvent('gallery-editor-setup-cancelled'));
+      uiModule.showError(`Could not create project: ${error?.message || 'Canvas initialization failed'}`);
+      throw error;
    });
  }

@@ -14049,8 +14115,6 @@ export function closeEditor(options = {}) {
  _selectionNudgeTimer = null;
  _selectionNudgeHistorySaved = false;
  _precisionGuides = null;
-  try { _preflight?.destroy(); } catch {}
-  _preflight = null;
  try { _aiSettings?.destroy(); } catch {}
  _aiSettings = null;
  try { delete window.geEditorAiSettings; } catch (_) { window.geEditorAiSettings = null; }
@@ -4,12 +4,14 @@
 // them from the same places, so load order and init sequence are untouched.

 import { byId as el } from './dom.js';
-import { postSettings as _postSettings } from './api.js';
+import { saveImagePreferences as _postSettings } from './imagePreferences.js';
 import { modelCaps } from '../editor/ai-models.js';
 import { sortModelIds } from '../modelSort.js';
+let preferencesListener = null;

 export async function initImageSettings() {
  const modelSel = el('set-imgModelSelect');
+  const editModelSel = el('set-imgEditModelSelect');
  const qualSel = el('set-imgQualitySelect');
  const msg = el('set-imgSettingsMsg');
  const enabledToggle = el('set-imgEnabledToggle');
@@ -18,23 +20,36 @@ export async function initImageSettings() {
    const endpointsRes = await fetch('/api/model-endpoints', { credentials: 'same-origin' });
    const endpoints = await endpointsRes.json();
    const imageModels = new Set();
+    const editModels = new Set();
    (Array.isArray(endpoints) ? endpoints : []).forEach(endpoint => {
      if (!endpoint.is_enabled || !endpoint.online) return;
      (Array.isArray(endpoint.models) ? endpoint.models : []).forEach(modelId => {
        if (modelId && modelCaps(modelId, '', endpoint.model_type).gen) imageModels.add(String(modelId));
+        if (modelId && modelCaps(modelId, '', endpoint.model_type).inpaint) editModels.add(String(modelId));
      });
    });
+    modelSel.length = 1;
    sortModelIds(Array.from(imageModels)).forEach(mid => {
      const opt = document.createElement('option');
      opt.value = mid;
      opt.textContent = mid;
      modelSel.appendChild(opt);
    });
+    if (editModelSel) {
+      editModelSel.length = 1;
+      for (const mid of sortModelIds(Array.from(editModels))) {
+        const option = document.createElement('option');
+        option.value = mid;
+        option.textContent = mid;
+        editModelSel.appendChild(option);
+      }
+    }
  } catch (e) { console.warn('Failed to load models for image settings', e); }
  try {
    const settingsRes = await fetch('/api/auth/settings', { credentials: 'same-origin' });
    const settings = await settingsRes.json();
    if (settings.image_model) modelSel.value = settings.image_model;
+    if (editModelSel) editModelSel.value = settings.image_edit_model || '';
    if (settings.image_quality) qualSel.value = settings.image_quality;
    if (enabledToggle) enabledToggle.checked = settings.image_gen_enabled === true;
  } catch (e) { console.warn('Failed to load settings', e); }
@@ -49,12 +64,19 @@ export async function initImageSettings() {

  async function saveSettings() {
    try {
-      const res = await _postSettings({ image_gen_enabled: enabledToggle ? enabledToggle.checked : false, image_model: modelSel.value, image_quality: qualSel.value });
+      const res = await _postSettings({ image_gen_enabled: enabledToggle ? enabledToggle.checked : false, image_model: modelSel.value, image_edit_model: editModelSel?.value || '', image_quality: qualSel.value });
      if (!res.ok) throw new Error(await res.text().catch(() => `HTTP ${res.status}`));
      msg.textContent = 'Saved'; msg.style.color = 'var(--fg)'; setTimeout(() => { msg.textContent = ''; }, 2000);
    } catch (e) { msg.textContent = e.status === 403 ? 'Admin access is required to change these settings.' : 'Failed to save'; msg.style.color = 'var(--red)'; }
  }
  modelSel.addEventListener('change', saveSettings);
+  editModelSel?.addEventListener('change', saveSettings);
+  if (preferencesListener) window.removeEventListener('image-preferences-changed', preferencesListener);
+  preferencesListener = event => {
+    if ('image_model' in event.detail) modelSel.value = event.detail.image_model || '';
+    if (editModelSel && 'image_edit_model' in event.detail) editModelSel.value = event.detail.image_edit_model || '';
+  };
+  window.addEventListener('image-preferences-changed', preferencesListener);
  qualSel.addEventListener('change', saveSettings);
  if (enabledToggle) enabledToggle.addEventListener('change', function() { syncImgDisabled(); saveSettings(); });
 }
@@ -0,0 +1,26 @@
+import { invalidateSettings } from '../appConfig.js';
+
+export async function readImagePreferences() {
+  const response = await fetch('/api/auth/settings', { credentials: 'same-origin' });
+  if (!response.ok) throw new Error('Could not load image settings');
+  return response.json();
+}
+
+let saveQueue = Promise.resolve();
+export function waitForImagePreferences() { return saveQueue; }
+export function saveImagePreferences(patch) {
+  const save = async () => {
+    const response = await fetch('/api/auth/settings', {
+      method: 'POST', credentials: 'same-origin',
+      headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(patch),
+    });
+    if (!response.ok) throw new Error(response.status === 403
+      ? 'Admin access is required to change image settings.' : 'Could not save image settings');
+    invalidateSettings();
+    window.dispatchEvent(new CustomEvent('image-preferences-changed', { detail: patch }));
+    return response;
+  };
+  const result = saveQueue.then(save);
+  saveQueue = result.catch(() => {});
+  return result;
+}