domma-cms 0.1.0

package/admin/js/lib/image-editor.js

@@ -0,0 +1,869 @@
+/**
+ * Image Editor Module
+ * Opens an interactive editor modal (Cropper.js + DOM API) for a media file.
+ * Returns a Promise<boolean> — true when the image was saved, false on cancel.
+ */
+import {api} from '../api.js';
+
+// ---------------------------------------------------------------------------
+// Custom icon definitions
+// ---------------------------------------------------------------------------
+
+function registerIcons() {
+  const icons = {
+    'rotate-cw': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      path: 'M21 2v6h-6M21 8A9 9 0 1 0 19.07 14.4'
+    },
+    'rotate-ccw': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      path: 'M3 2v6h6M3 8a9 9 0 1 1 1.93 6.4'
+    },
+    'flip-h': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: ['M12 3v18', 'M4 6l4 6-4 6', 'M20 6l-4 6 4 6']
+    },
+    'flip-v': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: ['M3 12h18', 'M6 4l6 4 6-4', 'M6 20l6-4 6 4']
+    },
+    'lock': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: [
+        'M17 11H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z',
+        'M12 8a4 4 0 0 0-4 4',
+      ],
+      path: 'M12 8V5a4 4 0 0 1 4 4v2'
+    },
+    'unlock': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: [
+        'M17 11H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z',
+        'M8 11V7a4 4 0 0 1 8 0',
+      ]
+    },
+    'crop-icon': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: ['M6 2v14a2 2 0 0 0 2 2h14', 'M18 22V8a2 2 0 0 0-2-2H2']
+    },
+    'sliders': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: ['M4 21v-7', 'M4 10V3', 'M12 21v-9', 'M12 8V3', 'M20 21v-5', 'M20 12V3',
+        'M1 14h6', 'M9 8h6', 'M17 16h6']
+    },
+    'droplet': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      path: 'M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'
+    },
+    'image-plus': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: [
+        'M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7',
+        'M16 5h6', 'M19 2v6', 'M3 15l5-5 4 4 3-3 4 4',
+      ]
+    },
+    'frame': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: ['M7 3H3v4', 'M17 3h4v4', 'M7 21H3v-4', 'M17 21h4v-4']
+    },
+    'file-type': {
+      viewBox: '0 0 24 24', stroke: 'currentColor', fill: 'none', strokeWidth: 2,
+      paths: [
+        'M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z',
+        'M14 2v6h6', 'M10 13l-2 4h8l-2-4',
+      ]
+    },
+  };
+
+  for (const [name, def] of Object.entries(icons)) {
+    try {
+      I.register(name, def);
+    } catch { /* already registered */
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// DOM helpers
+// ---------------------------------------------------------------------------
+
+function makeIcon(name) {
+  const span = document.createElement('span');
+  span.setAttribute('data-icon', name);
+  return span;
+}
+
+function makeBtn(cls, iconName, title) {
+  const btn = document.createElement('button');
+  btn.className = cls;
+  btn.type = 'button';
+  btn.title = title;
+  btn.appendChild(makeIcon(iconName));
+  return btn;
+}
+
+function makeSep() {
+  const sep = document.createElement('span');
+  sep.className = 'image-editor-sep';
+  return sep;
+}
+
+function clearChildren(el) {
+  while (el.firstChild) el.removeChild(el.firstChild);
+}
+
+// ---------------------------------------------------------------------------
+// Main export
+// ---------------------------------------------------------------------------
+
+/**
+ * Open the image editor for a media file.
+ *
+ * @param {{ name: string, url: string }} file
+ * @returns {Promise<boolean>} Resolves true if the image was saved
+ */
+export async function openImageEditor(file) {
+  registerIcons();
+
+  let imageInfo;
+  try {
+    imageInfo = await api.media.info(file.name);
+  } catch (err) {
+    E.toast(`Cannot open editor: ${err.message}`, {type: 'error'});
+    return false;
+  }
+
+  return new Promise((resolve) => {
+    // Geometric state
+    let cropper = null;
+    let cropActive = false;
+    let totalRotation = 0;
+    let flippedH = false;
+    let flippedV = false;
+    let aspectLocked = true;
+    const aspectRatio = imageInfo.width / imageInfo.height;
+    let cropperCanvas = null;
+
+    // Effects state
+    let activePreset = null;
+    const adjustments = {brightness: 1, contrast: 1, saturation: 1, blur: 0, sharpen: 0, gamma: 1};
+    const watermarkState = {image: null, position: 'bottom-right', opacity: 50, scale: 15};
+    const borderState = {width: 0, colour: '#000000', mode: 'solid'};
+    const formatState = {type: null, quality: 85};
+
+    // ----------------------------------------------------------------
+    // Build the wrapper
+    // ----------------------------------------------------------------
+    const wrapper = document.createElement('div');
+    wrapper.className = 'image-editor';
+
+    // --- Toolbar ---
+    const toolbar = document.createElement('div');
+    toolbar.className = 'image-editor-toolbar';
+
+    const cropBtn = makeBtn('btn btn-sm btn-ghost editor-toolbar-btn', 'crop-icon', 'Toggle crop');
+    const rotateCW = makeBtn('btn btn-sm btn-ghost editor-toolbar-btn', 'rotate-cw', 'Rotate clockwise');
+    const rotateCCW = makeBtn('btn btn-sm btn-ghost editor-toolbar-btn', 'rotate-ccw', 'Rotate counter-clockwise');
+    const flipHBtn = makeBtn('btn btn-sm btn-ghost editor-toolbar-btn', 'flip-h', 'Flip horizontal');
+    const flipVBtn = makeBtn('btn btn-sm btn-ghost editor-toolbar-btn', 'flip-v', 'Flip vertical');
+
+    toolbar.appendChild(cropBtn);
+    toolbar.appendChild(makeSep());
+    toolbar.appendChild(rotateCCW);
+    toolbar.appendChild(rotateCW);
+    toolbar.appendChild(makeSep());
+    toolbar.appendChild(flipHBtn);
+    toolbar.appendChild(flipVBtn);
+
+    // --- Canvas ---
+    const canvas = document.createElement('div');
+    canvas.className = 'image-editor-canvas';
+
+    const img = document.createElement('img');
+    img.src = file.url + '?t=' + Date.now();
+    img.alt = file.name;
+    img.style.maxWidth = '100%';
+    canvas.appendChild(img);
+
+    // --- Resize bar ---
+    const resizeBar = document.createElement('div');
+    resizeBar.className = 'image-editor-resize';
+
+    const wLabel = document.createElement('label');
+    wLabel.textContent = 'W';
+    const wInput = document.createElement('input');
+    wInput.type = 'number';
+    wInput.className = 'form-input';
+    wInput.value = imageInfo.width;
+    wInput.min = 1;
+
+    const lockBtn = document.createElement('button');
+    lockBtn.type = 'button';
+    lockBtn.className = 'btn btn-sm btn-ghost editor-toolbar-btn active';
+    lockBtn.title = 'Lock aspect ratio';
+    lockBtn.appendChild(makeIcon('lock'));
+
+    const hLabel = document.createElement('label');
+    hLabel.textContent = 'H';
+    const hInput = document.createElement('input');
+    hInput.type = 'number';
+    hInput.className = 'form-input';
+    hInput.value = imageInfo.height;
+    hInput.min = 1;
+
+    const origLabel = document.createElement('span');
+    origLabel.className = 'text-muted';
+    origLabel.style.marginLeft = 'auto';
+    origLabel.textContent = `Original: ${imageInfo.width}\u00d7${imageInfo.height}`;
+
+    resizeBar.appendChild(wLabel);
+    resizeBar.appendChild(wInput);
+    resizeBar.appendChild(lockBtn);
+    resizeBar.appendChild(hLabel);
+    resizeBar.appendChild(hInput);
+    resizeBar.appendChild(origLabel);
+
+    // ----------------------------------------------------------------
+    // Effects panel
+    // ----------------------------------------------------------------
+    const effectsPanel = document.createElement('div');
+    effectsPanel.className = 'image-editor-effects';
+
+    // Tab bar
+    const tabBar = document.createElement('div');
+    tabBar.className = 'image-editor-tab-bar';
+
+    const tabDefs = [
+      {id: 'filters', label: 'Filters', icon: 'droplet'},
+      {id: 'adjust', label: 'Adjust', icon: 'sliders'},
+      {id: 'watermark', label: 'Watermark', icon: 'image-plus'},
+      {id: 'border', label: 'Border', icon: 'frame'},
+      {id: 'format', label: 'Format', icon: 'file-type'},
+    ];
+
+    const tabPanels = {};
+    const tabBtns = {};
+
+    tabDefs.forEach(({id, label, icon}, i) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'image-editor-tab-btn' + (i === 0 ? ' active' : '');
+      btn.dataset.tab = id;
+      btn.appendChild(makeIcon(icon));
+      const lbl = document.createElement('span');
+      lbl.textContent = label;
+      btn.appendChild(lbl);
+      btn.addEventListener('click', () => switchTab(id));
+      tabBar.appendChild(btn);
+      tabBtns[id] = btn;
+
+      const panel = document.createElement('div');
+      panel.className = 'image-editor-tab-panel';
+      panel.style.display = i === 0 ? 'block' : 'none';
+      tabPanels[id] = panel;
+    });
+
+    function switchTab(id) {
+      tabDefs.forEach(({id: tid}) => {
+        tabPanels[tid].style.display = tid === id ? 'block' : 'none';
+        tabBtns[tid].classList.toggle('active', tid === id);
+      });
+    }
+
+    effectsPanel.appendChild(tabBar);
+    tabDefs.forEach(({id}) => effectsPanel.appendChild(tabPanels[id]));
+
+    // ----------------------------------------------------------------
+    // Filters tab
+    // ----------------------------------------------------------------
+    const presetDefs = [
+      {id: 'grayscale', label: 'Grayscale', cssPreview: true},
+      {id: 'sepia', label: 'Sepia', cssPreview: true},
+      {id: 'warm', label: 'Warm', cssPreview: false},
+      {id: 'cool', label: 'Cool', cssPreview: false},
+      {id: 'enhance', label: 'Enhance', cssPreview: false},
+      {id: 'sharpen', label: 'Sharpen', cssPreview: false},
+      {id: 'soften', label: 'Soften', cssPreview: false},
+      {id: 'invert', label: 'Invert', cssPreview: true},
+    ];
+
+    const presetsGrid = document.createElement('div');
+    presetsGrid.className = 'ie-presets-grid';
+
+    const presetBtns = {};
+    presetDefs.forEach(({id, label}) => {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'btn btn-sm btn-ghost ie-preset-btn';
+      btn.textContent = label;
+      btn.addEventListener('click', () => {
+        activePreset = activePreset === id ? null : id;
+        presetDefs.forEach(({id: pid}) => {
+          presetBtns[pid].classList.toggle('active', pid === activePreset);
+        });
+        applyCssPreview();
+      });
+      presetBtns[id] = btn;
+      presetsGrid.appendChild(btn);
+    });
+
+    const serverNote = document.createElement('p');
+    serverNote.className = 'ie-server-note';
+    serverNote.textContent = 'Warm, Cool, Enhance, Sharpen, and Soften have no live preview — applied on save only.';
+
+    tabPanels['filters'].appendChild(presetsGrid);
+    tabPanels['filters'].appendChild(serverNote);
+
+    // ----------------------------------------------------------------
+    // Slider helper
+    // ----------------------------------------------------------------
+    const sliderRefs = {};
+
+    function makeSlider(label, min, max, step, defaultVal, onChange) {
+      const row = document.createElement('div');
+      row.className = 'ie-slider-row';
+
+      const lbl = document.createElement('label');
+      lbl.className = 'ie-slider-label';
+      lbl.textContent = label;
+
+      const slider = document.createElement('input');
+      slider.type = 'range';
+      slider.min = min;
+      slider.max = max;
+      slider.step = step;
+      slider.value = defaultVal;
+      slider.className = 'ie-slider';
+
+      const valDisplay = document.createElement('span');
+      valDisplay.className = 'ie-slider-val';
+      valDisplay.textContent = defaultVal;
+
+      slider.addEventListener('input', () => {
+        const v = parseFloat(slider.value);
+        valDisplay.textContent = step < 1 ? v.toFixed(1) : String(Math.round(v));
+        onChange(v);
+      });
+
+      row.appendChild(lbl);
+      row.appendChild(slider);
+      row.appendChild(valDisplay);
+
+      return {
+        row, slider, valDisplay, defaultVal,
+        reset() {
+          slider.value = defaultVal;
+          valDisplay.textContent = defaultVal;
+        },
+      };
+    }
+
+    // ----------------------------------------------------------------
+    // Adjust tab
+    // ----------------------------------------------------------------
+    const sliderDefs = [
+      {key: 'brightness', label: 'Brightness', min: 0.2, max: 3.0, step: 0.1, def: 1.0},
+      {key: 'contrast', label: 'Contrast', min: 0.2, max: 3.0, step: 0.1, def: 1.0},
+      {key: 'saturation', label: 'Saturation', min: 0.0, max: 3.0, step: 0.1, def: 1.0},
+      {key: 'blur', label: 'Blur', min: 0, max: 10, step: 0.5, def: 0},
+      {key: 'sharpen', label: 'Sharpen', min: 0, max: 10, step: 0.5, def: 0},
+      {key: 'gamma', label: 'Gamma', min: 0.5, max: 3.0, step: 0.1, def: 1.0},
+    ];
+
+    sliderDefs.forEach(({key, label, min, max, step, def}) => {
+      const ref = makeSlider(label, min, max, step, def, (val) => {
+        adjustments[key] = val;
+        applyCssPreview();
+      });
+      sliderRefs[key] = ref;
+      tabPanels['adjust'].appendChild(ref.row);
+    });
+
+    const resetAdjBtn = document.createElement('button');
+    resetAdjBtn.type = 'button';
+    resetAdjBtn.className = 'btn btn-sm btn-ghost';
+    resetAdjBtn.style.marginTop = '0.5rem';
+    resetAdjBtn.textContent = 'Reset adjustments';
+    resetAdjBtn.addEventListener('click', () => {
+      sliderDefs.forEach(({key, def}) => {
+        adjustments[key] = def;
+        sliderRefs[key].reset();
+      });
+      applyCssPreview();
+    });
+    tabPanels['adjust'].appendChild(resetAdjBtn);
+
+    // ----------------------------------------------------------------
+    // Watermark tab
+    // ----------------------------------------------------------------
+    const wmChooseBtn = document.createElement('button');
+    wmChooseBtn.type = 'button';
+    wmChooseBtn.className = 'btn btn-sm btn-secondary';
+    wmChooseBtn.textContent = 'Choose watermark image\u2026';
+
+    const wmPreviewRow = document.createElement('div');
+    wmPreviewRow.className = 'ie-wm-preview-row';
+    wmPreviewRow.style.display = 'none';
+
+    const wmPreviewImg = document.createElement('img');
+    wmPreviewImg.className = 'ie-wm-preview-img';
+
+    const wmPreviewName = document.createElement('span');
+    wmPreviewName.className = 'ie-wm-preview-name';
+
+    const wmRemoveBtn = document.createElement('button');
+    wmRemoveBtn.type = 'button';
+    wmRemoveBtn.className = 'btn btn-sm btn-ghost';
+    wmRemoveBtn.textContent = 'Remove';
+    wmRemoveBtn.addEventListener('click', () => {
+      watermarkState.image = null;
+      wmPreviewRow.style.display = 'none';
+      wmChooseBtn.style.display = '';
+    });
+
+    wmPreviewRow.appendChild(wmPreviewImg);
+    wmPreviewRow.appendChild(wmPreviewName);
+    wmPreviewRow.appendChild(wmRemoveBtn);
+
+    wmChooseBtn.addEventListener('click', async () => {
+      const picked = await openMediaPicker();
+      if (picked) {
+        watermarkState.image = picked.name;
+        wmPreviewImg.src = picked.url;
+        wmPreviewName.textContent = picked.name;
+        wmPreviewRow.style.display = 'flex';
+        wmChooseBtn.style.display = 'none';
+      }
+    });
+
+    const wmPosRow = document.createElement('div');
+    wmPosRow.className = 'ie-slider-row';
+    const wmPosLabel = document.createElement('label');
+    wmPosLabel.className = 'ie-slider-label';
+    wmPosLabel.textContent = 'Position';
+    const wmPosSelect = document.createElement('select');
+    wmPosSelect.className = 'form-select ie-select';
+    [
+      'top-left', 'top-center', 'top-right',
+      'center-left', 'center', 'center-right',
+      'bottom-left', 'bottom-center', 'bottom-right',
+    ].forEach(pos => {
+      const opt = document.createElement('option');
+      opt.value = pos;
+      opt.textContent = pos.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      if (pos === 'bottom-right') opt.selected = true;
+      wmPosSelect.appendChild(opt);
+    });
+    wmPosSelect.addEventListener('change', () => {
+      watermarkState.position = wmPosSelect.value;
+    });
+    wmPosRow.appendChild(wmPosLabel);
+    wmPosRow.appendChild(wmPosSelect);
+
+    const wmOpacityRef = makeSlider('Opacity %', 0, 100, 1, 50, (val) => {
+      watermarkState.opacity = val;
+    });
+    const wmScaleRef = makeSlider('Scale %', 5, 50, 1, 15, (val) => {
+      watermarkState.scale = val;
+    });
+
+    tabPanels['watermark'].appendChild(wmChooseBtn);
+    tabPanels['watermark'].appendChild(wmPreviewRow);
+    tabPanels['watermark'].appendChild(wmPosRow);
+    tabPanels['watermark'].appendChild(wmOpacityRef.row);
+    tabPanels['watermark'].appendChild(wmScaleRef.row);
+
+    // ----------------------------------------------------------------
+    // Border tab
+    // ----------------------------------------------------------------
+    const borderWidthRef = makeSlider('Width (px)', 0, 200, 1, 0, (val) => {
+      borderState.width = val;
+    });
+
+    const borderColourRow = document.createElement('div');
+    borderColourRow.className = 'ie-slider-row';
+    const borderColourLabel = document.createElement('label');
+    borderColourLabel.className = 'ie-slider-label';
+    borderColourLabel.textContent = 'Colour';
+    const borderColourInput = document.createElement('input');
+    borderColourInput.type = 'color';
+    borderColourInput.value = '#000000';
+    borderColourInput.className = 'ie-colour-input';
+    borderColourInput.addEventListener('input', () => {
+      borderState.colour = borderColourInput.value;
+    });
+    borderColourRow.appendChild(borderColourLabel);
+    borderColourRow.appendChild(borderColourInput);
+
+    const borderModeRow = document.createElement('div');
+    borderModeRow.className = 'ie-slider-row';
+    const borderModeLabel = document.createElement('label');
+    borderModeLabel.className = 'ie-slider-label';
+    borderModeLabel.textContent = 'Mode';
+    const borderModeSelect = document.createElement('select');
+    borderModeSelect.className = 'form-select ie-select';
+    [['solid', 'Solid'], ['mirror', 'Mirror'], ['repeat', 'Repeat']].forEach(([val, lbl]) => {
+      const opt = document.createElement('option');
+      opt.value = val;
+      opt.textContent = lbl;
+      borderModeSelect.appendChild(opt);
+    });
+    borderModeSelect.addEventListener('change', () => {
+      borderState.mode = borderModeSelect.value;
+    });
+    borderModeRow.appendChild(borderModeLabel);
+    borderModeRow.appendChild(borderModeSelect);
+
+    tabPanels['border'].appendChild(borderWidthRef.row);
+    tabPanels['border'].appendChild(borderColourRow);
+    tabPanels['border'].appendChild(borderModeRow);
+
+    // ----------------------------------------------------------------
+    // Format tab
+    // ----------------------------------------------------------------
+    const fmtRow = document.createElement('div');
+    fmtRow.className = 'ie-slider-row';
+    const fmtLabel = document.createElement('label');
+    fmtLabel.className = 'ie-slider-label';
+    fmtLabel.textContent = 'Output format';
+    const fmtSelect = document.createElement('select');
+    fmtSelect.className = 'form-select ie-select';
+    [['', 'Keep original'], ['jpeg', 'JPEG'], ['png', 'PNG'], ['webp', 'WebP']].forEach(([val, lbl]) => {
+      const opt = document.createElement('option');
+      opt.value = val;
+      opt.textContent = lbl;
+      fmtSelect.appendChild(opt);
+    });
+    fmtRow.appendChild(fmtLabel);
+    fmtRow.appendChild(fmtSelect);
+
+    const fmtQualityRef = makeSlider('Quality', 1, 100, 1, 85, (val) => {
+      formatState.quality = val;
+    });
+    fmtQualityRef.row.style.display = 'none';
+
+    fmtSelect.addEventListener('change', () => {
+      formatState.type = fmtSelect.value || null;
+      fmtQualityRef.row.style.display =
+        (fmtSelect.value === 'jpeg' || fmtSelect.value === 'webp') ? 'flex' : 'none';
+    });
+
+    tabPanels['format'].appendChild(fmtRow);
+    tabPanels['format'].appendChild(fmtQualityRef.row);
+
+    // --- Footer ---
+    const footer = document.createElement('div');
+    footer.className = 'image-editor-footer';
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.type = 'button';
+    cancelBtn.className = 'btn btn-ghost';
+    cancelBtn.textContent = 'Cancel';
+
+    const footerRight = document.createElement('div');
+    footerRight.style.display = 'flex';
+    footerRight.style.gap = '0.5rem';
+
+    const copyBtn = document.createElement('button');
+    copyBtn.type = 'button';
+    copyBtn.className = 'btn btn-secondary';
+    copyBtn.textContent = 'Save as copy';
+
+    const overwriteBtn = document.createElement('button');
+    overwriteBtn.type = 'button';
+    overwriteBtn.className = 'btn btn-primary';
+    overwriteBtn.textContent = 'Overwrite';
+
+    footerRight.appendChild(copyBtn);
+    footerRight.appendChild(overwriteBtn);
+    footer.appendChild(cancelBtn);
+    footer.appendChild(footerRight);
+
+    wrapper.appendChild(toolbar);
+    wrapper.appendChild(canvas);
+    wrapper.appendChild(resizeBar);
+    wrapper.appendChild(effectsPanel);
+    wrapper.appendChild(footer);
+
+    // ----------------------------------------------------------------
+    // Modal
+    // ----------------------------------------------------------------
+    const modal = E.modal({title: `Edit: ${file.name}`, size: 'lg'});
+    modal.element.appendChild(wrapper);
+    modal.open();
+
+    // Capture .cropper-canvas BEFORE Cropper fires 'ready' on the img
+    img.addEventListener('ready', () => {
+      cropperCanvas = canvas.querySelector('.cropper-canvas');
+      applyCssPreview();
+    }, {once: true});
+
+    requestAnimationFrame(() => {
+      cropper = new Cropper(img, {
+        viewMode: 1,
+        autoCrop: false,
+        zoomable: false,
+        movable: true,
+      });
+      Domma.icons.scan(wrapper);
+    });
+
+    // ----------------------------------------------------------------
+    // Toolbar interactions
+    // ----------------------------------------------------------------
+    cropBtn.addEventListener('click', () => {
+      cropActive = !cropActive;
+      cropActive ? cropper.crop() : cropper.clear();
+      cropBtn.classList.toggle('active', cropActive);
+    });
+
+    rotateCW.addEventListener('click', () => {
+      cropper.rotate(90);
+      totalRotation = (totalRotation + 90) % 360;
+    });
+
+    rotateCCW.addEventListener('click', () => {
+      cropper.rotate(-90);
+      totalRotation = (totalRotation - 90 + 360) % 360;
+    });
+
+    flipHBtn.addEventListener('click', () => {
+      flippedH = !flippedH;
+      cropper.scaleX(flippedH ? -1 : 1);
+      flipHBtn.classList.toggle('active', flippedH);
+    });
+
+    flipVBtn.addEventListener('click', () => {
+      flippedV = !flippedV;
+      cropper.scaleY(flippedV ? -1 : 1);
+      flipVBtn.classList.toggle('active', flippedV);
+    });
+
+    // ----------------------------------------------------------------
+    // Aspect lock + resize inputs
+    // ----------------------------------------------------------------
+    lockBtn.addEventListener('click', () => {
+      aspectLocked = !aspectLocked;
+      lockBtn.classList.toggle('active', aspectLocked);
+      clearChildren(lockBtn);
+      lockBtn.appendChild(makeIcon(aspectLocked ? 'lock' : 'unlock'));
+      Domma.icons.scan(lockBtn);
+    });
+
+    wInput.addEventListener('input', () => {
+      if (!aspectLocked) return;
+      const w = parseInt(wInput.value, 10);
+      if (w > 0) hInput.value = Math.round(w / aspectRatio);
+    });
+
+    hInput.addEventListener('input', () => {
+      if (!aspectLocked) return;
+      const h = parseInt(hInput.value, 10);
+      if (h > 0) wInput.value = Math.round(h * aspectRatio);
+    });
+
+    // ----------------------------------------------------------------
+    // CSS filter preview
+    // ----------------------------------------------------------------
+    function buildCssFilter() {
+      const parts = [];
+      if (activePreset === 'grayscale') parts.push('grayscale(1)');
+      if (activePreset === 'sepia') parts.push('sepia(1)');
+      if (activePreset === 'invert') parts.push('invert(1)');
+      if (adjustments.brightness !== 1) parts.push(`brightness(${adjustments.brightness})`);
+      if (adjustments.contrast !== 1) parts.push(`contrast(${adjustments.contrast})`);
+      if (adjustments.saturation !== 1) parts.push(`saturate(${adjustments.saturation})`);
+      if (adjustments.blur > 0) parts.push(`blur(${adjustments.blur}px)`);
+      return parts.join(' ');
+    }
+
+    function applyCssPreview() {
+      if (!cropperCanvas) return;
+      cropperCanvas.style.filter = buildCssFilter();
+    }
+
+    // ----------------------------------------------------------------
+    // Media picker (watermark image selection)
+    // ----------------------------------------------------------------
+    async function openMediaPicker() {
+      return new Promise(async (resolveMedia) => {
+        let mediaList;
+        try {
+          mediaList = await api.media.list();
+        } catch (err) {
+          E.toast(`Failed to load media: ${err.message}`, {type: 'error'});
+          resolveMedia(null);
+          return;
+        }
+
+        const images = mediaList.filter(m => /\.(jpg|jpeg|png|webp|gif)$/i.test(m.name));
+
+        const pickerContent = document.createElement('div');
+        pickerContent.className = 'ie-media-picker';
+
+        if (images.length === 0) {
+          const empty = document.createElement('p');
+          empty.className = 'text-muted';
+          empty.style.padding = '1rem 0';
+          empty.textContent = 'No images in media library.';
+          pickerContent.appendChild(empty);
+        } else {
+          const grid = document.createElement('div');
+          grid.className = 'ie-media-picker-grid';
+
+          images.forEach(imgItem => {
+            const thumb = document.createElement('div');
+            thumb.className = 'ie-media-thumb';
+
+            const thumbImg = document.createElement('img');
+            thumbImg.src = imgItem.url;
+            thumbImg.alt = imgItem.name;
+
+            const nameSpan = document.createElement('span');
+            nameSpan.className = 'ie-media-thumb-name';
+            nameSpan.textContent = imgItem.name;
+
+            thumb.appendChild(thumbImg);
+            thumb.appendChild(nameSpan);
+
+            thumb.addEventListener('click', () => {
+              pickerModal.close();
+              resolveMedia(imgItem);
+            });
+
+            grid.appendChild(thumb);
+          });
+
+          pickerContent.appendChild(grid);
+        }
+
+        const cancelPickBtn = document.createElement('button');
+        cancelPickBtn.type = 'button';
+        cancelPickBtn.className = 'btn btn-sm btn-ghost';
+        cancelPickBtn.style.marginTop = '0.75rem';
+        cancelPickBtn.textContent = 'Cancel';
+        cancelPickBtn.addEventListener('click', () => {
+          pickerModal.close();
+          resolveMedia(null);
+        });
+        pickerContent.appendChild(cancelPickBtn);
+
+        const pickerModal = E.modal({title: 'Choose watermark image', size: 'md'});
+        pickerModal.element.appendChild(pickerContent);
+        pickerModal.open();
+      });
+    }
+
+    // ----------------------------------------------------------------
+    // Save helpers
+    // ----------------------------------------------------------------
+    function buildOperations() {
+      const ops = {};
+
+      if (totalRotation) ops.rotate = totalRotation;
+      if (flippedV) ops.flip = true;
+      if (flippedH) ops.flop = true;
+
+      if (cropActive) {
+        const data = cropper.getData(true);
+        if (data.width > 0 && data.height > 0) {
+          ops.crop = {left: data.x, top: data.y, width: data.width, height: data.height};
+        }
+      }
+
+      const targetW = parseInt(wInput.value, 10) || null;
+      const targetH = parseInt(hInput.value, 10) || null;
+      if (targetW !== imageInfo.width || targetH !== imageInfo.height) {
+        ops.resize = {width: targetW, height: targetH};
+      }
+
+      if (activePreset) ops.preset = activePreset;
+
+      const adjOut = {};
+      if (adjustments.brightness !== 1) adjOut.brightness = adjustments.brightness;
+      if (adjustments.contrast !== 1) adjOut.contrast = adjustments.contrast;
+      if (adjustments.saturation !== 1) adjOut.saturation = adjustments.saturation;
+      if (adjustments.blur > 0) adjOut.blur = adjustments.blur;
+      if (adjustments.sharpen > 0) adjOut.sharpen = adjustments.sharpen;
+      if (adjustments.gamma !== 1) adjOut.gamma = adjustments.gamma;
+      if (Object.keys(adjOut).length > 0) ops.adjustments = adjOut;
+
+      if (watermarkState.image) {
+        ops.watermark = {
+          image: watermarkState.image,
+          position: watermarkState.position,
+          opacity: watermarkState.opacity / 100,
+          scale: watermarkState.scale / 100,
+        };
+      }
+
+      if (borderState.width > 0) {
+        ops.border = {
+          width: borderState.width,
+          colour: borderState.colour,
+          mode: borderState.mode,
+        };
+      }
+
+      if (formatState.type) {
+        ops.format = {type: formatState.type, quality: formatState.quality};
+      }
+
+      return ops;
+    }
+
+    async function doSave(saveAs) {
+      overwriteBtn.disabled = true;
+      copyBtn.disabled = true;
+      try {
+        const operations = buildOperations();
+        let outputName = saveAs;
+
+        // Overwrite + format change: rename file and delete the original
+        if (!saveAs && formatState.type) {
+          const srcExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
+          const newExt = '.' + formatState.type;
+          if (srcExt !== newExt) {
+            const base = file.name.slice(0, file.name.lastIndexOf('.'));
+            outputName = base + newExt;
+            operations._deleteOriginal = file.name;
+          }
+        }
+
+        await api.media.transform(file.name, {operations, saveAs: outputName || undefined});
+        E.toast('Image saved.', {type: 'success'});
+        closeEditor(true);
+      } catch (err) {
+        E.toast(`Save failed: ${err.message}`, {type: 'error'});
+        overwriteBtn.disabled = false;
+        copyBtn.disabled = false;
+      }
+    }
+
+    overwriteBtn.addEventListener('click', async () => {
+      if (!await E.confirm(`Overwrite "${file.name}"? This cannot be undone.`)) return;
+      await doSave(null);
+    });
+
+    copyBtn.addEventListener('click', async () => {
+      const ext = formatState.type ? '.' + formatState.type
+        : file.name.substring(file.name.lastIndexOf('.'));
+      const base = file.name.slice(0, file.name.lastIndexOf('.'));
+      await doSave(`${base}-edited${ext}`);
+    });
+
+    cancelBtn.addEventListener('click', () => closeEditor(false));
+
+    // ----------------------------------------------------------------
+    // Cleanup
+    // ----------------------------------------------------------------
+    function closeEditor(saved) {
+      if (cropper) {
+        cropper.destroy();
+        cropper = null;
+      }
+      modal.close();
+      resolve(saved);
+    }
+  });
+}