image-to-pixel 3.0.1 → 3.1.0

package/lib/editor/exporter.js

@@ -1,185 +1,225 @@
-// Every export the editor offers. Long ones show a progress toast that can be cancelled.
-
-import { encodePNG } from '../core/export/png.js';
-import { encodeGIF } from '../core/export/gif.js';
-import { createZip } from '../core/export/zip.js';
-import { packSpriteSheet, buildTileset } from '../core/export/sheet.js';
-import { downloadBlob } from '../core/export/canvas.js';
-import { forEachFrame } from '../core/video/frames.js';
-import { mergeSettings, settingsToJSON } from '../core/settings.js';
-import { toast } from './ui.js';
-
-const base = name => (name || 'image').replace(/\.[^.]+$/, '').replace(/[^\w.-]+/g, '-').replace(/^-+|-+$/g, '') || 'image';
-const pngOpts = s => ({ scale: s.export.scale, grid: s.export.grid, gridColor: s.export.gridColor, indexed: s.export.indexed });
-
-/** Pixel size of an exported image: whole-number scale, or the framed part of the source at full resolution. */
-export function exportSize(s, r, item) {
-  if (s.export.size === 'source' && r && item && r.crop) return { width: Math.max(1, Math.round(r.crop.w * item.width)), height: Math.max(1, Math.round(r.crop.h * item.height)) };
-  return { width: r ? r.width * s.export.scale : 0, height: r ? r.height * s.export.scale : 0 };
-}
-/** PNG options for one exported image. */
-const imageOpts = (s, r, item) => (s.export.size === 'source' && item ? { ...exportSize(s, r, item), indexed: s.export.indexed } : pngOpts(s));
-
-export function createExporter(app) {
-  const S = () => app.store.settings;
-
-  async function exportPNG() {
-    if (!app.result) return toast('Open an image first', { kind: 'error' });
-    const s = S();
-    const bytes = await encodePNG(app.result, imageOpts(s, app.result, app.current));
-    const out = exportSize(s, app.result, app.current);
-    const suffix = s.export.size === 'source' ? `-${out.width}x${out.height}` : s.export.scale > 1 ? `@${s.export.scale}x` : '';
-    downloadBlob(bytes, `${base(app.current.name)}-${app.result.width}x${app.result.height}${suffix}.png`, 'image/png');
-    toast(`Saved ${out.width} × ${out.height} PNG`, { kind: 'ok' });
-  }
-
-  async function copyImage() {
-    if (!app.result) return;
-    try {
-      const bytes = await encodePNG(app.result, { ...imageOpts(S(), app.result, app.current), indexed: false });
-      await navigator.clipboard.write([new ClipboardItem({ 'image/png': new Blob([bytes], { type: 'image/png' }) })]);
-      toast('Image copied', { kind: 'ok' });
-    } catch (e) { toast(`Couldn't copy: ${e.message}`, { kind: 'error' }); }
-  }
-
-  /** Run `fn` with a cancellable progress toast. */
-  async function task(label, fn) {
-    const ctrl = new AbortController();
-    const t = toast(label, { progress: true, onCancel: () => ctrl.abort() });
-    app.exporting = true;
-    try {
-      const msg = await fn(ctrl.signal, (p, m) => { t.progress(p); if (m) t.update(m); });
-      t.done(msg);
-    } catch (e) {
-      t.close();
-      if (e.name !== 'AbortError') { toast(`Export failed: ${e.message}`, { kind: 'error' }); console.error(e); }
-      else toast('Export cancelled');
-    } finally {
-      app.exporting = false;
-      app.schedule();
-    }
-  }
-
-  async function exportZip() {
-    const items = app.items.slice();
-    if (!items.length) return;
-    await task(`Processing ${items.length} files`, async (signal, progress) => {
-      const entries = [];
-      const own = [];
-      for (let i = 0; i < items.length; i++) {
-        if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
-        const it = items[i];
-        const s = app.settingsFor(it);             // each file with its own settings, if it has them
-        if (it.type === 'video') app.engine.invalidate();
-        const r = await app.engine.process(it.source, s);
-        entries.push({ name: `${base(it.name)}.png`, data: await encodePNG(r, imageOpts(s, r, it)) });
-        if (it.own) own.push({ name: `${base(it.name)}.settings.json`, data: settingsToJSON(s) });
-        progress((i + 1) / items.length, `Processed ${i + 1} of ${items.length}`);
-      }
-      entries.push({ name: 'settings.json', data: settingsToJSON(app.shared) }, ...own);
-      downloadBlob(createZip(entries), 'pixel-art.zip', 'application/zip');
-      return `Saved ${items.length} images as a ZIP`;
-    });
-  }
-
-  /** Process the frames chosen in the Animation section; calls onFrame(result, i, total). */
-  async function frames(opts, signal, progress, onFrame) {
-    const s = S();
-    if (opts.source === 'files') {
-      const items = app.items.filter(i => i.type === 'image');
-      let size = null;
-      for (let i = 0; i < items.length; i++) {
-        if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
-        // each file keeps its own look, but every frame must share the first frame's size
-        const own = app.settingsFor(items[i]);
-        const r = await app.engine.process(items[i].source, size ? mergeSettings(own, { size }) : own);
-        if (!size) size = { mode: 'width', width: r.width, height: r.height };
-        await onFrame(r, i, items.length, items[i].name);
-        progress((i + 1) / items.length, `Frame ${i + 1} of ${items.length}`);
-      }
-      return items.length;
-    }
-    const item = app.current;
-    if (!item || item.type !== 'video') throw new Error('Open a video first');
-    const video = item.source;
-    const end = opts.end > opts.start ? opts.end : video.duration;
-    return forEachFrame(video, {
-      fps: opts.fps, start: opts.start, end, signal,
-      onFrame: async ({ index, total }) => {
-        app.engine.invalidate();
-        const r = await app.engine.process(video, s);
-        await onFrame(r, index, total, `${base(item.name)}-${String(index).padStart(4, '0')}`);
-        progress((index + 1) / total, `Frame ${index + 1} of ${total}`);
-      },
-    });
-  }
-
-  async function exportAnimation(opts) {
-    const name = opts.source === 'files' ? 'animation' : base(app.current?.name);
-    const s = S();
-    const delay = 1000 / opts.fps;
-    if (opts.format === 'gif' || opts.format === 'png-seq') {
-      await task('Rendering frames', async (signal, progress) => {
-        const list = [];
-        await frames(opts, signal, progress, async (r, i, total, frameName) => {
-          if (opts.format === 'gif') list.push({ width: r.width, height: r.height, data: r.data, delay });
-          else list.push({ name: `${frameName}.png`, data: await encodePNG(r, pngOpts(s)) });
-        });
-        if (opts.format === 'gif') {
-          progress(1, 'Encoding GIF');
-          await new Promise(r => setTimeout(r, 0));
-          const bytes = encodeGIF(list, { scale: s.export.scale, loop: 0 });
-          downloadBlob(bytes, `${name}.gif`, 'image/gif');
-          return `Saved GIF (${list.length} frames, ${(bytes.length / 1024).toFixed(0)} KB)`;
-        }
-        downloadBlob(createZip(list), `${name}-frames.zip`, 'application/zip');
-        return `Saved ${list.length} PNG frames`;
-      });
-      return;
-    }
-    // MP4 / WebM through WebCodecs
-    await task(`Encoding ${opts.format.toUpperCase()}`, async (signal, progress) => {
-      const { createVideoEncoder } = await import('../video.js');
-      let enc = null;
-      await frames(opts, signal, progress, async r => {
-        enc ||= await createVideoEncoder({ format: opts.format, fps: opts.fps, width: r.width, height: r.height, scale: Math.max(s.export.scale, Math.ceil(240 / r.height)) });
-        await enc.add(r);
-      });
-      const blob = await enc.finish();
-      downloadBlob(blob, `${name}.${opts.format}`);
-      return `Saved ${opts.format.toUpperCase()} (${(blob.size / 1024 / 1024).toFixed(1)} MB)`;
-    });
-  }
-
-  async function exportSheet(opts) {
-    const name = opts.source === 'files' ? 'sheet' : `${base(app.current?.name)}-sheet`;
-    const s = S();
-    await task('Building sprite sheet', async (signal, progress) => {
-      const list = [];
-      await frames(opts, signal, progress, (r, i, total, frameName) => { list.push({ width: r.width, height: r.height, data: r.data, name: frameName ? base(frameName) : undefined, delay: 1000 / opts.fps }); });
-      const { image, atlas } = packSpriteSheet(list, { columns: opts.columns, padding: opts.padding, name });
-      if (s.export.scale > 1) {
-        // scale the atlas coordinates with the image
-        const k = s.export.scale;
-        for (const f of Object.values(atlas.frames)) { for (const key of ['x', 'y', 'w', 'h']) f.frame[key] *= k; f.sourceSize.w *= k; f.sourceSize.h *= k; }
-        atlas.meta.size.w *= k; atlas.meta.size.h *= k; atlas.meta.scale = String(k);
-      }
-      const png = await encodePNG(image, pngOpts(s));
-      downloadBlob(createZip([{ name: `${name}.png`, data: png }, { name: `${name}.json`, data: JSON.stringify(atlas, null, 2) }]), `${name}.zip`, 'application/zip');
-      return `Saved a ${list.length}-frame sprite sheet`;
-    });
-  }
-
-  async function exportTileset({ tile, flips }) {
-    if (!app.result) return toast('Open an image first', { kind: 'error' });
-    const s = S();
-    const ts = buildTileset(app.result, { tileWidth: tile, tileHeight: tile, flips });
-    const name = `${base(app.current.name)}-tiles`;
-    const png = await encodePNG(ts.image, pngOpts(s));
-    const map = { ...ts.map, image: `${name}.png`, note: 'tiles[] holds one tile index per cell, row by row' + (flips ? '; flips[] is 0 none, 1 horizontal, 2 vertical, 3 both' : '') };
-    downloadBlob(createZip([{ name: `${name}.png`, data: png }, { name: `${name}.json`, data: JSON.stringify(map, null, 2) }]), `${name}.zip`, 'application/zip');
-    toast(`Saved ${ts.count} unique tiles (${ts.map.width} × ${ts.map.height} map)`, { kind: 'ok' });
-  }
-
-  return { exportPNG, copyImage, exportZip, exportAnimation, exportSheet, exportTileset };
-}
+// Every export the editor offers. Long ones show a progress toast that can be cancelled.
+
+import { encodePNG } from '../core/export/png.js';
+import { encodeGIF } from '../core/export/gif.js';
+import { createZip } from '../core/export/zip.js';
+import { packSpriteSheet, buildTileset } from '../core/export/sheet.js';
+import { downloadBlob } from '../core/export/canvas.js';
+import { forEachFrame } from '../core/video/frames.js';
+import { mergeSettings, settingsToJSON } from '../core/settings.js';
+import { toast } from './ui.js';
+
+const base = name => (name || 'image').replace(/\.[^.]+$/, '').replace(/[^\w.-]+/g, '-').replace(/^-+|-+$/g, '') || 'image';
+const pngOpts = s => ({ scale: s.export.scale, grid: s.export.grid, gridColor: s.export.gridColor, indexed: s.export.indexed });
+
+/** Pixel size of an exported image: whole-number scale, or the framed part of the source at full resolution. */
+export function exportSize(s, r, item) {
+  if (s.export.size === 'source' && r && item && r.crop) return { width: Math.max(1, Math.round(r.crop.w * item.width)), height: Math.max(1, Math.round(r.crop.h * item.height)) };
+  return { width: r ? r.width * s.export.scale : 0, height: r ? r.height * s.export.scale : 0 };
+}
+/** PNG options for one exported image. */
+const imageOpts = (s, r, item) => (s.export.size === 'source' && item ? { ...exportSize(s, r, item), indexed: s.export.indexed } : pngOpts(s));
+
+/**
+ * Whole-number scales to try for a video, best first. 'scale' = the PNG export scale; otherwise a target
+ * height ('1080', '720', '2160', measured on the short side), falling back to smaller sizes if the
+ * browser's encoder refuses the big one. Never below 240 px tall.
+ */
+export function videoScales(size, r, exportScale = 4) {
+  const min = Math.max(1, Math.ceil(240 / Math.min(r.width, r.height)));
+  const fit = target => {
+    const long = Math.round(target * 16 / 9), portrait = r.height > r.width;
+    const W = portrait ? target : long, H = portrait ? long : target;
+    return Math.max(min, Math.min(Math.floor(W / r.width), Math.floor(H / r.height)));
+  };
+  const first = size === 'scale' ? Math.max(min, exportScale) : fit(Number(size) || 1080);
+  const list = [first, fit(1080), fit(720), min].filter((v, i, a) => v <= first && a.indexOf(v) === i);
+  return list.sort((a, b) => b - a);
+}
+
+export function createExporter(app) {
+  const S = () => app.store.settings;
+
+  async function exportPNG() {
+    if (!app.result) return toast('Open an image first', { kind: 'error' });
+    const s = S();
+    const bytes = await encodePNG(app.result, imageOpts(s, app.result, app.current));
+    const out = exportSize(s, app.result, app.current);
+    const suffix = s.export.size === 'source' ? `-${out.width}x${out.height}` : s.export.scale > 1 ? `@${s.export.scale}x` : '';
+    downloadBlob(bytes, `${base(app.current.name)}-${app.result.width}x${app.result.height}${suffix}.png`, 'image/png');
+    toast(`Saved ${out.width} × ${out.height} PNG`, { kind: 'ok' });
+  }
+
+  async function copyImage() {
+    if (!app.result) return;
+    try {
+      const bytes = await encodePNG(app.result, { ...imageOpts(S(), app.result, app.current), indexed: false });
+      await navigator.clipboard.write([new ClipboardItem({ 'image/png': new Blob([bytes], { type: 'image/png' }) })]);
+      toast('Image copied', { kind: 'ok' });
+    } catch (e) { toast(`Couldn't copy: ${e.message}`, { kind: 'error' }); }
+  }
+
+  /** Run `fn` with a cancellable progress toast. */
+  async function task(label, fn) {
+    const ctrl = new AbortController();
+    const t = toast(label, { progress: true, onCancel: () => ctrl.abort() });
+    app.exporting = true;
+    try {
+      const msg = await fn(ctrl.signal, (p, m) => { t.progress(p); if (m) t.update(m); });
+      t.done(msg);
+    } catch (e) {
+      t.close();
+      if (e.name !== 'AbortError') { toast(`Export failed: ${e.message}`, { kind: 'error' }); console.error(e); }
+      else toast('Export cancelled');
+    } finally {
+      app.exporting = false;
+      app.schedule();
+    }
+  }
+
+  async function exportZip() {
+    const items = app.items.slice();
+    if (!items.length) return;
+    await task(`Processing ${items.length} files`, async (signal, progress) => {
+      const entries = [];
+      const own = [];
+      for (let i = 0; i < items.length; i++) {
+        if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
+        const it = items[i];
+        const s = app.settingsFor(it);             // each file with its own settings, if it has them
+        if (it.type === 'video') app.engine.invalidate();
+        const r = await app.engine.process(it.source, s);
+        entries.push({ name: `${base(it.name)}.png`, data: await encodePNG(r, imageOpts(s, r, it)) });
+        if (it.own) own.push({ name: `${base(it.name)}.settings.json`, data: settingsToJSON(s) });
+        progress((i + 1) / items.length, `Processed ${i + 1} of ${items.length}`);
+      }
+      entries.push({ name: 'settings.json', data: settingsToJSON(app.shared) }, ...own);
+      downloadBlob(createZip(entries), 'pixel-art.zip', 'application/zip');
+      return `Saved ${items.length} images as a ZIP`;
+    });
+  }
+
+  /** Process the frames chosen in the Animation section; calls onFrame(result, i, total). */
+  async function frames(opts, signal, progress, onFrame) {
+    const s = S();
+    if (opts.source === 'files') {
+      const items = app.items.filter(i => i.type === 'image');
+      let size = null;
+      for (let i = 0; i < items.length; i++) {
+        if (signal.aborted) throw new DOMException('Aborted', 'AbortError');
+        // each file keeps its own look, but every frame must share the first frame's size
+        const own = app.settingsFor(items[i]);
+        const r = await app.engine.process(items[i].source, size ? mergeSettings(own, { size }) : own);
+        if (!size) size = { mode: 'width', width: r.width, height: r.height };
+        await onFrame(r, i, items.length, items[i].name);
+        progress((i + 1) / items.length, `Frame ${i + 1} of ${items.length}`);
+      }
+      return items.length;
+    }
+    const item = app.current;
+    if (!item || item.type !== 'video') throw new Error('Open a video first');
+    const video = item.source;
+    const end = opts.end > opts.start ? opts.end : video.duration;
+    return forEachFrame(video, {
+      fps: opts.fps, start: opts.start, end, signal,
+      onFrame: async ({ index, total }) => {
+        app.engine.invalidate();
+        const r = await app.engine.process(video, s);
+        await onFrame(r, index, total, `${base(item.name)}-${String(index).padStart(4, '0')}`);
+        progress((index + 1) / total, `Frame ${index + 1} of ${total}`);
+      },
+    });
+  }
+
+  async function exportAnimation(opts) {
+    const name = opts.source === 'files' ? 'animation' : base(app.current?.name);
+    const s = S();
+    const delay = 1000 / opts.fps;
+    if (opts.format === 'gif' || opts.format === 'png-seq') {
+      await task('Rendering frames', async (signal, progress) => {
+        const list = [];
+        await frames(opts, signal, progress, async (r, i, total, frameName) => {
+          if (opts.format === 'gif') list.push({ width: r.width, height: r.height, data: r.data, delay });
+          else list.push({ name: `${frameName}.png`, data: await encodePNG(r, pngOpts(s)) });
+        });
+        if (opts.format === 'gif') {
+          progress(1, 'Encoding GIF');
+          await new Promise(r => setTimeout(r, 0));
+          const bytes = encodeGIF(list, { scale: s.export.scale, loop: 0 });
+          downloadBlob(bytes, `${name}.gif`, 'image/gif');
+          return `Saved GIF (${list.length} frames, ${(bytes.length / 1024).toFixed(0)} KB)`;
+        }
+        downloadBlob(createZip(list), `${name}-frames.zip`, 'application/zip');
+        return `Saved ${list.length} PNG frames`;
+      });
+      return;
+    }
+    // MP4 / WebM through WebCodecs
+    await task(`Encoding ${opts.format.toUpperCase()}`, async (signal, progress) => {
+      const { createVideoEncoder, decodeAudio } = await import('../video.js');
+      // Keep audio: the video's own soundtrack, cut to the exported range (null when it has none)
+      const item = app.current;
+      let audio = null;
+      if (opts.audio && opts.source === 'video' && item && item.type === 'video' && item.file) {
+        progress(0, 'Reading audio');
+        const end = opts.end > opts.start ? opts.end : item.source.duration;
+        audio = await decodeAudio(item.file, { start: opts.start, end }).catch(e => { console.warn('[export] audio', e); return null; });
+      }
+      let enc = null;
+      await frames(opts, signal, progress, async r => {
+        if (!enc) {
+          // Players stretch small videos with smoothing, which blurs pixel art. So the frames are upscaled
+          // by a whole number to about the chosen size first (and H.264's colour subsampling stays inside each pixel).
+          let tries = videoScales(opts.videoSize, r, s.export.scale), err = null;
+          for (const scale of tries) {
+            try { enc = await createVideoEncoder({ format: opts.format, fps: opts.fps, width: r.width, height: r.height, scale, audio }); break; }
+            catch (e) { err = e; if (!/encoder available/.test(e.message)) throw e; }
+          }
+          if (!enc) throw err;
+        }
+        await enc.add(r);
+      });
+      if (audio && enc.audioCodec) progress(1, 'Encoding audio');
+      const blob = await enc.finish();
+      downloadBlob(blob, `${name}.${opts.format}`);
+      const sound = !opts.audio || opts.source !== 'video' ? ''
+        : enc.audioCodec === 'opus' && opts.format === 'mp4' ? ', with Opus audio: VLC and browsers play it, Windows Media Player and QuickTime may not'
+        : enc.audioCodec ? ', with audio'
+        : audio ? ", without audio (this browser can't encode it)"
+        : ', no audio track in the source';
+      return `Saved ${opts.format.toUpperCase()} (${(blob.size / 1024 / 1024).toFixed(1)} MB${sound})`;
+    });
+  }
+
+  async function exportSheet(opts) {
+    const name = opts.source === 'files' ? 'sheet' : `${base(app.current?.name)}-sheet`;
+    const s = S();
+    await task('Building sprite sheet', async (signal, progress) => {
+      const list = [];
+      await frames(opts, signal, progress, (r, i, total, frameName) => { list.push({ width: r.width, height: r.height, data: r.data, name: frameName ? base(frameName) : undefined, delay: 1000 / opts.fps }); });
+      const { image, atlas } = packSpriteSheet(list, { columns: opts.columns, padding: opts.padding, name });
+      if (s.export.scale > 1) {
+        // scale the atlas coordinates with the image
+        const k = s.export.scale;
+        for (const f of Object.values(atlas.frames)) { for (const key of ['x', 'y', 'w', 'h']) f.frame[key] *= k; f.sourceSize.w *= k; f.sourceSize.h *= k; }
+        atlas.meta.size.w *= k; atlas.meta.size.h *= k; atlas.meta.scale = String(k);
+      }
+      const png = await encodePNG(image, pngOpts(s));
+      downloadBlob(createZip([{ name: `${name}.png`, data: png }, { name: `${name}.json`, data: JSON.stringify(atlas, null, 2) }]), `${name}.zip`, 'application/zip');
+      return `Saved a ${list.length}-frame sprite sheet`;
+    });
+  }
+
+  async function exportTileset({ tile, flips }) {
+    if (!app.result) return toast('Open an image first', { kind: 'error' });
+    const s = S();
+    const ts = buildTileset(app.result, { tileWidth: tile, tileHeight: tile, flips });
+    const name = `${base(app.current.name)}-tiles`;
+    const png = await encodePNG(ts.image, pngOpts(s));
+    const map = { ...ts.map, image: `${name}.png`, note: 'tiles[] holds one tile index per cell, row by row' + (flips ? '; flips[] is 0 none, 1 horizontal, 2 vertical, 3 both' : '') };
+    downloadBlob(createZip([{ name: `${name}.png`, data: png }, { name: `${name}.json`, data: JSON.stringify(map, null, 2) }]), `${name}.zip`, 'application/zip');
+    toast(`Saved ${ts.count} unique tiles (${ts.map.width} × ${ts.map.height} map)`, { kind: 'ok' });
+  }
+
+  return { exportPNG, copyImage, exportZip, exportAnimation, exportSheet, exportTileset };
+}

package/lib/editor/icons.js

@@ -1,61 +1,65 @@
-// Thin line icons drawn for this project on a 24×24 grid (stroke 1.5, round caps).
-
-const P = {
-  upload: '<path d="M12 15V4m0 0-4 4m4-4 4 4"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/>',
-  download: '<path d="M12 4v11m0 0-4-4m4 4 4-4"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/>',
-  image: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m4 17 5-4.5 4 3.5 3-2.5 4 3.5"/>',
-  film: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M7.5 4.5v15M16.5 4.5v15M3.5 9h4M3.5 15h4M16.5 9h4M16.5 15h4"/>',
-  files: '<path d="M8 7V5.5A1.5 1.5 0 0 1 9.5 4H15l4 4v8.5a1.5 1.5 0 0 1-1.5 1.5H16"/><rect x="4.5" y="7" width="11.5" height="13" rx="1.5"/>',
-  presets: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><path d="M16.5 13.5v6M13.5 16.5h6"/>',
-  palette: '<path d="M12 3.5a8.5 8.5 0 1 0 0 17c1.2 0 1.8-.9 1.4-2l-.3-.8c-.4-1.2.5-2.2 1.7-2.2h1.7a4 4 0 0 0 4-4c0-4.4-3.8-8-8.5-8Z"/><circle cx="8" cy="11" r="1"/><circle cx="11" cy="7.5" r="1"/><circle cx="15.5" cy="8.5" r="1"/>',
-  search: '<circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5"/>',
-  x: '<path d="M6 6l12 12M18 6 6 18"/>',
-  plus: '<path d="M12 5v14M5 12h14"/>',
-  minus: '<path d="M5 12h14"/>',
-  chevron: '<path d="m9.5 6 6 6-6 6"/>',
-  chevronDown: '<path d="m6 9.5 6 6 6-6"/>',
-  undo: '<path d="M9 7 4.5 11.5 9 16"/><path d="M5 11.5h9.5a5 5 0 0 1 0 10H11"/>',
-  redo: '<path d="m15 7 4.5 4.5L15 16"/><path d="M19 11.5H9.5a5 5 0 0 0 0 10H13"/>',
-  compare: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M12 2.5v19"/><path d="M15 9.5l2 2.5-2 2.5"/><path d="M9 9.5 7 12l2 2.5"/>',
-  grid: '<rect x="3.5" y="3.5" width="17" height="17" rx="2"/><path d="M9.2 3.5v17M14.8 3.5v17M3.5 9.2h17M3.5 14.8h17"/>',
-  fit: '<path d="M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15"/>',
-  zoomIn: '<circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5M11 8.5v5M8.5 11h5"/>',
-  zoomOut: '<circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5M8.5 11h5"/>',
-  sun: '<circle cx="12" cy="12" r="3.5"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4"/>',
-  moon: '<path d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10Z"/>',
-  sidebarLeft: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M9.5 4.5v15"/>',
-  sidebarRight: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M14.5 4.5v15"/>',
-  play: '<path d="M8 5.5v13l10.5-6.5L8 5.5Z"/>',
-  pause: '<path d="M8.5 5.5v13M15.5 5.5v13"/>',
-  stepBack: '<path d="M7 5.5v13M18 6l-8 6 8 6V6Z"/>',
-  stepForward: '<path d="M17 5.5v13M6 6l8 6-8 6V6Z"/>',
-  trash: '<path d="M4.5 7h15M9.5 7V5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M6.5 7l1 12a1.5 1.5 0 0 0 1.5 1.4h6a1.5 1.5 0 0 0 1.5-1.4l1-12"/>',
-  link: '<path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/>',
-  braces: '<path d="M8.5 4.5H8A2 2 0 0 0 6 6.5v3A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5v3a2 2 0 0 0 2 2h.5M15.5 4.5h.5a2 2 0 0 1 2 2v3a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5v3a2 2 0 0 1-2 2h-.5"/>',
-  pipette: '<path d="m14.5 6.5 3 3M12 9l-7.2 7.2a2 2 0 0 0-.5 1V20h2.8a2 2 0 0 0 1-.5L15.2 12"/><path d="M13 7.5 15.8 4.7a2.3 2.3 0 0 1 3.3 3.3L16.3 10.8 13 7.5Z"/>',
-  check: '<path d="m5 12.5 4.5 4.5L19 7.5"/>',
-  keyboard: '<rect x="2.5" y="6" width="19" height="12" rx="2"/><path d="M6 10h.01M9.5 10h.01M13 10h.01M16.5 10h.01M8 14h8"/>',
-  reset: '<path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3L4.5 9"/><path d="M4.5 4.5V9H9"/>',
-  sheet: '<rect x="3.5" y="3.5" width="17" height="17" rx="2"/><path d="M3.5 12h17M12 3.5v17"/>',
-  tiles: '<rect x="3.5" y="3.5" width="7" height="7" rx="1"/><rect x="13.5" y="3.5" width="7" height="7" rx="1"/><rect x="3.5" y="13.5" width="7" height="7" rx="1"/><path d="M13.5 17h7M17 13.5v7"/>',
-  zip: '<path d="M6 3.5h8l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 19V5A1.5 1.5 0 0 1 6 3.5Z"/><path d="M10 3.5v2h2v2h-2v2h2v2h-2v3"/>',
-  gif: '<rect x="3.5" y="5.5" width="17" height="13" rx="2"/><path d="M10 10.5H8.5a1.5 1.5 0 0 0 0 3H10V12M13 10v4M16 14v-4h2M16 12h1.5"/>',
-  more: '<circle cx="6" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="18" cy="12" r="1"/>',
-  menu: '<path d="M4 7h16M4 12h16M4 17h16"/>',
-  sliders: '<path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/>',
-  info: '<circle cx="12" cy="12" r="8.5"/><path d="M12 11v5M12 8h.01"/>',
-  unlink: '<path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/><path d="M4 4l16 16"/>',
-  arrowUp: '<path d="M12 19V5M6 11l6-6 6 6"/>',
-  arrowDown: '<path d="M12 5v14M6 13l6 6 6-6"/>',
-  layers: '<path d="m12 4 8.5 4.5L12 13 3.5 8.5 12 4Z"/><path d="m3.5 12.5 8.5 4.5 8.5-4.5"/><path d="m3.5 16.5 8.5 4.5 8.5-4.5"/>',
-  frame: '<path d="M7 3v14a1 1 0 0 0 1 1h13"/><path d="M3 7h13a1 1 0 0 1 1 1v13"/>',
-  copy: '<rect x="8.5" y="8.5" width="11" height="11" rx="1.5"/><path d="M15.5 8.5V6A1.5 1.5 0 0 0 14 4.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5"/>',
-  clipboard: '<rect x="5" y="4.5" width="14" height="16" rx="2"/><path d="M9 4.5V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v.5M9 10h6M9 14h4"/>',
-  github: '<path d="M9 19c-4 1.3-4-2-5.5-2.5M14.5 21v-3.2c0-1 .1-1.4-.5-2 2.6-.3 5.5-1.3 5.5-5.8a4.5 4.5 0 0 0-1.2-3.1 4.2 4.2 0 0 0-.1-3.1s-1-.3-3.3 1.2a11.4 11.4 0 0 0-6 0C6.6 3.5 5.6 3.8 5.6 3.8a4.2 4.2 0 0 0-.1 3.1A4.5 4.5 0 0 0 4.3 10c0 4.5 2.9 5.5 5.5 5.8-.6.6-.6 1.2-.5 2V21"/>',
-};
-
-/** SVG markup for an icon name. */
-export function icon(name, cls = '') {
-  return `<svg class="i ${cls}" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${P[name] || ''}</svg>`;
-}
-export const ICON_NAMES = Object.keys(P);
+// Thin line icons drawn for this project on a 24×24 grid (stroke 1.5, round caps).
+
+const P = {
+  upload: '<path d="M12 15V4m0 0-4 4m4-4 4 4"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/>',
+  download: '<path d="M12 4v11m0 0-4-4m4 4 4-4"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/>',
+  image: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><circle cx="9" cy="10" r="1.6"/><path d="m4 17 5-4.5 4 3.5 3-2.5 4 3.5"/>',
+  film: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M7.5 4.5v15M16.5 4.5v15M3.5 9h4M3.5 15h4M16.5 9h4M16.5 15h4"/>',
+  files: '<path d="M8 7V5.5A1.5 1.5 0 0 1 9.5 4H15l4 4v8.5a1.5 1.5 0 0 1-1.5 1.5H16"/><rect x="4.5" y="7" width="11.5" height="13" rx="1.5"/>',
+  presets: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><path d="M16.5 13.5v6M13.5 16.5h6"/>',
+  palette: '<path d="M12 3.5a8.5 8.5 0 1 0 0 17c1.2 0 1.8-.9 1.4-2l-.3-.8c-.4-1.2.5-2.2 1.7-2.2h1.7a4 4 0 0 0 4-4c0-4.4-3.8-8-8.5-8Z"/><circle cx="8" cy="11" r="1"/><circle cx="11" cy="7.5" r="1"/><circle cx="15.5" cy="8.5" r="1"/>',
+  search: '<circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5"/>',
+  x: '<path d="M6 6l12 12M18 6 6 18"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  minus: '<path d="M5 12h14"/>',
+  chevron: '<path d="m9.5 6 6 6-6 6"/>',
+  chevronDown: '<path d="m6 9.5 6 6 6-6"/>',
+  undo: '<path d="M9 7 4.5 11.5 9 16"/><path d="M5 11.5h9.5a5 5 0 0 1 0 10H11"/>',
+  redo: '<path d="m15 7 4.5 4.5L15 16"/><path d="M19 11.5H9.5a5 5 0 0 0 0 10H13"/>',
+  compare: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M12 2.5v19"/><path d="M15 9.5l2 2.5-2 2.5"/><path d="M9 9.5 7 12l2 2.5"/>',
+  grid: '<rect x="3.5" y="3.5" width="17" height="17" rx="2"/><path d="M9.2 3.5v17M14.8 3.5v17M3.5 9.2h17M3.5 14.8h17"/>',
+  fit: '<path d="M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15"/>',
+  zoomIn: '<circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5M11 8.5v5M8.5 11h5"/>',
+  zoomOut: '<circle cx="11" cy="11" r="6"/><path d="m20 20-4.5-4.5M8.5 11h5"/>',
+  sun: '<circle cx="12" cy="12" r="3.5"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M5.6 18.4 7 17M17 7l1.4-1.4"/>',
+  moon: '<path d="M19.5 14.5A7.5 7.5 0 0 1 9.5 4.5a7.5 7.5 0 1 0 10 10Z"/>',
+  sidebarLeft: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M9.5 4.5v15"/>',
+  sidebarRight: '<rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M14.5 4.5v15"/>',
+  play: '<path d="M8 5.5v13l10.5-6.5L8 5.5Z"/>',
+  pause: '<path d="M8.5 5.5v13M15.5 5.5v13"/>',
+  stepBack: '<path d="M7 5.5v13M18 6l-8 6 8 6V6Z"/>',
+  stepForward: '<path d="M17 5.5v13M6 6l8 6-8 6V6Z"/>',
+  save: '<path d="M5 4.5h11l3.5 3.5v10A1.5 1.5 0 0 1 18 19.5H6A1.5 1.5 0 0 1 4.5 18V6A1.5 1.5 0 0 1 6 4.5Z"/><path d="M8 4.5v4h7v-4M8 19.5v-6h8v6"/>',
+  rename: '<path d="M4 20h4L19 9l-4-4L4 16v4Z"/><path d="m13.5 6.5 4 4"/>',
+  volume: '<path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z"/><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5M18 7a7 7 0 0 1 0 10"/>',
+  volumeOff: '<path d="M4 9.5h3.5L12 6v12l-4.5-3.5H4z"/><path d="m16 9.5 5 5M21 9.5l-5 5"/>',
+  trash: '<path d="M4.5 7h15M9.5 7V5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2M6.5 7l1 12a1.5 1.5 0 0 0 1.5 1.4h6a1.5 1.5 0 0 0 1.5-1.4l1-12"/>',
+  link: '<path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/>',
+  braces: '<path d="M8.5 4.5H8A2 2 0 0 0 6 6.5v3A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5v3a2 2 0 0 0 2 2h.5M15.5 4.5h.5a2 2 0 0 1 2 2v3a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5v3a2 2 0 0 1-2 2h-.5"/>',
+  pipette: '<path d="m14.5 6.5 3 3M12 9l-7.2 7.2a2 2 0 0 0-.5 1V20h2.8a2 2 0 0 0 1-.5L15.2 12"/><path d="M13 7.5 15.8 4.7a2.3 2.3 0 0 1 3.3 3.3L16.3 10.8 13 7.5Z"/>',
+  check: '<path d="m5 12.5 4.5 4.5L19 7.5"/>',
+  keyboard: '<rect x="2.5" y="6" width="19" height="12" rx="2"/><path d="M6 10h.01M9.5 10h.01M13 10h.01M16.5 10h.01M8 14h8"/>',
+  reset: '<path d="M4.5 12a7.5 7.5 0 1 0 2.2-5.3L4.5 9"/><path d="M4.5 4.5V9H9"/>',
+  sheet: '<rect x="3.5" y="3.5" width="17" height="17" rx="2"/><path d="M3.5 12h17M12 3.5v17"/>',
+  tiles: '<rect x="3.5" y="3.5" width="7" height="7" rx="1"/><rect x="13.5" y="3.5" width="7" height="7" rx="1"/><rect x="3.5" y="13.5" width="7" height="7" rx="1"/><path d="M13.5 17h7M17 13.5v7"/>',
+  zip: '<path d="M6 3.5h8l4.5 4.5v11a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 19V5A1.5 1.5 0 0 1 6 3.5Z"/><path d="M10 3.5v2h2v2h-2v2h2v2h-2v3"/>',
+  gif: '<rect x="3.5" y="5.5" width="17" height="13" rx="2"/><path d="M10 10.5H8.5a1.5 1.5 0 0 0 0 3H10V12M13 10v4M16 14v-4h2M16 12h1.5"/>',
+  more: '<circle cx="6" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="18" cy="12" r="1"/>',
+  menu: '<path d="M4 7h16M4 12h16M4 17h16"/>',
+  sliders: '<path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/>',
+  info: '<circle cx="12" cy="12" r="8.5"/><path d="M12 11v5M12 8h.01"/>',
+  unlink: '<path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/><path d="M4 4l16 16"/>',
+  arrowUp: '<path d="M12 19V5M6 11l6-6 6 6"/>',
+  arrowDown: '<path d="M12 5v14M6 13l6 6 6-6"/>',
+  layers: '<path d="m12 4 8.5 4.5L12 13 3.5 8.5 12 4Z"/><path d="m3.5 12.5 8.5 4.5 8.5-4.5"/><path d="m3.5 16.5 8.5 4.5 8.5-4.5"/>',
+  frame: '<path d="M7 3v14a1 1 0 0 0 1 1h13"/><path d="M3 7h13a1 1 0 0 1 1 1v13"/>',
+  copy: '<rect x="8.5" y="8.5" width="11" height="11" rx="1.5"/><path d="M15.5 8.5V6A1.5 1.5 0 0 0 14 4.5H6A1.5 1.5 0 0 0 4.5 6v8A1.5 1.5 0 0 0 6 15.5h2.5"/>',
+  clipboard: '<rect x="5" y="4.5" width="14" height="16" rx="2"/><path d="M9 4.5V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v.5M9 10h6M9 14h4"/>',
+  github: '<path d="M9 19c-4 1.3-4-2-5.5-2.5M14.5 21v-3.2c0-1 .1-1.4-.5-2 2.6-.3 5.5-1.3 5.5-5.8a4.5 4.5 0 0 0-1.2-3.1 4.2 4.2 0 0 0-.1-3.1s-1-.3-3.3 1.2a11.4 11.4 0 0 0-6 0C6.6 3.5 5.6 3.8 5.6 3.8a4.2 4.2 0 0 0-.1 3.1A4.5 4.5 0 0 0 4.3 10c0 4.5 2.9 5.5 5.5 5.8-.6.6-.6 1.2-.5 2V21"/>',
+};
+
+/** SVG markup for an icon name. */
+export function icon(name, cls = '') {
+  return `<svg class="i ${cls}" viewBox="0 0 24 24" aria-hidden="true" focusable="false">${P[name] || ''}</svg>`;
+}
+export const ICON_NAMES = Object.keys(P);