image-to-pixel 3.0.1 → 3.2.0

package/lib/editor/index.js

@@ -7,7 +7,7 @@ import { parsePalette, toGPL, toHexFile, toPaletteJSON } from '../core/palette/p
 import { fetchLospec } from '../core/palette/lospec.js';
 import { detectGrid } from '../core/export/scale.js';
 import { toHex } from '../core/color.js';
-import { estimateFps, videoReady, seekTo, sniffVideoCodec } from '../core/video/frames.js';
+import { estimateFps, videoReady, seekTo, sniffVideoCodec, hasAudioTrack } from '../core/video/frames.js';
 import { downloadBlob } from '../core/export/canvas.js';
 import { PRESETS } from '../core/presets.js';
 import { h, render, pickFiles } from './dom.js';
@@ -17,9 +17,12 @@ import { createStage } from './stage.js';
 import { createInspector } from './inspector.js';
 import { createLibrary, fmtTime } from './library.js';
 import { createExporter } from './exporter.js';
+import { createVideoStoryboard } from './storyboard.js';
+import { createTimelinePreview } from './timeline-preview.js';
 import { toast, menu, closeMenu, dialog } from './ui.js';
 import { SAMPLES, loadSample, sampleURL } from './samples.js';
 import * as persist from './persist.js';
+import { saveWorkspace, loadWorkspace, forgetWorkspace, isQuotaError, fmtBytes } from './workspace.js';
 
 const IMAGE_TYPES = /^image\//;
 const VIDEO_TYPES = /^video\//;
@@ -67,6 +70,8 @@ export async function mountEditor(root, options = {}) {
   const btn = (ic, label, onclick, extra = {}) => h('button.itp-btn.icon', { type: 'button', 'aria-label': label, title: label, html: icon(ic), onclick, ...extra });
 
   const fileName = h('span.name', { text: 'No image' });
+  // click the name to rename (F2); the extension stays as it was
+  fileName.addEventListener('click', () => { if (app.current) startRename(app.current); });
   const fileMeta = h('span.meta.num', {});
   const undoBtn = btn('undo', 'Undo (Ctrl+Z)', () => store.undo());
   const redoBtn = btn('redo', 'Redo (Ctrl+Shift+Z)', () => store.redo());
@@ -78,6 +83,8 @@ export async function mountEditor(root, options = {}) {
   const inspBtn = btn('sidebarRight', 'Toggle inspector (/)', () => togglePanel('insp'));
   const helpBtn = btn('keyboard', 'Keyboard shortcuts (?)', () => showHelp());
   const exportBtn = h('button.itp-btn.primary', { type: 'button', 'aria-haspopup': 'menu', html: `${icon('download')}<span>Export</span>`, onclick: e => exportMenu(e.currentTarget) });
+  const saveBtn = h('button.itp-btn.outline', { type: 'button', title: 'Save these files and their settings in this browser', html: `${icon('save')}<span class="hide-sm">Save</span>`, onclick: () => saveNow() });
+  saveBtn.hidden = !usePersist;
   const brand = h('a.itp-brand', { href: options.homeHref || '#', title: 'Image-to-Pixel' }, h('span.itp-mark', { 'aria-hidden': 'true' }, ...Array.from({ length: 9 }, () => h('i'))), h('span.hide-sm', { text: 'Image-to-Pixel' }));
   if (!options.homeHref) brand.addEventListener('click', e => e.preventDefault());
 
@@ -88,7 +95,7 @@ export async function mountEditor(root, options = {}) {
     h('span.hide-sm.contents', {}, undoBtn, redoBtn, h('span.sep')),
     compareBtn, gridBtn, zoomBtn,
     h('span.sep.hide-sm'), h('span.hide-sm.contents', {}, themeBtn, helpBtn), inspBtn,
-    h('span', { style: { width: '6px' } }), exportBtn);
+    h('span', { style: { width: '6px' } }), saveBtn, exportBtn);
 
   // stage extras
   const sampleButtons = options.samples === false ? null : h('div.samples', {}, ...SAMPLES.map(s => h('button', { type: 'button', title: `Try "${s.name}"`, 'aria-label': `Open sample: ${s.name}`, onclick: () => openSample(s) }, h('img', { src: sampleURL(s), alt: '' }))));
@@ -113,10 +120,85 @@ export async function mountEditor(root, options = {}) {
   const timeLabel = h('span.itp-time', {});
   const scrub = h('input.itp-scrub', { type: 'range', min: 0, max: 1000, value: 0, 'aria-label': 'Video position' });
   const fpsLabel = h('span.muted.num', { style: { fontSize: 'var(--fs-xs)', whiteSpace: 'nowrap' } });
+  // sound: muted by default; the choice (and volume) is remembered and applies to every video
+  const sound = { muted: persist.load('muted', true) !== false, volume: Number(persist.load('volume', 1)) };
+  if (!(sound.volume >= 0 && sound.volume <= 1)) sound.volume = 1;
+  // YouTube-style: the speaker button opens a vertical volume slider; all the way down is mute.
+  const muteBtn = btn('volumeOff', 'Volume (M mutes)', () => toggleVolPop(), { 'aria-haspopup': 'true', 'aria-expanded': 'false' });
+  const volFill = h('div.fill');
+  const volThumb = h('div.thumb');
+  const volSlider = h('div.itp-vslider', { role: 'slider', tabindex: '0', 'aria-label': 'Volume', 'aria-orientation': 'vertical', 'aria-valuemin': '0', 'aria-valuemax': '100' }, h('div.track', {}, volFill, volThumb));
+  const volValue = h('span.num', {});
+  const volPop = h('div.itp-volpop', { hidden: true }, volValue, volSlider);
+  const soundBox = h('div.itp-sound', { hidden: true }, volPop, muteBtn);
+  const setLevel = v => setSound(v <= 0.005 ? { muted: true } : { muted: false, volume: Math.min(1, v) });
+  const levelAt = e => { const r = volSlider.querySelector('.track').getBoundingClientRect(); return Math.max(0, Math.min(1, (r.bottom - e.clientY) / r.height)); };
+  volSlider.addEventListener('pointerdown', e => {
+    e.preventDefault(); volSlider.focus(); volSlider.setPointerCapture(e.pointerId);
+    const before = sound.muted ? 0 : sound.volume;
+    setLevel(levelAt(e));
+    const move = ev => setLevel(levelAt(ev));
+    const up = () => {
+      volSlider.removeEventListener('pointermove', move); volSlider.removeEventListener('pointerup', up); volSlider.removeEventListener('pointercancel', up);
+      // dragged down to mute: M brings back the volume it had before the drag
+      if (sound.muted && before > 0) setSound({ muted: true, volume: before });
+    };
+    volSlider.addEventListener('pointermove', move); volSlider.addEventListener('pointerup', up); volSlider.addEventListener('pointercancel', up);
+  });
+  volSlider.addEventListener('keydown', e => {
+    const cur = sound.muted ? 0 : sound.volume;
+    const next = { ArrowUp: cur + 0.05, ArrowRight: cur + 0.05, ArrowDown: cur - 0.05, ArrowLeft: cur - 0.05, PageUp: cur + 0.2, PageDown: cur - 0.2, Home: 0, End: 1 }[e.key];
+    if (next === undefined) { if (e.key === 'Escape') { e.preventDefault(); toggleVolPop(false); muteBtn.focus(); } return; }
+    e.preventDefault(); e.stopPropagation(); setLevel(next);
+  });
+  volSlider.addEventListener('wheel', e => { e.preventDefault(); setLevel((sound.muted ? 0 : sound.volume) - Math.sign(e.deltaY) * 0.05); }, { passive: false });
+  function toggleVolPop(open = volPop.hidden) {
+    volPop.hidden = !open;
+    muteBtn.setAttribute('aria-expanded', String(open));
+    if (open) {
+      const close = e => { if (!soundBox.contains(e.target)) { toggleVolPop(false); document.removeEventListener('pointerdown', close, true); } };
+      document.addEventListener('pointerdown', close, true);
+    }
+  }
   const transport = h('div.itp-transport', { role: 'group', 'aria-label': 'Video' },
     btn('stepBack', 'Previous frame (,)', () => stepFrame(-1)), playBtn, btn('stepForward', 'Next frame (.)', () => stepFrame(1)),
-    timeLabel, scrub, fpsLabel);
-  const stageWrap = h('main.itp-stage', { 'data-video': 'false' }, stage.el, transport);
+    timeLabel, scrub, soundBox, fpsLabel);
+  // The frame-selection canvas replaces the preview while it is on, so its tiles feed the stats.
+  let statsResult = null;
+  function updateStats(res) {
+    if (res === statsResult) return false;
+    statsResult = res;
+    inspector.setStats(res);
+    return true;
+  }
+  const timelinePreview = createTimelinePreview(app);
+  const storyboard = createVideoStoryboard(app, {
+    onModeChange: active => {
+      timelinePreview.hide();
+      stage.el.hidden = active;
+      transport.hidden = active;
+      compareBtn.disabled = gridBtn.disabled = active;
+      if (!active) { stage.resize(); schedule(); }
+      updateZoomLabel();
+    },
+    onZoomChange: updateZoomLabel,
+    onRangeChange: range => inspector.setAnimationRange(range),
+    onSelectionChange: state => {
+      inspector.setFrameSelectionState(state);
+      const res = state.active ? state.result : app.result;
+      if (updateStats(res) && res && state.active) inspector.sync(store.settings, res);
+    },
+    animationOptions: () => inspector.animationOptions(),
+  });
+  app.setFrameSelection = enabled => storyboard.setMode(enabled);
+  app.setFrameRange = (start, end) => storyboard.setRange(start, end);
+  app.setAnimationFps = fps => storyboard.setPlaybackFps(fps);
+  app.frameSelection = () => storyboard.exportSelection();
+  /** The result the stats and size readouts describe: the main preview, or the selection's frame. */
+  const previewResult = () => (storyboard.active ? storyboard.currentResult() : app.result);
+  const stageWrap = h('main.itp-stage', { 'data-video': 'false' }, stage.el, storyboard.el, transport, storyboard.transport, timelinePreview.el);
+  timelinePreview.bind(scrub);
+  timelinePreview.bind(storyboard.range, { getFrame: storyboard.frameCanvas });
 
   // on narrow screens the library is a drawer: a tap on the canvas closes it
   stageWrap.addEventListener('pointerdown', () => { if (narrow() && shell.dataset.lib === 'open') togglePanel('lib'); }, true);
@@ -148,7 +230,7 @@ export async function mountEditor(root, options = {}) {
 
   async function run() {
     if (running || !dirty) return;
-    if (app.exporting) return;
+    if (app.exporting || storyboard.active) return;
     dirty = false;
     const item = app.current;
     if (!item) { app.result = null; stage.clear(); updateStatus(); return; }
@@ -157,11 +239,11 @@ export async function mountEditor(root, options = {}) {
     try {
       if (item.type === 'video') app.engine.invalidate();
       const res = await app.engine.process(item.source, store.settings);
-      if (item !== app.current) return;
+      if (item !== app.current || storyboard.active) return;
       app.result = res;
       res.toCanvas(1, { canvas: outCanvas });
       stage.show(outCanvas, item.source, res.crop);
-      inspector.setStats(res);
+      updateStats(res);
       inspector.sync(store.settings, res);
       if (lastSource !== item) { lastSource = item; }
       updateStatus();
@@ -187,7 +269,8 @@ export async function mountEditor(root, options = {}) {
     undoBtn.disabled = !store.canUndo; redoBtn.disabled = !store.canRedo;
   }
   function updateZoomLabel() {
-    zoomBtn.querySelector('span').textContent = !app.current || stage.fitted ? 'Fit' : stage.zoom >= 1 ? `${Math.round(stage.zoom * 10) / 10}×` : `${Math.round(stage.zoom * 100)}%`;
+    const view = storyboard.active ? storyboard : stage;
+    zoomBtn.querySelector('span').textContent = !app.current || view.fitted ? 'Fit' : view.zoom >= 1 ? `${Math.round(view.zoom * 10) / 10}×` : `${Math.round(view.zoom * 100)}%`;
     if (app.result) updateStatus();
   }
 
@@ -196,11 +279,13 @@ export async function mountEditor(root, options = {}) {
     const cur = app.current;
     if (cur && cur.own && store.target === cur.id) cur.own = s;
     else if (store.target === 'shared') app.shared = s;
-    inspector.sync(s, app.result);
+    inspector.sync(s, previewResult());
     undoBtn.disabled = !store.canUndo; redoBtn.disabled = !store.canRedo;
     if (why !== 'preset') app.activePreset = null;
     if (usePersist) saveSoon();
     if (library.tab === 'palettes') library.refresh();
+    timelinePreview.reset();
+    storyboard.refresh();
     schedule();
   });
   let saveT = null;
@@ -224,7 +309,9 @@ export async function mountEditor(root, options = {}) {
   }
 
   async function addVideo(name, file) {
-    const video = h('video', { muted: true, playsInline: true, loop: true, preload: 'auto', crossOrigin: 'anonymous' });
+    // No `loop` attribute: looping by hand on 'ended' is more reliable (some MOV/MP4 files stalled at the
+    // end and lost their sound after Chrome's built-in loop).
+    const video = h('video', { muted: true, playsInline: true, preload: 'auto', crossOrigin: 'anonymous' });
     video.muted = true;
     video.src = URL.createObjectURL(file);
     try {
@@ -246,11 +333,19 @@ export async function mountEditor(root, options = {}) {
     await seekTo(video, Math.min(0.05, video.duration / 2)).catch(() => { });
     item.thumb = await makeThumb(video, item.width, item.height);
     app.items.push(item);
-    estimateFps(video, 30).then(f => { item.fps = f; if (app.current === item) updateTransport(); inspector.syncAnim(); });
+    // measuring plays the video muted for a moment; Play waits for it so the two don't fight
+    item.fpsReady = estimateFps(video, 30).catch(() => 30).then(f => { item.fps = f; item.fpsReady = null; if (app.current === item) updateTransport(); inspector.syncAnim(); });
+    // null = can't tell from the container: the sound controls stay, just in case
+    hasAudioTrack(file).then(a => { item.hasAudio = a; if (app.current === item) updateTransport(); });
     video.addEventListener('timeupdate', () => { if (app.current === item) updateTransport(); });
     video.addEventListener('play', () => { if (app.current === item) { updateTransport(); pumpVideo(item); } });
     video.addEventListener('pause', () => { if (app.current === item) { updateTransport(); schedule(); } });
     video.addEventListener('seeked', () => { if (app.current === item && !app.exporting) schedule(); });
+    video.addEventListener('ended', () => {
+      if (app.current !== item || app.exporting || item.fpsReady || storyboard.active) return;
+      video.currentTime = 0;
+      video.play().catch(() => { });
+    });
     return item;
   }
 
@@ -303,7 +398,7 @@ export async function mountEditor(root, options = {}) {
 
   async function openSample(s) {
     const img = await loadSample(s);
-    const item = await addImage(`${s.name}.svg`, img);
+    const item = await addImage(`${s.name}.svg`, img, new File([s.svg], `${s.name}.svg`, { type: 'image/svg+xml' }));
     select(item);
     library.refresh();
   }
@@ -326,6 +421,8 @@ export async function mountEditor(root, options = {}) {
   function select(item) {
     if (app.current && app.current.type === 'video' && app.current !== item) app.current.source.pause();
     app.current = item;
+    timelinePreview.reset();
+    storyboard.setItem(item);
     editTarget(item);
     stageWrap.dataset.video = String(item && item.type === 'video');
     if (item && item.type === 'video') updateTransport();
@@ -348,7 +445,7 @@ export async function mountEditor(root, options = {}) {
     if (item.source.close && !app.items.some(i => i.source === item.source)) item.source.close();   // duplicates share a bitmap
     if (app.current === item) select(app.items[Math.min(i, app.items.length - 1)] || null);
     library.refresh();
-    inspector.sync(store.settings, app.result);
+    inspector.sync(store.settings, previewResult());
   }
   app.removeItem = removeItem;
   app.clearItems = () => { for (const it of app.items.slice()) removeItem(it); };
@@ -384,8 +481,9 @@ export async function mountEditor(root, options = {}) {
   }
   function afterScopeChange() {
     library.refresh();
-    inspector.sync(store.settings, app.result);
-    if (app.result) inspector.setStats(app.result);
+    const res = previewResult();
+    inspector.sync(store.settings, res);
+    if (res) updateStats(res);
     schedule();
   }
   app.setOwn = setOwn;
@@ -441,6 +539,127 @@ export async function mountEditor(root, options = {}) {
     if (document.activeElement === document.body || document.activeElement?.closest?.('.itp-files')) library.focusFile(item);
   };
 
+  // ================================================================ rename
+  const splitExt = name => { const m = /^(.*?)(\.[^.\s]{1,5})?$/.exec(name); return [m[1], m[2] || '']; };
+  /** Rename a file. The extension is kept: exports are named after it ("<name>@4x.png"). */
+  app.rename = (item, next) => {
+    const [, ext] = splitExt(item.name);
+    let base = String(next || '').trim().replace(/[\\/:*?"<>|]+/g, '-');
+    if (ext && base.toLowerCase().endsWith(ext.toLowerCase())) base = base.slice(0, -ext.length);
+    if (!base || base + ext === item.name) return;
+    item.name = base + ext;
+    library.refresh();
+    updateStatus();
+  };
+  /** Edit the name in place in the header, with the name (not the extension) selected. */
+  function startRename(item) {
+    if (!item || fileName.hidden) return;
+    if (app.current !== item) select(item);
+    const [base] = splitExt(item.name);
+    const input = h('input.itp-name-input', { type: 'text', value: item.name, 'aria-label': 'File name', spellcheck: false });
+    input.style.width = `${Math.min(40, Math.max(12, item.name.length + 2))}ch`;
+    fileName.hidden = true;
+    fileName.after(input);
+    input.focus();
+    input.setSelectionRange(0, base.length);
+    let done = false;
+    const finish = commit => {
+      if (done) return;
+      done = true;
+      if (commit) app.rename(item, input.value);
+      input.remove();
+      fileName.hidden = false;
+    };
+    input.addEventListener('keydown', e => {
+      e.stopPropagation();
+      if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+      if (e.key === 'Escape') { e.preventDefault(); finish(false); }
+    });
+    input.addEventListener('blur', () => finish(true));
+  }
+  app.startRename = startRename;
+
+  // ================================================================ saved workspace
+  // Files (their bytes), names, per-file settings and the shared settings, in this browser's IndexedDB.
+  let savedInfo = null;   // { count, bytes, savedAt } of what is saved, or null
+  app.savedWorkspace = () => savedInfo;
+
+  /** A Blob for a file, for saving: the original bytes, or a PNG of what was added without a file. */
+  async function bytesOf(item) {
+    if (item.file) return item.file;
+    const c = document.createElement('canvas');
+    c.width = item.width; c.height = item.height;
+    c.getContext('2d').drawImage(item.source, 0, 0);
+    return new Promise(res => c.toBlob(b => res(b), 'image/png'));
+  }
+
+  async function saveNow() {
+    if (!usePersist) return;
+    if (!app.items.length) {
+      if (savedInfo) { await forgetSaved(); return; }
+      toast('Add files first, then Save keeps them here for next time.');
+      return;
+    }
+    saveBtn.disabled = true;
+    try {
+      const items = [];
+      for (const it of app.items) items.push({ name: it.name, type: it.type, file: await bytesOf(it), own: it.own ? clone(it.own) : null });
+      const bytes = await saveWorkspace({ shared: clone(app.shared), current: Math.max(0, app.items.indexOf(app.current)), items });
+      const first = !savedInfo;
+      savedInfo = { count: items.length, bytes, savedAt: Date.now() };
+      library.refresh();
+      toast(first
+        ? `Saved ${items.length} file${items.length === 1 ? '' : 's'} (${fmtBytes(bytes)}) in this browser only. They reopen next time; remove them with Forget in the Files list.`
+        : `Saved ${items.length} file${items.length === 1 ? '' : 's'} (${fmtBytes(bytes)})`, { kind: 'ok', timeout: first ? 7000 : 2200 });
+    } catch (e) {
+      console.error(e);
+      toast(isQuotaError(e) ? "Not enough browser storage to save these files. Remove some (videos are large) and try again." : `Couldn't save: ${e.message}`, { kind: 'error' });
+    } finally {
+      saveBtn.disabled = false;
+    }
+  }
+  app.saveWorkspace = saveNow;
+
+  async function forgetSaved() {
+    try { await forgetWorkspace(); } catch (e) { toast(`Couldn't remove the saved files: ${e.message}`, { kind: 'error' }); return; }
+    savedInfo = null;
+    library.refresh();
+    toast('Removed the saved files from this browser. Files open now stay open.');
+  }
+  app.forgetWorkspace = forgetSaved;
+
+  /** Reopen the saved workspace (on start, when nothing else was opened). */
+  async function restoreSaved() {
+    const ws = await loadWorkspace();
+    if (!ws) return;
+    savedInfo = { count: ws.items.length, bytes: ws.items.reduce((a, it) => a + (it.file ? it.file.size : 0), 0), savedAt: ws.savedAt };
+    if (app.items.length || !ws.items.length) { library.refresh(); return; }
+    if (ws.shared && !/[#&]s=/.test(location.hash)) store.setTarget('shared', ws.shared);   // a share link's settings win
+    const t = ws.items.length > 2 ? toast(`Opening ${ws.items.length} saved files`, { progress: true }) : null;
+    const added = [];
+    for (let i = 0; i < ws.items.length; i++) {
+      const s = ws.items[i];
+      try {
+        const file = s.file instanceof File ? s.file : new File([s.file], s.name, { type: s.file.type });
+        let item;
+        if (s.type === 'video') item = await addVideo(s.name, file);
+        else {
+          let drawable;
+          try { drawable = await createImageBitmap(file); } catch { drawable = new Image(); drawable.src = URL.createObjectURL(file); await drawable.decode(); }
+          item = await addImage(s.name, drawable, file);
+        }
+        item.own = s.own || null;
+        added.push(item);
+      } catch (e) { console.warn('[workspace] skipped', s.name, e); }
+      t?.progress((i + 1) / ws.items.length);
+    }
+    t?.close();
+    const cur = added[Math.min(ws.current || 0, added.length - 1)];
+    if (cur) select(cur);
+    library.refresh();
+    if (added.length) toast(`Reopened your saved files (${added.length})`, { timeout: 2200 });
+  }
+
   // ================================================================ video
   function updateTransport() {
     const it = app.current;
@@ -454,6 +673,31 @@ export async function mountEditor(root, options = {}) {
     scrub.value = String(Math.round(v.currentTime / (v.duration || 1) * 1000));
     scrub.style.setProperty('--p', `${scrub.value / 10}%`);
     fpsLabel.textContent = `${it.fps} fps`;
+    soundBox.hidden = it.hasAudio === false;
+    applySound(v);
+  }
+  /** Mute/volume on the current video and in the controls. */
+  function applySound(v) {
+    if (v && !app.exporting && !app.current?.fpsReady) {
+      if (v.muted !== sound.muted) v.muted = sound.muted;
+      if (v.volume !== sound.volume) v.volume = sound.volume;
+    }
+    const level = sound.muted ? 0 : sound.volume;
+    const pct = Math.round(level * 100);
+    muteBtn.innerHTML = icon(level ? 'volume' : 'volumeOff');
+    const label = level ? `Volume ${pct}% (M mutes)` : 'Muted (M unmutes)';
+    muteBtn.setAttribute('aria-label', label); muteBtn.title = label;
+    volSlider.setAttribute('aria-valuenow', String(pct));
+    volSlider.setAttribute('aria-valuetext', level ? `${pct}%` : 'Muted');
+    volSlider.style.setProperty('--v', `${pct}%`);
+    volValue.textContent = level ? String(pct) : 'Off';
+  }
+  function setSound(patch) {
+    Object.assign(sound, patch);
+    // unmuting at zero volume brings the volume back up
+    if (patch.muted === false && !sound.volume) sound.volume = 1;
+    persist.save('muted', sound.muted); persist.save('volume', sound.volume);
+    applySound(app.current && app.current.type === 'video' ? app.current.source : null);
   }
   function pumpVideo(item) {
     const v = item.source;
@@ -464,14 +708,20 @@ export async function mountEditor(root, options = {}) {
     };
     tick();
   }
-  function togglePlay() {
+  async function togglePlay() {
     const it = app.current;
     if (!it || it.type !== 'video') return;
-    if (it.source.paused) it.source.play().catch(e => toast(e.message, { kind: 'error' })); else it.source.pause();
+    if (storyboard.active) { storyboard.toggleAnimation(); return; }
+    if (!it.source.paused) { it.source.pause(); return; }
+    if (it.fpsReady) await it.fpsReady;      // still measuring the frame rate (plays muted for a moment)
+    if (app.current !== it || storyboard.active) return;
+    applySound(it.source);
+    if (it.source.ended) it.source.currentTime = 0;
+    it.source.play().catch(e => toast(e.message, { kind: 'error' }));
   }
   function stepFrame(dir) {
     const it = app.current;
-    if (!it || it.type !== 'video') return;
+    if (!it || it.type !== 'video' || storyboard.active) return;
     const v = it.source; v.pause();
     const frame = Math.floor(v.currentTime * it.fps + 1e-6) + dir;
     seekTo(v, (Math.max(0, frame) + 0.5) / it.fps).then(() => { updateTransport(); schedule(); });
@@ -483,22 +733,25 @@ export async function mountEditor(root, options = {}) {
 
   // ================================================================ view
   function toggleCompare(force) {
+    if (storyboard.active) return;
     const on = force ?? !stage.compare;
     stage.setCompare(on); compareBtn.setAttribute('aria-pressed', String(on));
   }
   function toggleGrid(force) {
+    if (storyboard.active) return;
     const on = force ?? !stage.grid;
     stage.setGrid(on); gridBtn.setAttribute('aria-pressed', String(on));
     if (on && stage.zoom < 6 && app.result) toast('The grid shows from 6× zoom');
   }
   function zoomMenu(anchor) {
+    const view = storyboard.active ? storyboard : stage;
     menu(anchor, [
-      { label: 'Fit to view', kbd: 'F', icon: 'fit', onClick: () => stage.fit() },
+      { label: storyboard.active ? 'Fit canvas to view' : 'Fit to view', kbd: 'F', icon: 'fit', onClick: () => view.fit() },
       'sep',
-      ...[1, 2, 4, 8, 16, 32].map(z => ({ label: `${z}×`, sub: z === 1 ? 'One screen pixel per pixel' : null, onClick: () => stage.zoomTo(z) })),
+      ...[1, 2, 4, 8, 16, 32].map(z => ({ label: `${z}×`, sub: z === 1 && !storyboard.active ? 'One screen pixel per pixel' : null, onClick: () => view.zoomTo(z) })),
       'sep',
-      { label: 'Zoom in', kbd: '+', icon: 'zoomIn', onClick: () => stage.zoomIn() },
-      { label: 'Zoom out', kbd: '-', icon: 'zoomOut', onClick: () => stage.zoomOut() },
+      { label: 'Zoom in', kbd: '+', icon: 'zoomIn', onClick: () => view.zoomStep(1) },
+      { label: 'Zoom out', kbd: '-', icon: 'zoomOut', onClick: () => view.zoomStep(-1) },
     ]);
   }
   function togglePanel(which) {
@@ -663,16 +916,18 @@ export async function mountEditor(root, options = {}) {
     const video = it && it.type === 'video';
     const images = app.items.filter(i => i.type === 'image').length;
     const s = store.settings;
+    const selecting = storyboard.active;
+    const offNote = selecting ? 'Turn off frame selection first' : null;
     menu(anchor, [
       { group: 'Image' },
-      { label: 'PNG', sub: app.result ? `${app.result.width * s.export.scale} × ${app.result.height * s.export.scale}, ${s.export.scale}× scale` : 'Open an image first', icon: 'image', kbd: 'Ctrl S', disabled: !app.result, onClick: () => app.exportPNG() },
-      { label: 'Copy to clipboard', icon: 'copy', disabled: !app.result, onClick: () => app.copyImage() },
+      { label: 'PNG', sub: offNote || (app.result ? `${app.result.width * s.export.scale} × ${app.result.height * s.export.scale}, ${s.export.scale}× scale` : 'Open an image first'), icon: 'image', kbd: 'Ctrl S', disabled: !app.result || selecting, onClick: () => app.exportPNG() },
+      { label: 'Copy to clipboard', sub: offNote, icon: 'copy', disabled: !app.result || selecting, onClick: () => app.copyImage() },
       { label: app.items.length > 1 ? `All ${app.items.length} files as ZIP` : 'All files as ZIP', sub: app.items.length > 1 ? null : 'Add two or more files', icon: 'zip', disabled: app.items.length < 2, onClick: () => app.exportZip() },
       { group: 'Animation' },
       { label: video ? 'GIF from this video' : 'GIF from all images', icon: 'gif', disabled: !video && images < 2, onClick: () => app.exportAnimation({ ...animDefaults(), format: 'gif' }) },
       { label: 'More formats…', sub: 'WebM, MP4, PNG sequence, sprite sheet', icon: 'film', onClick: () => { inspector.setTab('export'); if (shell.dataset.insp !== 'open') togglePanel('insp'); } },
       { group: 'Other' },
-      { label: 'Tileset', sub: '16 × 16 tiles, duplicates removed', icon: 'tiles', disabled: !app.result, onClick: () => app.exportTileset({ tile: 16, flips: false }) },
+      { label: 'Tileset', sub: offNote || '16 × 16 tiles, duplicates removed', icon: 'tiles', disabled: !app.result || selecting, onClick: () => app.exportTileset({ tile: 16, flips: false }) },
       { label: 'Copy settings link', icon: 'link', onClick: () => app.copyLink() },
       { label: 'Settings as JSON', icon: 'braces', onClick: () => app.saveSettingsFile() },
     ]);
@@ -688,7 +943,7 @@ export async function mountEditor(root, options = {}) {
     const keys = [
       ['Open files', 'Ctrl O'], ['Paste image', 'Ctrl V'], ['Export PNG', 'Ctrl S'], ['Undo', 'Ctrl Z'], ['Redo', 'Ctrl Shift Z'],
       ['Compare', 'C'], ['Pixel grid', 'G'], ['Fit', 'F'], ['Zoom in / out', '+ -'], ['Pixel width ±1', '[ ]'], ['Pixel width ±8', 'Shift [ ]'],
-      ['Next / previous dither', 'D  Shift D'], ['Play / pause video', 'Space'], ['Step one frame', ', .'], ['Library', '\\'], ['Inspector', '/'],
+      ['Next / previous dither', 'D  Shift D'], ['Play / pause video', 'Space'], ['Mute / unmute video', 'M'], ['Rename file', 'F2'], ['Step one frame', ', .'], ['Library', '\\'], ['Inspector', '/'],
       ['Theme', 'T'], ['Next / previous file', 'Alt ↓ ↑'], ['Move file down / up', 'Alt Shift ↓ ↑'], ['This list', '?'],
     ];
     dialog('Keyboard shortcuts', [h('div.itp-keys', {}, ...keys.map(([a, k]) => h('div', {}, h('span', { text: a }), h('span', {}, ...k.split(' ').filter(Boolean).map(x => h('kbd', { text: x }))))))]);
@@ -712,9 +967,9 @@ export async function mountEditor(root, options = {}) {
     switch (k) {
       case 'c': case 'C': toggleCompare(); break;
       case 'g': case 'G': toggleGrid(); break;
-      case 'f': case 'F': stage.fit(); break;
-      case '+': case '=': stage.zoomIn(); break;
-      case '-': case '_': stage.zoomOut(); break;
+      case 'f': case 'F': if (storyboard.active) storyboard.fit(); else stage.fit(); break;
+      case '+': case '=': if (storyboard.active) storyboard.zoomStep(1); else stage.zoomIn(); break;
+      case '-': case '_': if (storyboard.active) storyboard.zoomStep(-1); else stage.zoomOut(); break;
       case 't': case 'T': toggleTheme(); break;
       case '\\': togglePanel('lib'); break;
       case '/': togglePanel('insp'); break;
@@ -728,7 +983,9 @@ export async function mountEditor(root, options = {}) {
         toast(next === 'none' ? 'No dither' : next.replace(/-/g, ' '), { timeout: 900 });
         break;
       }
-      case ' ': if (app.current?.type === 'video') { e.preventDefault(); togglePlay(); } break;
+      case ' ': if (e.target.closest('button')) break; if (app.current?.type === 'video') { e.preventDefault(); togglePlay(); } break;
+      case 'F2': if (app.current) { e.preventDefault(); startRename(app.current); } break;
+      case 'm': case 'M': if (app.current?.type === 'video' && !soundBox.hidden) { e.preventDefault(); setSound({ muted: !sound.muted }); } break;
       case ',': stepFrame(-1); break;
       case '.': stepFrame(1); break;
       case 'Escape': if (stage.picking) togglePicker(); else closeMenu(); break;
@@ -771,6 +1028,7 @@ export async function mountEditor(root, options = {}) {
   library.refresh();
   updateStatus();
   undoBtn.disabled = redoBtn.disabled = true;
+  if (usePersist && options.restore !== false) restoreSaved().catch(e => console.warn('[workspace]', e));
 
   const api = {
     app, store,