domma-cms 0.2.0 → 0.3.0

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

@@ -1,869 +1 @@
-/**
- * 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);
-    }
-  });
-}
+import{api as Ee}from"../api.js";function Ae(){const o={"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[m,M]of Object.entries(o))try{I.register(m,M)}catch{}}function oe(o){const m=document.createElement("span");return m.setAttribute("data-icon",o),m}function K(o,m,M){const i=document.createElement("button");return i.className=o,i.type="button",i.title=M,i.appendChild(oe(m)),i}function je(){const o=document.createElement("span");return o.className="image-editor-sep",o}function Ve(o){for(;o.firstChild;)o.removeChild(o.firstChild)}export async function openImageEditor(o){Ae();let m;try{m=await Ee.media.info(o.name)}catch(M){return E.toast(`Cannot open editor: ${M.message}`,{type:"error"}),!1}return new Promise(M=>{let i=null,F=!1,j=0,D=!1,q=!1,O=!0;const ye=m.width/m.height;let se=null,y=null;const r={brightness:1,contrast:1,saturation:1,blur:0,sharpen:0,gamma:1},u={image:null,position:"bottom-right",opacity:50,scale:15},L={width:0,colour:"#000000",mode:"solid"},v={type:null,quality:85},k=document.createElement("div");k.className="image-editor";const C=document.createElement("div");C.className="image-editor-toolbar";const le=K("btn btn-sm btn-ghost editor-toolbar-btn","crop-icon","Toggle crop"),ke=K("btn btn-sm btn-ghost editor-toolbar-btn","rotate-cw","Rotate clockwise"),xe=K("btn btn-sm btn-ghost editor-toolbar-btn","rotate-ccw","Rotate counter-clockwise"),re=K("btn btn-sm btn-ghost editor-toolbar-btn","flip-h","Flip horizontal"),ie=K("btn btn-sm btn-ghost editor-toolbar-btn","flip-v","Flip vertical");C.appendChild(le),C.appendChild(je()),C.appendChild(xe),C.appendChild(ke),C.appendChild(je()),C.appendChild(re),C.appendChild(ie);const U=document.createElement("div");U.className="image-editor-canvas";const $=document.createElement("img");$.src=o.url+"?t="+Date.now(),$.alt=o.name,$.style.maxWidth="100%",U.appendChild($);const x=document.createElement("div");x.className="image-editor-resize";const Ne=document.createElement("label");Ne.textContent="W";const g=document.createElement("input");g.type="number",g.className="form-input",g.value=m.width,g.min=1;const h=document.createElement("button");h.type="button",h.className="btn btn-sm btn-ghost editor-toolbar-btn active",h.title="Lock aspect ratio",h.appendChild(oe("lock"));const Me=document.createElement("label");Me.textContent="H";const w=document.createElement("input");w.type="number",w.className="form-input",w.value=m.height,w.min=1;const X=document.createElement("span");X.className="text-muted",X.style.marginLeft="auto",X.textContent=`Original: ${m.width}\xD7${m.height}`,x.appendChild(Ne),x.appendChild(g),x.appendChild(h),x.appendChild(Me),x.appendChild(w),x.appendChild(X);const Y=document.createElement("div");Y.className="image-editor-effects";const ce=document.createElement("div");ce.className="image-editor-tab-bar";const de=[{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"}],c={},Le={};de.forEach(({id:e,label:t,icon:a},s)=>{const n=document.createElement("button");n.type="button",n.className="image-editor-tab-btn"+(s===0?" active":""),n.dataset.tab=e,n.appendChild(oe(a));const p=document.createElement("span");p.textContent=t,n.appendChild(p),n.addEventListener("click",()=>Oe(e)),ce.appendChild(n),Le[e]=n;const l=document.createElement("div");l.className="image-editor-tab-panel",l.style.display=s===0?"block":"none",c[e]=l});function Oe(e){de.forEach(({id:t})=>{c[t].style.display=t===e?"block":"none",Le[t].classList.toggle("active",t===e)})}Y.appendChild(ce),de.forEach(({id:e})=>Y.appendChild(c[e]));const Be=[{id:"grayscale",label:"Grayscale",cssPreview:!0},{id:"sepia",label:"Sepia",cssPreview:!0},{id:"warm",label:"Warm",cssPreview:!1},{id:"cool",label:"Cool",cssPreview:!1},{id:"enhance",label:"Enhance",cssPreview:!1},{id:"sharpen",label:"Sharpen",cssPreview:!1},{id:"soften",label:"Soften",cssPreview:!1},{id:"invert",label:"Invert",cssPreview:!0}],me=document.createElement("div");me.className="ie-presets-grid";const Pe={};Be.forEach(({id:e,label:t})=>{const a=document.createElement("button");a.type="button",a.className="btn btn-sm btn-ghost ie-preset-btn",a.textContent=t,a.addEventListener("click",()=>{y=y===e?null:e,Be.forEach(({id:s})=>{Pe[s].classList.toggle("active",s===y)}),ae()}),Pe[e]=a,me.appendChild(a)});const pe=document.createElement("p");pe.className="ie-server-note",pe.textContent="Warm, Cool, Enhance, Sharpen, and Soften have no live preview \u2014 applied on save only.",c.filters.appendChild(me),c.filters.appendChild(pe);const Se={};function A(e,t,a,s,n,p){const l=document.createElement("div");l.className="ie-slider-row";const b=document.createElement("label");b.className="ie-slider-label",b.textContent=e;const d=document.createElement("input");d.type="range",d.min=t,d.max=a,d.step=s,d.value=n,d.className="ie-slider";const f=document.createElement("span");return f.className="ie-slider-val",f.textContent=n,d.addEventListener("input",()=>{const R=parseFloat(d.value);f.textContent=s<1?R.toFixed(1):String(Math.round(R)),p(R)}),l.appendChild(b),l.appendChild(d),l.appendChild(f),{row:l,slider:d,valDisplay:f,defaultVal:n,reset(){d.value=n,f.textContent=n}}}const We=[{key:"brightness",label:"Brightness",min:.2,max:3,step:.1,def:1},{key:"contrast",label:"Contrast",min:.2,max:3,step:.1,def:1},{key:"saturation",label:"Saturation",min:0,max:3,step:.1,def:1},{key:"blur",label:"Blur",min:0,max:10,step:.5,def:0},{key:"sharpen",label:"Sharpen",min:0,max:10,step:.5,def:0},{key:"gamma",label:"Gamma",min:.5,max:3,step:.1,def:1}];We.forEach(({key:e,label:t,min:a,max:s,step:n,def:p})=>{const l=A(t,a,s,n,p,b=>{r[e]=b,ae()});Se[e]=l,c.adjust.appendChild(l.row)});const z=document.createElement("button");z.type="button",z.className="btn btn-sm btn-ghost",z.style.marginTop="0.5rem",z.textContent="Reset adjustments",z.addEventListener("click",()=>{We.forEach(({key:e,def:t})=>{r[e]=t,Se[e].reset()}),ae()}),c.adjust.appendChild(z);const B=document.createElement("button");B.type="button",B.className="btn btn-sm btn-secondary",B.textContent="Choose watermark image\u2026";const N=document.createElement("div");N.className="ie-wm-preview-row",N.style.display="none";const ue=document.createElement("img");ue.className="ie-wm-preview-img";const he=document.createElement("span");he.className="ie-wm-preview-name";const V=document.createElement("button");V.type="button",V.className="btn btn-sm btn-ghost",V.textContent="Remove",V.addEventListener("click",()=>{u.image=null,N.style.display="none",B.style.display=""}),N.appendChild(ue),N.appendChild(he),N.appendChild(V),B.addEventListener("click",async()=>{const e=await De();e&&(u.image=e.name,ue.src=e.url,he.textContent=e.name,N.style.display="flex",B.style.display="none")});const _=document.createElement("div");_.className="ie-slider-row";const be=document.createElement("label");be.className="ie-slider-label",be.textContent="Position";const G=document.createElement("select");G.className="form-select ie-select",["top-left","top-center","top-right","center-left","center","center-right","bottom-left","bottom-center","bottom-right"].forEach(e=>{const t=document.createElement("option");t.value=e,t.textContent=e.replace(/-/g," ").replace(/\b\w/g,a=>a.toUpperCase()),e==="bottom-right"&&(t.selected=!0),G.appendChild(t)}),G.addEventListener("change",()=>{u.position=G.value}),_.appendChild(be),_.appendChild(G);const $e=A("Opacity %",0,100,1,50,e=>{u.opacity=e}),ze=A("Scale %",5,50,1,15,e=>{u.scale=e});c.watermark.appendChild(B),c.watermark.appendChild(N),c.watermark.appendChild(_),c.watermark.appendChild($e.row),c.watermark.appendChild(ze.row);const He=A("Width (px)",0,200,1,0,e=>{L.width=e}),Z=document.createElement("div");Z.className="ie-slider-row";const fe=document.createElement("label");fe.className="ie-slider-label",fe.textContent="Colour";const H=document.createElement("input");H.type="color",H.value="#000000",H.className="ie-colour-input",H.addEventListener("input",()=>{L.colour=H.value}),Z.appendChild(fe),Z.appendChild(H);const ee=document.createElement("div");ee.className="ie-slider-row";const ve=document.createElement("label");ve.className="ie-slider-label",ve.textContent="Mode";const T=document.createElement("select");T.className="form-select ie-select",[["solid","Solid"],["mirror","Mirror"],["repeat","Repeat"]].forEach(([e,t])=>{const a=document.createElement("option");a.value=e,a.textContent=t,T.appendChild(a)}),T.addEventListener("change",()=>{L.mode=T.value}),ee.appendChild(ve),ee.appendChild(T),c.border.appendChild(He.row),c.border.appendChild(Z),c.border.appendChild(ee);const te=document.createElement("div");te.className="ie-slider-row";const Ce=document.createElement("label");Ce.className="ie-slider-label",Ce.textContent="Output format";const P=document.createElement("select");P.className="form-select ie-select",[["","Keep original"],["jpeg","JPEG"],["png","PNG"],["webp","WebP"]].forEach(([e,t])=>{const a=document.createElement("option");a.value=e,a.textContent=t,P.appendChild(a)}),te.appendChild(Ce),te.appendChild(P);const ge=A("Quality",1,100,1,85,e=>{v.quality=e});ge.row.style.display="none",P.addEventListener("change",()=>{v.type=P.value||null,ge.row.style.display=P.value==="jpeg"||P.value==="webp"?"flex":"none"}),c.format.appendChild(te),c.format.appendChild(ge.row);const ne=document.createElement("div");ne.className="image-editor-footer";const Q=document.createElement("button");Q.type="button",Q.className="btn btn-ghost",Q.textContent="Cancel";const J=document.createElement("div");J.style.display="flex",J.style.gap="0.5rem";const S=document.createElement("button");S.type="button",S.className="btn btn-secondary",S.textContent="Save as copy";const W=document.createElement("button");W.type="button",W.className="btn btn-primary",W.textContent="Overwrite",J.appendChild(S),J.appendChild(W),ne.appendChild(Q),ne.appendChild(J),k.appendChild(C),k.appendChild(U),k.appendChild(x),k.appendChild(Y),k.appendChild(ne);const we=E.modal({title:`Edit: ${o.name}`,size:"lg"});we.element.appendChild(k),we.open(),$.addEventListener("ready",()=>{se=U.querySelector(".cropper-canvas"),ae()},{once:!0}),requestAnimationFrame(()=>{i=new Cropper($,{viewMode:1,autoCrop:!1,zoomable:!1,movable:!0}),Domma.icons.scan(k)}),le.addEventListener("click",()=>{F=!F,F?i.crop():i.clear(),le.classList.toggle("active",F)}),ke.addEventListener("click",()=>{i.rotate(90),j=(j+90)%360}),xe.addEventListener("click",()=>{i.rotate(-90),j=(j-90+360)%360}),re.addEventListener("click",()=>{D=!D,i.scaleX(D?-1:1),re.classList.toggle("active",D)}),ie.addEventListener("click",()=>{q=!q,i.scaleY(q?-1:1),ie.classList.toggle("active",q)}),h.addEventListener("click",()=>{O=!O,h.classList.toggle("active",O),Ve(h),h.appendChild(oe(O?"lock":"unlock")),Domma.icons.scan(h)}),g.addEventListener("input",()=>{if(!O)return;const e=parseInt(g.value,10);e>0&&(w.value=Math.round(e/ye))}),w.addEventListener("input",()=>{if(!O)return;const e=parseInt(w.value,10);e>0&&(g.value=Math.round(e*ye))});function Fe(){const e=[];return y==="grayscale"&&e.push("grayscale(1)"),y==="sepia"&&e.push("sepia(1)"),y==="invert"&&e.push("invert(1)"),r.brightness!==1&&e.push(`brightness(${r.brightness})`),r.contrast!==1&&e.push(`contrast(${r.contrast})`),r.saturation!==1&&e.push(`saturate(${r.saturation})`),r.blur>0&&e.push(`blur(${r.blur}px)`),e.join(" ")}function ae(){se&&(se.style.filter=Fe())}async function De(){return new Promise(async e=>{let t;try{t=await Ee.media.list()}catch(l){E.toast(`Failed to load media: ${l.message}`,{type:"error"}),e(null);return}const a=t.filter(l=>/\.(jpg|jpeg|png|webp|gif)$/i.test(l.name)),s=document.createElement("div");if(s.className="ie-media-picker",a.length===0){const l=document.createElement("p");l.className="text-muted",l.style.padding="1rem 0",l.textContent="No images in media library.",s.appendChild(l)}else{const l=document.createElement("div");l.className="ie-media-picker-grid",a.forEach(b=>{const d=document.createElement("div");d.className="ie-media-thumb";const f=document.createElement("img");f.src=b.url,f.alt=b.name;const R=document.createElement("span");R.className="ie-media-thumb-name",R.textContent=b.name,d.appendChild(f),d.appendChild(R),d.addEventListener("click",()=>{p.close(),e(b)}),l.appendChild(d)}),s.appendChild(l)}const n=document.createElement("button");n.type="button",n.className="btn btn-sm btn-ghost",n.style.marginTop="0.75rem",n.textContent="Cancel",n.addEventListener("click",()=>{p.close(),e(null)}),s.appendChild(n);const p=E.modal({title:"Choose watermark image",size:"md"});p.element.appendChild(s),p.open()})}function qe(){const e={};if(j&&(e.rotate=j),q&&(e.flip=!0),D&&(e.flop=!0),F){const n=i.getData(!0);n.width>0&&n.height>0&&(e.crop={left:n.x,top:n.y,width:n.width,height:n.height})}const t=parseInt(g.value,10)||null,a=parseInt(w.value,10)||null;(t!==m.width||a!==m.height)&&(e.resize={width:t,height:a}),y&&(e.preset=y);const s={};return r.brightness!==1&&(s.brightness=r.brightness),r.contrast!==1&&(s.contrast=r.contrast),r.saturation!==1&&(s.saturation=r.saturation),r.blur>0&&(s.blur=r.blur),r.sharpen>0&&(s.sharpen=r.sharpen),r.gamma!==1&&(s.gamma=r.gamma),Object.keys(s).length>0&&(e.adjustments=s),u.image&&(e.watermark={image:u.image,position:u.position,opacity:u.opacity/100,scale:u.scale/100}),L.width>0&&(e.border={width:L.width,colour:L.colour,mode:L.mode}),v.type&&(e.format={type:v.type,quality:v.quality}),e}async function Re(e){W.disabled=!0,S.disabled=!0;try{const t=qe();let a=e;if(!e&&v.type){const s=o.name.substring(o.name.lastIndexOf(".")).toLowerCase(),n="."+v.type;s!==n&&(a=o.name.slice(0,o.name.lastIndexOf("."))+n,t._deleteOriginal=o.name)}await Ee.media.transform(o.name,{operations:t,saveAs:a||void 0}),E.toast("Image saved.",{type:"success"}),Ie(!0)}catch(t){E.toast(`Save failed: ${t.message}`,{type:"error"}),W.disabled=!1,S.disabled=!1}}W.addEventListener("click",async()=>{await E.confirm(`Overwrite "${o.name}"? This cannot be undone.`)&&await Re(null)}),S.addEventListener("click",async()=>{const e=v.type?"."+v.type:o.name.substring(o.name.lastIndexOf(".")),t=o.name.slice(0,o.name.lastIndexOf("."));await Re(`${t}-edited${e}`)}),Q.addEventListener("click",()=>Ie(!1));function Ie(e){i&&(i.destroy(),i=null),we.close(),M(e)}})}