@fraziym/axoniz 0.1.0

package/dist/web/static/js/editor/tools/transform-session.js

@@ -0,0 +1,381 @@
+/**
+ * Transform-tool session lifecycle + floating popup wiring.
+ *
+ *   _startTransform        snapshot the active layer + open popup
+ *   _openTransformPopup    build the W/H/rotation popup, wire inputs
+ *   _wireTransformDrag     header drag, mobile + desktop position handling
+ *   _reapplyTransform      live preview re-render from the snapshot
+ *   _confirmTransform      commit + clear session state
+ *   _cancelTransform       restore via undo() + clear session state
+ *
+ * Handle-drag interactions on the CANVAS (corner / rotation grip) live
+ * in `editor/tools/transform-drag.js` — those mutate the same staged
+ * `state.transformPending*` fields that the popup inputs do, so both
+ * surfaces stay in sync via `_reapplyTransform()`.
+ *
+ * @param {{
+ *   activeLayer:           () => object | null,
+ *   saveState:             (label?: string) => void,
+ *   composite:             () => void,
+ *   fitZoom:               () => void,
+ *   drawTransformHandles:  () => void,
+ *   showCanvasLoading:     (label: string) => void,
+ *   hideCanvasLoading:     () => void,
+ *   undo:                  () => void,
+ *   uiModule:              object | null,
+ * }} deps
+ *
+ * @returns {{
+ *   startTransform, openTransformPopup, closeTransformPopup,
+ *   reapplyTransform, confirmTransform, cancelTransform,
+ * }}
+ */
+import { state } from '../state.js';
+import {
+  transformPopupHTML,
+  attachSpinRepeat,
+} from '../build/transform-popup.js';
+
+export function createTransformSession({
+  activeLayer, saveState, composite, fitZoom, drawTransformHandles,
+  showCanvasLoading, hideCanvasLoading, undo, uiModule,
+}) {
+  function startTransform() {
+    const layer = activeLayer();
+    if (!layer || layer.locked) { uiModule.showToast('Select an unlocked layer'); return; }
+    if (state.transformActive) { cancelTransform(); return; } // toggle off
+    state.transformActive = true;
+    state.transformLayer = layer;
+    state.transformOrigW = layer.canvas.width;
+    state.transformOrigH = layer.canvas.height;
+    state.transformPendingW = state.transformOrigW;
+    state.transformPendingH = state.transformOrigH;
+    state.transformPendingRot = 0;
+    state.transformPendingFlipH = false;
+    state.transformPendingFlipV = false;
+    // Snapshot the layer so live preview can re-derive from the
+    // original pixels on every keystroke instead of stacking
+    // destructive edits.
+    state.transformOrigCanvas = document.createElement('canvas');
+    state.transformOrigCanvas.width = state.transformOrigW;
+    state.transformOrigCanvas.height = state.transformOrigH;
+    state.transformOrigCanvas.getContext('2d').drawImage(layer.canvas, 0, 0);
+    state.transformOrigOffset = { ...(state.layerOffsets.get(layer.id) || { x: 0, y: 0 }) };
+    saveState();
+    // Fit canvas to viewport so the corner handles are visible —
+    // without this, a layer larger than the viewport leaves the grab
+    // markers off-screen.
+    try { fitZoom(); } catch {}
+    composite();
+    drawTransformHandles();
+    openTransformPopup();
+  }
+
+  function closeTransformPopup() {
+    if (state.transformPopup) {
+      try { state.transformPopup.remove(); } catch {}
+      state.transformPopup = null;
+    }
+  }
+
+  // Floating Transform popup — horizontal layout, draggable via its
+  // header, anchored over the right panel (layers area) by default
+  // so it doesn't cover the canvas. Lets the user type exact W/H/Rot
+  // and flip via negative values.
+  function openTransformPopup() {
+    closeTransformPopup();
+    if (!state.container) return;
+    const pop = document.createElement('div');
+    pop.className = 'ge-transform-popup';
+    pop.innerHTML = transformPopupHTML();
+    state.container.appendChild(pop);
+    state.transformPopup = pop;
+    wireTransformDrag(pop);
+    const wInput = pop.querySelector('#ge-transform-w');
+    const hInput = pop.querySelector('#ge-transform-h');
+    const rotInput = pop.querySelector('#ge-transform-rot');
+    const aspectBtn = pop.querySelector('#ge-transform-aspect');
+    wInput.value = String(state.transformOrigW);
+    hInput.value = String(state.transformOrigH);
+    rotInput.value = '0';
+    aspectBtn.classList.toggle('active', state.transformAspectLock);
+    aspectBtn.setAttribute('aria-pressed', state.transformAspectLock ? 'true' : 'false');
+
+    // Aspect-lock follower model: while the lock is engaged, ONE
+    // field is the "driver" and the other is read-only + dimmed.
+    // Driver = whichever field the user last typed in. Toggling the
+    // chain releases the follower.
+    let driver = null;
+    const applyAspectVisuals = () => {
+      if (!state.transformAspectLock || !driver) {
+        wInput.readOnly = false;
+        hInput.readOnly = false;
+        wInput.classList.remove('ge-transform-input-locked');
+        hInput.classList.remove('ge-transform-input-locked');
+        return;
+      }
+      const followerW = driver === 'h';
+      const followerH = driver === 'w';
+      wInput.readOnly = followerW;
+      hInput.readOnly = followerH;
+      wInput.classList.toggle('ge-transform-input-locked', followerW);
+      hInput.classList.toggle('ge-transform-input-locked', followerH);
+    };
+    const refresh = () => {
+      let w = parseInt(wInput.value, 10);
+      let h = parseInt(hInput.value, 10);
+      const rot = parseInt(rotInput.value, 10) || 0;
+      state.transformPendingFlipH = w < 0;
+      state.transformPendingFlipV = h < 0;
+      w = Math.abs(w || state.transformOrigW);
+      h = Math.abs(h || state.transformOrigH);
+      state.transformPendingW = Math.max(1, w);
+      state.transformPendingH = Math.max(1, h);
+      state.transformPendingRot = rot;
+      reapplyTransform();
+    };
+    wInput.addEventListener('input', () => {
+      if (state.transformAspectLock) {
+        driver = 'w';
+        const w = parseInt(wInput.value, 10);
+        if (!Number.isNaN(w) && state.transformOrigW > 0) {
+          const sign = (parseInt(hInput.value, 10) || 1) < 0 ? -1 : 1;
+          const newH = Math.round((Math.abs(w) / state.transformOrigW) * state.transformOrigH) * sign;
+          hInput.value = String(newH);
+        }
+        applyAspectVisuals();
+      }
+      refresh();
+    });
+    hInput.addEventListener('input', () => {
+      if (state.transformAspectLock) {
+        driver = 'h';
+        const h = parseInt(hInput.value, 10);
+        if (!Number.isNaN(h) && state.transformOrigH > 0) {
+          const sign = (parseInt(wInput.value, 10) || 1) < 0 ? -1 : 1;
+          const newW = Math.round((Math.abs(h) / state.transformOrigH) * state.transformOrigW) * sign;
+          wInput.value = String(newW);
+        }
+        applyAspectVisuals();
+      }
+      refresh();
+    });
+    rotInput.addEventListener('input', refresh);
+    aspectBtn.addEventListener('click', () => {
+      state.transformAspectLock = !state.transformAspectLock;
+      aspectBtn.classList.toggle('active', state.transformAspectLock);
+      aspectBtn.setAttribute('aria-pressed', state.transformAspectLock ? 'true' : 'false');
+      // Reset follower the moment the user breaks the lock so both
+      // fields go editable; re-engaging means "next type sets the driver".
+      driver = null;
+      applyAspectVisuals();
+    });
+    pop.querySelector('#ge-transform-apply').addEventListener('click', () => confirmTransform());
+    pop.querySelector('#ge-transform-cancel').addEventListener('click', () => cancelTransform());
+    pop.querySelector('#ge-transform-cancel-btn')?.addEventListener('click', () => cancelTransform());
+    // Minimise — collapses the body so only the header is visible.
+    pop.querySelector('#ge-transform-min')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      pop.classList.toggle('ge-transform-popup-minimised');
+    });
+    // Quick actions: flip W/H via sign so the reapply pipeline picks
+    // up the new orientation. Rotate-90 nudges rotation ±90°.
+    pop.querySelector('#ge-transform-flip-h')?.addEventListener('click', () => {
+      const wIn = pop.querySelector('#ge-transform-w');
+      const cur = parseInt(wIn.value, 10) || state.transformOrigW;
+      wIn.value = String(-cur);
+      wIn.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    pop.querySelector('#ge-transform-flip-v')?.addEventListener('click', () => {
+      const hIn = pop.querySelector('#ge-transform-h');
+      const cur = parseInt(hIn.value, 10) || state.transformOrigH;
+      hIn.value = String(-cur);
+      hIn.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    pop.querySelector('#ge-transform-rot-90')?.addEventListener('click', (e) => {
+      const rIn = pop.querySelector('#ge-transform-rot');
+      const cur = parseInt(rIn.value, 10) || 0;
+      const delta = e.shiftKey ? -90 : 90;
+      let next = cur + delta;
+      while (next > 180) next -= 360;
+      while (next <= -180) next += 360;
+      rIn.value = String(next);
+      // Big images: rotation pass blocks UI ~0.5–2 s. Show a spinner
+      // so the user sees something happen. rAF defers the heavy work
+      // past the current frame so the overlay paints first.
+      showCanvasLoading('Rotating…');
+      requestAnimationFrame(() => {
+        try { rIn.dispatchEvent(new Event('input', { bubbles: true })); }
+        finally { hideCanvasLoading(); }
+      });
+    });
+    attachSpinRepeat(pop);
+  }
+
+  // Header-drag for the Transform popup. Default position: over the
+  // right panel (layers area). Mobile pins via stylesheet so we use
+  // setProperty 'important' to override during drag.
+  function wireTransformDrag(pop) {
+    const isMobile = window.matchMedia('(max-width: 820px)').matches;
+    const defaultRight = 20;
+    const defaultTop = 60;
+    if (isMobile) {
+      pop.style.setProperty('position', 'fixed', 'important');
+    } else {
+      pop.style.position = 'absolute';
+      pop.style.right = defaultRight + 'px';
+      pop.style.top = defaultTop + 'px';
+      pop.style.left = 'auto';
+    }
+    const dragSource = pop.querySelector('[data-transform-drag]') || pop;
+    let dragging = false;
+    let startX = 0, startY = 0, originLeft = 0, originTop = 0;
+    const NON_DRAG = 'input,button,select,textarea,a,[contenteditable]';
+
+    const setPos = (x, y) => {
+      if (isMobile) {
+        pop.style.setProperty('left', x + 'px', 'important');
+        pop.style.setProperty('top', y + 'px', 'important');
+        pop.style.setProperty('right', 'auto', 'important');
+        pop.style.setProperty('bottom', 'auto', 'important');
+        pop.style.setProperty('width', 'auto', 'important');
+        pop.style.setProperty('max-width', 'calc(100vw - 16px)', 'important');
+      } else {
+        pop.style.left = x + 'px';
+        pop.style.top = y + 'px';
+        pop.style.right = 'auto';
+      }
+    };
+
+    const beginDrag = (clientX, clientY) => {
+      dragging = true;
+      const rect = pop.getBoundingClientRect();
+      if (isMobile) {
+        originLeft = rect.left;
+        originTop = rect.top;
+      } else {
+        const parentRect = state.container.getBoundingClientRect();
+        originLeft = rect.left - parentRect.left;
+        originTop = rect.top - parentRect.top;
+      }
+      startX = clientX;
+      startY = clientY;
+      setPos(originLeft, originTop);
+      pop.classList.add('ge-transform-popup-dragging');
+      document.body.style.userSelect = 'none';
+    };
+
+    const moveDrag = (clientX, clientY) => {
+      if (!dragging) return;
+      const dx = clientX - startX;
+      const dy = clientY - startY;
+      let nx = originLeft + dx;
+      let ny = originTop + dy;
+      if (isMobile) {
+        const rect = pop.getBoundingClientRect();
+        nx = Math.max(0, Math.min(window.innerWidth - rect.width, nx));
+        ny = Math.max(0, Math.min(window.innerHeight - rect.height, ny));
+      }
+      setPos(nx, ny);
+    };
+
+    const endDrag = () => {
+      if (!dragging) return;
+      dragging = false;
+      document.body.style.userSelect = '';
+      pop.classList.remove('ge-transform-popup-dragging');
+    };
+
+    dragSource.addEventListener('mousedown', (e) => {
+      if (e.target.closest(NON_DRAG)) return;
+      e.preventDefault();
+      beginDrag(e.clientX, e.clientY);
+    });
+    document.addEventListener('mousemove', (e) => moveDrag(e.clientX, e.clientY));
+    document.addEventListener('mouseup', endDrag);
+
+    dragSource.addEventListener('touchstart', (e) => {
+      if (e.target.closest(NON_DRAG)) return;
+      if (!e.touches || e.touches.length !== 1) return;
+      e.preventDefault();
+      beginDrag(e.touches[0].clientX, e.touches[0].clientY);
+    }, { passive: false });
+    document.addEventListener('touchmove', (e) => {
+      if (!dragging) return;
+      if (!e.touches || e.touches.length !== 1) return;
+      e.preventDefault();
+      moveDrag(e.touches[0].clientX, e.touches[0].clientY);
+    }, { passive: false });
+    document.addEventListener('touchend', endDrag);
+    document.addEventListener('touchcancel', endDrag);
+  }
+
+  // Re-derive the active layer's pixels from the original snapshot
+  // with the popup's current W/H/flip/rotation applied. Cheap —
+  // paints into an off-screen canvas of the final size.
+  function reapplyTransform() {
+    const layer = state.transformLayer;
+    if (!layer || !state.transformOrigCanvas) return;
+    const w = state.transformPendingW;
+    const h = state.transformPendingH;
+    const rotDeg = state.transformPendingRot;
+    const rotRad = (rotDeg * Math.PI) / 180;
+    const cos = Math.abs(Math.cos(rotRad));
+    const sin = Math.abs(Math.sin(rotRad));
+    // Bounding box of the rotated W×H — canvas grows so corners
+    // don't clip.
+    const finalW = Math.max(1, Math.round(w * cos + h * sin));
+    const finalH = Math.max(1, Math.round(w * sin + h * cos));
+    const tmp = document.createElement('canvas');
+    tmp.width = finalW; tmp.height = finalH;
+    const tCtx = tmp.getContext('2d');
+    tCtx.imageSmoothingEnabled = true;
+    tCtx.imageSmoothingQuality = 'high';
+    tCtx.save();
+    tCtx.translate(finalW / 2, finalH / 2);
+    if (rotDeg) tCtx.rotate(rotRad);
+    tCtx.scale(state.transformPendingFlipH ? -1 : 1, state.transformPendingFlipV ? -1 : 1);
+    tCtx.drawImage(state.transformOrigCanvas, -w / 2, -h / 2, w, h);
+    tCtx.restore();
+    layer.canvas.width = finalW;
+    layer.canvas.height = finalH;
+    layer.ctx.clearRect(0, 0, finalW, finalH);
+    layer.ctx.drawImage(tmp, 0, 0);
+    // Recenter the layer so the rotation pivot stays put visually.
+    const origCenterX = state.transformOrigOffset.x + state.transformOrigW / 2;
+    const origCenterY = state.transformOrigOffset.y + state.transformOrigH / 2;
+    state.layerOffsets.set(layer.id, {
+      x: Math.round(origCenterX - finalW / 2),
+      y: Math.round(origCenterY - finalH / 2),
+    });
+    composite();
+    drawTransformHandles();
+  }
+
+  function confirmTransform() {
+    closeTransformPopup();
+    state.transformOrigCanvas = null;
+    state.transformOrigOffset = null;
+    state.transformActive = false;
+    state.transformLayer = null;
+    state.transformHandle = null;
+    composite();
+    uiModule.showToast('Transform applied');
+  }
+
+  function cancelTransform() {
+    closeTransformPopup();
+    state.transformOrigCanvas = null;
+    state.transformOrigOffset = null;
+    if (state.transformLayer) undo(); // restore saved state
+    state.transformActive = false;
+    state.transformLayer = null;
+    state.transformHandle = null;
+    composite();
+  }
+
+  return {
+    startTransform, openTransformPopup, closeTransformPopup,
+    reapplyTransform, confirmTransform, cancelTransform,
+  };
+}

package/dist/web/static/js/editor/tools/wand.js

@@ -0,0 +1,46 @@
+/**
+ * Magic-wand tool — single-click flood-fill selection on the active
+ * layer's pixels. Shift/Alt modifiers override the persistent mode
+ * toggle for the duration of the click (add / subtract).
+ *
+ * Clicking inside an existing selection with no modifier deselects.
+ *
+ * Wand is selection-only — it doesn't mutate the layer until the user
+ * invokes an action (Erase / Copy / etc.) from the panel. That's why
+ * it has just a `click` handler instead of begin/drag/end.
+ *
+ * @param {{
+ *   activeLayer: () => object | null,
+ *   saveState:   () => void,
+ *   composite:   () => void,
+ *   wandHits:    (cx: number, cy: number) => boolean,
+ *   runMagicWand: (cx: number, cy: number, mode: 'replace'|'add'|'subtract') => void,
+ * }} deps
+ */
+import { state } from '../state.js';
+import { canvasCoords } from '../canvas-coords.js';
+
+export function createWandTool({ activeLayer, saveState, composite, wandHits, runMagicWand }) {
+  return {
+    click(e) {
+      const layer = activeLayer();
+      if (!layer) return;
+      const coords = canvasCoords(e, state.mainCanvas);
+      // Persistent toggle sets the default mode; Shift forces add, Alt
+      // forces subtract regardless of the toggle (modifiers always win).
+      let mode = state.wandMode || 'replace';
+      if (e.shiftKey) mode = 'add';
+      else if (e.altKey) mode = 'subtract';
+      // Click INSIDE the existing selection with no modifier → deselect.
+      if (mode === 'replace' && wandHits(coords.x, coords.y)) {
+        saveState();
+        state.wandMask = null;
+        state.wandLayerId = null;
+        state.wandLastSeed = null;
+        composite();
+        return;
+      }
+      runMagicWand(coords.x, coords.y, mode);
+    },
+  };
+}

package/dist/web/static/js/editor/wire-import.js

@@ -0,0 +1,148 @@
+/**
+ * Image-import wiring — covers all four entry points that drop an
+ * image as a new layer:
+ *
+ *   #ge-import-topbar    topbar "+ Import" button
+ *   #ge-import-file      File button in the Import section
+ *   #ge-import-paste     Clipboard button (uses async clipboard API)
+ *   #ge-import-gallery   Gallery picker — fetches /api/gallery/library
+ *                        and shows a thumbnail grid overlay
+ *
+ * Plus the shared `handleImportedImage(img)` sink — scales to canvas,
+ * centres, creates a new layer, switches to Move tool, hides the
+ * import section, refreshes the panel. Returned so the drag-and-drop
+ * + paste paths (wired in editor/clipboard-and-drop.js) can use the
+ * same sink.
+ *
+ * @param {{
+ *   container:        HTMLElement,
+ *   saveState:        (label?: string) => void,
+ *   createLayer:      (name, w, h) => object,
+ *   composite:        () => void,
+ *   renderLayerPanel: () => void,
+ *   uiModule:         object,
+ * }} deps
+ *
+ * @returns {{ handleImportedImage: (img: HTMLImageElement) => void }}
+ */
+import { state } from './state.js';
+
+export function wireImport({ container, saveState, createLayer, composite, renderLayerPanel, uiModule }) {
+  // Hidden <input type="file"> the topbar + File buttons both click.
+  const importFileInput = document.createElement('input');
+  importFileInput.type = 'file';
+  importFileInput.accept = 'image/*';
+  importFileInput.style.display = 'none';
+  container.appendChild(importFileInput);
+
+  function handleImportedImage(img) {
+    if (!state.editorOpen) return;
+    saveState('Import image');
+    // Scale down if larger than canvas.
+    let w = img.naturalWidth || img.width;
+    let h = img.naturalHeight || img.height;
+    if (w > state.imgWidth || h > state.imgHeight) {
+      const scale = Math.min(state.imgWidth / w, state.imgHeight / h);
+      w = Math.round(w * scale);
+      h = Math.round(h * scale);
+    }
+    const layer = createLayer('Imported', state.imgWidth, state.imgHeight);
+    // Centre on the canvas.
+    const ox = Math.round((state.imgWidth - w) / 2);
+    const oy = Math.round((state.imgHeight - h) / 2);
+    layer.ctx.drawImage(img, ox, oy, w, h);
+    state.layers.push(layer);
+    state.activeLayerId = layer.id;
+    // Switch to move tool so the imported layer is immediately
+    // repositionable.
+    state.tool = 'move';
+    const tb = container.querySelector('.ge-toolbar');
+    if (tb) tb.querySelectorAll('.ge-tool-btn').forEach(b => b.classList.toggle('active', b.dataset.tool === 'move'));
+    // Hide the import section now that the import is done.
+    const importSec = document.getElementById('ge-import-section');
+    if (importSec) importSec.style.display = 'none';
+    composite();
+    renderLayerPanel();
+    if (uiModule) uiModule.showToast('Image imported — drag to position');
+  }
+
+  importFileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const img = new Image();
+      img.onload = () => handleImportedImage(img);
+      img.src = ev.target.result;
+    };
+    reader.readAsDataURL(file);
+    importFileInput.value = '';
+  });
+
+  document.getElementById('ge-import-topbar')?.addEventListener('click', () => importFileInput.click());
+  document.getElementById('ge-import-file')?.addEventListener('click', () => importFileInput.click());
+
+  document.getElementById('ge-import-paste')?.addEventListener('click', async () => {
+    try {
+      const clipItems = await navigator.clipboard.read();
+      let blob = null;
+      for (const item of clipItems) {
+        const imgType = item.types.find(t => t.startsWith('image/'));
+        if (imgType) { blob = await item.getType(imgType); break; }
+      }
+      if (!blob) { if (uiModule) uiModule.showToast('No image found in clipboard'); return; }
+      const url = URL.createObjectURL(blob);
+      const img = new Image();
+      img.onload = () => { handleImportedImage(img); URL.revokeObjectURL(url); };
+      img.onerror = () => { URL.revokeObjectURL(url); if (uiModule) uiModule.showToast('Failed to load clipboard image'); };
+      img.src = url;
+    } catch (e) {
+      if (uiModule) uiModule.showToast('Clipboard access denied or no image available');
+    }
+  });
+
+  // Import from Gallery — fetch /api/gallery/library and show a
+  // thumbnail-grid picker overlay.
+  document.getElementById('ge-import-gallery')?.addEventListener('click', async () => {
+    try {
+      const res = await fetch('/api/gallery/library?limit=50', { credentials: 'same-origin' });
+      const data = await res.json();
+      const items = data.items || [];
+      if (!items.length) { if (uiModule) uiModule.showToast('No images in gallery'); return; }
+
+      // Picker overlay.
+      const overlay = document.createElement('div');
+      overlay.style.cssText = 'position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;';
+      const panel = document.createElement('div');
+      panel.style.cssText = 'background:var(--panel,#1e1e1e);border-radius:12px;padding:16px;max-width:500px;max-height:70vh;overflow-y:auto;width:90%;';
+      panel.innerHTML = '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><span style="font-size:13px;font-weight:600;">Pick from Gallery</span><button id="ge-gallery-close" style="background:none;border:none;color:var(--fg);cursor:pointer;font-size:18px;">✕</button></div>';
+      const grid = document.createElement('div');
+      grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;';
+      for (const item of items) {
+        const thumb = document.createElement('img');
+        thumb.src = item.url;
+        thumb.style.cssText = 'width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:border-color 0.15s;';
+        thumb.addEventListener('mouseenter', () => { thumb.style.borderColor = 'var(--accent,#61afef)'; });
+        thumb.addEventListener('mouseleave', () => { thumb.style.borderColor = 'transparent'; });
+        thumb.addEventListener('click', () => {
+          overlay.remove();
+          const img = new Image();
+          img.crossOrigin = 'anonymous';
+          img.onload = () => handleImportedImage(img);
+          img.onerror = () => { if (uiModule) uiModule.showToast('Failed to load gallery image'); };
+          img.src = item.url;
+        });
+        grid.appendChild(thumb);
+      }
+      panel.appendChild(grid);
+      overlay.appendChild(panel);
+      document.body.appendChild(overlay);
+      overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+      panel.querySelector('#ge-gallery-close').addEventListener('click', () => overlay.remove());
+    } catch (e) {
+      if (uiModule) uiModule.showToast('Failed to load gallery: ' + e.message);
+    }
+  });
+
+  return { handleImportedImage };
+}