image-to-pixel 3.0.1 → 3.2.0

package/lib/editor/inspector.js

@@ -4,6 +4,7 @@ import { h, render } from './dom.js';
 import { icon } from './icons.js';
 import { section, slider, select, segmented, toggle, colorInput, numberInput, field } from './controls.js';
 import { exportSize } from './exporter.js';
+import { isFullClipDefault, INITIAL_INTERVAL_SECONDS } from './storyboard.js';
 import { DITHER_METHODS, ditherKind, defaultSettings, ASPECTS, cropRect } from '../core/settings.js';
 import * as persist from './persist.js';
 import { PALETTES } from '../core/palette/builtin.js';
@@ -141,18 +142,43 @@ export function createInspector(app) {
   const secImage = sec('image', 'Image', true, ['export'], field('Output size', h('div'), { value: exSizeOut }), exMode.el, exScale.el, exGrid.el, exIndexed.el, h('div.itp-grid2', {}, btnPNG, btnCopy), btnZip);
 
   // animation
+  let frameSelection = { active: false, complete: false, count: 0 };
   const anSource = select({ label: 'Frames from', options: [{ value: 'video', label: 'Current video' }, { value: 'files', label: 'All files, in order' }], onChange: () => syncAnim() });
+  const anSelect = toggle({ label: 'Frame selection', help: 'Choose individual video frames on the canvas for animation and sprite sheet exports.', onChange: enabled => {
+    if (enabled) {
+      anSource.set('video');
+      // The untouched Animation default is the full clip; start long clips at three seconds.
+      const cur = app.current?.type === 'video' ? app.current : null;
+      const untouched = cur && !anStart.input.dataset.touched && !anEnd.input.dataset.touched;
+      if (untouched && isFullClipDefault(Number(anEnd.input.value) || 0, cur.duration)) {
+        anStart.set(0); anEnd.set(Math.min(cur.duration, INITIAL_INTERVAL_SECONDS));
+      }
+    }
+    app.setFrameSelection(enabled);
+  } });
   const anFormat = select({ label: 'Format', options: [
     { value: 'gif', label: 'GIF' }, { value: 'webm', label: 'WebM video' }, { value: 'mp4', label: 'MP4 video' }, { value: 'png-seq', label: 'PNG sequence (ZIP)' },
   ], onChange: () => syncAnim() });
-  const anFps = numberInput({ label: 'Frames per second', min: 1, max: 60, onChange: () => { } });
-  const anStart = numberInput({ label: 'Start (s)', min: 0, max: 36000, step: 0.1, onChange: () => { } });
-  const anEnd = numberInput({ label: 'End (s)', min: 0, max: 36000, step: 0.1, onChange: () => { } });
+  const anFps = numberInput({ label: 'Frames per second', min: 1, max: 60, onChange: v => {
+    anFps.input.dataset.touched = '1'; app.setAnimationFps?.(v);
+  } });
+  const changeAnimRange = () => {
+    anStart.input.dataset.touched = '1'; anEnd.input.dataset.touched = '1';
+    app.setFrameRange?.(Number(anStart.input.value) || 0, Number(anEnd.input.value) || 0);
+  };
+  const anStart = numberInput({ label: 'Start (s)', min: 0, max: 36000, step: 0.001, onChange: changeAnimRange });
+  const anEnd = numberInput({ label: 'End (s)', min: 0, max: 36000, step: 0.001, onChange: changeAnimRange });
+  const anSize = select({ label: 'Video size', options: [
+    { value: '1080', label: 'Full HD (sharp in any player)' }, { value: '720', label: '720p' }, { value: '2160', label: '4K' }, { value: 'scale', label: 'Same scale as PNG' },
+  ], onChange: () => { } });
+  anSize.set('1080');
+  const anAudio = toggle({ label: 'Keep audio', help: "The video's soundtrack, cut to the same start and end. MP4 and WebM only.", onChange: () => syncAnim() });
+  const anAudioInput = anAudio.el.querySelector('input');
   const anNote = h('div.help', {});
   const btnAnim = h('button.itp-btn.primary.block', { type: 'button', html: `${icon('film')}<span>Export animation</span>`, onclick: () => app.exportAnimation(animOpts()) });
-  const secAnim = sec('animation', 'Animation', false, null, anSource.el, anFormat.el, anFps.el, h('div.itp-grid2', {}, anStart.el, anEnd.el), anNote, btnAnim);
-  anFps.set(12); anStart.set(0); anEnd.set(0);
-  const animOpts = () => ({ source: anSource.select.value, format: anFormat.select.value, fps: Number(anFps.input.value) || 12, start: Number(anStart.input.value) || 0, end: Number(anEnd.input.value) || 0 });
+  const secAnim = sec('animation', 'Animation', false, null, anSource.el, anSelect.el, anFormat.el, anFps.el, h('div.itp-grid2', {}, anStart.el, anEnd.el), anSize.el, anAudio.el, anNote, btnAnim);
+  anFps.set(12); anStart.set(0); anEnd.set(0); anAudio.set(true);
+  const animOpts = () => ({ source: anSource.select.value, format: anFormat.select.value, fps: Number(anFps.input.value) || 12, start: Number(anStart.input.value) || 0, end: Number(anEnd.input.value) || 0, rangeTouched: !!(anStart.input.dataset.touched || anEnd.input.dataset.touched), audio: anAudioInput.checked, videoSize: anSize.select.value });
 
   // sprite sheet
   const shCols = numberInput({ label: 'Columns', min: 0, max: 256, help: '0 = as square as possible.', onChange: () => { } });
@@ -198,23 +224,43 @@ export function createInspector(app) {
   });
 
   function syncAnim() {
-    const cur = app.current;
-    const hasVideo = cur && cur.type === 'video';
+    const cur = app.current?.type === 'video' ? app.current : null;
+    const hasVideo = !!cur;
     const nImages = app.items.filter(i => i.type === 'image').length;
     if (!hasVideo && anSource.select.value === 'video' && nImages > 1) anSource.set('files');
     if (hasVideo && anSource.select.value === 'files' && nImages < 2) anSource.set('video');
     const src = anSource.select.value;
     const ok = src === 'video' ? hasVideo : nImages > 1;
+    const selecting = frameSelection.active;
+    anSelect.el.hidden = !cur;
+    anSelect.set(selecting);
+    anSource.select.disabled = selecting;
     anStart.el.hidden = anEnd.el.hidden = src !== 'video';
-    btnAnim.disabled = !ok; btnSheet.disabled = !ok;
-    if (hasVideo && !Number(anEnd.input.value)) anEnd.set(Math.round((cur.duration || 0) * 10) / 10);
-    if (hasVideo && cur.fps && !anFps.input.dataset.touched) anFps.set(Math.min(30, Math.round(cur.fps)));
+    btnAnim.disabled = btnSheet.disabled = !ok || (selecting && (!frameSelection.complete || !frameSelection.count));
+    // The tile canvas is the preview while selecting, so these would export a stale frame.
+    btnPNG.disabled = btnCopy.disabled = btnTiles.disabled = selecting;
+    if (cur && !Number(anEnd.input.value)) anEnd.set(Math.round((cur.duration || 0) * 10) / 10);
+    if (cur && cur.fps && !anFps.input.dataset.touched) anFps.set(Math.min(30, Math.round(cur.fps)));
+    app.setAnimationFps?.(Number(anFps.input.value) || 12);
     const f = anFormat.select.value;
-    anNote.textContent = !ok
+    const isVideo = f === 'mp4' || f === 'webm';
+    anAudio.el.hidden = selecting || !(src === 'video' && isVideo);
+    anSize.el.hidden = !isVideo;
+    const vs = app.videoSupport;
+    const noAudio = vs && 'opus' in vs && anAudioInput.checked && !anAudio.el.hidden && !(f === 'mp4' ? vs.aac || vs.opus : vs.opus);
+    const selectionNote = selecting ? !frameSelection.complete ? 'Loading video frames...'
+      : !frameSelection.count ? 'Select frames on the canvas to enable export.'
+      : `${frameSelection.count} selected frames, played at ${Number(anFps.input.value) || 12} fps.${isVideo ? ' Selected frames export without source audio.' : ''} Turn off frame selection to use PNG, Copy or Tileset.` : '';
+    const formatNote = !ok
       ? (src === 'video' ? 'Open a video to export an animation.' : 'Add two or more images to animate them.')
-      : (f === 'mp4' || f === 'webm') && !app.videoSupport?.[f] ? `${f.toUpperCase()} encoding isn't available in this browser. GIF and PNG sequence always work.` : '';
+      : isVideo && !vs?.[f] ? `${f.toUpperCase()} encoding isn't available in this browser. GIF and PNG sequence always work.`
+      : noAudio ? "This browser can't encode audio, so the video will be silent."
+      : f === 'mp4' && vs && 'aac' in vs && !vs.aac && vs.opus && anAudioInput.checked && !anAudio.el.hidden
+        ? "This browser can't encode AAC, so the MP4's sound will be Opus, which Windows Media Player and QuickTime may not play. WebM, or Chrome/Edge on Windows or macOS, avoids that."
+      : '';
+    anNote.textContent = [selectionNote, formatNote].filter(Boolean).join(' ');
   }
-  anFps.input.addEventListener('change', () => { anFps.input.dataset.touched = '1'; });
+  anFps.input.addEventListener('change', syncAnim);
 
   // ---- sync from state
   function renderSwatches(colors, editable) {
@@ -323,6 +369,11 @@ export function createInspector(app) {
     statTime.parentElement.title = result.backend === 'webgl' ? 'Rendered on the GPU (WebGL 2 via ShaderMate)' : 'Rendered on the CPU';
   }
 
-  return { el, sync, setStats, setTab, syncAnim };
+  return { el, sync, setStats, setTab, syncAnim, animationOptions: animOpts,
+    setFrameSelectionState(state) { frameSelection = state; syncAnim(); },
+    setAnimationRange({ start, end, user = false }) {
+      anStart.set(Number(start.toFixed(3))); anEnd.set(Number(end.toFixed(3)));
+      if (user) { anStart.input.dataset.touched = '1'; anEnd.input.dataset.touched = '1'; }
+    } };
 }
 

package/lib/editor/library.js

@@ -1,182 +1,188 @@
-// Left panel: Files (the batch), Presets (live thumbnails) and Palettes.
-
-import { h, render } from './dom.js';
-import { menu } from './ui.js';
-import { icon } from './icons.js';
-import { PRESETS } from '../core/presets.js';
-import { PALETTES } from '../core/palette/builtin.js';
-import { mergeSettings, defaultSettings } from '../core/settings.js';
-
-export function createLibrary(app) {
-  let tab = 'files';
-  const tabBtn = (id, label, ic) => h('button', { type: 'button', role: 'tab', 'aria-selected': String(id === tab), html: `${icon(ic)}<span>${label}</span>`, onclick: () => setTab(id) });
-  const tFiles = tabBtn('files', 'Files', 'files');
-  const tPresets = tabBtn('presets', 'Presets', 'presets');
-  const tPalettes = tabBtn('palettes', 'Palettes', 'palette');
-  const filesCount = h('span.count', {});
-  tFiles.append(filesCount);
-  const tabs = h('div.itp-seg', { role: 'tablist', 'aria-label': 'Library' }, tFiles, tPresets, tPalettes);
-
-  const search = h('input', { type: 'search', placeholder: 'Search', 'aria-label': 'Search the library' });
-  const searchBox = h('div.itp-search', {}, h('span', { html: icon('search') }), search);
-  search.addEventListener('input', () => renderTab());
-
-  const body = h('div.itp-panel-body', {});
-  const el = h('aside.itp-lib', { 'aria-label': 'Library' }, h('div.itp-panel-head', {}, tabs), searchBox, body);
-
-  function setTab(t) {
-    tab = t;
-    for (const [b, id] of [[tFiles, 'files'], [tPresets, 'presets'], [tPalettes, 'palettes']]) b.setAttribute('aria-selected', String(id === t));
-    search.value = '';
-    renderTab();
-    if (t === 'presets' && !thumbs.size) refreshThumbs();
-  }
-  const q = () => search.value.trim().toLowerCase();
-
-  // ---- files
-  function fileMenu(it, anchor) {
-    const i = app.items.indexOf(it), many = app.items.length > 1;
-    menu(anchor, [
-      it.own
-        ? { label: 'Use shared settings', sub: 'Drop this file\'s own settings', icon: 'link', onClick: () => app.setOwn(it, false) }
-        : { label: 'Give it its own settings', sub: 'Edits stop affecting other files', icon: 'unlink', disabled: !many, onClick: () => app.setOwn(it, true) },
-      'sep',
-      { label: 'Copy settings', icon: 'copy', onClick: () => app.copySettings(it) },
-      { label: 'Paste settings', sub: app.clipboard ? 'Gives this file its own settings' : 'Copy settings from a file first', icon: 'clipboard', disabled: !app.clipboard, onClick: () => app.pasteSettings(it) },
-      { label: 'Apply these settings to all files', icon: 'layers', disabled: !many, onClick: () => app.applyToAll(it) },
-      'sep',
-      { label: 'Duplicate', sub: 'A copy with its own settings, to compare looks', icon: 'copy', onClick: () => app.duplicate(it) },
-      { label: 'Move up', icon: 'arrowUp', kbd: 'Alt Shift ↑', disabled: i <= 0, onClick: () => app.move(it, -1) },
-      { label: 'Move down', icon: 'arrowDown', kbd: 'Alt Shift ↓', disabled: i >= app.items.length - 1, onClick: () => app.move(it, 1) },
-      'sep',
-      { label: 'Remove', icon: 'trash', kbd: 'Del', onClick: () => app.removeItem(it) },
-    ], { align: 'start' });
-  }
-
-  function renderFiles() {
-    const items = app.items.filter(i => !q() || i.name.toLowerCase().includes(q()));
-    const list = h('ul.itp-files', { 'aria-label': 'Files' });
-    for (const it of items) {
-      const more = h('button.itp-btn.small.icon', { type: 'button', 'aria-label': `Options for ${it.name}`, 'aria-haspopup': 'menu', title: 'Settings, duplicate, order', html: icon('more'), onclick: e => { e.stopPropagation(); fileMenu(it, more); } });
-      const sub = it.type === 'video' ? `Video, ${fmtTime(it.duration)}` : `${it.width} × ${it.height}`;
-      const row = h('li.itp-file-row', { tabindex: '0', 'aria-current': String(app.current === it), 'data-own': it.own ? 'true' : null },
-        h('img.thumb', { src: it.thumb || '', alt: '' }),
-        h('div', { style: { minWidth: 0 } },
-          h('div.title', { text: it.name }),
-          h('div.sub', {}, sub, it.own ? h('span.itp-own', { title: 'This file has its own settings', html: `${icon('unlink')}<span>Own</span>` }) : null)),
-        h('div.actions', {}, more,
-          h('button.itp-btn.small.icon.danger', { type: 'button', 'aria-label': `Remove ${it.name}`, title: 'Remove', html: icon('x'), onclick: e => { e.stopPropagation(); app.removeItem(it); } })));
-      row.addEventListener('click', () => app.select(it));
-      row.addEventListener('contextmenu', e => { e.preventDefault(); app.select(it); fileMenu(it, more); });
-      row.addEventListener('keydown', e => {
-        if (e.target !== row) return;
-        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); app.select(it); }
-        if (e.key === 'Delete' || e.key === 'Backspace') { e.preventDefault(); app.removeItem(it); }
-        if (e.altKey) return;   // Alt+arrows are global shortcuts (next file, move file)
-        if (e.key === 'ArrowDown') { e.preventDefault(); row.nextElementSibling?.focus(); }
-        if (e.key === 'ArrowUp') { e.preventDefault(); row.previousElementSibling?.focus(); }
-        if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) { e.preventDefault(); fileMenu(it, more); }
-      });
-      list.append(row);
-    }
-    const nOwn = app.items.filter(i => i.own).length;
-    const summary = !app.items.length ? 'No files yet'
-      : app.items.length === 1 ? '1 file'
-      : nOwn ? `${app.items.length} files, ${nOwn} with ${nOwn === 1 ? 'its' : 'their'} own settings`
-      : `${app.items.length} files, shared settings`;
-    const head = h('div.itp-group', {}, h('span', { text: summary }),
-      app.items.length > 1 ? h('button.itp-link', { type: 'button', text: 'Clear', onclick: () => app.clearItems() }) : null);
-    const add = h('div', { style: { padding: '4px 12px 12px', display: 'flex', gap: '6px' } },
-      h('button.itp-btn.outline.small', { type: 'button', html: `${icon('plus')}<span>Add files</span>`, onclick: () => app.openFiles() }),
-      h('button.itp-btn.small', { type: 'button', html: `${icon('clipboard')}<span>Paste</span>`, title: 'Paste an image from the clipboard (Ctrl+V)', onclick: () => app.pasteFromClipboard() }));
-    render(body, head, list, add, h('div.itp-group', {}, h('span', { text: 'Drop images or videos anywhere in the window. Files share one set of settings unless you give one its own (⋯ menu or right-click).' })));
-  }
-
-  // ---- presets (thumbnails rendered from the current image)
-  const thumbs = new Map();   // preset id → canvas
-  let thumbGen = 0;
-  function renderPresets() {
-    const cur = app.store.settings;
-    const list = PRESETS.filter(p => !q() || (p.name + p.description).toLowerCase().includes(q()));
-    const grid = h('div.itp-presets', {});
-    for (const p of list) {
-      const active = app.activePreset === p.id;
-      const pic = thumbs.get(p.id) || h('div.ph', {});
-      const b = h('button.itp-preset', { type: 'button', 'aria-pressed': String(active), title: p.description, onclick: () => app.applyPreset(p) },
-        pic, h('span.t', { text: p.name }), h('span.d', { text: p.description }));
-      grid.append(b);
-    }
-    render(body, h('div.itp-group', {}, h('span', { text: 'Presets replace the current settings. Undo with Ctrl+Z.' })), grid);
-    void cur;
-  }
-  async function refreshThumbs() {
-    const gen = ++thumbGen;
-    const item = app.current;
-    if (!item || !app.engine) return;
-    for (const p of PRESETS) {
-      if (gen !== thumbGen) return;
-      const s = mergeSettings(defaultSettings(), p.settings);
-      // small, fast previews: cap the width and skip slow-on-CPU diffusion sizes
-      s.size = { ...s.size, mode: 'width', width: Math.min(s.size.width, 72), height: 0 };
-      try {
-        const r = await app.engine.process(item.source, s);
-        if (gen !== thumbGen) return;
-        const c = r.toCanvas(1);
-        thumbs.set(p.id, c);
-        if (tab === 'presets') renderPresets();
-      } catch { /* ignore a failed thumbnail */ }
-    }
-  }
-
-  // ---- palettes
-  function palRow(p, active, removable) {
-    const strip = h('div.itp-strip', {}, ...p.colors.slice(0, 64).map(c => h('i', { style: { background: c.startsWith('#') ? c : '#' + c } })));
-    const row = h('li.itp-pal', { tabindex: '0', role: 'button', 'aria-pressed': String(active) },
-      h('div.row', {}, h('span', { text: p.name }), h('span.n', { text: String(p.colors.length), title: p.author ? `by ${p.author}` : null })), strip);
-    const pick = () => app.usePalette(p);
-    row.addEventListener('click', pick);
-    row.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } if (removable && (e.key === 'Delete')) app.deletePalette(p); });
-    if (removable) {
-      const del = h('button.itp-btn.small.icon.danger', { type: 'button', 'aria-label': `Delete ${p.name}`, title: 'Delete', html: icon('trash'), onclick: e => { e.stopPropagation(); app.deletePalette(p); } });
-      row.firstChild.append(del);
-    }
-    return row;
-  }
-  function renderPalettes() {
-    const s = app.store.settings.palette;
-    const match = p => !q() || (p.name + ' ' + (p.author || '')).toLowerCase().includes(q()) || String(p.colors.length) === q();
-    const mine = app.userPalettes.filter(match);
-    const built = PALETTES.filter(match);
-    const actions = h('div', { style: { padding: '0 12px 4px', display: 'flex', gap: '6px', flexWrap: 'wrap' } },
-      h('button.itp-btn.outline.small', { type: 'button', html: `${icon('upload')}<span>Import file</span>`, onclick: () => app.importPalette() }),
-      h('button.itp-btn.small', { type: 'button', html: `${icon('palette')}<span>From Lospec</span>`, onclick: () => app.lospecDialog() }));
-    const yours = mine.length ? [h('div.itp-group', {}, h('span', { text: 'Your palettes' }), h('span.itp-badge', { text: String(mine.length) })),
-      h('ul.itp-pal-list', {}, ...mine.map(p => palRow(p, s.source === 'custom' && s.name === p.name, true)))] : [];
-    render(body, actions, ...yours,
-      h('div.itp-group', {}, h('span', { text: 'Built-in' }), h('span.itp-badge', { text: String(built.length) })),
-      h('ul.itp-pal-list', {}, ...built.map(p => palRow({ ...p, colors: p.colors.map(c => '#' + c) }, s.source === 'builtin' && s.id === p.id, false))));
-  }
-
-  function renderTab() {
-    filesCount.textContent = app.items.length ? String(app.items.length) : '';
-    if (tab === 'files') renderFiles();
-    else if (tab === 'presets') renderPresets();
-    else renderPalettes();
-  }
-
-  return {
-    el,
-    refresh: renderTab,
-    setTab,
-    /** Focus a file's row (after it moved). */
-    focusFile(item) { if (tab === 'files') body.querySelectorAll('.itp-file-row')[app.items.indexOf(item)]?.focus(); },
-    /** The current image changed: rebuild preset thumbnails. */
-    sourceChanged() { thumbs.clear(); thumbGen++; if (tab === 'presets') { renderTab(); refreshThumbs(); } },
-    get tab() { return tab; },
-  };
-}
-
-export function fmtTime(t = 0) {
-  const m = Math.floor(t / 60), s = t - m * 60;
-  return `${m}:${s.toFixed(1).padStart(4, '0')}`;
-}
+// Left panel: Files (the batch), Presets (live thumbnails) and Palettes.
+
+import { h, render } from './dom.js';
+import { menu } from './ui.js';
+import { icon } from './icons.js';
+import { PRESETS } from '../core/presets.js';
+import { PALETTES } from '../core/palette/builtin.js';
+import { mergeSettings, defaultSettings } from '../core/settings.js';
+
+export function createLibrary(app) {
+  let tab = 'files';
+  const tabBtn = (id, label, ic) => h('button', { type: 'button', role: 'tab', title: label, 'aria-selected': String(id === tab), html: `${icon(ic)}<span>${label}</span>`, onclick: () => setTab(id) });
+  const tFiles = tabBtn('files', 'Files', 'files');
+  const tPresets = tabBtn('presets', 'Presets', 'presets');
+  const tPalettes = tabBtn('palettes', 'Palettes', 'palette');
+  const filesCount = h('span.count', {});
+  tFiles.append(filesCount);
+  const tabs = h('div.itp-seg', { role: 'tablist', 'aria-label': 'Library' }, tFiles, tPresets, tPalettes);
+
+  const search = h('input', { type: 'search', placeholder: 'Search', 'aria-label': 'Search the library' });
+  const searchBox = h('div.itp-search', {}, h('span', { html: icon('search') }), search);
+  search.addEventListener('input', () => renderTab());
+
+  const body = h('div.itp-panel-body', {});
+  const el = h('aside.itp-lib', { 'aria-label': 'Library' }, h('div.itp-panel-head', {}, tabs), searchBox, body);
+
+  function setTab(t) {
+    tab = t;
+    for (const [b, id] of [[tFiles, 'files'], [tPresets, 'presets'], [tPalettes, 'palettes']]) b.setAttribute('aria-selected', String(id === t));
+    search.value = '';
+    renderTab();
+    if (t === 'presets' && !thumbs.size) refreshThumbs();
+  }
+  const q = () => search.value.trim().toLowerCase();
+
+  // ---- files
+  function fileMenu(it, anchor) {
+    const i = app.items.indexOf(it), many = app.items.length > 1;
+    menu(anchor, [
+      it.own
+        ? { label: 'Use shared settings', sub: 'Drop this file\'s own settings', icon: 'link', onClick: () => app.setOwn(it, false) }
+        : { label: 'Give it its own settings', sub: 'Edits stop affecting other files', icon: 'unlink', disabled: !many, onClick: () => app.setOwn(it, true) },
+      'sep',
+      { label: 'Copy settings', icon: 'copy', onClick: () => app.copySettings(it) },
+      { label: 'Paste settings', sub: app.clipboard ? 'Gives this file its own settings' : 'Copy settings from a file first', icon: 'clipboard', disabled: !app.clipboard, onClick: () => app.pasteSettings(it) },
+      { label: 'Apply these settings to all files', icon: 'layers', disabled: !many, onClick: () => app.applyToAll(it) },
+      'sep',
+      { label: 'Rename', sub: 'Exports are named after it', icon: 'rename', kbd: 'F2', onClick: () => app.startRename(it) },
+      { label: 'Duplicate', sub: 'A copy with its own settings, to compare looks', icon: 'copy', onClick: () => app.duplicate(it) },
+      { label: 'Move up', icon: 'arrowUp', kbd: 'Alt Shift ↑', disabled: i <= 0, onClick: () => app.move(it, -1) },
+      { label: 'Move down', icon: 'arrowDown', kbd: 'Alt Shift ↓', disabled: i >= app.items.length - 1, onClick: () => app.move(it, 1) },
+      'sep',
+      { label: 'Remove', icon: 'trash', kbd: 'Del', onClick: () => app.removeItem(it) },
+    ], { align: 'start' });
+  }
+
+  function renderFiles() {
+    const items = app.items.filter(i => !q() || i.name.toLowerCase().includes(q()));
+    const list = h('ul.itp-files', { 'aria-label': 'Files' });
+    for (const it of items) {
+      const more = h('button.itp-btn.small.icon', { type: 'button', 'aria-label': `Options for ${it.name}`, 'aria-haspopup': 'menu', title: 'Settings, duplicate, order', html: icon('more'), onclick: e => { e.stopPropagation(); fileMenu(it, more); } });
+      const sub = it.type === 'video' ? `Video, ${fmtTime(it.duration)}` : `${it.width} × ${it.height}`;
+      const row = h('li.itp-file-row', { tabindex: '0', 'aria-current': String(app.current === it), 'data-own': it.own ? 'true' : null },
+        h('img.thumb', { src: it.thumb || '', alt: '' }),
+        h('div', { style: { minWidth: 0 } },
+          h('div.title', { text: it.name }),
+          h('div.sub', {}, sub, it.own ? h('span.itp-own', { title: 'This file has its own settings', html: `${icon('unlink')}<span>Own</span>` }) : null)),
+        h('div.actions', {}, more,
+          h('button.itp-btn.small.icon.danger', { type: 'button', 'aria-label': `Remove ${it.name}`, title: 'Remove', html: icon('x'), onclick: e => { e.stopPropagation(); app.removeItem(it); } })));
+      row.addEventListener('click', () => app.select(it));
+      row.addEventListener('dblclick', e => { if (e.target.closest('.title')) app.startRename(it); });
+      row.addEventListener('contextmenu', e => { e.preventDefault(); app.select(it); fileMenu(it, more); });
+      row.addEventListener('keydown', e => {
+        if (e.target !== row) return;
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); app.select(it); }
+        if (e.key === 'Delete' || e.key === 'Backspace') { e.preventDefault(); app.removeItem(it); }
+        if (e.altKey) return;   // Alt+arrows are global shortcuts (next file, move file)
+        if (e.key === 'ArrowDown') { e.preventDefault(); row.nextElementSibling?.focus(); }
+        if (e.key === 'ArrowUp') { e.preventDefault(); row.previousElementSibling?.focus(); }
+        if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) { e.preventDefault(); fileMenu(it, more); }
+      });
+      list.append(row);
+    }
+    const nOwn = app.items.filter(i => i.own).length;
+    const summary = !app.items.length ? 'No files yet'
+      : app.items.length === 1 ? '1 file'
+      : nOwn ? `${app.items.length} files, ${nOwn} with ${nOwn === 1 ? 'its' : 'their'} own settings`
+      : `${app.items.length} files, shared settings`;
+    const head = h('div.itp-group', {}, h('span', { text: summary }),
+      app.items.length > 1 ? h('button.itp-link', { type: 'button', text: 'Clear', onclick: () => app.clearItems() }) : null);
+    const add = h('div', { style: { padding: '4px 12px 12px', display: 'flex', gap: '6px' } },
+      h('button.itp-btn.outline.small', { type: 'button', html: `${icon('plus')}<span>Add files</span>`, onclick: () => app.openFiles() }),
+      h('button.itp-btn.small', { type: 'button', html: `${icon('clipboard')}<span>Paste</span>`, title: 'Paste an image from the clipboard (Ctrl+V)', onclick: () => app.pasteFromClipboard() }));
+    const saved = app.savedWorkspace && app.savedWorkspace();
+    const savedNote = saved ? h('div.itp-group.itp-saved', {},
+      h('span', { text: `Saved in this browser: ${saved.count} file${saved.count === 1 ? '' : 's'}`, title: 'Kept in this browser\'s storage, never uploaded. Clearing the site\'s data also removes it.' }),
+      h('button.itp-link', { type: 'button', text: 'Forget', title: 'Remove the saved files from this browser', onclick: () => app.forgetWorkspace() })) : null;
+    render(body, head, list, add, savedNote, h('div.itp-group', {}, h('span', { text: 'Drop images or videos anywhere in the window. Files share one set of settings unless you give one its own (⋯ menu or right-click). Save keeps them in this browser for next time.' })));
+  }
+
+  // ---- presets (thumbnails rendered from the current image)
+  const thumbs = new Map();   // preset id → canvas
+  let thumbGen = 0;
+  function renderPresets() {
+    const cur = app.store.settings;
+    const list = PRESETS.filter(p => !q() || (p.name + p.description).toLowerCase().includes(q()));
+    const grid = h('div.itp-presets', {});
+    for (const p of list) {
+      const active = app.activePreset === p.id;
+      const pic = thumbs.get(p.id) || h('div.ph', {});
+      const b = h('button.itp-preset', { type: 'button', 'aria-pressed': String(active), title: p.description, onclick: () => app.applyPreset(p) },
+        pic, h('span.t', { text: p.name }), h('span.d', { text: p.description }));
+      grid.append(b);
+    }
+    render(body, h('div.itp-group', {}, h('span', { text: 'Presets replace the current settings. Undo with Ctrl+Z.' })), grid);
+    void cur;
+  }
+  async function refreshThumbs() {
+    const gen = ++thumbGen;
+    const item = app.current;
+    if (!item || !app.engine) return;
+    for (const p of PRESETS) {
+      if (gen !== thumbGen) return;
+      const s = mergeSettings(defaultSettings(), p.settings);
+      // small, fast previews: cap the width and skip slow-on-CPU diffusion sizes
+      s.size = { ...s.size, mode: 'width', width: Math.min(s.size.width, 72), height: 0 };
+      try {
+        const r = await app.engine.process(item.source, s);
+        if (gen !== thumbGen) return;
+        const c = r.toCanvas(1);
+        thumbs.set(p.id, c);
+        if (tab === 'presets') renderPresets();
+      } catch { /* ignore a failed thumbnail */ }
+    }
+  }
+
+  // ---- palettes
+  function palRow(p, active, removable) {
+    const strip = h('div.itp-strip', {}, ...p.colors.slice(0, 64).map(c => h('i', { style: { background: c.startsWith('#') ? c : '#' + c } })));
+    const row = h('li.itp-pal', { tabindex: '0', role: 'button', 'aria-pressed': String(active) },
+      h('div.row', {}, h('span', { text: p.name }), h('span.n', { text: String(p.colors.length), title: p.author ? `by ${p.author}` : null })), strip);
+    const pick = () => app.usePalette(p);
+    row.addEventListener('click', pick);
+    row.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } if (removable && (e.key === 'Delete')) app.deletePalette(p); });
+    if (removable) {
+      const del = h('button.itp-btn.small.icon.danger', { type: 'button', 'aria-label': `Delete ${p.name}`, title: 'Delete', html: icon('trash'), onclick: e => { e.stopPropagation(); app.deletePalette(p); } });
+      row.firstChild.append(del);
+    }
+    return row;
+  }
+  function renderPalettes() {
+    const s = app.store.settings.palette;
+    const match = p => !q() || (p.name + ' ' + (p.author || '')).toLowerCase().includes(q()) || String(p.colors.length) === q();
+    const mine = app.userPalettes.filter(match);
+    const built = PALETTES.filter(match);
+    const actions = h('div', { style: { padding: '0 12px 4px', display: 'flex', gap: '6px', flexWrap: 'wrap' } },
+      h('button.itp-btn.outline.small', { type: 'button', html: `${icon('upload')}<span>Import file</span>`, onclick: () => app.importPalette() }),
+      h('button.itp-btn.small', { type: 'button', html: `${icon('palette')}<span>From Lospec</span>`, onclick: () => app.lospecDialog() }));
+    const yours = mine.length ? [h('div.itp-group', {}, h('span', { text: 'Your palettes' }), h('span.itp-badge', { text: String(mine.length) })),
+      h('ul.itp-pal-list', {}, ...mine.map(p => palRow(p, s.source === 'custom' && s.name === p.name, true)))] : [];
+    render(body, actions, ...yours,
+      h('div.itp-group', {}, h('span', { text: 'Built-in' }), h('span.itp-badge', { text: String(built.length) })),
+      h('ul.itp-pal-list', {}, ...built.map(p => palRow({ ...p, colors: p.colors.map(c => '#' + c) }, s.source === 'builtin' && s.id === p.id, false))));
+  }
+
+  function renderTab() {
+    filesCount.textContent = app.items.length ? String(app.items.length) : '';
+    if (tab === 'files') renderFiles();
+    else if (tab === 'presets') renderPresets();
+    else renderPalettes();
+  }
+
+  return {
+    el,
+    refresh: renderTab,
+    setTab,
+    /** Focus a file's row (after it moved). */
+    focusFile(item) { if (tab === 'files') body.querySelectorAll('.itp-file-row')[app.items.indexOf(item)]?.focus(); },
+    /** The current image changed: rebuild preset thumbnails. */
+    sourceChanged() { thumbs.clear(); thumbGen++; if (tab === 'presets') { renderTab(); refreshThumbs(); } },
+    get tab() { return tab; },
+  };
+}
+
+export function fmtTime(t = 0) {
+  const m = Math.floor(t / 60), s = t - m * 60;
+  return `${m}:${s.toFixed(1).padStart(4, '0')}`;
+}