@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/wire-inpaint-controls.js

@@ -0,0 +1,164 @@
+/**
+ * Inpaint panel controls — the non-AI side-panel UI for the inpaint
+ * tool (the AI Generate/Remove/Outpaint buttons live in
+ * editor/ai-inpaint.js).
+ *
+ *   Pre-gen sliders (Feather + Strength swatch previews):
+ *     #ge-strength-slider     just-updates-the-label-and-swatch
+ *
+ *   Post-gen live edge tuners — alpha-blur + dilate/erode on the most
+ *   recent Inpaint Result layer, rAF-throttled so dragging stays
+ *   smooth on big canvases:
+ *     #ge-feather-slider       calls applyInpaintFeather + composite
+ *     #ge-edgestroke-slider    same
+ *
+ *   Mask controls:
+ *     #ge-mask-vis             toggle red-overlay visibility
+ *     #ge-inpaint-invert       invert the active mask sub-layer
+ *     #ge-inpaint-clear        wipe the active mask
+ *     #ge-inpaint-mode-paint   set persistent paint mode
+ *     #ge-inpaint-mode-erase   set persistent erase mode
+ *
+ *   Mask tint pickers (wired to keep both visually in sync):
+ *     .ge-inpaint-mask-color   (inpaint section)
+ *     #ge-topbar-mask-color    (topbar swatch — HSV picker attached)
+ *
+ * @param {{
+ *   composite:                () => void,
+ *   applyInpaintFeather:      (layer: object, featherPx: number, edgeShiftPx: number) => void,
+ *   syncToolClearIndicators:  () => void,
+ *   attachColorPicker:        (el: HTMLInputElement) => void,
+ *   uiModule:                 object,
+ * }} deps
+ */
+import { state } from './state.js';
+
+const EYE_OPEN_SM = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+const EYE_OFF_SM  = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><line x1="8" y1="16" x2="16" y2="8"/><line x1="8" y1="8" x2="16" y2="16"/></svg>';
+
+export function wireInpaintControls({
+  composite, applyInpaintFeather, syncToolClearIndicators,
+  attachColorPicker, uiModule,
+}) {
+  // ── Feather + Strength preview swatches ──
+  const featherPrev = document.getElementById('ge-feather-preview');
+  const strengthPrev = document.getElementById('ge-strength-preview');
+  function syncFeatherPreview(v) {
+    if (!featherPrev) return;
+    const inner = Math.max(0, 50 - v * 1.25);
+    featherPrev.style.background = `radial-gradient(circle, var(--fg) 0%, var(--fg) ${inner}%, transparent 75%)`;
+  }
+  function syncStrengthPreview(v) {
+    if (!strengthPrev) return;
+    strengthPrev.style.opacity = (v / 100).toFixed(2);
+  }
+
+  // ── Post-inpaint live edge tuner ──
+  // Alpha-blur (Feather) + dilate/erode (Edge Stroke) on the last
+  // Inpaint Result layer. rAF-throttled so dragging stays smooth.
+  let featherRafPending = false;
+  function scheduleInpaintEdgeRefresh() {
+    if (featherRafPending) return;
+    featherRafPending = true;
+    requestAnimationFrame(() => {
+      featherRafPending = false;
+      const layer = state.layers.find(l => l.id === state.lastInpaintLayerId);
+      if (!layer || !layer.inpaintSource) return;
+      const feather = parseInt(document.getElementById('ge-feather-slider')?.value || '0', 10);
+      const edge = parseInt(document.getElementById('ge-edgestroke-slider')?.value || '0', 10);
+      applyInpaintFeather(layer, feather, edge);
+      composite();
+    });
+  }
+  document.getElementById('ge-feather-slider')?.addEventListener('input', (e) => {
+    const v = parseInt(e.target.value, 10);
+    document.getElementById('ge-feather-label').textContent = v + 'px';
+    syncFeatherPreview(v);
+    scheduleInpaintEdgeRefresh();
+  });
+  document.getElementById('ge-edgestroke-slider')?.addEventListener('input', (e) => {
+    const v = parseInt(e.target.value, 10);
+    const label = document.getElementById('ge-edgestroke-label');
+    if (label) label.textContent = (v > 0 ? '+' : '') + v + 'px';
+    const prev = document.getElementById('ge-edgestroke-preview');
+    if (prev) {
+      // Visualise direction: dilate (+) → green, erode (−) → red.
+      const dir = v === 0 ? 'transparent' : (v > 0 ? 'rgba(120,200,120,0.5)' : 'rgba(200,120,120,0.5)');
+      prev.style.background = dir;
+      prev.style.opacity = Math.min(1, Math.abs(v) / 80).toFixed(2);
+    }
+    scheduleInpaintEdgeRefresh();
+  });
+  document.getElementById('ge-strength-slider')?.addEventListener('input', (e) => {
+    document.getElementById('ge-strength-label').textContent = (e.target.value / 100).toFixed(2);
+    syncStrengthPreview(parseInt(e.target.value, 10));
+  });
+  syncFeatherPreview(0);
+  syncStrengthPreview(75);
+
+  // ── Mask vis / invert / clear ──
+  document.getElementById('ge-mask-vis')?.addEventListener('click', () => {
+    state.maskVisible = !state.maskVisible;
+    const btn = document.getElementById('ge-mask-vis');
+    if (!btn) { composite(); return; }
+    btn.innerHTML = `${state.maskVisible ? EYE_OPEN_SM : EYE_OFF_SM}<span id="ge-mask-vis-label">${state.maskVisible ? 'Hide' : 'Show'}</span>`;
+    btn.title = state.maskVisible ? 'Hide mask' : 'Show mask';
+    btn.classList.toggle('visible', state.maskVisible);
+    composite();
+  });
+  document.getElementById('ge-inpaint-invert')?.addEventListener('click', () => {
+    if (!state.maskCtx || !state.maskCanvas) return;
+    const imgData = state.maskCtx.getImageData(0, 0, state.maskCanvas.width, state.maskCanvas.height);
+    const d = imgData.data;
+    for (let i = 0; i < d.length; i += 4) {
+      const alpha = d[i + 3];
+      if (alpha > 0) {
+        d[i] = 0; d[i+1] = 0; d[i+2] = 0; d[i+3] = 0;
+      } else {
+        d[i] = 255; d[i+1] = 255; d[i+2] = 255; d[i+3] = 255;
+      }
+    }
+    state.maskCtx.putImageData(imgData, 0, 0);
+    composite();
+    syncToolClearIndicators();
+    uiModule.showToast('Mask inverted');
+  });
+  document.getElementById('ge-inpaint-clear')?.addEventListener('click', () => {
+    if (state.maskCtx) { state.maskCtx.clearRect(0, 0, state.maskCanvas.width, state.maskCanvas.height); composite(); }
+    syncToolClearIndicators();
+  });
+
+  // ── Paint / Erase segmented toggle ──
+  function setInpaintMode(eraseMode) {
+    state.inpaintEraseMode = !!eraseMode;
+    const paintBtn = document.getElementById('ge-inpaint-mode-paint');
+    const eraseBtn = document.getElementById('ge-inpaint-mode-erase');
+    if (paintBtn) paintBtn.classList.toggle('active', !state.inpaintEraseMode);
+    if (eraseBtn) eraseBtn.classList.toggle('active', state.inpaintEraseMode);
+  }
+  document.getElementById('ge-inpaint-mode-paint')?.addEventListener('click', () => setInpaintMode(false));
+  document.getElementById('ge-inpaint-mode-erase')?.addEventListener('click', () => setInpaintMode(true));
+
+  // ── Mask color picker ──
+  // Updates state.maskTintColor live so the user can pick a colour
+  // that contrasts with their photo. Wire both the topbar picker AND
+  // the inpaint-section picker so changing one syncs the other.
+  function applyMaskTintFromHex(hex) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    state.maskTintColor = `rgba(${r}, ${g}, ${b}, 1)`;
+    const inpaintPicker = document.querySelector('.ge-inpaint-mask-color');
+    const topbarPicker = document.getElementById('ge-topbar-mask-color');
+    if (inpaintPicker && inpaintPicker.value !== hex) inpaintPicker.value = hex;
+    if (topbarPicker && topbarPicker.value !== hex) topbarPicker.value = hex;
+    composite();
+  }
+  document.querySelector('.ge-inpaint-mask-color')?.addEventListener('input', (e) => applyMaskTintFromHex(e.target.value));
+  document.getElementById('ge-topbar-mask-color')?.addEventListener('input', (e) => applyMaskTintFromHex(e.target.value));
+  // Use the in-house HSV picker for the topbar swatch.
+  const topbarMaskColor = document.getElementById('ge-topbar-mask-color');
+  if (topbarMaskColor) {
+    try { attachColorPicker(topbarMaskColor); topbarMaskColor.value = topbarMaskColor.value; } catch {}
+  }
+}

package/dist/web/static/js/editor/wire-merge-buttons.js

@@ -0,0 +1,103 @@
+/**
+ * Layer merge / flatten buttons in the layer-panel footer:
+ *
+ *   #ge-flatten     Flatten Copy — merge every visible layer into a
+ *                   new "Flattened" layer, keep originals.
+ *   #ge-merge-all   Merge All — flatten every VISIBLE layer into the
+ *                   lowest visible one. Hidden layers dropped. Base
+ *                   = lowest visible (not bottom of stack) so a
+ *                   hidden base can't absorb the visible stack into
+ *                   an invisible result.
+ *   #ge-merge-down  Merge active layer into the one beneath it.
+ *
+ * @param {{
+ *   saveState:        (label?: string) => void,
+ *   createLayer:      (name, w, h) => object,
+ *   renderLayerPanel: () => void,
+ *   composite:        () => void,
+ *   uiModule:         object,
+ * }} deps
+ */
+import { state } from './state.js';
+
+export function mergeLayerDownAtIndex(idx) {
+  if (idx < 1 || idx >= state.layers.length) return null;
+  const upper = state.layers[idx];
+  const lower = state.layers[idx - 1];
+  const upperOff = state.layerOffsets.get(upper.id) || { x: 0, y: 0 };
+  const lowerOff = state.layerOffsets.get(lower.id) || { x: 0, y: 0 };
+  lower.ctx.save();
+  lower.ctx.globalAlpha = upper.opacity;
+  lower.ctx.drawImage(
+    upper.canvas,
+    upperOff.x - lowerOff.x,
+    upperOff.y - lowerOff.y,
+  );
+  lower.ctx.restore();
+  state.layers.splice(idx, 1);
+  state.layerOffsets.delete(upper.id);
+  state.activeLayerId = lower.id;
+  return lower;
+}
+
+export function wireMergeButtons({ saveState, createLayer, renderLayerPanel, composite, uiModule }) {
+  // Flatten Copy.
+  document.getElementById('ge-flatten')?.addEventListener('click', () => {
+    if (state.layers.length < 2) return;
+    saveState('Flatten copy');
+    const merged = createLayer('Flattened', state.imgWidth, state.imgHeight);
+    const ctx = merged.ctx;
+    for (const l of state.layers) {
+      if (!l.visible) continue;
+      const off = state.layerOffsets.get(l.id) || { x: 0, y: 0 };
+      ctx.globalAlpha = l.opacity;
+      ctx.drawImage(l.canvas, off.x, off.y);
+      ctx.globalAlpha = 1;
+    }
+    state.layers.push(merged);
+    state.activeLayerId = merged.id;
+    renderLayerPanel();
+    composite();
+    uiModule.showToast('Flattened copy created');
+  });
+
+  // Merge All — drop hidden layers; base = lowest visible.
+  document.getElementById('ge-merge-all')?.addEventListener('click', () => {
+    const visibleLayers = state.layers.filter(l => l.visible);
+    if (visibleLayers.length < 2) {
+      if (uiModule) uiModule.showToast('Need at least two visible layers to merge');
+      return;
+    }
+    saveState('Merge all');
+    const base = visibleLayers[0];
+    const baseCtx = base.ctx;
+    for (let i = 1; i < visibleLayers.length; i++) {
+      const l = visibleLayers[i];
+      const off = state.layerOffsets.get(l.id) || { x: 0, y: 0 };
+      baseCtx.globalAlpha = l.opacity;
+      baseCtx.drawImage(l.canvas, off.x, off.y);
+      baseCtx.globalAlpha = 1;
+    }
+    // Free offset entries for the discarded layers; keep base.
+    for (const l of state.layers) {
+      if (l === base) continue;
+      state.layerOffsets.delete(l.id);
+    }
+    state.layers = [base];
+    state.activeLayerId = base.id;
+    renderLayerPanel();
+    composite();
+    uiModule.showToast('Visible layers merged');
+  });
+
+  // Merge Down.
+  document.getElementById('ge-merge-down')?.addEventListener('click', () => {
+    const idx = state.layers.findIndex(l => l.id === state.activeLayerId);
+    if (idx < 1) return; // can't merge the bottom layer
+    saveState('Merge down');
+    mergeLayerDownAtIndex(idx);
+    renderLayerPanel();
+    composite();
+    uiModule.showToast('Layer merged down');
+  });
+}

package/dist/web/static/js/editor/wire-selection-controls.js

@@ -0,0 +1,170 @@
+/**
+ * Lasso + Magic Wand panel controls — sliders, mode toggles, and the
+ * panel action buttons (Invert / Clear / Delete / Copy / To Mask /
+ * Bg Remove). The actual selection algorithms live in their tool
+ * modules (editor/tools/lasso.js, editor/tools/wand.js); this file
+ * just wires the side-panel UI to them.
+ *
+ *   Lasso section:
+ *     #ge-lasso-feather       slider, updates label + preview, recomposites
+ *     #ge-lasso-grow          slider, updates label + recomposites
+ *     #ge-lasso-invert        → invertSelection
+ *     #ge-lasso-delete        → lassoDeleteSelection
+ *     #ge-lasso-copy          → lassoCopyToLayer
+ *     #ge-lasso-mask          → lassoToMask
+ *
+ *   Wand section:
+ *     #ge-wand-feather        slider, updates label + recomposites
+ *     #ge-wand-grow           slider, updates label + recomposites
+ *     #ge-wand-tolerance      slider, updates future wand-click tolerance
+ *     #ge-wand-live           opt-in rAF-coalesced live retune while dragging
+ *     .ge-wand-mode-btn       segmented toggle (New / Add / Subtract)
+ *     #ge-wand-vis            toggle the translucent red overlay
+ *     #ge-wand-clear / -invert / -delete / -copy / -mask / -rembg
+ *
+ * @param {{
+ *   composite:               () => void,
+ *   invertSelection:         () => boolean,
+ *   lassoDeleteSelection:    () => void,
+ *   lassoCopyToLayer:        () => void,
+ *   lassoToMask:             () => void,
+ *   runMagicWand:            (x: number, y: number, mode: string, opts?: object) => void,
+ *   wandClear:               () => void,
+ *   wandDeleteSelection:     () => void,
+ *   wandCopyToNewLayer:      () => void,
+ *   wandToMask:              () => void,
+ *   buildSelectionHintMask:  () => string | null,
+ *   applyImageTool:          (endpoint, payload, name, btn, opts?) => Promise<void>,
+ *   uiModule:                object,
+ * }} deps
+ */
+import { state } from './state.js';
+
+const EYE_OPEN = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
+const EYE_OFF  = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><line x1="8" y1="16" x2="16" y2="8"/><line x1="8" y1="8" x2="16" y2="16"/></svg>';
+
+export function wireSelectionControls({
+  composite,
+  invertSelection,
+  lassoDeleteSelection, lassoCopyToLayer, lassoToMask,
+  runMagicWand,
+  wandClear, wandDeleteSelection, wandCopyToNewLayer, wandToMask,
+  buildSelectionHintMask, applyImageTool,
+  uiModule,
+}) {
+  // ── Lasso section ──
+  const lassoFPrev = document.getElementById('ge-lasso-feather-preview');
+  function syncLassoFeather(v) {
+    if (!lassoFPrev) return;
+    const inner = Math.max(0, 50 - v * 1.0);
+    lassoFPrev.style.background = `radial-gradient(circle, var(--fg) 0%, var(--fg) ${inner}%, transparent 75%)`;
+  }
+  syncLassoFeather(0);
+  document.getElementById('ge-lasso-feather')?.addEventListener('input', (e) => {
+    document.getElementById('ge-lasso-feather-label').textContent = e.target.value + 'px';
+    syncLassoFeather(parseInt(e.target.value, 10));
+    composite();
+  });
+  document.getElementById('ge-lasso-grow')?.addEventListener('input', (e) => {
+    document.getElementById('ge-lasso-grow-label').textContent = e.target.value + 'px';
+    composite();
+  });
+  document.getElementById('ge-lasso-delete')?.addEventListener('click', () => {
+    if (state.lassoPoints.length >= 3 && !state.lassoActive) lassoDeleteSelection();
+    else if (state.wandMask) wandDeleteSelection();
+  });
+  document.getElementById('ge-lasso-copy')?.addEventListener('click', () => {
+    if (state.lassoPoints.length >= 3 && !state.lassoActive) lassoCopyToLayer();
+    else if (state.wandMask) wandCopyToNewLayer();
+  });
+  document.getElementById('ge-lasso-mask')?.addEventListener('click', () => {
+    if (state.lassoPoints.length >= 3 && !state.lassoActive) lassoToMask();
+    else if (state.wandMask) wandToMask();
+  });
+  document.getElementById('ge-lasso-invert')?.addEventListener('click', invertSelection);
+
+  // ── Wand section ──
+  document.getElementById('ge-wand-feather')?.addEventListener('input', (e) => {
+    const v = parseInt(e.target.value, 10) || 0;
+    document.getElementById('ge-wand-feather-label').textContent = v + 'px';
+    const prev = document.getElementById('ge-wand-feather-preview');
+    if (prev) prev.style.setProperty('--feather-blur', Math.min(v / 14, 8) + 'px');
+    composite();
+  });
+  document.getElementById('ge-wand-grow')?.addEventListener('input', (e) => {
+    document.getElementById('ge-wand-grow-label').textContent = e.target.value + 'px';
+    composite();
+  });
+
+  // Tolerance slider fires `input` rapidly — coalesce to one wand run
+  // per frame with rAF. Label updates synchronously so the number
+  // tracks the cursor even when the flood-fill runs at ~60fps.
+  let wandRetuneRaf = null;
+  const retuneWand = () => {
+    if (!state.wandLastSeed || !state.wandMask) return;
+    if (wandRetuneRaf) return;
+    wandRetuneRaf = requestAnimationFrame(() => {
+      wandRetuneRaf = null;
+      runMagicWand(state.wandLastSeed.x, state.wandLastSeed.y, 'replace', { retune: true });
+    });
+  };
+  const liveBtn = document.getElementById('ge-wand-live');
+  liveBtn?.addEventListener('click', () => {
+    state.wandLiveRetune = !state.wandLiveRetune;
+    liveBtn.classList.toggle('active', state.wandLiveRetune);
+    liveBtn.setAttribute('aria-pressed', state.wandLiveRetune ? 'true' : 'false');
+    if (state.wandLiveRetune) retuneWand();
+  });
+  document.getElementById('ge-wand-tolerance')?.addEventListener('input', (e) => {
+    state.wandTolerance = parseInt(e.target.value, 10);
+    const lbl = document.getElementById('ge-wand-tol-label');
+    if (lbl) lbl.textContent = state.wandTolerance;
+    const wp = document.getElementById('ge-wand-tol-preview');
+    if (wp) wp.style.opacity = (state.wandTolerance / 100).toFixed(2);
+    if (state.wandLiveRetune) retuneWand();
+  });
+
+  // Wand mode segmented toggle (New / Add / Subtract).
+  document.querySelectorAll('.ge-wand-mode-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const mode = btn.dataset.wandMode;
+      if (!mode) return;
+      state.wandMode = mode;
+      document.querySelectorAll('.ge-wand-mode-btn').forEach(b => {
+        b.classList.toggle('active', b.dataset.wandMode === mode);
+      });
+    });
+  });
+
+  // Toggle the translucent red overlay for the wand selection.
+  document.getElementById('ge-wand-vis')?.addEventListener('click', () => {
+    state.wandMaskVisible = !state.wandMaskVisible;
+    const btn = document.getElementById('ge-wand-vis');
+    if (btn) {
+      btn.innerHTML = state.wandMaskVisible ? EYE_OPEN : EYE_OFF;
+      btn.title = state.wandMaskVisible ? 'Hide selection overlay' : 'Show selection overlay';
+      btn.classList.toggle('visible', state.wandMaskVisible);
+    }
+    composite();
+  });
+
+  document.getElementById('ge-wand-clear')?.addEventListener('click', wandClear);
+  document.getElementById('ge-wand-invert')?.addEventListener('click', invertSelection);
+  document.getElementById('ge-wand-delete')?.addEventListener('click', wandDeleteSelection);
+  document.getElementById('ge-wand-copy')?.addEventListener('click', wandCopyToNewLayer);
+  document.getElementById('ge-wand-mask')?.addEventListener('click', wandToMask);
+  // Selection-constrained Bg Remove — reuses the same path the toolbar
+  // Bg Remove button does. buildSelectionHintMask picks the active
+  // wand/lasso selection, so this just kicks off the existing flow.
+  document.getElementById('ge-wand-rembg')?.addEventListener('click', async () => {
+    const btn = document.getElementById('ge-wand-rembg');
+    const hint = buildSelectionHintMask();
+    if (!hint) { if (uiModule) uiModule.showToast('Click to make a wand selection first'); return; }
+    await applyImageTool('/api/image/remove-bg', { hint_mask: hint }, 'BG Removed', btn);
+    wandClear();
+  });
+
+  // Live tolerance preview (just opacity-tracking like sharpen).
+  const wandTolPrev = document.getElementById('ge-wand-tol-preview');
+  if (wandTolPrev) wandTolPrev.style.opacity = (state.wandTolerance / 100).toFixed(2);
+}

package/dist/web/static/js/editor/wire-topbar-menus.js

@@ -0,0 +1,174 @@
+/**
+ * Topbar dropdown menus — Image, Filter, and Resize.
+ *
+ *   Image menu (#ge-image-menu-btn → #ge-image-menu):
+ *     resize, selection (edge feather/delete), fill, rotate 90/180,
+ *     flip horizontal/vertical.
+ *
+ *   Filter menu (#ge-filter-menu-btn → #ge-filter-menu):
+ *     Blur sub-menu — Gaussian, Zoom.
+ *
+ *   Resize menu (#ge-resize-menu-btn → #ge-resize-menu):
+ *     preset W×H items (data-resize-w/-h) apply immediately;
+ *     [data-resize-custom] opens a themed prompt for arbitrary sizes.
+ *
+ * Returns the resize helpers so the keyboard-shortcuts module can
+ * call them too (Ctrl+Shift+T opens the custom prompt).
+ *
+ * @param {{
+ *   closeOtherTopbarMenus: (keepId: string) => void,
+ *   registerDocClickAway:  (handler: (e: Event) => void) => void,
+ *   saveState:             (label?: string) => void,
+ *   composite:             () => void,
+ *   fitZoom:               () => void,
+ *   promptCanvasSize:      (opts: object) => Promise<{w, h} | null>,
+ *   doFillSelection:       () => void,
+ *   rotateAllLayers:       (deg: number) => void,
+ *   flipAllLayers:         (axis: 'h' | 'v') => void,
+ *   applyGaussianBlur:     () => void,
+ *   applyZoomBlur:         () => void,
+ *   uiModule:              object,
+ * }} deps
+ *
+ * @returns {{
+ *   applyResize:         (newW: number, newH: number) => void,
+ *   resizeCustomPrompt:  () => Promise<void>,
+ * }}
+ */
+import { state } from './state.js';
+
+export function wireTopbarMenus({
+  closeOtherTopbarMenus, registerDocClickAway,
+  saveState, composite, fitZoom,
+  promptCanvasSize, doFillSelection,
+  rotateAllLayers, flipAllLayers,
+  applyGaussianBlur, applyZoomBlur,
+  uiModule,
+}) {
+  // ── Resize canvas ──
+  // Extracted so both the popup presets and the Ctrl+Shift+T shortcut
+  // can call it.
+  function applyResize(newW, newH) {
+    if (!newW || !newH || newW < 1 || newH < 1) {
+      uiModule.showToast('Invalid size');
+      return;
+    }
+    saveState('Resize canvas');
+    // Only resize the main canvas — layers keep their original size.
+    // Content outside the new bounds is clipped during composite, not
+    // destroyed.
+    if (state.maskCanvas) {
+      const tmpMask = document.createElement('canvas');
+      tmpMask.width = state.maskCanvas.width;
+      tmpMask.height = state.maskCanvas.height;
+      tmpMask.getContext('2d').drawImage(state.maskCanvas, 0, 0);
+      state.maskCanvas.width = newW;
+      state.maskCanvas.height = newH;
+      state.maskCtx.drawImage(tmpMask, 0, 0);
+    }
+    state.imgWidth = newW;
+    state.imgHeight = newH;
+    state.mainCanvas.width = newW;
+    state.mainCanvas.height = newH;
+    const sizeLabel = document.getElementById('ge-canvas-size');
+    if (sizeLabel) sizeLabel.textContent = `${newW}×${newH}`;
+    fitZoom();
+    composite();
+    uiModule.showToast(`Canvas resized to ${newW}×${newH}`);
+  }
+
+  async function resizeCustomPrompt() {
+    const result = await promptCanvasSize({
+      title: 'Canvas size',
+      okLabel: 'Apply',
+      initialW: state.imgWidth,
+      initialH: state.imgHeight,
+    });
+    if (!result) return;
+    applyResize(result.w, result.h);
+  }
+
+  // ── Image menu ──
+  {
+    const btn = document.getElementById('ge-image-menu-btn');
+    const menu = document.getElementById('ge-image-menu');
+    if (btn && menu) {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const willOpen = menu.hidden;
+        if (willOpen) closeOtherTopbarMenus('ge-image-menu');
+        menu.hidden = !menu.hidden;
+      });
+      menu.addEventListener('click', (e) => {
+        const item = e.target.closest('[data-image-action]');
+        if (!item || item.disabled) return;
+        menu.hidden = true;
+        const action = item.dataset.imageAction;
+        if (action === 'resize') resizeCustomPrompt();
+        else if (action === 'selection') document.getElementById('ge-edge-menu-btn')?.click();
+        else if (action === 'fill') doFillSelection();
+        else if (action === 'rotate-90') rotateAllLayers(90);
+        else if (action === 'rotate-180') rotateAllLayers(180);
+        else if (action === 'flip-h') flipAllLayers('h');
+        else if (action === 'flip-v') flipAllLayers('v');
+      });
+      registerDocClickAway((e) => {
+        if (!menu.hidden && !menu.contains(e.target) && e.target !== btn) menu.hidden = true;
+      });
+    }
+  }
+
+  // ── Filter menu (Blur sub-menu — Gaussian / Zoom) ──
+  {
+    const btn = document.getElementById('ge-filter-menu-btn');
+    const menu = document.getElementById('ge-filter-menu');
+    if (btn && menu) {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const willOpen = menu.hidden;
+        if (willOpen) closeOtherTopbarMenus('ge-filter-menu');
+        menu.hidden = !menu.hidden;
+      });
+      menu.addEventListener('click', (e) => {
+        const item = e.target.closest('[data-filter-action]');
+        if (!item) return;
+        menu.hidden = true;
+        const action = item.dataset.filterAction;
+        if (action === 'blur-gaussian') applyGaussianBlur();
+        else if (action === 'blur-zoom') applyZoomBlur();
+      });
+      registerDocClickAway((e) => {
+        if (!menu.hidden && !menu.contains(e.target) && e.target !== btn) menu.hidden = true;
+      });
+    }
+  }
+
+  // ── Resize popup (preset items + Custom… → resizeCustomPrompt) ──
+  {
+    const btn = document.getElementById('ge-resize-menu-btn');
+    const menu = document.getElementById('ge-resize-menu');
+    if (btn && menu) {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const willOpen = menu.hidden;
+        if (willOpen) closeOtherTopbarMenus('ge-resize-menu');
+        menu.hidden = !menu.hidden;
+      });
+      menu.querySelectorAll('[data-resize-w]').forEach(item => {
+        item.addEventListener('click', () => {
+          menu.hidden = true;
+          applyResize(parseInt(item.dataset.resizeW, 10), parseInt(item.dataset.resizeH, 10));
+        });
+      });
+      menu.querySelector('[data-resize-custom]')?.addEventListener('click', () => {
+        menu.hidden = true;
+        resizeCustomPrompt();
+      });
+      registerDocClickAway((e) => {
+        if (!menu.hidden && !menu.contains(e.target) && e.target !== btn) menu.hidden = true;
+      });
+    }
+  }
+
+  return { applyResize, resizeCustomPrompt };
+}

package/dist/web/static/js/editor/wire-topbar-overflow.js

@@ -0,0 +1,49 @@
+/**
+ * Topbar overflow handler — keeps lightweight labels updated and hides
+ * only low-priority AI model controls when the editor window gets narrow.
+ *
+ * Plus the small canvas-size display label updater (since it sits in
+ * the topbar too).
+ *
+ * Import and Canvas stay as real topbar buttons; there is intentionally
+ * no "More" overflow menu here.
+ *
+ * @param {{
+ *   container:            HTMLElement,
+ *   registerDocClickAway: (handler: (e: Event) => void) => void,
+ * }} deps
+ */
+import { state } from './state.js';
+
+export function wireTopbarOverflow({ container }) {
+  // Canvas-size badge updater (kept simple — it lives in the topbar).
+  const sizeLabel = document.getElementById('ge-canvas-size');
+  function updateSizeLabel() {
+    if (sizeLabel) sizeLabel.textContent = `${state.imgWidth}×${state.imgHeight}`;
+  }
+  updateSizeLabel();
+
+  const topbar = container.querySelector('.ge-topbar');
+  // The Gen control + its "Gen" label span — collapse as a group when
+  // narrow. The Inpaint model selector moved into the side panel.
+  const aiGroup = [
+    container.querySelector('#ge-ai-model'),
+    ...container.querySelectorAll('.ge-topbar span[style*="font-size:9px"]'),
+  ].filter(Boolean);
+
+  function syncOverflow() {
+    if (!topbar) return;
+    aiGroup.forEach(el => { el.style.display = ''; });
+    if (topbar.scrollWidth > topbar.clientWidth) {
+      // Hide AI group first — bulky and least essential at narrow widths.
+      aiGroup.forEach(el => { el.style.display = 'none'; });
+    }
+  }
+
+  if (topbar && window.ResizeObserver) {
+    const ro = new ResizeObserver(() => syncOverflow());
+    ro.observe(topbar);
+  }
+  // Initial pass after layout settles.
+  requestAnimationFrame(syncOverflow);
+}